• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

سعيد البقالي

مطوّر ووردبريس

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

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

أخر تحديث في 19 سبتمبر، 2022 بواسطة سعيد البقالي 2 من التعليقات

محتوى المقالة إخفاء
  1. 1 إنشاء وتسجيل ملف تنسيقات جديد لصفحة تسجيل الدخول
  2. 2 تغيير رابط شعار صفحة تسجيل الدخول وعنوانه
  3. 3 تغيير شعار صفحة تسجيل الدخول
    1. 3.1 خلاصة

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

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

للحصول على هذا أولاً يجب علينا إنشاء ملف 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 يمكننا تخصيص صفحات، أقسام وعناصر أخرى في موقعنا.

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

تحت تصنيف:شرحات ووردبريس

Avatar of سعيد البقالي

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

مبرمج مطور قوالب وإضافات ووردبريس بخبرة تفوق 10 سنوات، أكتب تدوينات في موقعي هذا بين الفينة والأخرى حول تطوير الويب ,تحسين الأرشفة وتحيسن أداء المواقع WPO منذ سنة 2012، لدي مساهمات في تطوير نواة ووردبريس والترجمة إلى اللغة العربية. أتمنا أن يروق لك كل ما أقدمه.

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

القائمة الجانبية الرئيسية

البحث

  • حسابي على تويتر
  • رابط صفختي على انستغرام
  • رابط قناتي على اليوتوب
  • صفحتي على فايسبوك
  • ربط حسابي على جيت هاب
  • رابط حسابي على تلغرام
  • ربط حسابي على الموقع الرسمي لووردبريس
  • CodePen

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

المواضيع الأكثر شعبية

أفضل إضافات ووردبريس المجانية حسب تجربتي الخاصة

دروس ووردبريس من الصفر للمبتدئين بالفيديو

10 من أفضل قوالب ووردبريس المجانية

شرح إضافة Yoast SEO بالفيديو

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

نقل ووردبريس من استضافة إلى أخرى وتغيير النطاق

شارة شركة ديجيتال أوشن
يوليو 2025
نثأربخجسد
 123456
78910111213
14151617181920
21222324252627
28293031 
« مارس    

جميع الحقوق محفوظة © 2025

  • سياسة الخصوصية
  • شروط الاستخدام