في تدوينة اليوم سنرى كيفية تخصيص صفحة تسجيل الدخول على ووردبريس بطريقة سهلة جداً، بعد قراءة هذه التدوينة سوف تكون قادرا على إضافة تنسيقاتك الخاصة على صفحة تسجيل الدخول على ووردبريس، أمر جميل أليس كذلك؟
إنشاء وتسجيل ملف تنسيقات جديد لصفحة تسجيل الدخول
للحصول على هذا أولاً يجب علينا إنشاء ملف 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' );
كما هو واضح الوظيفة اسميناها 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_headertext() {
return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'sb_login_headertitle' );
تغيير شعار صفحة تسجيل الدخول
الان علينا التعرف على التنسيقات التي نريد تغييرها، لهذا نقوم باستعمال Firebug أو Developer tools لكي نتمكن من تحديد كل عنصر html
نريد تغيير تنسيقاته.
بعدها نقوم بوضع التنسيقات الجديد في ملف admin-login.css
, مثلا لتغيير خلفية الصفحة نضع:
body.login {
background: #232B2D url(images/login-background.jpg) no-repeat center center;
background-size: cover;
}
في هذه الحالة قمنا بالإشارة إلى أن يكون للعنصر 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;
}
خلاصة
باستعمال بعض وظائف ووردبريس الأساسية وبعض تقنيات CSS يمكننا تخصيص صفحات، أقسام وعناصر أخرى في موقعنا.
صالح قال
مشكور أخي الكريم على المعلومات القيمة واصل النشر لتعم الفائدة وفقك المولى عز وجل
سعيد البقالي قال
العفو عزيزي صالح، أن شاء الله ستكون هناك شروحات جديدة جيدة وممتعة 😀