كيفية تخصيص صفحة تسجيل الدخول في ووردبريس

في تدوينة اليوم سنرى كيفية تخصيص صفحة تسجيل الدخول على ووردبريس بطريقة سهلة جداً, بعد قراءة هذه التدوينة سوف تكون قادرا على إضافة تنسيقاتك الخاصة على صفحة تسجيل الدخول على ووردبريس، أمر جميل أليس كذلك؟

إنشاء وتسجيل ملف تنسيقات جديد لصفحة تسجيل الدخول

للحصول على هذا أولاً يجب علينا إنشاء ملف CSS جديد داخل المجلد الرئيسي للقالب المفعل أو في أي مكان تفضله وباﻹسم الذي تختاره، في هذا الشرح سنعطيه إسم admin-login.css ثم بعدها علينا تسجيله في ووردبريس بواسطة الدالة wp_register_style() و وإضافته لطابور الستايلات بواسطة الدالة wp_enqueue_style().

الدالة خاصتنا ستكون على النحو التالي ويمكن إضافتها إلى ملف functions.php أو إلى أي ملف آخر تابع له.

اقرأ أيضا: طريقة عرض المقالات اﻷكثر تعليقا في ووردبريس دون إضافة

/**
 * Register and enqueue custom login style.
 *
 * @return void
 */
function sb_custom_login_style() {
	wp_register_style( 'custom-login', get_theme_file_uri( 'admin-login.css' ) );
	wp_enqueue_style( 'custom-login' );
}
add_action( 'login_enqueue_scripts', 'sb_custom_login_style' );
Code language: PHP (php)

كما هو واضح الدالة اسميناها sb_custom_login_style، تقوم بما تم ذكره سابقا ويتم ربطها بالخطاف login_enqueue_scripts.

تغيير رابط شعار صفحة تسجيل الدخول وعنوانه

اﻵن نقوم بإضافة وظيفتين اثنتين، اﻷولى دورها تغيير رابط شعار صفحة تسجيل الدخول والثانية عنوانه (الذي يظهر عند تمرير الفأرة فوق الشعار)، يمكنك وضع الوظيفتين تحت الدالة السابقة.

/**
 * Change login header url.
 *
 * @return void
 */
function sb_login_headerurl() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'sb_login_headerurl' );

/**
 * Change login header title.
 *
 * @return void
 */
function sb_login_headertitle() {
	return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', 'sb_login_headertitle' );

Code language: PHP (php)

تغيير شعار صفحة تسجيل الدخول

اﻵن علينا التعرف على التنسيقات التي نريد تغييرها, لهذا نقوم بإستعمال Firebug أو Developer tools لكي نتمكن من تحديد كل عنصر html نريد تغيير تنسيقاته.

اقرأ أيضا: كيفية إستعمال إضافة Jetpack دون الإتصال بـ wordpress.com

بعدها نقوم بوضع التنسيقات الجديد في ملف admin-login.css, مثلا لتغيير خلفية الصفحة نضع:

body.login {
	background: #232B2D url(images/login-background.jpg) no-repeat center center;
	background-size: cover;
}
Code language: CSS (css)

في هذه الحالة قمنا بالإشارة إلى أن يكون للعنصر body مع الكلاص .login صورة كخلفية.

بهذه الطريقة نستطيع ملئ ملف admin-login.css حسب ذوقنا أو إحتياجاتنا.

اقرأ أيضا: كيفية إخفاء بعض الإضافات من لوحة تحكم ووردبريس

/* CSS Login WordPress */
body.login {
  background: #232b2d url(images/login-background.jpg) no-repeat center center;
  background-size: cover;
}
body.login h1 a {
  background: url(images/logo.png) no-repeat 0 0;
  margin: 5px auto;
  width: 200px;
  height: 60px;
}
body.login form {
  background: #e0a072;
  margin-top: 0;
  border-radius: 20px;
}

body.login .button-primary {
  background: #a55c27;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  outline: 0;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background: #542e13;
  border: none;
  box-shadow: none;
}

body.login .message {
  background: #a55c27;
  border-color: #542e13;
  margin-bottom: 5px;
  border-radius: 20px;
}

body.login #nav {
  background: #1d2425;
  margin-top: 5px;
  padding: 15px;
  text-align: center;
  border-radius: 20px;
}
body.login #nav a {
  color: #738e95;
}

.login #backtoblog {
  background: none repeat scroll 0 0 #1d2425;
  padding: 15px;
  border-radius: 20px;
}
Code language: CSS (css)

خلاصة

بإستعمال بعض دوال ووردبريس الأساسية و بعض تقنيات css يمكننا تخصيص صفحات, أقسام و عناصر أخرى في موقعنا.