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

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

login

إضافة ملف التنسيق الخاص بك:

إن ووردبريس لا توفر للمطور إضافة ملف تنسيق (CSS File)  مباشرة من الموضوع (Theme) المطبق، ولكن فلاتر ووردبريس  ما تزال هنا كالعادة للمساعدة.

الأن قم بإضافة الأسطر التالية في ملف functions.php  في موضوعك (Theme) :

<?php

// functions.php
add_action('login_head', function(){
     printf(
        '<link rel="stylesheet" type="text/css" href="%s" media="all" />'
        , get_template_directory_uri() . '/css/login.css';
    );
});

الفلتر السابق سوف يقوم بإدراج ملف التنسيق الموجود في موضوعك css/login.css

طريقة أخرى 

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

 

كتابة ملف التنسيق

الأن بعد أن أصبح بإمكانك إضافة ملف التنسيق الخاص بك من موضوعك ، سوف ننتقل لكيفية كتابة هذا الملف ، بشكل مبسط.

/* 
    Author     : Hyyan Abo Fakher
*/


/*
    لضبط خلفية صفحة تسجيل الدخول بصورة من اختيارنا
*/
body.login{
    background: url('images/wall.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

/*
    هو حاوي للنموذج #login
*/
.login #login {
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    height: 93.5%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(41,41,41,0.8);
    box-shadow: 0 0 13px 3px rgba(255,255,255,.5);
    overflow: hidden;
}

/*
    ضبط ألوان الرسائل
*/
#login  #login_error,.message {
    background: transparent !important;
}
#login  #login_error,
#login  #login_error a,
#login .message,
#login .message  a {
    color: #fff;
}
 
/* 
    لضبط صورة الشعار
*/
#login h1 a {
    background-image: none,url('images/logo.png');
    width: initial;
    background-size: 110px;
    background-position: center;
}

/*
    لضبط ألوان النموذج
*/
#login  form {
    margin-left:auto;
    margin-right:auto;
    padding:30px;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden; 
}

#login  form label {
    color: #fff !important;
}

#login  form .input, 
#login  form input[type=checkbox],
#login  input[type=text] {
    background: rgba(41,41,41,0.2);
    border-color : rgba(255,255,255,.3) !important;
    color: #fff;
}

/*
    لضبط الروابط التي أسفل النموذج
*/
#login nav {
    overflow: hidden; 
}

/*
    لضبط ألوان الأزرار
*/
.wp-core-ui .button-primary {
    border-color: #f5f5f5 !important;
    background: #000 !important ;
}

عند الدخول لصفحة تسجيل الدخول سوف تحصل على نتيجة مبهرة كما في الصور التالية:

الملخص

إن تخصيص نموذج تسجيل الدخول ليس بالأمر بالغ الصعوبة  عملياً فهو يتطلب أدنى قدر من المعرفة بلغة تنسيق الصفحات CSS  , لتحصل على نتائج مبهرة , كما إن ذلك خطوه مهمه إذا ما كنت تطمح لصناعة مواضيع (Themes)  ووردبريس احترافية.

حيان أبو فخر

مطور ويب سوري. عاشق للموسيقى والبرمجة والكوميديا الارتجالية.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebook

6 thoughts on “تخصيص صفحة تسجيل دخول ووردبريس

  1. السلام عليكم ورحمة الله وبركاته،

    وإن لم تكن بغيتي الاحترافية في هذا المجال، فعلى الأقل سأتمكن من تصميم الواجهة التي تمثلني كما أراني لا كما يراني أو يرى غيري !

    شكرا لك.

  2. حيان.. شكرًا لك, بوركت مساعيك!!
    أنا جديد على وردبرس هل لي بتعريف أوسع أين أضع المجلد المرفق والذي تحت مسمى hyyan-login-style تفصيل ممل إذا بتريد.

  3. سيدي الفاضل انا جديد في الووردبريس لاكن ماعرفت اعمل اللي بتقول عليه ارجو من سعادتك التواصل معي

أضف تعليقاً

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