إنشاء لوحة تسجيل دخول لوردبريس بدون استعمال الإضافات

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

لماذا يجب عليك تعلم ذلك؟

كل المواقع التي تعمل على منصة ووردبريس تملك نفس تصميم لوحة الدخول وهو التصميم الرئيسي الخاص بالووردبريس، ولكن بعض العملاء يريدون أن يتميزوا بكل صغيرة وكبيرة في موقعهم ومن ضمنها لوحة الدخول.

سأريك الآن كيف تقوم بذلك فالأمر سهل وغير معقد ويمكنك أن تكتب أكواد CSS وjQuery خاصة بك ولن تحتاج إلى أي إضافات.

لم لا تستخدم إضافة جاهزة وحسب؟

هناك إضافة جيدة اسمها "BM Custom Login" ولكن حدثت عليها الكثير من التعديلات والاختلافات منذ إصدارها الأول، وأصبحت أحس أن الإصدار الحالي ليس بتلك الجودة. وشيء آخر، وهو أنه يجب عليك أن تقلل من الإضافات في موقعك على قدر الإمكان إن أردت لموقعك أن يكون سريعًا.

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

هيكلة القالب

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

تحديث/تعديل ملف functions.php

function custom_login() {

$files = '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" />
          <script src="http://use.typekit.com/pgf3epu.js"></script>
          <script>try{Typekit.load();}catch(e){}</script>
          <script src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>
          <script src="'.get_bloginfo('template_directory').'/js/login.js"></script>';
echo $files;
}
addaction('loginhead', 'custom_login');

أول خطوة ستكون كتابة دالة داخل ملف functions.php وتخزين كل الملفات الضرورية داخل مُتغيّر ثمَّ عمل echo له. يمكننا مناداة الملفات الموجودة داخل القالب باستعمال ('get_bloginfo('template_directory وربط الملف مباشرة. لقد قمت أيضًا بإضافة ملف jQuery مُصغّر (minified) وtypekit أيضًا.

function customloginurl() {
  echo bloginfo('url');
}
addfilter('loginheaderurl', 'customloginurl');

function customlogintitle() {
  echo get_option('blogname');
}
addfilter('loginheadertitle', 'customlogintitle');

قمت أيضًا بإضافة دالّتين؛ واحدة لتغيير رابط الشّعار حتى يظهر الشّعار الخاص بالموقع بدلًا من شعار موقع Wordpress.org، والدالة الثانية استخدمتها لتغيير عنوان لوحة تسجيل الدخول. هذا كان ما يخص أكواد PHP فلن نحتاج إلى أي أكواد PHP إضافية بعد الآن.

تغيير تنسيقات CSS

هنا يبدأ التحدي. سوف تحتاج الآن إلى الإطلاع على عناصر DOM لمعرفة العناصر التي تستطيع تعديلها وسوف تحتاج أيضًا إلى إزاحة تنسيقات CSS الموجودة في الصفحة واستبدالها بتنسيقات أخرى، وحتى تفعل ذلك سوف تحتاج إلى استخدام Developer Tools كتلك الموجودة في متصفح Google Chrome أو يمكنك استخدام إضافة Firebug المشهورة.

ما أحبّ إضافته في بداية الملف هو المحدد العام * لتحديد واستهداف كافة العناصر ومن ثم أضيف لها خاصية transition وخاصية webkit-font-smoothing: antialiasing- حتى نحصل على خط أفضل في متصفحات webkit. ما أفضله أيضًا هو التعديل على محدد الفئة الزائفة (pseudo-class)  المسمى focus: للتخلص من الحدود الخارجية (outlines).

* {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

:focus {
  outline: 0!important;
}

يمكننا باستعمال Developer Tools معرفة العناصر الموجودة ومعرفة تنسيقات CSS المستخدمة لنتمكن من تغييرها. فعلى سبيل المثال، يمكننا تغيير الشعار الموجود أعلى لوحة تسجيل الدخول إلى شعار الموقع نفسه:

body.login h1 a {
  background: url('../images/logo.png') center center no-repeat transparent;
  background-size: 188px 189px;
  width: 188px;
  height: 189px;
  margin: 0 auto 30px;
  opacity: 0.7;
  padding: 0;
}

body.login h1 a:hover {opacity: 1;}

كما ترى في الأعلى فقد قمت بتحديد العنصر body.login ثم h1 الموجود بداخله انتهاءً بالوسم a، وقمت بعد ذلك باستخدام الخاصية background لوضع صورة الشعار الموجودة في مجلد images واستعمال بعض تنسيقات CSS بسيطة. لاحظ أيضًا أنني استعملت خاصية background-size كما هو في Wordpress 3.4 وخاصية opacity لتقليل شفافية الشّعار وإعادته إلى شفافيته كاملة عند وضع مؤشر الفأرة فوقه (hover).

نريد أيضًا إخفاء عنصر backtoblog# لأننا لن نحتاجه فالشّعار سوف يفي بالغرض ليأخدنا إلى الصفحة الرئيسية للمدونة. يمكنني استعمال الكثير من تنسيقات CSS لتغيير جميع العناصر حتى تتوافق مع التصميم، وإذا أردت استبدال تنسيقات مكان أخرى فسوف أستعمل ids الموجودة في الصفحة وimportant! إن اضطررت لذلك.

form#loginform p.forgetmenot label {
  position: relative;
  background-image: url('../images/checkbox.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 2px 0 0 24px;
  height: 18px;
  display: inline-block;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
}

form#loginform p.forgetmenot label input[type="checkbox"] {
  position: absolute; 
  left: 0; 
  opacity: 0; 
  width: 20px; 
  height: 20px;
  display: block; 
  cursor: pointer;
}

سنقوم الآن بتغيير التصميم الخاص بمربع الاختيار (checkbox) وذلك باستعمال background-image على الـتسمية (label) وإضافة بعض padding إلى اليسار وسوف نقوم بإخفاء مربع الاختيار نفسه. ولسوء الحظ، فإنه سيكون من الصعب تغيير الصورة عند النقر عليها وذلك لأن مربع الاختيار موجود داخل وسم <label>، وبالتالي سوف نضطر إلى استعمال jQuery.

إضافة أكواد jQuery

يمكننا استعمال jQuery لإضافة بعض التنسيقات أو attributes أو حتى تغيير أجزاء بعض العناصر، كما أنني أريد أن أضيف placeholders إلى حقول الإدخال وكذلك جعل مربع الاختيار يعمل مع بعض الصور الخاصة وكل ذلك سوف يتم داخل ملف login.js الموجود في مجلد "js" الخاص بالقالب.

$('#loginform input[type="text"]').attr('placeholder', 'Username');
$('#loginform input[type="password"]').attr('placeholder', 'Password');

$('#loginform label[for="user_login"]').contents().filter(function() {
  return this.nodeType === 3;
}).remove();

$('#loginform label[for="user_pass"]').contents().filter(function() {
  return this.nodeType === 3;
}).remove();

يمكننا باستعمال jQuery إضافة placeholder إلى حقول الإدخال، ولكن ذلك لن يكون سهلًا بسبب وجود الحقول داخل وسوم <label> مما سيجعل عملية إزالة النص الخاص بالـتسمية أمرًا ليس باليسير. سوف نقوم باستعمال ()contents. و ()filter. لإزالة النصوص الخاصة بالـتسمية ليبقى لدينا placeholders فقط.

$('input[type="checkbox"]').click(function() {
  $(this+':checked').parent('label').css("background-position","0px -20px");
  $(this).not(':checked').parent('label').css("background-position","0px 0px");
});

وكما قلنا سابقًا، فوجود مربع الاختيار داخل وسم <label> سيجعل عملية تطويع مربع الاختيار ليعمل كما نريد أمرًا صعبًا. فالطريقة التي من المفترض أن يعمل بها هو أنّه عندما يتم الضغط على التسمية (label) فإنّ مربع الاختيار سوف يتم اختياره (يصبح checked) وبالتالي تتغير الصورة التي أضفناها لتدل على أنه تم النقر على المربع، ولذلك قمنا باستعمال jQuery لنتفقد فيما إذا كان مربع الاختيار في حالة checked أو لا، فإذا كان في حالة checked فإن المحدد checked: سوف يعمل على تغيير موضعة الصورة (باستعمال background-position) واذا لم يكن كذلك فسوف يعود كل شيء إلى طبيعته.

خاتمة

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

ترجمة -وبتصرف- للمقال: Create a Custom WordPress Login Without Plugins لصاحبه: Iggy.