ساخت و شخصی سازی صفحه لاگین وردپرس (بدون افزونه)
اکثر شما با صفحه لاگین وردپرس در آدرس wp-login.php
آشنا هستید. این صفحه زیبا است و به خوبی کار میکند. اما هنگامی که میخواهیم وبسایتی را برای مشتری طراحی کنیم، ممکن است بخواهیم یک صفحه لاگین کاملا سفارشی داشته باشیم که با وبسایت سازگاری خوبی داشته باشد. همچنین ساخت و شخصی سازی صفحه لاگین وردپرس میتواند نگرش خوبی از سطح مهارت هایتان را در ذهن مشتری ایجاد کند.
اگر این چیزی است که دوست دارید در وبسایت خود انجام دهید، پس با ما همراه باشید. در این مقاله به بررسی چگونگی ساخت و شخصی سازی صفحه لاگین وردپرس (بدون افزونه) میپردازیم.
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۹۹ هزار تومان
صفحه لاگین سفارشی
ابتدا، باید یک page template سفارشی برای صفحه لاگین ایجاد کنیم. برای انجام اینکار، میتوانید در پوشه قالب فعال سایت وردپرسی خود یک فایل جدید برای مثال بنام – page-login.php
ایجاد کنید. سپس یک برگه جدید در پنل وردپرس ایجاد کنید و پیوند یکتای آن را login در نظر بگیرید تا وردپرس بصورت اتوماتیک فایل page-login.php
را به عنوان قالب و طرح برای برگه login تنظیم کند. دوره آموزش طراحی قالب وردپرس (صفر تا صد) کامل
فرم لاگین وردپرس
تابع wp_login_form
را در فایل page-login.php فراخوانی کنید تا فرم لاگین وردپرس را نمایش دهید.
<?php wp_login_form(); ?>
برای شخصی سازی صفحه لاگین وردپرس ، استفاده از کدهای زیر اجباری نیست، اما برخی اوقات میتواند مفید باشد. شما میتوانید چیزهایی را در فرم لاگین پیکربندی کنید. مانند تعریف redirecting of URL برای ارسال کاربر به صفحه خاصی از سایت بلافاصله پس ورود موفقیت آمیز، تغییر ID نام کاربری و پسورد کاربر. دوره آموزش وردپرس + سئو (کامل)
<?php $args = array( 'redirect' => home_url(), 'id_username' => 'user', 'id_password' => 'pass', ) ;?> <?php wp_login_form( $args ); ?>
همچنین میتوانید چیزهایی را به aside اضافه کنید. برای مثال این میتواند لوگو و یک توضیح کوتاه از وبسایت شما باشد.
<div class="login-branding"> <a href="#" class="login-logo">CodeFriend.ir</a> <p class="login-desc"> CodeFriend.ir is a powerful online learning platform based in Iran. We constantly publish useful Video Coursed and Blog post about Programming, Web Development, Graphic Design, SEO and Content creating, Business stuff and etc. </p> </div> <div class="login-form"> <?php $args = array( 'redirect' => home_url(), 'id_username' => 'user', 'id_password' => 'pass', ) ;?> <?php wp_login_form( $args ); ?> </div>
در ادامه طراحی صفحه ورود وردپرس ، اکنون میخواهیم این فرم را با استفاده از CSS زیبا تر کنیم. میتوانید کدهای CSS را بر اساس نیاز وبسایت و سلیقه خودتان بنویسید.
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۹۹ هزار تومان
Validation یا اعتبار سنجی فرم
تا به اینجا فرم validation بخوبی کار میکند. میتوانیم با استفاده از آن به سایت وردپرسی لاگین شویم و اگر لاگین موفقیت آمیز باشد، وردپرس ما را به صفحه اول سایت ارسال خواهد کرد. با این حال کارهایی هستند که باید انجام دهید. دوره آموزش وردپرس + سئو (کامل)
ابتدا، برگه wp-login.php
که هنوز هم در دسترس است. باید این URL را به آدرس صفحه جدید لاگین سایتمان ریدایرکت کنیم. برای انجام اینکار، میتوانید کدهای زیر را در فایل functions.php
قالب وردپرسی خود اضافه کنید.
function redirect_login_page() { $login_page = home_url( '/login/' ); $page_viewed = basename($_SERVER['REQUEST_URI']); if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page');
یادتان باشد که متغیر $login_page را به صفحه لاگین خودتان تغییر دهید. سپس برای جلوگیری از خطاهای ممکن هنگام فرآیند لاگین، مانند ورود اطلاعات غلط یا سابمیت شدن فیلد خالی توسط کاربر – که در صورت بروز این مشکلات، وردپرس ما را به صفحه wp-login.php ارسال خواهد کرد – باید برای حل این مشکل توابع زیر را در فایل functions.php قالب بنویسیم. دوره آموزش طراحی قالب وردپرس (صفر تا صد) کامل
function login_failed() { $login_page = home_url( '/login/' ); wp_redirect( $login_page . '?login=failed' ); exit; } add_action( 'wp_login_failed', 'login_failed' ); function verify_username_password( $user, $username, $password ) { $login_page = home_url( '/login/' ); if( $username == "" || $password == "" ) { wp_redirect( $login_page . "?login=empty" ); exit; } } add_filter( 'authenticate', 'verify_username_password', 1, 3);
این توابع دو کار انجام میدهند. آنها هنگام لاگین ناموفق کاربر را به URL تعریف شده همراه با مقادیر failed یا empty ارسال خواهند کرد. شخصی سازی صفحه لاگین وردپرس
آخرین مشکل نیز این است که هنگام خروج از وبسایت، بازهم وردپرس ما را به صفحه لاگین پیش فرض خود ارسال خواهد کرد که برای حل این مسئله کدهای زیر را در فایل functions.php مینویسیم.
function logout_page() { $login_page = home_url( '/login/' ); wp_redirect( $login_page . "?login=false" ); exit; } add_action('wp_logout','logout_page');
Error Message
در پایان ساخت و شخصی سازی صفحه لاگین وردپرس یک پیام خطا نمایش خواهیم داد که خطای بوجود آمده توسط کاربر قابل مشاهده باشد و زمانی که کاربر با استفاده از query string که در URL قرار دادیم، از سایت خارج شود، برای گرفتن مقدار query string از URL میتوانیم از GET_$ استفاده کنیم. دوره آموزش طراحی قالب وردپرس (صفر تا صد) کامل
کد زیر را در فایل page-login.php قرار دهید:
$login = (isset($_GET['login']) ) ? $_GET['login'] : 0;
کد بالا بررسی میکند که متغیر login مقداری را دارد یا خیر. در ادامه، اگر مقدار login خالی باشد مقدارش را برابر میکنم با صفر. سپس میتوانیم بر اساس مقداری که login دارد، نوتیفیکیشن های مختلفی را نمایش دهیم و به این ترتیب کار طراحی صفحه ورود وردپرس بصورت سفارشی به پایان میرسد.
if ( $login === "failed" ) { echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>'; } elseif ( $login === "empty" ) { echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>'; } elseif ( $login === "false" ) { echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>'; }
نتیجه گیری
در شخصی سازی صفحه لاگین وردپرس کارهایی دیگر هم هستند که میتوانیم انجام دهیم. از جمله افزودن لینک فراموشی پسورد، افزودن لینک ثبت نام وبسایت و نمایش پیام خطاهای سفارشی سازی شده. اما ذر حال حاضر صفحه لاگین سفارشی مان بخوبی و بدون مشکل کار میکند و برای کاربران قابل استفاده است. البته اینکه قابلیت های پیشرفته و جذاب تری را به صفحه لاگین اضافه کنیم نیز ایده بسیار خوبی است.
امیدوارم این مقاله برایتان مفید بوده باشد. ممنون از همراهیتان
مقاله پیشنهادی ::
۵ افزونه برای سفارشی سازی صفحه لاگین وردپرس