لوحة المتصدرين

طيلة سنواتٍ، شهِد ووردبريس عدَّة تطويرات إلّا أنّ تصميم صفحة تسجيلِ الدُّخول بقي على حالهِا. صحيحٌ أنّها ذات تصميمٍ بسيطٍ ونظيف وتتوافق مع مقاسات شاشاتٍ مختلفةٍ ولكن عند إنشاء قالبٍ لعميلٍ ما خاصّةً إذا كان هذا العميل عبارةً عن شرِكة فسيكون من الأفضل أن تستطيع تغيير ألوان التصميم في صفحة الدُّخول إضافة إلى تغيير الشِّعارِ أيضًا ليتوافقَ مع قالبِ الموقِع، أليسَ كذلك؟ شيءٌ جيِّدٌ أنّ هذا الأمر يُمكن القيّام به بسهولةٍ. أفضل ما في ووردبريس هو إمكانيِّةُ تخصيص أيِّ شيءٍ به فقط باستخدام دوالِّ الـ PHP. في درسِنا اليوم، سأقوم بتعليمك كيفِيّة تخصيصِ صفحة تسجيل الدّخول في ووردبريس على حسب ذوقك واحتياجاتك. في البداية سنقوم بتغيير الشِّعار ثُمّ بعد ذلك نغيِّر ألوانَ التصميم إضافةً إلى بعضِ العناصر الأخرى. فلنبدأ. الأشياء التي ستحتاجها خلال هذا الدّرسِ تنصيب ووردبريس مع القالب الافتراضي twenty-fourteen. الوقت والصبر. صفحة تسجيل الدُّخول الافتراضية لووردبريس: ما سنقوم بإنشائه: تغيير الشِّعار: يَستخدم ووردبريس CSS لعرض صورةٍ في الخلفيّة. في العادة يتِّم تضمينها بين وسمِ h1 وَوسمِ a. لكنّنا في هذا الدّرسِ سنستخدِم ملفَّ functions.php الموجود داخل قالب ووردبريس twenty-fourteen الافتراضي. أوّلًا، قُم بوضع شعارك الذي تريد إضافتهُ (يجب أن يكون بصيغة png ) بداخلِ مجلّد images الخاصِّ بقالب twenty-fourteen (في هذا الدَّرسِ سأستخدِمُ شعار custom-login-logo.png). يرجى الانتباه إلى أنَّ أبعاد الشِّعار يجب أن تكون 80*80 بِكسل. غير ذلك سيتوجّب عليك تعديل الأبعاد داخل ملفِّ CSS خاص. بعد ذلِك، افتح ملف functions.php الخاصِّ بقالب twenty-fourteen سنستخدِمُ مُعلِّق login_enqueue_scripts لتضمينِ CSS في رأس صفحة تسجيل الدُّخول لتحميل شعارنا الذي نريد إضافتهُ. انسخ الكود التّالي تحت آخر سطرٍ في ملفِّ functions.php ثمَّ بعد ذلك ضع اسم ملفِّ شعارِك داخل المسار. <?php function login_logo() { ?> <style type="text/css"> body.login div#login h1 a { background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png); } </style> <?php } add_action( 'login_enqueue_scripts', 'login_logo' ); تغيير رابطِ الشِّعار: في الوضع الافتراضي، الشِّعار يقود إلى موقع ووردبريس . يُمكنك تغيير هذا الرّابط لِجعله يقود إلى موقِعك. للقيامِ بهذا استخدم المُعلِّقَ التَّالي، فقط قم بنسخهِ ولصقهِ في ملفِّ functions.php مباشرةً تحت مُعلِّقِ شعار الدُّخول. <?php function login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'login_logo_url' ); تغيير تصميم صفحة تسجيل الدُّخول: لتخصيص تنسيق صفحة تسجيل الدُّخول الافتراضيّة لووردبريس سنكون بحاجةٍ لإضافةِ تنسيقات لهذه الصّفحة. للقيام بهذا سنحتاج لاستخدام مُعَلِّقٍ لملفّات CSS خاصّتنا. بهذا سنطلُب من ووردبريس تَجاهلِ ملفِّ تنسيق صفحة تسجيل الدُّخولِ الافتراضي واستخدامِ مَلفِّنا. بدايةً، سنحتاجُ لإنشاء ملفِّ تنسيقات داخل مجلّد CSS الخاصِّ بقالب twenty-fourteen (في هذا الدّرس، قمت بِتسميّة ملّفي custom-login-styles.css) ثمَّ بعد ذلك أضِف المُعلِّق التالي في ملفِّ .functions.php <?php function login_custom_stylesheet() { ?&gt; &lt;link rel="stylesheet" id="custom_wp_admin_css" href="&lt;?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?&gt;" type="text/css" media="all" /&gt; &lt;?php } add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' ); بعد ذلك قم بفتح ملفِّ التنسيقات الذي قمنا بإنشائه تحت اسم custom-login-styles.css. أوّلًا سنقوم بتغيير لون الخلفيّة ونوع الخطِّ المستخدمِ في صفحة تسجيل الدُّخول. قُم بنسخ الكود التّالي: body.login { background-color: #3d3d3d; font-family: Helvetica; } الآن وبعد تغييرنا لِلون الخلفيِّة ونوعِ الخطّ، دعنا نعطي لونًا رماديًّا جميلًا لِنموذج استمارة تسجيلِ الدُّخول. .login form { background: #f3f3f3; } بعد ذلك فلنخصِّص حُقول المُدخلات لِنموذج الاستمارة في كلِّ الحالاتِ المُمكِنة (normal, hover, focus). .login form .input,.login input[type=text],.login form input[type=checkbox] { background: #fff; border: 1px solid #b7b7b7; padding: 5px; } .login form .input:hover,.login form .input:focus,.login input[type=text]:hover,.login input[type=text]:focus,.login form input[type=checkbox]:hover,.login form input[type=checkbox]:focus { background: #fff; outline: none; } الآن، سأقوم بتغيير لون خلفيِّة زرِّ تسجيل الدُّخول مع إعطائه بعض التبطين على كلٍّ من الجِهتين اليُمنى واليُسرى. سأقوم أيضًا بجعل حجم الخطِّ 13 بكسل، لِجعله يبدو زرًّا مسطَّحًا. body.login div#login form#loginform p.submit input#wp-submit { border-radius: 0; background: #ffab00; outline: none; border: none; padding: 0 25px; text-align: center; font-size: 13px; } آخرًا، دعنا نقم بتغيير نصِّ رابطي (“نسيت كلمة السِّر” و “العودة للتسجيل”) لكلٍّ من حالتي normal و hover ثمّ بعد ذلِك سنقوم بجعلِهما في وسط الصّفحة. body.login div#login p#nav { margin: 20px auto; text-align: center; } body.login div#login p#backtoblog { margin: 0 auto; text-align: center; } .login #nav a:hover,.login #backtoblog a:hover { color: #ffab00; } في الخِتام: هذا كلُّ شيء! أتمنّى أن تكون قد تعلَّمت من هذا الدَّرسِ طريقة تغيير التصميم العاديِّ لصفحةِ تسجيل الدُّخول الخاصّةِ بووردبريس إلى أيِّ تصميمٍ تريده. في حالةِ لم تكن مرتاحًا حيَال استخدامِ PHP يمكنك دائمًا استخدام إضافات ووردبريس مثل Branded Login Screen و Login Screen Manager . هل تَعلمُ أيّة طُرقٍ أخرى للقيّامِ بنفسِ الشيء؟ سنكون سعداء بسماعها من عندك. نتمنّى أن تكون قادرًا الآن على ملاحظة المُميِّزات الضخمة التي يُتيحها لك ووردبريس. طبعا نحنُ نعلم أنَّ ووردبريس قد لا يكون مناسبًا لجميع أنواعِ المشاريعِ ولكنّه سيكون مناسبًا لأغلبها. شاركنا رأيك. ترجمة -وبتصرّف- للمقال How to Easily Customize the WordPress Login Page

يُبنى أي سكربت PHP من سلسلةٍ من التعليمات البرمجية، التي تكون عمليات إسناد، أو استدعاء لدوال، أو حلقات، أو جملًا شرطية. تنتهي التعلميات عادةً بفاصلة منقوطة، ويمكن تجميع التعليمات ضمن مجموعة عبر وضعها ضمن أقواس معقوفة (أي {}). سنفصِّل في هذا الدرس الجمل الشرطية (التي هي عبارات if-else، وعبارة switch). حيث تُستعمَل هذه العبارات لاتخاذ القرارات وتنفيذ إجراءات اعتمادًا على تحقيق شرطٍ معيّن وهي من أهم التعابير البرمجية التي علينا تعلمها؛ لننظر إلى مثالٍ أولًا. ليكن لدينا متغيرٌ اسمه ‎$a، ونريد أن نُظهِر الكلمة "hsoub" إن كانت قيمة المتغير ‎$a مساويةً للسلسلة النصية "hsoub"؛ ستبدو الشيفرة كالآتي: <?php $a = 'hsoub'; //تهيئة المتغير // التحقق من قيمة المتغير if ($a == 'hsoub') { //إذا كانت قيمة المتغير مساويةً للكلمة 'hsoub' فستُطبَع الكلمة hsoub echo 'hsoub'; } ?> يمكنك ملاحظة أننا استعملنا عبارة if للتحقق إن كانت قيمة المتغير ‎$a مساويةً للسلسلة النصية "hsoub" أم لا؛ ركِّز على البنية العامة: if( expr ) { statements } ستُنفَّذ العبارات داخل حلقة if إن كانت قيمة الشرط هي true أو قيمة غير صفرية (non-zero) أو قيمة غير فارغة (non-empty)؛ هذا شرحٌ للكلمات الثلاث السابقة: القيمة true: معنى هذا القيمة واضحٌ وجلي؛ ففي المثال السابق استعملنا معامل المقارنة "==" لنتحقق إن كانت قيمة المتغير ‎$a مساويةً للسلسلة النصية "hsoub" أم لا. إن كانت مساويةً فسيعيد المعاملُ القيمةَ true وخلا ذلك سيعيد القيمة false. قيمة غير صفرية: يمكننا تجربتها بوضع 0 أو أعداد أخرى ليست مساوية للصفر في مكان الشرط... في الحقيقة، تعتبر الصفر مساويةً للقيمة false ويعتبر أي شيء عداها قيمته true. قيمة غير فارغة: جميع المتغيرات الفارغة أو غير الموجودة (null) تعتبر false، وبقية القيم أو المتغيرات تعتبر true. لاحظ أنَّ القيم الفارغة لا تعني أن تترك مكان الشرطِ فارغًا في عبارة if، وإنما تعني السلاسل النصية أو المتغيرات الفارغة أو غير الموجودة. حاول تجربة الأنواع الثلاثة آنفة الذكر لإيضاح ما سبق تمامًا. عبارة else تستعمل هذه العبارة عندما نحتاج إلى اختيار أحد احتمالين؛ فنريد مثلًا أن نُصنِّف طلاب الصف بناءً على درجاتهم، إذ يعتبر الطلاب الذين يحصلون على درجةٍ أقل من 33 راسبين، وسيعتبرون عدا ذلك ناجحين. سيبدو السكربت كما يلي: <?php $marks = 23; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة if ($marks < 33) { echo 'you have failed'; } else { echo 'you have passed!'; } // الشيفرة السابقة تكافئ الشيفرة الآتية // لاحظ كيف عطلناها بوضعها في تعليق /* if ($marks < 33) { echo 'you have failed'; } if ($marks >= 33) { echo 'you have passed!'; } */ ?> من الواضح أنَّه سينفَّذ إما ما هو موجودٌ داخل عبارة if، أو ما هو موجودٌ داخل عبارة else؛ وذلك بعد التحقق من قيمة المتغير ‎$marks، إذ ينفَّذ ما هو موجودٌ في else إن لم يتحقق شرط if. التشعب في العبارات الشرطية يمكنك إنشاء عبارة شرطية داخل عبارة شرطية أخرى، فمثلًا لو أردنا أن نتحقق إن أخذ الطالب الدرجة ‎A+‎ أم لا، فسنعدِّل السكربت ليبدو كما يلي: <?php $marks = 23; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة if ($marks < 33) { echo 'you have failed'; } else { // نكتب جملة شرطية داخل عبارة else if ($marks > 90) { echo 'you have passed and got A+ grade'; } else{ echo 'you have passed but not got A+ grade'; } } ?> عبارات elseif إن كان لدينا أكثر من خيارين فعلينا وقتها استعمال عبارة elseif، وهي شبيهةٌ بالعبارات المتشعبة؛ فيمكننا مثلًا إعادة كتابة السكربت السابق ليبدو كما يلي: <?php $marks = 23; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة if ($marks < 33) { echo 'you have failed'; } elseif ($marks > 90) { echo 'you have passed and got A+ grade'; } else { echo 'you have passed but not got A+ grade'; } ?> إن لم يتحقق الشرط الأول (الدرجة >= 33)، فستتحقق العبارة elseif من الشرط المتعلق بها (الدرجة > 90) فإن لم يتحقق هذا الشرط أيضًا فستنفَّذ عبارة else. يمكنك كتابة عبارات elseif لأي عدد من المرات، فمثلًا، لو كان لديك أربعة خيارات (بدلًا من ثلاثة) فعليك وقتها استعمال عبارة elseif مرتين. تمرين: حاول أن تُعدِّل السكربت السابق لكي يعطي التقديرات الآتية للطلاب: عبارة switch إن جرَّبت إعادة كتابة المثال السابق لتضمين جميع التقديرات الممكنة للدرجات، فستجد أنَّ عليك كتابة الشروط مرارًا وتكرارًا؛ وما سبق مجرد مثالٍ بسيط، فما بالك بمثالٍ ضخمٍ بلائحةٍ ضخمة؟ لنتحدث الآن عن طريقةٍ جديدةٍ للجمل الشرطية تسمى "عبارة switch"؛ التي هي شبيهةٌ بسلسلةٍ من جمل if الشرطية. لنلقِ نظرةً على هذه الشيفرة أولًا: <?php $name = 'hsoub'; switch($name) { case 'variable': echo "it is a variable"; break; case 'hsoub': echo "best academy ever!"; break; default: echo 'this is necessary default case'; break; // هذه العبارة ليست ضرورية } ?> لنحاول فهم ما جرى في السكربت السابق: نبدأ السكربت بتعريف متغير اسمه "name". ثم نمرِّر ذاك المتغير إلى عبارة switch. ستأخذ العبارة swtich المتغير وتحاول مطابقة قيمته مع الحالات (cases) المُعرَّفة داخلها، فإن طابقت تلك القيمة أيّة حالةٍ فسينفَّذ ما يليها إلى أن نصل إلى عبارة break. سينتهي تنفيذ الحلقة (أي "سنخرج" منها) بعد تنفيذ أوّل عبارة break. يجب أن يكون في كل عبارة switch حالة افتراضية (default case) التي تنفَّذ إن لم تُطابِق المدخلات أيّة حالةٍ من الحالات. ليس من الضروري وجود عبارة break بعد الحالة الافتراضية، يمكنك ألّا تضيفها. أي بكلامٍ آخر، عبارة switch هي مجموعة من عبارات if-else. وتبدأ تنفيذها عند مطابقة حالة من الحالات المُعرَّفة (أو الحالة الافتراضية)، وتنتهي عند عبارة break أو قوس الإغلاق "‎}‎". ميزة استعمال switch هي أنها ستقلل من طول الشيفرة المكتوب. لنعد الآن إلى مثالنا السابق عن تقديرات الطلاب ونحاول حلّ المشكلة عبر عبارة switch: <?php $marks = 0; // علامة الطالب // عدِّل قيمة المتغير لتحصل على نتائج مختلفة // ندور العلامات إلى عدد بخانة واحدة $m = ($marks - 1)/10; // الدالة intval تعيد الجزء الصحيح من العدد // مثلًا 3.2 تصبح 3 و 3.8 تصبح 3 switch (intval($m)) { case 0: case 1: case 2: echo "F"; break; case 3: echo "D"; break; case 4: echo "C"; break; case 5: echo "C+"; break; case 6: echo "B"; break; case 7: echo "B+"; break; case 8: echo "A"; break; case 9: echo "A+"; break; default: // الحالة الافتراضية إن لم تُطابَق أيّة حالة echo "wrong input for marks"; break; } ?> من الواضح أننا لم نكتب شيفراتٍ كثيرة كما في السابق؛ لنشرح ما حدث في السكربت السابق: بدأنا السكربت بإنقاص الدرجات بمقدار 1 لكي يكون أول رقم (العشرات) من كل تقدير متساويًا (ما عدا التقدير F)، أي مثلًا 50 ستصبح 49 و100 ستصبح 99 ثم قسمنا الدرجات على 10 لجعلها تتراوح بين ‎-0.1 و9.9؛ أي أنَّ 10 ستصبح 0.1 و67 ستصبح 6.7. الدالة intval هي دالة موجودة في لغة PHP مهمتها إعادة الجزء الصحيح من العدد؛ أي أنها -مثلًا- ستعيد الرقم 3 إن كان العدد المُمرَّر إليها هو 3.4 أو 3.5 أو 3.8. باختصار، سنمرِّر الجزء الصحيح من العدد إلى العبارة switch. ثم سنحاول مطابقة ذاك الرقم مع الحالات داخل عبارة switch؛ وكما ذكرنا سابقًا، سيستمر تنفيذ الشيفرات التي تلي سطر مطابقة الحالي إلى أن نصادف عبارة break، فلذا ستُشير الحالات 0 و 1 و 2 إلى نفس الأسطر البرمجية (تلك التي ستطبع F) لعدم وجود عبارة break بينها. المعامل الثلاثي "‎?:‎" يُمثِّل هذا المعامل صيغةً مختصرةً لجملة if-else الشرطية، شكل العام كالآتي: (expr1) ? (expr2) : (expr3) سيتم التحقق أولًا من القيمة المنطقية للتعبير expr1، فإن كانت TRUE فسيُنفَّذ expr2، أما لو كانت FALSE فسينفَّذ expr3. هذا مثالٌ عنه: <?php $marks = 23; echo $marks < 33? 'you have failed' : 'you have passed!'; // السطر السابق يكافئ ما يلي if ($marks < 33) { echo 'you have failed'; } else { echo 'you have passed!'; } ?> تمرين حاول أن تعدِّل الأمثلة السابقة. اكتب برنامجًا فيه متغيرين هما x و y، يمثلان الإحداثيات الديكارتية لنقطة، واستعمل الجمل الشرطية لمعرفة إن كانت تلك النقطة في الربع الأول أو الثاني أو الثالث أو الرابع. [مصدر الصورة: ويكيبيديا] فكِّر بمشاكل أخرى تتطلب "اتخاذًا للقرارات" وجربها باستخدام عبارة if أو switch، واسأل في التعليقات إن واجهتك أيّة صعوبات. المصادر المقال Conditional statements in php لصاحبه Harish Kumar. صفحات if و else و else-if في دليل PHP وغيرها. تعلم لغة PHP

في الوقتِ الذي تكبر فيه إدارة الأعمال على الإنترنت بشكلٍ كبير، يتزايد عددُ العملاء الرّاغبين في دفع مبالغ كبيرة من المالِ للأشخاص الذين يمتلكون مهارةَ بناءِ المواقع. ربّما تكون قد تعلَّمت طريقة بناء موقعٍ بواسطة HTML و CSS، و لكن للأسف ذلك النّوع من المواقعِ لا يلّبي احتياجاتِ كُبرياتِ الشَّركات، بل لا تُلبِّي حتّى احتياجات مدوّنة في أيامنا هذه. هذا هو أهمُّ سببٍ يجعل من الضروريِّ لك أن تتعلَّم طريقة تحويل قالب html و css ساكِن إلى قالب ووردبريس متفاعِل. الموارد التِّي ستحتاجها لإكمال هذا الدّرسِ: قالب NeoBlog مصنوع من html و css. معرفة أساسيّة بأكواد ووردبريس. معرِفةٌ متوسِّطة بلغةِ PHP ومكتبة jQuery. ما سنقوم بإنجازه: قالب ووردبريس هو وسيلتُك لتغيير الشَّكل الخارجيِّ لموقعك. القالب يُمكن أن يقوم بتغيير كبيرٍ للشَّكلِ العامِّ لموقعك، حيثُ أنّه يوفِّر لك واجهة رسومِيَّةً عن طريق ملفّاتهِ. عِند إنشاء قالب ووردبريس عليك الانتباه للنقاطِ التاليّة: انتبه لاسمِ ملفّات القالب التي أنشأتها، في الوضع الافتراضي ووردبريس يتعّرف على أسماء ملّفات القالب الافتراضيّة مثلَ single.php و page.php لذا أنصحك بأن تتحقّق من اسم القالب الافتراضيِّ لووردبريس قبل أن تبدأ بتسميةِ ملفاتك الخاصّة. اطّلع على دليل ووردبريس من أجل بعض الدوالِّ، الوسوم أو بعضِ أكواد PHP لاستخدامها في ملفَّات قالبك، هذا الأمر سيبقيك على الطّريق الصحيح للوصولِ إلى الوظائف التي تريد من قالبك تنفيذها. في بعضِ الأحيان قد تحتاج بعضَ ملفّاتِ الـ jQuery لتحسينِ الشَّكل الخارجيِّ لقالبك أو لإضافة بعضِ الوظائف. ووردبريس لن يقوم بتوفير كلِّ شيءٍ لك. تأكّد من كتابة برمجيّةٍ بِهيكلة جيِّدة، خاليّةٍ من أخطاء PHP و HTML مصادقٍ عليه. استخدم CSS نقيّا مصادقًا عليه. اتبع دليل التصميم لتصميم الموقع ونُسوقِه. اعمل نُسخًا احتياطيّةً لملفّاتك. أنت لن تخسر شيئًا عند القِّيام بذلك. لذا وجب عليك دائمًا أخذ معايير وقائيّة عن طريق عمل نُسخٍ احتياطيّة لملفّات قالبك، الإضافات التي تستخدمها إضافة الى بعض الملفّات الأخرى التي تستخدمها في تطوير قالبك. لِمَ يتوجّبُ عليك أخذ ملاحظات حولَ PHP: PHP هي لغة برمجة لإنشاء مواقع ديناميكيّة متفاعلة. هي مستخدمة على نطاقٍ واسعٍ بسبب كونها لغة مفتوحةَ المصدر وهي مناسبة لك كونك تستطيع تضمينها داخل وُسوم HTML. تّمت كتابة ووردبريس باستخدام لغة PHP ومثلَها يُعتبر سكريبت ووردبريس مفتوحَ المصدر مصادقٌ عليه من طرفِ مبادرةِ المصدرِ المفتوح. بعض أجزاء برمجيّة ووردبريس المكتوبة بلغة PHP متعارضة في نسقها لذا وجب أن تكونَ لديك معرفة بأساسيّات لغة PHP. على كلِّ حالٍ لست مضطرًّا لأن تكون مطوِّر مواقع PHP لكي تتمكّن من إنشاءِ قالب ووردبريس، كلُّ ما ستحتاجه هو امتلاك قاعدة قويِّةٍ في لغات HTML، CSS، و JavaScript مع خلفيّة عن أساسيّات PHP. مخطّط العمل: أوّلا، سنقوم بالتعرّف على الملفّات التي سنحتاجها لبناء قالب ووردبريس مُتكامل. الخطوة التاليّة ستكون البدء بكتابة الأكواد داخل كلِّ ملفٍّ من ملفّات القالب. طيلة الطريق، ستكون هناك دوالّ قد لا تبدو واضحةً بالنّسبة لك. في هذه الحالةِ دليل ووردبريس سيُصبح أحسن صديقٍ لك. بعد الانتهاء من إنشاء القالب سنقوم بإضافة المحتوى إليهِ للتأكّد مِن أنَّ البرمجيّة تعمل بالشكل المطلوب على موقعك. فلنبدأ للبدءِ بتحويل قالب NeoBlog لقالبِ ووردبريس فلنقم أوّلًا بإنشاء مجلّدٍ في المسار content/themes. ستجده بداخل المجلّد الذي نصَّبت به ووردبريس. خذ في الحُسبان أنَّ اسم المجلَّد يجب أن يكون نفس اسم القالب الذي تريد إنشاءه. في هذا الدّرس قمت بتسمية قالبي NeoBlog. الجزء الأوّل: 1. ملفّات القالب بالمقارنة مع قالب HTML و CSS ساكن، قالبُ ووردبريس يحتوي على العديد من الملفّات. هذه الملفّات هي مَن تحتوي على الأكوادِ التِّي تجعلُ قالب ووردبريس يعمل. للقيامِ بذلك قم بإنشاء الملفّات التاليّة داخل مجلّدِ قالب NeoBlog: مجلّد CSS: هذا المجلّد سيحتوي على جميع ملفّات التنسيقات، قم بنسخهِ من مجلّد قالب HTML وCSS NeoBlog. مجلّد الخطوط: هذا المجلّد سيحتوي على جميع الخطوط الخارجيّة المستخدمة في التصميم. قم بنسخه أيضًا من مجلّد قالب HTML وCSS NeoBlog. مجلّد الصُّور: هذا المجلّد سيحتوي على جميع الصّور المستخدمةِ في التّصميم مثل الشعار وغيره. قم بنسخه أيضًا من مجلّد قالب HTML وCSS NeoBlog. مجلّد جافا سكريبت: يحتوي كلّ ملفّات جافا سكريبت المستخدمة في قالبنا. هذا المجلّد أيضًا قم بنسخه من مجلّد قالب HTML وCSS NeoBlog. header.php : هذا الملّف سيحتوي على أكواد القِسم الرأسيِّ للقالب. footer.php : هذا الملّف سيحتوي على أكواد القِسم السفليِّ للقالب. index.php : هذا هو الملفّ الأساسي للقالب، سيحتوي على أكواد المنطقة الرئيسيّة للقالب كما سيحدّد مِن أين سيتّم تضمين الملفّات الأخرى. functions.php : هذا الملّف سيتصرّف كإضافة ووردبريس، بحيث أنّه يضيف مميّزاتٍ و خصائص للقالب. single.php : سيحتوي على نسق صفحة عرض المقال. page.php : سيحتوي على نسق صفحة ووردبريس. page-about.php : هذا الملفُّ عبارة عن نموذج مقالٍ خاصٍّ يأتي مدمجًا داخل ووردبريس، يُستخدم هذا النموذج عادة لجعل صفحةٍ أو مجموعة صفحاتٍ تُعرض بشكلٍ مختلفٍ عن الشّكل العام للصّفحة في القالب. في حالتنا سنقوم بإنشاء نموذجٍ خاصٍّ لصفحة “عن الموقع”. page-contact.php : نوع آخر من النّماذج المدمجة مع ووردبريس. هذا النّموذج سيتم استخدامه لِعرضِ استمارة “تواصل معنا” للصّفحة التي تم تحديدها. content-search.php : هذا الملفّ يحتوي على حلقة تِكرارٍ تقوم بعرض نتائج البحث. search.php : هذا الملفّ مسؤولٌ عن عرضِ صفحات نتائج البحث. searchform.php : هذا الملفّ سيحتوي على نسقِ استمارة البحث. comments.php : هذا الملفّ سيحتوي على الكود المسؤول عن عرضِ التعليقات. sidebar.php : هذا الملفّ سيحتوي القائمة الجانبيّة. 404.php : هذا الملفّ سيحتوي على صفحة الخطأ التي ستعرض نصَّ “لم يتم إيجاد نتائج مطابقة” و سيتّم التوجيه إلى هذه الصّفحة عندما لا تكون نتائج الاستعلام المطلوب موجودة بقاعدة البيانات. style.css : هذا الملفّ سيحتوي على تنسيقات و معلومات قالبنا NeoBlog. Screenshot : صورة بصيغة png تقوم بعرضِ تصميم القالب أو عنوانه. طيلة هذا الدّرسِ سنقوم بإضافة أكوادٍ لهذه الملفّات تتضّمن قوائم، مُعلِّقات، حلقات تِكرار وَوِدجت. الخطوة 1.1- نسخ الملفّات الضرورية لقالب ووردبريس NeoBlog بدايةٌ قم بنسخِ مجلّداتcss, fonts, images و js من مجلّد قالب HTML وCSS NeoBlog و ألصقها في قالب ووردبريس NeoBlog. الخطوة 2.1- تسميّة قالبك ووردبريس عن طريق style.css قبل البدءِ بالعمل على ملفّات القالب، فلنقم أوّلًا بشبك ملفّات تنسيق قالب HTML وCSS NeoBlog داخل ملفِّ قالبنا NeoBlog لووردبريس. بداية أنشئ ملفَّ style.css ثمّ ألصق الكود التّالي بداخله. /* Theme Name: NeoBlog Theme URI: https://1stwebdesigner.com/ Author: Sam Norton Author URI: https://1stwebdesigner.com/ Description: A Simple Blog Theme for 1stwebdesigner.com Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ @import url("css/reset.css"); @import url("css/bootstrap.css"); @import url("css/style.css"); لا شيء معقّدٌ هنا، هذا الكود يحتوي معلوماتٍ عن القالب مثل اسم القالب، المؤلِّف، رابط موقع المؤلِّف وغيرها. جميع المعلومات مُضمّنة داخل وسم تعليق. هذه المعلومات ستُسهِّل التعرّف على القالب أثناء التنصيب. يحتوي هذا الكود أيضا على مجموعةٍ وُسوم @import وظيفتها استدعاء ملفّات CSS الخاصّة بقالبنا من مجلّد CSS الذي سبق وأن أنشأناه من قبل. الخطوة 3.1- إنشاء صورة مصغّرة للتعريف بالقالب الآن وبعد أن أعطينا اسمًا لقالبنا عبر ملفِّ style.css، فلنقم بإضافة صورة تعريفيّة للقالب. بداية قم بإنشاء صورةٍ بأبعاد 880*660 بِكسل عن طريق فوتوشوب ثم بعد ذلك أضف لها عنوان القالب، تعريفٌ مختصر واسم مؤلِّف القالب. في الحقيقة هذه الصورة ستُعرض بأبعاد 387*290 بِكسل في لوحة تحكّم المدير ولكّننا تعمّدنا إنشاءها بحجم مضاعف حتى تظهر بشكل أوضح على الشاشات الفائقة الدّقة HiDPI. بعد ذلك قم بحفظِ الصورة بامتداد png داخل المجلّد الرئيسي لقالب NeoBlog لووردبريس. الخطوة 4.1- تفعيل القالب بعد إضافتنا للصورة فلنقم الآن بتفعيل القالب. لكن قبل تفعينا للقالب، ولِكي نقوم بالتحقّق إن كان يعمل أم لا، فلنقم بإنشاء ملّف index.php فارغ داخل المجلّد الرئيسي لقالب NeoBlog لووردبريس (لا تقلق، سنضيف الأكواد المناسبة لهذه الصّفحة لاحقًا). الآن دعنا نُفعِّل القالب من خلال لوحة تحكُّمِ المدير عن طريق اختيار مظهر< قوالب ثمّ بعد ذلك نضغط على زرِّ تفعيل. إن أردت التحقّق أنَّ القالب يعمل، كلُّ ما عليك القّيام به هو التوجّه إلى الصفحة الرئيسّية وستلاحظ ظهور صفحةٍ بيضاء فارغة وهذا راجع إلى أنّنا لم نقم بعد بإضافة أكواد لصفحة index.php. أهمُّ المشاكلِ التي قد تواجهك خلال هذا الدّرس خلال تجريبك لهذا الدّرس ، قد تواجهك مشاكل أثناء دمج أكواد PHP مع أكواد HTML. يجب عليك دائمًا التحقّق مرّتين من أكوادك، أحيانًا قد تنسى غلق حلقة التّكرار “while” أو غلق الشّرط “if”. مثلًا في الكود أسفله هناك خطأ حيث أنّنا نسينا إغلاق شرط “if”. <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } end while; } // end if supposed to be here ?> لكنّنا قمنا بإصلاح ذلك هنا: <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } end while; } // end if supposed to be here ?> عليك أيضًا الانتباه عند نهاية كوده PHP لغلقِه بواسطة وسمِ الإغلاق، إن نسيت ذلك فإنّ الكود الخاصّ بك قد لا يعمل عندما يتداخل مع أكواد HTML. إن أردت أن تتعلّم إضافة وظائف أخرى لموقعك فعليك بالاطلاع على دليل ووردبريس . ماهي حُدود هذه السلسلة ؟ رغم أنَّ هذا الدّرس يعطيك مدخلًا لكيفيّة إنشاء قالبك الخاص، إلَّا أنّ لديه حدودًا، فهو سيعلّمك فقط استخدام المميّزات الأساسيّة لإنشاء قالب مدوّنةٍ مثل القائمة الجانبيّة، التذييل، صندوق البحث، قائمة المقالات، الصورة البارزة وغيرها. ملخص الجزء الأوّل جميل! لقد أكملنا الجزء الأوّل من هذا الدّرس. لقد تعلّمت طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس. ملفّ HTML مجهّز الآن للبدء بتحويله إلى مجموعة ملفّات ستُشكّل قالب ووردبريس. في الدرس القادم سنعمل على هذه الملفّات ونضيف لها بعض الدّوال لجعل قالبنا يدعم بعض الوظائف. ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme