[شرح] : تصميم واجهة صفحة تسجيل الدخول جديدة و مميزة للوردبريس

[لجنة التطوير]

السلام عليكم

اقدم لكم اليوم شرح لتغيير شكل واجهة الدخول للوردبريس بدلا من الواجهة التقليدية المعروفة

في هذا الموضوع سوف يتم توضيح كيفية التعديل علي صفحة تسجيل الدخول للوردبريس
و عمل صفحة مميزة و بشكل جذاب علي خلاف التصميم التقليدي للوربريس
سيتم الشرح بالصور علي واجهو أجنبية و لكن لا تختلف من حيث الشكل او طريقة التعديل
سيتم التعديل علي ملف ال functions.php و بعض اكواد لغة ال css
هذة الصورة للعمل بعد الإنتهاء منة للتشجيع فقط

يمكن استخدام اي خلفية اخري حسب التصميم و زوقك
الخلفية التي استخدمتها يمكن تحمليها من هنا

نبدأ بالتعديل علي ملف ال functions.php بإضافة الكود التالي :

رمز PHP:

function stylized_login() { echo ''; } add_action('login_head', 'stylized_login');
​

الأن في ملف القالب الذي تستخدمة انشئ ملف جديد بإسم stylized-login.css
افتح الملف و اضف الكود التالي بة :

رمز Code:
.login h1 a { background-image: url('logo.png'); }
انا اسميت الصورة بإسم logo.png
المقاس يجب ان يكون الطول 247 و العرض 63 حتي تتناسب تمامآ
و يكون الشكل كالتالي :

الأن حان وقت تغيير الخلفية
اضف الكود التالي لملف الستايل الذي أنشاتة منذ قليل :

رمز Code:
body.login {
background-image: url('bg.png');
}

يمكن استخدام لون فقط و ليس صورة علي حسب الرغبة
الأن سنغير خلفية و حدود جدول التسجيل نضع الكود التالي :

رمز Code:
.login form {
background: rgba(0, 0, 0, .6);
}
#loginform {
border-color:#33d42a;
}
الشكل بعد التغيير

تغيير خطوط اسم المستخدم و الباسورد نضيف الكود التالي :

رمز Code:
.login label {
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #33d42a;
}

تغيير خلفية و حدود جدول التسجيل نضيف الكود :

رمز Code:
.login input[type="text"]{
font-family:"Courier New", Courier, monospace;
font-size:24px;
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}
.login input[type="password"]{
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}
الشكل يكون

يمكن التعديل علي زر الدخول بإضافة الكود التالي :

رمز Code:
.wp-core-ui .button-primary{
background-color:#000;
background-image:none;
border-color:#33d42a;
border-bottom-color:#13f278;
color:#33d42a;
}
.wp-core-ui .button-primary:hover {
background-color:#33d42a;
background-image:none;
border-color:#33d42a;
color:#000;
}
و ايضا لون خطوط فقدت كلمة المرور و العودة للصفحة الرئيسية بإضافة الكود :

رمز Code:
.login #nav a, .login #backtoblog a {
color: #33d42a !important;
text-shadow:none;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #33d42a !important;
text-shadow:0 1px 0 #33d42a;
}
و لون زر اللوجو بالكود :

رمز Code:
1 function login_link( $url ) {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'login_link' );
ملاحظة يتم اضافة هذا الكود الأخير في ملف ال functions.php و ليس ملف ال css

و في النهاية يكون شكل ملف ال css الذي قمنا بإنشائة داخل ملف القالب كالتالي :

رمز Code:
/* Logo above login form */
.login h1 a {
background-image: url('logo.png');
}

/* Background image */
body.login {
background-image: url('bg.png');
}

/* Background of form */
.login form {
background: rgba(0, 0, 0, .6);
}

/* Border for the form */
#loginform {
border-color:#33d42a;
}

/* Labels for the form */
.login label {
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #33d42a;
}

/* Username text box */
.login input[type="text"]{
font-family:"Courier New", Courier, monospace;
font-size:24px;
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}

/* Password text box */
.login input[type="password"]{
background-color:rgba(0,0,0,.6);
border-color:#33d42a;
}

/* Login button */
.wp-core-ui .button-primary{
background-color:#000;
background-image:none;
border-color:#33d42a;
border-bottom-color:#13f278;
color:#33d42a;
}

/* Login button hover */
.wp-core-ui .button-primary:hover {
background-color:#33d42a;
background-image:none;
border-color:#33d42a;
color:#000;
}

/* Lost password and 'Back to' links */
.login #nav a, .login #backtoblog a {
color: #33d42a !important;
text-shadow:none;
}

/* Lost password and 'Back to' hover links */
.login #nav a:hover, .login #backtoblog a:hover {
color: #33d42a !important;
text-shadow:0 1px 0 #33d42a;
}
و هكذا انتهينا , الشرح مبسط علي قدر الإمكان و بالصور لنتيجة كل عملية
في حالة وجود اي إستفسار او مواجهة صعوبة ما في الشرح يرجي ترك نعليق هنا و سيتم الرد علية

في انتظار أرائكم و امثلة لتجربة الشرح

المصدر

​