سعيد البقالي

تصميم وتطوير المواقع وتطوير وبرمجة قوالب ووردبريس وإضافات ووردبريس

  • الرئيسية
  • المدونة
  • راسلني
أنت في:الرئيسية / شرحات ووردبريس / كيفية تخصيص صفحة تسجيل الدخول في ووردبريس

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

11 مايو، 2014 اضافة تعليق

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

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

للحصول على هذا أولاً يجب علينا إنشاء ملف 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 login_headertitle() {
	return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', '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 يمكننا تخصيص صفحات, أقسام و عناصر أخرى في موقعنا.

تدوينات أخرى قد تهمك

  • كيفية إضافة النشر والتأليف لووردبريسكيفية إضافة حقوق النشر والتأليف لووردبريس
  • إضهار مقالة على شكل أعمدةعرض المقالات على شكل أعمدة
  • طريقة إنشاء أزرار أنيقة و جذابة داخل محتوى موقعكطريقة إنشاء أزرار أنيقة و جذابة داخل محتوى موقعك
  • خريطة موقع بصيغة htmlإنشاء خريطة موقع بصيغة html في ووردبريس
  • كيفية تحسين الإستعلامات إلى قاعدة البيانات على ووردبريسكيفية تحسين الإستعلامات إلى قاعدة البيانات على ووردبريس
  • قالب إبن في ووردبريسكيفية إنشاء قالب إبن في ووردبريس

عن سعيد البقالي

من مواليد 1984م بالمغرب, مطور قوالب وإضافات ووردبريس و مبرمج php بخبرة تفوق 8 سنوات، أكتب تدوينات في موقعي هذا بين الفينة و الأخرى حول تطوير الويب وووردبريس على وجه الخصوص منذ سنة 2012، لدي مساهمات في تطوير نواة ووردبريس والترجمة إلى اللغة العربية. أتمنا أن يروق لكم كل ما أقدمه.

أضف رأيك حول الموضوع إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

التصنيفات

  • إضافات ووردبريس
  • تحسين الأرشفة في محركات البحث
  • شرحات ووردبريس
  • قوالب ووردبريس
  • مقالات و أخبار
@arabwordpress

الإشتراك في القائمة البريدية

اشترك في القائمة البريدية و توصّل بجديد الموقع على بريدك الإلكتروني، شرحات ومقالات حصرية في انتظارك!

نظيف من البريد المزعج ويمكنك حذف اشتراكك وقتما تشاء.

كل الحقوق محفوظة © 2012 | 2019 سعيد البقالي