آموزش شخصی‌سازی صفحه‌ی لاگین وردپرس

صفحه لاگین پیش‌فرض وردپرس چندان خوشایند نیست. می‌توانست شبیه یک دروازه‌ی تماشایی باشد اما بیشتر شبیه به یک درب معمولی در یک کوچه است! درواقع مسئله اینجاست؛ تصوری که کاربران با دیدن صفحه‌ی لاگین وب‌سایت ازآنچه درون آن است خواهند داشت خیلی مهم است؛ به‌خصوص اگر شما اطلاعات خیلی خاصی در سایت خودتان دارید.

پورتالی که محل ورود به وب‌سایت شما است؛ نقش مهمی را در ایجاد یک تصور و چشم‌انداز ازآنچه درون سایت قرار دارد؛ ایفا می‌کند. ساخت یک صفحه‌ی لاگین منحصربه‌فرد، نشان‌دهنده‌ی یک سیستم مدیریت محتوای محافظت‌شده و داشبورد حرفه‌ای است و بازدیدکننده‌ها متوجه خواهند شد که سایت شما یک سایت وردپرسی معمولی نیست.

در این مطلب قصد داریم به شما نحوه‌ی ساخت یک صفحه‌ی لاگین سفارشی را آموزش دهیم. به شما نشان می‌دهیم که چگونه این تغییرات را با استفاده از كد CSS یا كد PHP انجام دهید. این آموزش هم برای كسانی كه می‌خواهند كنترل كامل داشته باشند و هم برای کسانی که فقط می‌خواهند تغییر کوچکی ایجاد کنند مناسب است.

شخصی‌سازی صفحه‌ی لاگین وردپرس

صفحه‌ی ورود به وردپرس، دقیقاً مانند هر صفحه‌ی دیگر در وب‌سایت وردپرسی شما است.

• با ویرایش عناصر (Elements) در CSS می‌توانید استایل و رنگ‌ها را تغییر دهید.
• با ایجاد تغییرات در کد PHP می‌توانید عملکرد عناصر را تغییر داده و یا عناصر را اضافه کرده و یا جابه‌جا کنید.

 

نحوه‌ی اضافه کردن CSS سفارشی به صفحه‌ی لاگین وردپرس

در صفحه‌ی لاگین وردپرس شما از stylesheet مربوط به پوسته‌ی وب‌سایت استفاده نمی‌شود. درنتیجه اگر برای شخصی‌سازی صفحه‌ی لاگین بخواهید کد CSS ای را به فایل styles.css که در دایرکتوری پوسته‌ی شما قرار دارد اضافه کنید، تغییرات اعمال نخواهند شد. بنابراین لازم است استایل های CSS سفارشی خود را با PHP به قسمت Head صفحه‌ی لاگین خود اضافه کنید.

اگر فقط چند خط کد CSS دارید، می‌توانید یک تابع سفارشی ایجاد کنید و از هوک login_enqueue_scriptts برای قرار دادن کد CSS در head صفحه لاگین استفاده کنید.

<?php 

//Here's my custom CSS that removes the back link in a function
function my_login_page_remove_back_to_link() { ?>
    <style type="text/css">
        body.login div#login p#backtoblog {
          display: none;
        }
    </style>
<?php }

//This loads the function above on the login page
add_action( 'login_enqueue_scripts', 'my_login_page_remove_back_to_link' );

 

در مثال بالا می‌خواهیم لینک بازگشت به سایت را از زیر فرم ورود حذف کنیم. اینجا فقط یک چیز تغییر پیداکرده است. شما می‌توانید چندین عنصر را بین تگ‌های <style> تغییر دهید.

برای بارگذاری این CSS سفارشی‌شده، باید با استفاده از login_enqueue_scripts تابع سفارشی‌شده با تمام کدهای CSS مربوطه به صفحه ورود اضافه شود. شما می‌توانید تمام کد بالا را به فایل function.php خود اضافه کنید، فقط خط کد <?php را حذف کنید.

این یک روش ساده برای اضافه کردن چند style است. اما اگر می‌خواهید تغییرات زیادی ایجاد کنید، بنابراین پیشنهاد بهتر آن است که یک stylesheet جدید در فایل‌های پوسته‌ی سایت خود ایجاد کنید، چون به این صورت مدیریت آن راحت‌تر خواهد بود.

برای افزودن یک stylesheet سفارشی به head صفحه‌ی لاگین به‌جای استفاده از تگ‌های <style> ، شما باید به‌جای لود کردن stylesheet، از wp_enqueue_style استفاده کنید.

<?php 
//If you're using this in your functions.php file, remove the opening <?php

//Replace style-login.css with the name of your custom CSS file
function my_custom_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}

//This loads the function above on the login page
add_action( 'login_enqueue_scripts', 'my_custom_login_stylesheet' );

 

در مثال بالا، فایل CSS سفارشی‌شده‌ای که تغییرات صفحه لاگین را در آن شخصی‌سازی می‌کنیم، style-login.css نام‌گذاری شده است. کد CSS خود را به style-login.css اضافه می‌کنیم و کد فوق را در فایل تابع خود می‌نویسیم تا آن را بارگذاری کند.

عناصر صفحه‌ی لاگین وردپرس

در پایین یک صفحه لاگین پیش‌فرض وردپرس را مشاهده می‌کنید:

کاملاً ساده و بدون تجملات!

برای شخصی‌سازی هر عنصر با CSS، باید بتوانید با استفاده از انتخاب‌گر (Selector) مربوط به هر یک، آن را مورد هدف قرار دهید. به‌عبارت‌دیگر، شما باید نام هرکدام آن را بدانید.

در پایین تعدادی از انتخاب‌گرهای مربوط به صفحه‌ی لاگین و تغییراتی که هرکدام انجام می‌دهد را مشاهده می‌کنید:

تغییراتی که انجام می‌دهد	انتخاب‌گر
پس‌زمینه‌ی پیج	body.login
لوگوی ورد پرس	body.login div#login h1 a
کادر سفیدی که فرم درون آن قرار دارد	body.login div#login form#loginform
برچسب‌های نام کاربری و رمز عبور	body.login div#login form#loginform p label
محل ورود نام کاربری و رمز عبور	body.login div#login form#loginform input
فقط قسمت ورود نام کاربری	body.login div#login form#loginform input#user_login
فقط قسمت ورود رمز عبور	body.login div#login form#loginform input#user_pass
قسمت مرا به خاطر بسپار	body.login div#login form#loginform p.forgetmenot
کلید لاگین	body.login div#login form#loginform p.submit input#wp-submit
لینک مربوط به فراموشی رمز عبور	body.login div#login p#nav a
لینک برگشت به سایت	body.login div#login p#backtoblog a

آموزش‌های مربوط به CSS

تا اینجا با بعضی از عناصری که می‌توانید تغییر دهید؛ آشنا شده‌اید. اگر با CSS آشنا هستید، می‌توانید قسمت بعدی آموزش را رد کنید و به ادامه‌ی آموزش بروید. در غیر این صورت، قسمت بعدی را دنبال کنید. در اینجا نحوه‌ی شخصی‌سازی عناصر با CSS را توضیح می‌دهیم. در هر قسمت اگر با مشکلی مواجه شدید، در قسمت نظرات سؤالتان را مطرح کنید تا ما پاسخ آن را بدهیم. اگر هم فکر می‌کنید انجام این کارها برایتان مشکل است و یک راه‌حل آسان می‌خواهید، می‌توانید از افزونه‌ی Branda استفاده کنید.

نحوه‌ی حذف کردن یک عنصر

برای مخفی کردن یک عنصر، همان‌طور که در ابتدای آموزش برای حذف لینک بازگشت به سایت انجام دادیم، می‌توانید از کد display:none; استفاده کنید.

به‌عنوان مثال، می‌توانید از کد پایین برای مخفی کردن لینک فراموشی رمز عبور استفاده کنید.

body.login div#login p#nav {
  display: none;
}

 

نحوه‌ی تغییر پس‌زمینه‌ی صفحه‌ی لاگین

تغییر رنگ پس‌زمینه‌ی یک عنصر، مانند تغییر پس‌زمینه‌ی صفحه‌ یا پس‌زمینه‌ی دکمه‌ها با استفاده از کد background-color:#222222; می‌باشد؛ که در آن به‌جای 222222# می‌توانید کد رنگ دلخواه خود را جایگزین کنید. در مثال پایین از کد #17a8e3 استفاده‌شده است که رنگ آبی روشن است.

همچنین می‌توانید برای نادیده گرفتن رنگ پیش‌فرض از کد !important استفاده کنید. اگر شما از یک انتخاب‌گر خاص استفاده می‌کنید، نیازی به استفاده از این کد ندارید. اما در بعضی موارد، اگر CSS سفارشی شما کار نکرد، باید کد !important را اضافه کنید.

body.login div#login form#loginform p.submit input#wp-submit {
  background-color:#17a8e3 !important;
}

 

اگر می‌خواهید یک تصویر به پس‌زمینه اضافه کنید، شما باید از کد background-image: url(‘login-logo.png’); استفاده کنید؛ و سپس login-logo.pnp را با URL فایل تصویری خود جایگزین کنید. باید اطمینان حاصل کنید که فایل پس‌زمینه را به‌درستی در دایرکتوری stylesheet مربوطه قرار داده باشید. اگر از آپلود کننده فایل استفاده کنید، به‌درستی کار نخواهد کرد.

در کد زیر، پس‌زمینه‌ی خاکستری کم‌رنگ صفحه لاگین، به تصویر home-bg.jpg تغییر داده‌شده است.

body.login {
  background-image: url('home-bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

 

برای تغییر لوگوی صفحه‌ی لاگین وردپرس از کد زیر استفاده کنید:

body.login div#login h1 a {
  background-image: url('login-logo.png');
}

 

چگونه به اطراف یک عنصر فضای خالی اضافه کنیم

هنگام افزودن فضای حاشیه به یک عنصر، باید مشخص کنید که می‌خواهید فضای اضافه‌شده داخل (padding) عنصر و یا خارج (margin) آن باشد.

مثلاً برای دکمه‌ی لاگین، اگر بخواهید برای اینکه متن درون دکمه جای کافی داشته باشد و زیادی به لبه‌ها نزدیک نشود؛ فضای بیشتری را در داخل دکمه ایجاد کنید؛ باید با کد مقابل padding را افزایش دهید:

padding:10px 10px 10px 10px;

 

همچنین اگر بخواهید مقداری فضا را بیرون از دکمه ایجاد کنید تا سایر عناصر خیلی به دکمه نزدیک نباشند، باید margin را افزایش دهید:

margin:10px 10px 10px 10px;

 

 

padding و margin چهار مقدار دارند. به ترتیب، یکی برای بالا، یکی برای سمت راست، یک برای پایین و یکی برای سمت چپ.

به‌عنوان مثال، برای یک عنصر با این ویژگی: padding: 10px 20px 30px 40px

• padding بالا برابر 10px است
• padding سمت راست برابر 20px است
• padding پایین برابر 30px است
• padding سمت چپ برابر 40px است

برای margin هم مشابه padding است.

نحوه‌ی تغییر اندازه و رنگ فونت‌ها

با استفاده از کد font-size: 16px; می‌توانید اندازه‌ی فونت متن‌ها، لینک‌ها و فرم‌ها را تغییر دهید. فقط کافی است به‌جای 16px اندازه‌ی فونت موردنظر خودتان را وارد کنید. همچنین با استفاده از کد color: #222222; می‌توانید رنگ نوشته‌ها را تغییر دهید. کد رنگ موردنظرتان را به‌جای  #22222 قرار دهید.

body.login div#login form#loginform input {
  font-size: 15px;
  color: #555555;
}

 

نحوه‌ی تغییر خطوط حاشیه

حاشیه (border) را با کد سه‌قسمتی border: 2px solid #222222; می‌توان تغییر داد. اولین پارامتر مربوط به عرض خطوط، دومی مربوط به نوع خطوط (یکپارچه، خط‌چین و غیره)، و سومی برای رنگ آن است.

همچنین در نظر داشته باشید که می‌توانید چندین style را به یک عنصر اضافه کنید.

در پایین یک مثال برای استفاده از چند style قرار دارد.

body.login div#login form#loginform p.submit input#wp-submit {
  background-color:#17a8e3 !important;
  color: #ffffff;
  border: 1px solid #0d9ed9;
  margin: 10px 10px 10px 10px;
}

 

نحوه‌ی ایجاد تغییرات در صفحه‌ی لاگین با PHP

برای تغییر عملکرد صفحه‌ی لاگین وردپرس، می‌بایست از PHP استفاده کنید. شما باید توابع مربوطه را به فایل function.php خود اضافه کنید.

تغییر پیام خطای لاگین در وردپرس

علاوه بر بهبود ظاهری، تغییر پیام خطای لاگین می‌تواند به بهبود امنیت سایت شما کمک کند. اگر شما نام کاربری و یا رمز عبور را غلط وارد کنید؛ وردپرس یک پیام خطای بسیار واضح را نشان می‌دهد تا به شما اطلاع دهد که دقیقاً کدام مورد را اشتباه وارد کرده‌اید. این خطا به شما کمک می‌کند، اما متأسفانه به هکرها نیز کمک می‌کند!

برای تغییر خطای پیش‌فرض وردپرس از کد تابع زیر استفاده کنید:

<?php 
//remove <?php when you paste into your functions.php file

function login_error_override()
{
    return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

 

می‌توانید پیام خطا را به عبارت‌های غیرواضحی مثل “اطلاعات ورود شما صحیح نیست” تغییر دهید.

تغییر URL ریدایرکت وردپرس

وقتی کاربر به سایت لاگین می‌کند؛ به‌جای اینکه به‌صورت پیش‌فرض بعد از لاگین وارد داشبورد مدیریتی وردپرس شود؛ می‌توانید او را به صفحه‌ی اصلی سایت هدایت کنید.

برای ریدایرکت کردن کاربر به صفحه نخست سایت، کد زیر را به فایل functions.php اضافه کنید:

<?php
//remove <?php when you paste inside your functions.php file

function admin_login_redirect( $redirect_to, $request, $user ) {
   global $user;
   
   if( isset( $user->roles ) && is_array( $user->roles ) ) {
      if( in_array( "administrator", $user->roles ) ) {
      return $redirect_to;
      } 
      else {
      return home_url();
      }
   }
   else {
   return $redirect_to;
   }
}

add_filter("login_redirect", "admin_login_redirect", 10, 3);

 

قرار دادن خودکار تیک “مرا به خاطر بسپار” در لاگین وردپرس

کادر مرا به خاطر بسپار به‌طور پیش‌فرض تیک نخورده می‌باشد. اگر مایل باشید که این قسمت به‌صورت خودکار تیک خورده باشد؛ می‌توانید ب استفاده از کد آن را فعال کنید.

برای این کار قطعه کد زیر را به functions.php اضافه کنید.

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

 

همان‌طور که مشاهده کردید، اگر بخواهید هر نوع تغییری در استایل صفحه خود بدهید؛ با استفاده از CSS این کار را می‌توانید انجام دهید. اما اگر بخواهید ساختار چیدمان را تغییر دهید یا نام قسمت‌های مختلف را عوض کنید؛ کار بسیار مشکل‌تر می‌شود؛ زیرا مجبور هستید از PHP استفاده کنید.