البحث في الموقع

هل صنعت قالب HTML وأحببته لكنّك لم تعرف كيف تُحوّله إلى قالب ووردبريس؟ ليس بعد الآن، ستتعلم في هذا الدرس كيف تقوم بذلك. هل تعلم بأنّ هناك الكثير من المُطوّرين الذين يكسبون رزقهم عن طريق إنشاء قوالب وإضافات ووردبريس (Wordpress) وبيعها؟ وهل تعلم أنّه بإمكان مطوّري ووردبريس الحصول على آلاف الدولارات سنويًَّا من خلال بيع مُنتجاتهم؟ هذا الدّرس مُخصّص لمطوّري الويب، على فرض أن القارئ على اطّلاع (ولو بشكل مُبسّط) بما يتعلّق بلغة PHP وMySQL ومعلومات عامّة عن كيفية تنصيب واستخدام ووردبريس. هذا الدرس جزء من سلسلة تعلم كيفية تطوير قوالب ووردبريس: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس (هذا الدرس) التصفيح (Pagination) في قوالب ووردبريس إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس متطلبات التّشغيل نحتاج إلى تحميل نسخة ووردبريس من الموقع الرسمي ، سنستخدم النّسخة العربية من هذا الرّابط. تحتاج ووردبريس إلى خادوم ويب، سواء كان Apache أو Nginx أو الخادوم المُدمج مع لغة PHP (بإصدار5.4 وما فوق). وتحتاج أيضًا إلى خادوم قواعد البيانات MySQL. لنقم بإنشاء مُجلّد جديد wordpress_tutorials ونضع فيه نسخة ووردبريس النّاتجة عن فكّ ضغط الملف الذي قمنا بتحميله. ملاحظة: يمكن أن تستخدم البرامج المُجهّزة خصّيصًا بخواديم Apache و MySQL مثل MAMP ،WAMP أو XAMPP. مع مُراعاة الاختلاف بين رابط خادوم الويب ومعلومات خادوم MySQL مع ما سنستخدمه في هذا الدّرس. سنقوم باستخدام الخادوم المُدمج مع PHP لتجنّب تنصيب خادوم Apache أو Nginx وتجنب الخوض في الإعدادات الخاصّة بكل واحد منها. لتشغيل الخادوم المُدمج نتوجه باستخدام سطر اﻷوامر إلى المجلّد الذي يحوي نسخة ووردبريس. ثم نكتب أمر: php -S localhost:8000 يتمّ تشغيل خادوم الويب المُدمج مع PHP على الحاسوب، يمكن التّوجّه عن طريق المُتصفّح إلى الرّابط localhost:8000 للتّأكد من أن الخادوم يعمل. تهيئة قالب HTML سنقوم بالاعتماد على قالبٍ قمتُ بإعداده مُسبقاً، يمكن تحميله من هذا الرابط، التّصميم عبارة عن قالب عادي يحوي بضع ملفّات HTML ،CSS و JavaScript. وهو مبني اعتمادًا على إطار عمل Foundation مع بعض التّعديلات والإضافات. هذا القالب تجريبيّ فقط لرؤية كيفية ظهور الشكل العامّ له. نتوجه إلى مجلّد المشروع الذي يحوي ملفات ووردبريس، ومنه نتوجّه إلى مجلد wp-content ثم إلى مُجلّد themes. نقوم بإنشاء مُجلّد اسمه my_theme بمثابة مُجلّد القالب الذي سنقوم بإنشائه. ملفات القالب الأساسية نحتاج إلى وجود ملفّين على الأقل ضمن مجلد القالب الذي أنشأناه، وهما: - style.css - index.php وهذا أقل ما يجب توفّره في القالب ليكون قالبًا صالحًا للاستخدام. نتجه إلى صفحة تغيير القوالب من لوحة تحكم ووردبريس لنرى ما يشبه: كما تلاحظون لا نرى القالب الجديد الذي أنشأناه ضمن القوالب، وذلك ﻷن هناك شيئًا آخر علينا فعله قبل أن نرى القالب الجديد في هذه الصفحة. نحتاج إلى إضافة تعليق في ملف style.css كالتّالي (يمكن تعديل أيّ قيمة أيضًا): /* Theme Name: قالبي الجديد Author: عمار العقاد Author URI: http://aalakkad.me Description: قالب جديد، نقوم من خلاله بالتّدرّب على إنشاء قوالب WordPress. Version: 1.0 */ تقوم ووردبريس بالدخول إلى كل مجلد في مجلد القوالب، ثم تبحث عن ملف style.css بداخله تعليق يشبه التّعليق السابق، ثم تقوم بتفسير هذه التّعليقات ووضعها في صفحة القوالب التي تظهر للمُستخدم من خلالها أسماء وتوصيف القوالب. وهناك تفصيلات أخرى للتعليقات في ملف style.css يمكن الاطلاع عليها كاملة من ملفات التوثيق. يمكن التوجه إلى صفحة القوالب من خلال لوحة التحكم، لنرى شيئًا مُشابهًا لما يلي: لنقم بتفعيل هذا القالب الجديد، ثم نتوجّه إلى الصّفحة الرّئيسية للمُدوّنة (الصفحة التي تُظهر المقالات وليست صفحة لوحة التّحكم). إن كنت تستخدم الخادوم المُدمج مع PHP بالطريقة التي ذكرناها، فيكون رابط الصّفحة الرئيسية هو: localhost:8000. سنرى صفحة بيضاء دون أن تحوي أيّ شيء، وذلك ﻷن القالب ما زال فارغًا تمامًا. سيتغيّر الوضع بعد قليل. نقل قالب HTML إلى قالب ووردبريس ما سنفعله في الخطوة الأولى هو وضع قالب HTML في ملف index.php ثم نقوم بتعديل مسارات ملفات CSS و JavaScript. ستكون جميع الصفحات التي نستخدمها من ووردبريس بعد تفعيل القالب الجديد مُتطابقة، وكأنها قالب HTML نفسه. وهذا هو المطلوب في هذه المرحلة، سنقوم بإضافة التّفاصيل فيما بعد وعلى عدة مراحل. نقوم الآن بنسخ محتوى ملف index.html كاملًا من قالب HTML ونضعه في ملف index.php في قالبنا الجديد my_theme ضمن ووردبريس. ثم ننسخ مجلد assets كما هو إلى داخل مجلد قالبنا الجديد. لنرى كيف أصبح شكل الموقع بعد أن وضعنا محتوى ملف index.html في ملف index.php: يظهر الآن القالب بهذا الشّكل ﻷن ملفات CSS وJavaScript أصبحت في مسار مختلف عن المسار الذي كان موجودًا في قالب HTML. علينا الآن أن نقوم بتعديل مسارات هذه الملفات كي يُصبح شكل قالب ووردبريس الجديد مُطابقًا لشكل قالب HTML. توفّر لنا ووردبريس عددًا من الدّوالّ (functions) مهمتها تسهيل إنشاء القوالب، سنستخدم منها get_template_directory_uri()، تقوم هذه الدالّة بإرجاع قيمة نصّيّة هي رابط القالب. مثلاً، إن كان مجلد القالب هو my_theme ورابط خادوم الويب الذي نعمل عليه هو http://localhost:8000 ستكون نتيجة الدالّة هي: http://localhost:8000/wp-content/my_theme يجب أن نستخدم هذه الدالّة أو ما يشابهها لنحصل على الرّوابط، ولا نستخدم روابط نضعها بشكل يدوي، فيُمكن لرابط خادوم الويب أن يتغير، وإن كانت الروابط موضوعةً بشكل يدوي فسيظهر شكل القالب كما في الأعلى خاليًّا من ملفات CSS و .JavaScript. نقوم بتعديل ملف index.html في قسم head، نبحث عن سطر استدعاء ملفات CSS، ثم نقوم بالتّعديل عليها لتصبح بالشّكل: في قسم head أيضًا نُريد استبدال رابط استدعاء ملف modernizr.js ليستخدم دالّة get_template_directory()، فيُصبح: <script src="<?php echo get_template_directory_uri(); ?>/assets/js/modernizr.js"></script> أخيرًا نبحث في نهاية ملف index.php عن سطر استدعاء ملف JavaScript، ونقوم بالتّعديل عليه ليُصبح كما يلي: <script src="<?php echo get_template_directory_uri(); ?>/assets/js/vendor.js"></script> الآن عندما يتم طلب المُدوّنة من المُتصفّح، ستكون النّتيجة النّهائية للتعديلات الثلاثة التي قمنها بها كالتالي: <link rel="stylesheet" href="http://localhost:8000/wp-content/themes/my_theme/assets/css/main.css"> <script src="http://localhost:8000/wp-content/themes/my_theme/assets/js/modernizr.js"></script> <script src="http://localhost:8000/wp-content/themes/my_theme/assets/js/vendor.js"></script> نذهب الآن إلى الصّفحة الرّئيسية للمُدوّنة لنرى كيف أصبح القالب. في آخر فقرة من هذا الدرس سنقوم بتعديل ترويسة الموقع التي نصّها الحالي هو: "عنوان الموقع"، والذي يظهر في الجُزء العُلويّ. نريد تغيير هذا النصّ ليصبح اسم المدونة التي قمنا بإدخالها أثناء مرحلة التّنصيب، يمكنك تغيير اسم المدونة من لوحة التحكم ثم الإعدادات. لنفتح صفحة index.php في المُحرّر، ثم نبحث عن السطر الذي يحوي: <h1 class="logo">عنون الموقع</h1> ,نقوم باستبداله بما يلي بعض إضافة وسم PHP له: <h1 class="logo"><?php bloginfo('name'); ?></h1> وسم: <?php php bloginfo('name'); ?> يقوم بإظهار/طباعة نصّ يتم جلبه من قاعدة البيانات، النصّ هو اسم المُدوّنة. نلاحظ أن الدّالّة bloginfo() تقوم بالإظهار وليست الإرجاع return كما تفعل دالّة ()get_template_directory_uri. الآن عندما نتوجّه إلى الصفحة الرئيسية للمدونة تكون الترويسة شبيهة بالصورة: فصل محتوى الملفات من قواعد البرمجة الهامة إلغاء التّرابط أو الفصل (decoupling)، فنحاول فصل العناصر المُترابطة قدر الإمكان ووضعها في ملفات مُنفصلة. مثلًا سنقوم لاحقًا بإنشاء صفحة خاصّة لعرض المواضيع المُنفردة، وستحتاج تلك الصّفحة إلى وجود الترويسة (header) والتذييل (footer) كي تحوي ملفات CSS و JavaScript وتكون متناغمة مع باقي القالب. توفّر لنا ووردبريس عدة طُرق لإلغاء التّرابط في الملفات، إمّا أن يتم استخدام التّسلسل الهرمي لملفّات القالب (theme hierarchy) أو يتم استخدام قِطَع القالب (template parts). التّسلسل الهرمي لملفّات القالب (أو ملفات القالب للاختصار) هي ملفات بأسماء ثابتة، تقوم ووردبريس باستخدام الملف المُتوفّر منها حسب الطلب الذي يأتيها من المتصفح؛ مثلاً طلبتَ من المدونة رابط مقالٍ معيّن، تقوم ووردبريس بتحليل الطّلب ومعرفة أن المطلوب هو مقال، فتبحث عن ملف باسم single.php، إن كان موجودًا يتمّ استخدامه، إن لم يكن موجودًا تبحث ووردبريس عن ملف index.php. وهكذا الأمر بالنسبة لجميع الطلبات. أما قِطع القالب، فهي ملفات يقوم المستخدم بإنشائها دون أن يلتزم باستخدام أسماء مُحدّدة كما في ملفات القالب. ثم يقوم المطوّر باستخدام هذه القِطع في أي مكان يريده ضمن القالب. يقوم المُطوّر مثلًا بإنشاء قطعة مُخصّصة لعرض أزرار المُشاركة، يقوم بتسمية الملف: sharing.php، ويضع فيه الوسوم التي يُريدها. ثم يقوم باستدعاء هذا الملف في الصّفحة الرّئيسيّة index.php وصفحة المقال المُنفرد single.php على النّحو التّالي: <?php get_template_part('sharing'); ?> هناك تفصيلات حول كيفية إنشاء قطع القالب والتّعامل معها، ما سنذكره هنا فقط لإعطاء فكرة عامة عنها وليس لشرحها بالتّفصيل. سنستخدم في هذا الدرس التّسلسل الهرمي فقط لسهولته وشهرته. إن كان الاسم غريبًا بالنّسبة إليك فستألفه بمُجرد أن تشرع في استخدامه. سنقوم بإنشاء 3 ملفّات في القالب هي: - header.php - footer.php - sidebar.php ومن ثم يمكننا استخدام هذه الملفّات في أي مكان ضمن القالب عن طريق الدّوال: - get_header() - get_footer() - get_sidebar() هذه الدّوال تعمل بشكل مُشابه لـ require التّي نعرفها في لغة PHP. بهذه الطّريقة لن نحتاج إلى القيام بالنّسخ واللصق في كل مرة نريد إدراج الترويسة في ملفات القالب، وفي حال أردنا تعديل شيء في الترويسة فلن نضطرّ إلى تطبيق التعديل في جميع ملفات القالب. الخطوة التّالية هي نقل المحتوى المُناسب لكل ملفّ من الملفّات السّابقة من ملف index.php إلى الملفّات الثّلاثة الجديدة التي أنشأناها. سنقوم حرفيًا بالنّسخ واللّصق من ملف index.php إلى الملفات الثّلاثة، ثم نقوم بوضع إحدى الدّوال الثلاثة في ملف index.php بدل النصّ الذي قمنا باقتصاصه. ملف الترويسة header.php نقوم باقتصاص مُحتوى ملف index.php من بدايته وحتى نهاية وسم </header> في السطر 57. نضع ما اقتصصناه في ملف header.php. ثم نضع مكان الاقتصاص في ملف index.php ما يلي: <?php get_header(); ?> فتصبح بداية ملف index.php مشابهةً لما يلي: <?php get_header(); ?> <div class="main-content"> <div class="row"> ملف التذييل footer.php نقوم الآن باقتصاص الجزء الخاص بالتذييل من ملف index.php، في السطر 71 بدءاً من وسم: <div class="site-footer"> وحتى نهاية الملف. نقوم بوضع المُحتوى في ملف footer.php، ثم نستبدل مكان الوسوم المقصوصة في ملف index.php بما يلي: <?php get_footer(); ?> ملف الشريط الجانبي sidebar.php الوسوم الخاصّة بالشريط الجانبي ما هي إلا أربعة أسطر، تبدأ من السطر 64، المحتوى هو: <div class="large-4 columns sidebar"> <div class="card"> Sidebar </div> </div> نقوم بنقل المحتوى السّابق من ملف index.php إلى ملف sidebar.php، ونضع مكانه في ملف index.php: <?php get_sidebar(); ?> بهذا ننتهي من المرحلة الأولى من إلغاء الترابط بين الوسوم، وضعنا كل جزءٍ منها في ملفٍّ خاصٍّ به، وكلما أردنا استخدام ذلك الجزء نقوم باستدعاء الدّالّة المناسبة لذلك. أصبح ملف index.php أقصر طولًا، ويؤدّي نفس الغرض الذي كان يؤدّيه قبل أن نقوم بالتّعديلات، محتوى الملف كالتالي: <?php get_header(); ?> <div class="main-content"> <div class="row"> <div class="large-8 right columns news"> <div class="row"> <div class="medium-12 columns"> <article class="card"> <header> <h1>Post title</h1> </header> <div class="date">4 كانون الأول 2014</div> <p>خلافاَ للاعتقاد <a href="#">السائد</a> فإن لوريم إيبسوم ليس نصاَ عشوائياً، بنذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم. قام البروفيسور "ريتشارد ماك لينتوك" (Richard McClintock) وهو بروفيسور اللغة اللاتينية في جامعة هامبدن-سيدني في فيرجينيا بالبحث عن أصول كلمة لاتينية غامضة في نص لوريم إيبسوم وهي "consectetur"، وخلال تتبعه لهذه الكلمة في الأدب اللاتيني اكتشف المصدر الغير قابل للشك. فلقد اتضح أن كلمات نص لوريم إيبسوم تأتي من الأقسام 1.10.32 و 1.10.33 من كتاب "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.</p> <div class="read-more text-left"> <a href="#">تابع قراءة المقال &raquo;</a> </div> <footer class="tags"> <span class="label">تقني</span> <span class="label">تنمية</span> <span class="label">منوعات</span> </footer> </article> </div> <div class="medium-12 columns"> <article class="card"> <header> <h1>Post title</h1> </header> <div class="date">4 كانون الأول 2014</div> <p>خلافاَ للاعتقاد <a href="#">السائد</a> فإن لوريم إيبسوم ليس نصاَ عشوائياً، بنذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم. قام البروفيسور "ريتشارد ماك لينتوك" (Richard McClintock) وهو بروفيسور اللغة اللاتينية في جامعة هامبدن-سيدني في فيرجينيا بالبحث عن أصول كلمة لاتينية غامضة في نص لوريم إيبسوم وهي "consectetur"، وخلال تتبعه لهذه الكلمة في الأدب اللاتيني اكتشف المصدر الغير قابل للشك. فلقد اتضح أن كلمات نص لوريم إيبسوم تأتي من الأقسام 1.10.32 و 1.10.33 من كتاب "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.</p> <div class="read-more text-left"> <a href="#">تابع قراءة المقال &raquo;</a> </div> <footer class="tags"> <span class="label">تقني</span> <span class="label">تنمية</span> </footer> </article> </div> </div> <div class="row"> <div class="medium-12 columns"> <ul class="pagination"> <li class="arrow unavailable"><a href="">&laquo;</a></li> <li class="current"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">&hellip;</a></li> <li><a href="">12</a></li> <li><a href="">13</a></li> <li class="arrow"><a href="">&raquo;</a></li> </ul> </div> </div> </div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?> جلب المقالات من قاعدة البيانات نحتاج الآن إلى عرض المقالات المحفوظة في قاعدة البيانات (والتي يتم التّحكم فيها من لوحة التّحكم الخاصّة بووردبريس)، سنقوم بعرضها في ملف index.php وفي دروس لاحقة سنستخدم نفس طريقة عرض المقالات في باقي ملفات القالب، سواءً في ملف single.php أو في archive.php أو في غيرها. ضمن ملف index.php نجد أن كل مقال مُحاط بالوسوم: <div class="medium-12 columns"> <article class="card"> كل مقال يجب أن يبدأ بهذه الوسوم، وينتهي بإغلاق هذه الوسوم. نلاحظ أن قالب HTML يحوي مقالين شكليين، سنحذف واحدًا منها ونكتفي بالآخر لنقوم باستخدامه كمعيار لعرض المقالات مثله. نحيط وسوم بداية المقال بالحلقة الرّئيسية التي تكلّمنا عنها سابقًا، فتُصبح الوسوم كما يلي: <?php while(have_posts()) { the_post(); ?> <div class="medium-12 columns"> <article class="card"> وبعد إغلاق الوُسوم التي بدأ المقال عندها نضع نهاية الحلقة (قوس إغلاق الحلقة) كما يلي: </article> </div> <?php } ?> إن قمنا بحفظ التّعديلات والتجربة، سنجد أن المقال الشّكليّ سيتكرّر بعدد المقالات الموجودة في قاعدة بيانات ووردبريس لدينا. لكن جميع المقالات ستكون بنفس الشّكل وبنفس المُحتوى. سنقوم الآن باستبدال المُحتوى الشّكليّ بالمُحتوى المُناسب من قاعدة البيانات حسب كل مقال. تقدم ووردبريس دالّة the_title لطباعة عُنوان المقال الحالي، سنستخدمها بدل عنوان المقال الشّكلي، فتصبح الوسوم كما يلي: <h1><?php the_title();?></h1> وبنفس الطريقة نستخدم دالّة the_date لعرض تاريخ نشر المقال كما يلي: <div class="date"><?php the_date();?></div> ثم لعرض محتوى المقال نستخدم دالّة the_content بدل وسم <p></p> الذي يحوي المحتوى الشكليّ، كما يلي: <p><?php the_content();?></p> يُمكن أن نقوم بحفظ التّعديلات على الملف ومشاهدة النّتيجة في المُتصفّح لنتأكد من أن التّعديلات التي قمنا بها تم تطبيقها وتعرض النّتيجة الصّحيحة. بقي لدينا تعديلان مُشابهان لما قمنا به، الأول لتعديل رابط “تابع قراءة المقال” والثاني لعرض الوسوم الخاصّة بالمقال. لتعديل رابط المقال نستخدم دالّة the_permalink التي وظيفتها عرض رابط الويب الخاصّ بالمقال، لكن لا تقوم الدّالّة سوى بطباعة الرّابط دون وضعه في وسم <a></a> كي يصبح قابلًا للنّقر والاستخدام. علينا إذًا وضع الرّابط في مكانه المُناسب كما يلي: <a href="<?php the_permalink();?>">تابع قراءة المقال »</a> قمنا باستبدال قيمة حقل href="#" بدالّة طباعة رابط المقال. الآن أصبح بإمكاننا مُشاهدة الصّفحة الرّئيسيّة للقالب التي تعرض المقالات ويمكن الضّغط على رابط “تابع قراءة المقال” للوصول إلى المقال بعينه ضمن صفحة مُستقلّة. بقي الآن أن نعرض الوسوم الخاصّة بكل مقال. مكان الوسوم هو داخل وسم: <footer class="tags"> </footer> سنقوم باستخدام دالّة wp_get_post_tags التي مهمتها إرجاع مصفوفة تحوي جميع الوسوم الخاصّة بالمقال على شكل كائنات (Objects) وليس مُجرّد نصّ عادي. وعليه فإنه سيكون بإمكاننا الوصول إلى اسم كل وسم عن طريق: tag->name$ كما يلي: <footer class="tags"> <?php $tags = wp_get_post_tags(get_the_ID()); foreach($tags as $tag) { echo '<span class="label"> ' . $tag->name . '</span> '; } </footer> يُمكننا الآن استعراض المقالات في الصّفحة الرّئيسية للمُدوّنة والوصول إلى كل مقال عن طريق الرّابط الخاص به ورؤية الوسوم الخاصّة بكل مقال أيضًا. سنتوقف هنا في هذا الدرس كي لا تكون المعلومات كثيفة يصعب استيعابها، وسنتابع في دروس أخرى استخدام أرقام الصّفحات في الأسفل بشكل صحيح. (يمكن الآن إضافة تعليق حول وسوم الصفحات كي لا تظهر بشكل خاطئ وبدون روابط صحيحة). خلاصة تعلّمنا في هذا الدّرس كيف نقوم بتجهيز قالب HTML ليُصبح قالبَ ووردبريس، وكيف نُعدّل مسارات ملفات JavaScript وCSS لتُصبح متناغمةً مع رابط الويب الخاص بقالب ووردبريس. وفي القسم الثاني من الدرس تعلّمنا كيف نقوم بفصل المحتوى عن ملف index.php إلى ملفّات فرعية أخرى، لنقوم بإعادة استخدامها في أي ملف ضمن القالب. وفي القسم الأخير رأينا كيف يمكن جلب المقالات من قاعدة البيانات وإظهارها للمُستخدم مع عرض الوسوم الخاصّة بكل مقال. أرجو أن يكون الدرس سهلاً بسيطاً، في حال وجود أي استفسار أو مداخلة نرحّب به في التعليقات.

تابعنا في الدرس السابق العمل على ملفات index و single.php و page.php وسننهي في هذا الدرس الأخير في هذه السلسلة عملية تحويل القالب. الخطوة 2.9- العملُ مع ملفِّ page-about.php في هذا الدّرس سنقوم بإنشاء صفحة تعريفيّةٍ للموقع. ابدأ بإنشاء ملفّ page-about.php. بما أنّها صفحة تعريفيّة فلن يحتوي ملفّها إلَّا على كود HTML بالإضافة إلى كلٍّ من رأس، تذييل والقائمة الجانبيّة للقالب. أضف تعليقًا في بداية الملفّ لجعل ووردبريس يعرف أنّه يمثِّل صفحة نموذج. انسخ الكود التّالي داخل ملفِّ page-about.php. <?php /* Template Name: About Page */ ?> <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <img src=&"<?php print IMG; ?>/my_image.png&" class=&"opacity-hover img-responsive center&" alt=&"my image&" /> <div class=&"align-center&"> <h3>About Me</h3> I am a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites graphics. I spend most of my time practically every day, experimenting with HTML, CSS and WordPress. <hr/> <h3 class=&"blue&">Feel free to contact me for some Web Projects</h3> <i class=&"fa fa-envelope&"></i> Email: [your email] <i class=&"fa fa-twitter&"></i> Twitter: [your twitter username] </div> </div> <!-- END RELATED ARTICLE AREA --> </div> <!-- SIDEBAR AREA --> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> الخطوة 2.10- العملُ مع ملفِّ page-contact.php يمكنُ للعديد من إضافات ووردبريس إضافة استمارة تواصلٍ لمدوّنتك، ولكنّك تستطيع القيام بذلك دون الحاجة لإضافة. قم بإنشاء ملفِّ page-contact.php ثمّ أضف إلية بعض أكواد PHP و JavaScript. الآن أنشئ استمارةً بسيطةً فقط بلصق الكود التّالي داخل ملفّك. <?php /* Template Name: Page Contact */ ?> <?php if(isset($_POST['submitted'])) { if(trim($_POST['contactName']) === '') { $nameError = 'Please enter your name.'; $hasError = true; } else { $name = trim($_POST['contactName']); } if(trim($_POST['email']) === '') { $emailError = 'Please enter your email address.'; $hasError = true; } else if (!preg_match(&"/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i&", trim($_POST['email']))) { $emailError = 'You entered an invalid email address.'; $hasError = true; } else { $email = trim($_POST['email']); } if(trim($_POST['subject']) === '') { $subjectError = 'Please enter a subject.'; $hasError = true; } else { $subject = trim($_POST['subject']); } if(trim($_POST['comments']) === '') { $commentError = 'Please enter a message.'; $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } if(!isset($hasError)) { $emailTo = get_option('tz_email'); if (!isset($emailTo) || ($emailTo == '') ){ $emailTo = get_option('admin_email'); } $subject = '[PHP Snippets] From '.$name; $body = &"Name: $name nnEmail: $email nnComments: $comments&"; $headers = 'From: '.$name.' <'.$emailTo.'>' . &"rn&" . 'Reply-To: ' . $email; wp_mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?> ما تمّ القيام به هنا هو التأكّد من أنّ الاستمارة تمّ ملئُها وإرسالها بطريقةٍ صحيحة عن طريق التحقّق من عدم وجود حقولٍ فارغة أو بريد إلكترونيٍّ غير صحيحٍ. في حالة العكس، سيتمّ إظهار رسالة خطأ ولن يتّم إرسال الاستمارة. الآن، فلنقم بإنشاء الاستمارة وعرض رسائل الخطأ الموافقة لكلِّ حقلٍ. <?php get_header(); ?> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <div id=&"container&"> <div id=&"content&"> <div class=&"align-center&"> <h3>We want to hear from you!</h3> If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. Thank you so much for your support! We really appreciate! <div class=&"entry-content&"> <?php if(isset($emailSent) $emailSent == true) { ?> <div class=&"thanks&"> Thanks, your email was sent successfully. </div> <?php } else { ?> <?php the_content(); ?> <?php if(isset($hasError) || isset($captchaError)) { ?> Sorry, an error occured. <?php } ?> <form action=&"<?php the_permalink(); ?>&" id=&"contactForm&" method=&"post&" class=&"general-form&"> <div class=&"contactform&"> <input type=&"text&" name=&"contactName&" class=&"form-control&" id=&"contactName&" placeholder=&"Your Name..&" value=&"<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>&" class=&"required requiredField&" /> <?php if($nameError != '') { ?> <span class=&"error&"><?=$nameError;?></span> <?php } ?> <input type=&"text&" name=&"email&" id=&"email&" class=&"form-control&" placeholder=&"Your Email..&" value=&"<?php if(isset($_POST['email'])) echo $_POST['email'];?>&" class=&"required requiredField email&" /> <?php if($emailError != '') { ?> <span class=&"error&"><?=$emailError;?></span> <?php } ?> <input type=&"text&" name=&"subject&" id=&"subject&" class=&"form-control&" placeholder=&"Your Subject..&" value=&"<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>&" class=&"required requiredField subject&" /> <?php if($subjectError != '') { ?> <span class=&"error&"><?=$subjectError;?></span> <?php } ?> <textarea name=&"comments&" id=&"commentsText&" class=&"form-control&" placeholder=&"Your Message&" rows=&"4&" cols=&"100&" class=&"required requiredField&"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class=&"error&"><?=$commentError;?></span> <?php } ?> <input type=&"submit&" class=&"btn btn-primary no-border&" value=&"Send Message&"></input> </div> <input type=&"hidden&" name=&"submitted&" id=&"submitted&" value=&"true&" /> </form> <?php } ?> </div> <!-- .entry-content --> </div> <!-- .post --> </div> </div> </div> <!-- RELATED ARTICLE AREA --> </div> <aside> <!-- SIDEBAR AREA --> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> هذه الاستمارة تعمل بشكلٍ جيّد الآن ولكن يُمكننا إدخال تحسيناتٍ إضافيّة عليها عن طريق إضافة التحقُّقات في جهة العميل، للقيامِ بهذا سنستخدم إضافة jQuery للتحقّق والمُصادقة . أوّلًا قُم بتحميل الإضافة ثمّ ضعها في مجلّد js داخل مجلّد قالبنا ووردبريس. بعد ذلك أضف الكود التّالي في ملفّ header.php قبل وسمِ إغلاقِ head. <?php if( is_page('contact') ){ ?> <script type=&"text/javascript&" src=&"<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js&"></script> <script type=&"text/javascript&" src=&"<?php bloginfo('template_directory'); ?>/js/verif.js&"></script> <?php } ?> الآن أنشئ ملفّ verif.js وضع داخله كود jQuery لتفعيل التحقّق، قم بنسخ الكود التّالي: $(document).ready(function(){ $(&"#contactForm&").validate(); }); جميل! تمّ إنشاء استمارة التواصل. هذه الاستمارة ستقوم بالتحقّق فقط بالتأكّد من أنّ الحقول التي تمتلك كلاس "مطلوب-required" قد تمّ ملئها بشكلٍ صحيحٍ. الخطوة 2.11- تعيين نماذج الصّفحات للصفحة رائع! تمّ إنشاء نماذج الصّفحات، الآن علينا العمل على تعيينها لصفحة ما. في هذا الجزء من الدّرسِ، أنشئ أوّلًا صفحةً من لوحة التحكّم، ثمّ بعد ذلك عيّن نموذجًا لها. للقيام بهذا، اذهب إلى صفحات> أضف جديدًا ثمّ أعطها عنوان "تواصل معنا" أو "عن الموقع". الآن فلنقم بتعيين نموذجٍ لصفحتنا، اذهب إلى الجهة اليُمنى أو اليُسرى (على حسب لغة القالب) ستجد هناك قائمة خياراتٍ تحت عنوان نموذج، اختر منها النموذج الذّي تريده ثم اضغط على زرِّ نشر الآن يمكنك أن تتحقّق أنّ الصفحة تعمل بالتوجّه إليها عن طريق الضغط على الرابط أسفل العنوان. الخطوة 2.21- العملُ مع ملفِّ search.php لقد تمَّ إعداد هيكلةِ صندوق البحثِ ولكِّنه لا يعملُ بعد، إذ سيتوجّب علينا إضافة بعضِ الدوالِّ لجعله يعمل وذلك ما سنقوم بهِ في هذا الجزءِ من الدّرس. الكود أدناه يحتوي على بعض أكواد PHP لجعلِ عمليّة البحث تُرجِع نتائج، عدا ذلك سنحصل على رسالة الخطأ " Bummer! No results found" المُضمّنة بين وَسمي H2. أنشئ أوّلًا ملفّ search.php ثم أضف له الكود أدناه: <?php get_header(); ?> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <?php if ( have_posts() ) : ?> <header class=&"page-header&"> <h3 class=&"page-title&"><?php printf( __( 'Search Results for: %s', '_s' ), ' <h3>' . get_search_query() . '</h3> ' ); ?></h3> </header> <!-- .page-header --> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /*** Run the loop for the search to output the results. */ get_template_part( 'content', 'search' ); ?> <?php endwhile; ?> <?php else : ?> <h3>Bummer! No results found</h3> <?php endif; ?> </div> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </div> </div> </div> </section> <?php get_footer(); ?> الخطوة 2.13- العملُ مع ملفِّ content-search.php ملفّ search.php يقوم فقط بالتحكّمِ بنتائج البحث لكنه لا يعرضها لذا سيتوجّب علينا إضافة حلقة تِكرارٍ لعرض هذه النتائج. أوّلًا قم بإنشاء ملفّ content-search.php داخل المجلّد الرئيسيِّ لقالبنا، ثمّ انسخ هذا الكود بداخلهِ. <div id=&"post-<?php the_ID(); ?>&" <?php post_class(); ?>> <header class=&"entry-header&"> <?php the_title( sprintf( ' <h1 class=&"entry-title&"><a href=&"%s&" rel=&"bookmark&">', esc_url( get_permalink() ) ), '</a></h1> ' ); ?> <?php if ( 'post' == get_post_type() ) : ?> <div class=&"entry-meta&"> <?php endif; ?> </header> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / <?php the_category(); ?> <?php the_excerpt(); ?> </div> الخطوة 2.14- العملُ مع ملفِّ comments.php للتّذكير، في ملفِّ single.php قمنا بإضافة وسم div ذو كلاس comment-section يحتوي على كود PHP وقلنا حينها أنَّ هذا العنصر سيحتوي على التعليقات. هذا كان الكود الذي أضفناه: <div class=&"comment-section&"> <?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> </div> كما سبق وأن أشرنا إليه، هذا الكود سيقوم بالتحقّق إن كانت التعليقات متاحةً من لوحة التحكّم، إن كان الجواب "نعم" فهو سيقوم باسترجاع عدد التعليقات ومِن ثَمَّ عرضها بكلِّ بساطة. انتبه إلى أنَّ هذا الكود لن يكفي بمفردهِ لعرضِ التعليقات، سنكون بحاجةٍ لإنشاء comment_template باستخدام ملفِّ comments.php. في هذا الجزء من هذا الدّرس التعليميِّ قُم بإنشاء هذا الملفِّ في مجلّد قالبنا الرئيسيِّ ثم انسخ الكود أدناه بداخلهِ: <?php /** * The template for displaying comments. * * The area of the page that contains both current comments * and the comment form. * * @package NeoBlog */ /* * If the current post is protected by a password and * the visitor has not yet entered the password we will * return early without loading the comments. */ if ( post_password_required() ) { return; } ?> <div id=&"comments&" class=&"comments-area&"> <?php // You can start editing here -- including this comment! ?> ?php if ( have_comments() ) : ?> <h3 class=&"comments-title&"> <?php printf( _nx( 'One Comment on ldquo;%2$srdquo;', '%1$s comment on ldquo;%2$srdquo;', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), ' <h3>' . get_the_title() . '</h3> ' ); ?> </h3> <?php if ( get_comment_pages_count() > 1 get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id=&"comment-nav-above&" class=&"comment-navigation&" role=&"navigation&"> <h1 class=&"screen-reader-text&"><?php _e( 'Comment navigation', '' ); ?></h1> <div class=&"nav-previous&"><?php previous_comments_link( __( 'larr; Older Comments', '_s' ) ); ?></div> <div class=&"nav-next&"><?php next_comments_link( __( 'Newer Comments rarr;', '_s' ) ); ?></div> </nav> <!-- #comment-nav-above --> <?php endif; // check for comment navigation ?> <ol class=&"comment-list&"> <?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, )); ?> </ol> <!-- .comment-list --> <?php if ( get_comment_pages_count() > 1 get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id=&"comment-nav-below&" class=&"comment-navigation&" role=&"navigation&"> <h1 class=&"screen-reader-text&"><?php _e( 'Comment navigation', '' ); ?></h1> <div class=&"nav-previous&"><?php previous_comments_link( __( 'larr; Older Comments', '_s' ) ); ?></div> <div class=&"nav-next&"><?php next_comments_link( __( 'Newer Comments rarr;', '_s' ) ); ?></div> </nav> <!-- #comment-nav-below --> <?php endif; // check for comment navigation ?> <?php endif; // have_comments() ?> <?php // If comments are closed and there are comments, let's leave a little note, shall we? if ( ! comments_open() '0' != get_comments_number() post_type_supports( get_post_type(), 'comments' ) ) : ?> <?php _e( 'Comments are closed.', '' ); ?> <?php endif; ?> <?php $fields = array( 'author' => ' '.'<input class=&"form-control&" placeholder=&"Your Name..&" id=&"author&" name=&"author&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author'] ) . '&" size=&"30&"' . $aria_req . ' /> ', 'email' => ' '.'<input id=&"email&" class=&"form-control&" placeholder=&"Your Email..&" name=&"email&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author_email'] ) . '&" size=&"30&"' . $aria_req . ' /> ', 'url' => ' ' . '<input id=&"url&" class=&"form-control&" placeholder=&"Your Website..&" name=&"url&" type=&"text&" value=&"' . esc_attr( $commenter['comment_author_url'] ) . '&" size=&"30&" /> ' ); $comments_args = array( 'fields' => $fields, 'title_reply'=>' <h3>'.'Leave a Comment'.' <h3>', 'comment_field' => ' <textarea id=&"comment&" class=&"form-control&" name=&"comment&" rows=&"4&" cols=&"100&" aria-required=&"true&" placeholder=&"Write your comment here..&"></textarea> ', 'comment_notes_after' => '', 'id_submit' => 'submit-btn' ); ?> <?php comment_form($comments_args); ?> </div> <!-- #comments --> هناك العديد من الأشياء التي تحدث في هذا الملفِّ. أوّلًا، هو يقوم بالتحقّق إن لم يكن المقال يشترط كلمة سرٍّ مِن المُستخدِم، إن كانت الإجابة بـ "لا" فهو سيقوم بعرض عددِ التعليقات وعرضِ هذه التعليقات أيضًا. لاحظ أنّ هناك روابط للتنقّل بين التعليقات، كِلا الرّابطين (next) و (previous) يستخدمان الدالّتين previous_comments_link و next_comments_link على التّوالي. أخيرًا، استخدم دالّة wp_list_comments لعرض التعليقات الخاصّة بمقالةٍ أو صفحةٍ ما بالاعتماد على مجموعةٍ من الإعدادات، بما فيها تلك التّي تمّ تحديدها من لوحةِ التحكّم. بعد ذلك أضف wp_enqueue_script للتحقّق من أنّ التعليقات التَشعُبيّة متاحة. في حالة كان الجواب بِـ "نعم" سيتمّ إضافة زر "رد". افتح ملفّ functions.php وأضف إليه الكود التّالي: <?php if( get_option('thread_comments') ){ wp_enqueue_script('comment-reply'); } ?> الخطوة 2.15- العملُ مع ملفِّ php.404 إنشاء صفحة خطأ خاصّة سيكون أمرًا سهلا باستخدام ملفِّ php.404 في قالب ووردبريس خاصّتنا. هذه الخطوة ستجعل قالبنا يتأكّد أنّ كلّ رابطٍ يقود إلى صفحة ما، في حالة كان الرّابط معطوبًا فسيتّم عرض هذه الصّفحة. فقط قُم بإنشاء ملفّ php.404 داخل مجلّد قالبنا الرئيسي ثمّ قم بنسخ الكود التّالي بداخله. <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <section> <h3> Oh Snap! Page not found!</h3> <h3> It seems you're looking for something that isn't here!</h3> <a href=&"<?php echo home_url(); ?>&">Click here</a> to go back to homepage! </section> </div> </div> <aside> <!-- SIDEBAR AREA --> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> صفحة 404 "الصّفحة المطلوبة غير موجودة" هي صفحة خطأ يتّم توليدها عن طريق الخادم لإعلام المستخدم أنّ الصفحة المطلوبة غير متوفّرةٍ. الكود أعلاه سيعرض رسالة الخطأ التاليّة "!Oh Snap! Page not found" بمعنى "لم يتمَّ العثور على الصّفحة" إضافة إلى رابط يقود إلى رئيسيّة الموقِع حتّى نضمن بقاء الزّائر في موقعنا. مبروك! لقد أكملنا العمل على قالبنا ووردبريس! الشّكلُ النهائيُّ لقالبنا تحميل القالب نصائح يجب إتِّباعها لتذكّر هذا الجزء من الدّرس ابقَ دائمًا على إطِّلاع على دليل ووردبريس للحصول على الدوالّ، الوُسوم وأكواد PHP. هذا الأمر سيبقيك دائمًا على الطّريق الصّحيح في التّعامل مع الأكواد. تحقّق دائمًا من استخدام كودٍ مُهيكلٍ بشكلٍ جيّدٍ، خالٍ من أخطاء PHP و HTML مصادقٍ عليه. ألقِ نظرة على معايير ووردبريس. اتبع دليل التصميم لتصميم الموقع ونُسوقِه. اعمل نسخًا احتياطيّة لملفّاتك دائمًا. أنا أكرّر! دائمًا اعمل نسخًا احتياطيّة لملفّاتك لأنّه في حالة عملت تغييرات كثيرة على ملفّاتك سيمكنك دائمًا استرجاعها بسهولة. ابحث عن المساعدة. إن كنت تعملُ على قالب آخر فإن احتمال مواجهتك لمشاكل أثناء تحويلك لبعضِ الملفّات كبير جدًّا. ماهي تقنّيات حلّ الأخطاء التي يُمكنك استخدامها لا يوجد هناك طريقة رسميّة للتحقّق من الأخطاء لمّا تكون بصددِ تطوير قالب ما. قد يكون هناك خطأ إملائي في كتابتك لبعض أجزاء الكود أو ربّما أنّك نسيت إنشاء أحد ملفّات ووردبريس. مع ذلك فإنّ أحسن طريقة لتصيّد الأخطاء ستكون تشغيل وضع التصحيح "Debugging mode" أو التحقّق من سجّل الأخطاء لديك. خاتمة مبروك! لقد قُمتَ لتوِّك بتحويل قالب HTML و CSS إلى قالب مدّونة ووردبريس. كلّ ذلك تمَّ بسهولة، أليس كذلِك؟ ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme

هل أنت مهتم بتعلم PHP وبناء قوالب وملحقات خاصة بك على ووردبريس؟ أو ربما أنت مُهتمّ بتعلّم القليل الذي يُمكنك من إدخال التّعديلات التي تحتاجها على مواقعك ومدوّناتك التي تعتمد على ووردبريس. أيّا كان وضعك، هناك أمور يجب عليك أن تعرفها قبل أن تغوص في مجال تطوير ووردبريس. سنحاول في هذا المقال إعطاءك فكرة واضحة عليها. كيف يعمل ووردبريس؟ لنفهم ماذا وكيف يمكننا التطوير في ووردبريس، سنلقي أولا نظرة سريعة على آلية عمل ووردبريس. يتكون ووردبريس من ثلاثة عناصر رئيسية: النواة الأساسية والقوالب والمُلحقات. تحتوي النواة على جميع الوظائف الأساسية التي تشكل نظام إدارة المحتوى لووردبريس، وهذه الشيفرات البرمجية تتضمن كل شيء من البنية التحتية (backend) للإدارة إلى دوال جدولة المشاركات والتأكد من قوة كلمة المرور والسماح بإنشاء مستخدمين وغيرها. في حين أن النواة الأساسية (core) مسؤولة عن البنية التحتية للموقع وكيفية التعامل معها، فإن القوالب مسؤولة عن الواجهة الأمامية للموقع وكيفية ظهوره. نستخدم إدارة ووردبريس (WordPress admin) لإنشاء المشاركات والصفحات وبقية محتوى الموقع، وأما بالنسبة لكيفية ظهور هذه الأشياء للزائر فهو أمر متروك للقالب theme، لذلك فإن هذا سيعطيك قوة كبيرة للتحكم في موقعك، فقد ترغب بتثبيت وتفعيل القوالب الموجودة أو حتى تطوير قوالبك المخصصة. أبسط طريقة لوصف المُلحقات plugins هي أنها توفر وظائف إضافية للووردبريس، ولفعل ذلك، قد تعدّل المُلحق الشيفرة البرمجية للواجهة الأمامية أو البنية التحتية للموقع، وأبسط مثال لذلك هي المُلحق الذي يضيف زر لتغريدة تويتر، وقد تُنشئ أيضا صفحة إعدادات جديدة في البنية التحتية لقائمة الإدارة والتي ستمكنك من إعداد بعض الخيارات الافتراضية لتغريدة المستخدم ويمكنها إضافة نفسها إلى الواجهة الأمامية للموقع، والتي سيكون موقعها في الغالب تحت التدوينة (post). مجالات التطوير بقدر تقدمك في تطوير ووردبريس، ستتمكن من تطوير أي واحدة من المكونات الرئيسية المذكورة أعلاه بالإضافة إلى تطبيقات مستقلة بمساعدة REST API الجديدة وسنذكر المزيد عن هذا الموضوع بعد قليل. مهما كان ما تريد فعله مع ووردبريس، أنصحك باتباع منهج في دراستك، هذه القائمة ستساعدك على التعرف على الأنظمة التي تحتاج إلى معرفتها قبل بدء تعلمك المزيد حول المجال الذي اخترته: القوالب المُلحقات REST API النواة القوالب إن تعلم كيفية عمل القوالب وتطويرها سيسمح لك باحتراف إنشاء المواقع بدءا من المواقع الصفحة الواحدة إلى مواقع المحتوي الحيوي الثقيل، وستسمح لك أيضا بالحصول على المزيد من العملاء (إذا كان هذا ما يهمك) أو حتى بيع القوالب تجاريا. يوجد العديد من مطوري القوالب الناجحين في أسواق مثل Themeforest و Mojo Marketplace وغيرها. ففي وقت كتابة هذا المقال، أشهر قالب على موقع Themeforest تم بيع 1377 نسخة منه في أسبوع أي أكثر من $81,000 في أسبوع واحد فقط! يمكنك الحصول على الكثير من الأموال إذا كنت تستطيع تطوير قالب مميزة. على الرغم من أن هذا المبلغ لا يحققه جميع مطوري القوالب، وربما لن تصبح مليونيرًا بين عشيّة وضحاها من إنشاء القوالب، لكن يمكنك الحصول على مبلغ مالي جيد من القوالب إذا كنت تقوم بالأمر بالشكل الصحيح. إذا أردت رؤية بعض الأمثلة عن القوالب الشهيرة، فألق نظرة على الأسواق التي ذكرناها أعلاه، أو على قسم قوالب ووردبربس حيث جميع القوالب مجانية، فالكثير من مطوري القوالب يصدرون أعمالهم الأولى في هذا القسم. يمكنك تعلم كيفية إنشاء قوالب ووردبريس في أكاديمية حسوب من خلال سلسلة الدروس مدخل إلى تطوير قوالب ووردبريس. الملحقات plugins بطريقة ما، تعتبر المُلحقات شريان حياة ووردبريس، فهي تحوله إلى كل شيء من منتدى إلى شبكة اجتماعية أو منصة للتجارة الإلكترونية وغيرها باستخدام ضغطة زر واحدة، فالمُلحقات تعطيك تحكمًا كاملًا بجميع جوانب نظام ووردبريس، وتسمح لك بتعديل ما تشاء، وسيساعدك هذا كثيرا عند إنشاء مواقع ووردبريس للعملاء. كما هي الحال مع القوالب، فالمُلحقات تملك أيضا أسواقا وفي العادة يتم إدارتها من نفس الشركات التي تدير أسواق القوالب. يعتبر سوق CodeCanyon على سبيل المثال أكبر سوق للملحقات حيث يملك أكثر من 4000 ملحق متاحة للشراء. على الرغم من أن المبيعات ستكون أقل من القوالب إلا أنه يمكنك ربح الكثير إذا أنشأت ملحقًا جيدًا. يملك موقع ووردبريس قسمًا للملحقات المجانية ويحتوي على أكثر من 40000 ملحق، وهو بذلك مصدر كبير للأدوات والإلهام والأمثلة على الشيفرات البرمجية المميزة (والشيفرات البرمجية السيئة للأسف). يمكنك تعلم كيفية إنشاء ملحقات وإضافات ووردبريس في أكاديمية حسوب من خلال سلسلة الدروس مدخل إلى برمجة إضافات ووردبريس. ما بين WordPress.org و WordPress.com لقد أُطلق نظام ووردبريس بطريقتين مختلفتين، حيث كانت الأولى عن طريق WordPress.com؛ أمّا الثّانية، فعبر استخدام WordPress.org، وهذا نظرًا لإمكانيّة احتساب ووردبريس موقعًا للإنترنت، ومنصّة أعمال في آنٍ واحد، حيث يمكنك إنشاء حساب مجّاني في WordPress.com، والحصول على نسخة مُستضافة من نظام ووردبريس لخدمة موقعك، بحيث ستتحمل شركة الاستضافة مسؤوليّة صيانة الخادم وتثبيت ووردبريس عليه، ممّا يوفر عليك بعض العبء، ويتيح لك التّركيز على إنشاء المحتوى. تجني WordPress.com أرباحها عبر تقاضيها لأموال مقابل ترقيتها للمزايا، فعلى سبيل المثال إذا رغبت في استخدام اسم النّطاق الخاصّ بك في WordPress.com، فستحتاج إلى دفع القليل من الرسوم، وهناك الكثير من الشّركات التي تدفع لمنصّة WordPress.com لأجل استضافة مواقع ووردبريس ضخمة، مثل: بي بي سي أمريكا (BBC America)، ومجلة نيويوركر (The New Yorker Magazine)، ومدونة ستار وورز (Star Wars) الرّسمية. بسبب حاجة ووردبريس لدعم مختلف أنواع وأحجام المواقع، تمتلك منصّتها العديد من القيود المتعلّقة بتخصيص المواقع على نحو شخصيّ، فهناك عدد محدود من القوالب التي تتحكم بتنسيق ومظهر المواقع، كما يوجد عدد قليل من الإضافات التي تُعزّز من أداء وظائفه؛ أمّا WordPress.org فهو الموقع الرّسمي لنظام إدارة المحتوى ووردبريس الذي تستضيفه بنفسك. نقصد باستضافة ووردبريس عمليّة تنزيل نسخة من برنامج ووردبريس، وتثبيته على خادم إنترنت، والذي هو بالمقابل عبارة عن حاسب يستخدم برمجيّات خاصّة تسمح له بتوفير الوصول إلى مواقع الإنترنت المُخزّنة به لجميع المستخدمين على الإنترنت، حيث يمكن لهذا الخادم أن يكون مجرّد حاسب عتيق مُلقى في مكان ما بمنزلك، أو قد يكون مركز بيانات متطوّر، ولك حريّة اختيار الخادم المناسب لموقعك حسب تفضيلك، إذ تتيح استضافتك لنظام ووردبريس بنفسك إنشاء موقع إنترنت تمتلك فيه كامل الحريّة في التّحكم؛ بالمقابل، ستقع عليك مسؤوليّة إعداد وتثبيت نظام ووردبريس، وصيانته بنفسك. REST API ستستخدم REST API لاحقا عندما تحترف تطوير القوالب والمُلحقات، ونظريا ستكون قادرا على استخدامها إذا كانت لديك خبرة في البرمجة بلغة أخرى مثل جافا أو روبي. تعتبر REST API جديدة نسبيا وتسمح لك بإنشاء تطبيقات حقيقية بالاعتماد على ووردبريس، وهذا يتضمن تطبيقات أندرويد وأيفون وغيرها. أفضل طريقة لشرح هذه الميزة هي عن طريق مقارنتها بمواقع مثل تويتر أو انستغرام، لا شك أنك قد رأيت تغذية تويتر معروضة على موقع أحدهم، ولإضافة هذه الميزة إلى موقعك لن تحتاج إلى معرفة كيفية عمل نواة شيفرة البرمجية الخاصة بتويتر، كل ما تحتاجه هو القليل من الشيفرات البرمجية التي تقول: "من فضلك استرجع آخر خمسة من تغريداتي." وسيتعامل تويتر مع الباقي وسيرجع لك بيانات آخر خمسة تغريدات التي طلبتها، وبعد ذلك يمكنك استخدام HTML و CSS لعرضها. وهذا بالضبط ما يفعله REST API لووردبريس، يمكنك الاتصال بأي موقع وطلب منه آخر خمسة مشاركات فيها، ويمكنك أيضا القيام بأكثر من ذلك: يمكنك إنشاء/حذف المستخدمين وتعديل الفئات وغيرها (بالطبع، تحتاج إلى الاستيثاق قبل استخدامها)، هذا يعني أنه يمكنك استخدام ووردبريس كمستودع للمعلومات وبناء واجهة أمامية وبنية خلفية باستخدام نظام مختلف تماما. النواة ساهم في تطوير ووردبريس مجتمع من الآلاف المتطوعين حول العالم، حيث أنه يعمل 471 شخص على الإصدار 4.4 من ووردبريس، والعديد من الأشخاص الآخرين يعملون على جوانب مختلفة من ووردبريس، من الترجمة وتطبيقات الويب إلى الإتاحة (accessibility) والدعم. في الحقيقة، يمكنك الاشتراك معهم الآن، فبينما تحتاج إلى بعض الخبرة للمشاركة في برمجة نواة ووردبريس إلا أنه يمكنك المساهمة في تحديد المشاكل والأخطاء والتأكد منها وتقديم الأفكار في أي وقت باستخدام WordPress Trac، وهو المكان الذي يمكنك من متابعة تطوير شيفرة نواة ووردبريس. إذا وجدت علة (خطأ - bug) يمكنك إرفاقها بالشيفرة المناسبة للتخلص منها، وبعد عدة مراجعات وتدقيقات سيتم استخدام شيفرتك البرمجية إذا كانت مناسبة، وهذه هي أفضل طريقة للمشاركة في تطوير النواة. تطوير ووردبريس: ماذا تحتاج أن تتعلمه يجب أن تعتاد على العمل على مجموعة محددة من الأدوات حتى تتمكن من تطوير ووردبريس. إن عملية التعلم لا تنتهي بالنسبة إلى أي مطور جيد، سوف أعرض عليك هنا حزمة للبداية كما سأريك بعض الأدوات المتقدمة التي قد تحتاج إليها لاحقا عندما تريد أن تتعلم المزيد. الحد الأدنى من المتطلبات لتطوير الووردبريس هي HTML و CSS و PHP، بالإضافة إلى هذه اللغات ستحتاج إلى جافا سكربت و MySQL في مرحلة ما، عندما تتقن هذه اللغات يمكنك الانتقال إلى أشياء أخرى مثل LESS/SASS و Coffeescript و XML و JSON وغيرها، لكن هذه الأشياء لا تعتبر ضرورية لتطوير ووردبريس، لكن إذا عرفتها سيجعل حياتك أسهل كمطور وستوسع آفاقك. HTML و CSS أول لغتين يجب عليك تعلمهما هما HTML و CSS، مهما كانت الشيفرة البرمجية التي تكتبها ومهما كانت اللغة التي تستخدمها فستحتاج حتما إلى HTML عند إرسال صفحات الويب إلى المستخدم وإلى بعض CSS لتصميم وتزيين الصفحة. إن HTML مسؤولة عن إعطاء هيكل المواقع. على المستوى الأساسي، هذا يعني أنك ستقرر ما النص الذي يجب أن يكون عنوانًا وما يجب أن يكون قائمة وما الذي يجب أن يكون في رأس أو أسفل الصفحة. أما في المستوى الأعمق، ستقرر قرارات مهمة حول SEO والتحسين (optimization). يُستخدم CSS لتطبيق أنماط لهيكل HTML، أي أنك ستُعرّف لون النص والروابط والمسافة بين الفقرات ومحاذاة الصورة وألوان الحدود وسمكها وغيرها من العناصر عن طريق استخدام شيفرة CSS. إن CSS تتميز بسهولة تعلمها وبصعوبة إتقانها. PHP تحظى PHP بشعبية كبيرة كأشهر لغة سكربتات من جانب الخادوم server-side-، ووفقا للاستطلاع الذي قام به W3Techs، تستخدم PHP في 81.6% من المواقع وهي اللغة التي كُتب بها ووردبريس (وتقريبا أغلب أنظمة إدارة المحتوى الأخرى أيضا) ولذلك فإن معرفة PHP هو أمر ضروري لتطوير ووردبريس. إن معرفتك بـ PHP وحدها، سيجعلك تحصل على أكثر من معرفة بتطوير ووردبريس فقط. إن أهم فرق بين لغات جانب الخادوم عن لغات جانب العميل - مثل HTML - هو أنه يتم معالجتها في الخادوم أولا، ففي HTML، يمكنك كتابة شيفرة برمجية لـ Good Morning وسيرسلها HTML كما هي وسيعرضها على الزوار. أما في لغات جانب الخادوم، فستكتب شيء مشابه لهذا [good [time_of_day، وقبل أن يتم إرسال ذلك الأمر إلى المستخدم، سيعالج الخادوم هذه الأمر حتى يعرف ما يضعه في مكان [time_of_day] حسب الوقت الذي دخلت فيه إلى الموقع، فيمكنك أن ترى "Good day" أو "Good evening". لاحظ أن البيانات التي يستقبلها متصفحك تبقى HTML لكن تمت معالجتها في الخادوم مسبقا، ولاحظ أيضا أن الشيفرة السابقة لم تكن شيفرة PHP بل هي مثال فقط لأعطيك فكرة عن آلية عمل هذه اللغة. كما هو الحال مع جميع لغات البرمجة، فالممارسة والتمرين هي التي تجعلك تبرمج بشكل أفضل، فيمكنك تعلم PHP في غضون بضعة أيام لكنك ستجد نفسك أنك لا تملك أية فكرة عن ما الذي تقوم به، لذلك تحتاج إلى تجربة الأشياء وتخريبها وليس الوقوف دون معرفة ما يجري، وكما يقولون الممارسة تولد الإتقان. جافا سكربت ازداد دور جافا سكربت أهمية على الإنترنت، خاصة مع ظهور أدوات مبنية على جافا سكربت مثل Node و Angular. جافاسكربت تستخدم عادة لإضافة وظائف حيوية للمواقع وللتحميل غير المتزامن. سأعطيك مثال على كل واحد منها. فمثلا لو أردت أن يتم إخفاء نموذج بشكل كامل وأن يظهر ببطء داخل lightbox عندما يضغط المستخدم على زر معين، فيمكنك فعل ذلك باستخدام جافا سكربت بما أنه يمكنه التعامل مع تحريك الرسوم (animation) وربما الوظائف الأخرى، مثل التأكد من أنه تم ملئ النموذج بشكل صحيح قبل إرساله. أما التحميل غير المتزامن فيتم عمله عبر آلية تسمى بـ AJAX، فيمكنك استخدام AJAX للحصول على معلومات من الخادوم وعرضها دون إعادة تحميل الصفحة، وأبسط مثال لذلك هو التمرير اللانهائي (endless scrolling) فعندما يتم تحميل 10 مشاركات وتصل إلى نهاية الصفحة فسيتم عرض 10 مشاركات أخرى وتستمر هكذا. الكثير من المطورين تعلموا جافا سكربت من خلال إطار jQuery، فهو يُستخدم على نطاق واسع في ووردبريس وفي ملايين المشاريع على الإنترنت، وعلى الرغم من أن هذا الأمر جيد لكن ضع في اعتبارك أن جافا سكربت هو أكثر من مجرد jQuery وإن تعلم جافا سكربت كما هو هي فكرة جيدة. MySQL إن Mysql هي لغة تُستخدم للوصول والعمل مع البيانات المخزنة في قاعدة البيانات، يستخدم ووردبريس هذه اللغة كثيرا للتعامل مع البيانات، لكن كمطور، لا تحتاج إلى معرفة الكثير لأن ووردبريس يملك مجموعة من الدوال المساعدة. لكن في بعض الحالات الخاصة، قد تحتاج إلى كتابة استعلام قاعدة البيانات بنفسك أو ربما قد ترغب بتحسين شيء في موقعك، لذلك سيفيدك تعلم أساسيات MySQL. إن العمل مع قواعد البيانات واضح للغاية، فالجدول في قاعدة البيانات يشبه كثيرا جداول بيانات Microsoft Excel، فكل عمود يملك عنوانًا وبيانات مخزنة في الأسطر، ونستخدم MySQL لإضافة وحذف وتعديل واسترجاع البيانات، ربما ترغب بكتابة استعلام MySQL يرجع لك جميع المشاركات التي تحتوي على كلمة "awesome" ولديها أكثر من 8 تعليقات، أو قد ترغب أيضا بإيجاد جميع المستخدمين الذين يملكون اسم "Daniel". مرة أخرى، إن كتابة شيفرة MySQL خام في ووردبريس هو أمر نادر، لكنه يحدث في بعض الأحيان، لذلك فإن فهم كيفية عمل اللغة سيساعدك على كتابة شيفرات أفضل بشكل عام أدوات متقدمة بمجرد أن تتعود على الأقل على استخدام ثلاثة اللغات الأساسية - HTML و CSS و PHP - يمكنك البدء باكتشاف العديد من الأدوات المساعدة، واحدة من الأشياء الأولى التي يميل الناس إلى تعلمها هي LESS و/أو SASS، كلاهما "مجموعات موسّعة" (Superset) لـ CSS، أي أن أي شيفرة CSS صحيح تعتبر صحيحة في شيفرة LESS و SASS، وتكمن أهمية إضافة هاتين اللغتين هو إمكانية استخدام متغيرات ودوال و غيرها في CSS، والذي هو غير ممكن بشكل افتراضي. إن أدوات البناء (Build tools) هو شيء سترغب في اكتشافه عند مرحلة معينة، أفضلها Gulp و Grunt فهذان يمكنهما مراقبة تعديلات الملفات وتنفيذ مختلف المهام عند استيفاء المتطلبات، فعلى سبيل المثال، في أي وقت تعدل فيه ملف SASS يمكنك ترجمته تلقائيا إلى CSS وحفظه إلى ملف معين، أو يمكنك تحسين الصور أو دمج الملفات أو تحميل الحزم الخارجية فجميع المهام الأخرى يمكنك أن تفعلها باستخدام هذه الأدوات. سطر الأوامر أو الطرفية (terminal) هو شيء يجب أن تلقي نظرة عليه. نعم إن استخدام سطر الأوامر قد يبدو مخيفا لكنه ليس كذلك، فبمجرد كتابة بضعة أوامر يمكنك حفظ الكثير من الوقت، فسكربت/أداة مثل WP-CLI يمكنه تثبيت ووردبريس في بضعة ثواني، بما في ذلك تثبيت القوالب والمُلحقات والمحتويات للتجربة والتي لو قمت بها بشكل يدوي ستتطلب الكثير من الوقت والجهد. إن أنظمة االتّحكّم في الإصدارات (Version control) هي من الأدوات المفيدة للغاية فلن تعرف حاجتك إليها إلا لو استخدمتها، فعلى الرغم من أنها وُضعت أصلا للعمل على نفس الشيفرة البرمجية في مجموعات إلا أنه يمكنك استخدامها كحل لإدارة المشاريع والمشاكل والنسخ الاحتياطي في نفس الوقت. ويعتبر كل من SVN و Git الأشهر على الإطلاق، لكن بالنسبة لي، أعتبر أن Git أفضل نظرا لأنه يعمل بشكل أفضل وبسبب Github الذي يوفر خدمة استضافة مستودعات Git على الإنترنت. ووردبريس: بوابتك إلى عالم البرمجة إن أفضل شيء بالنسبة إلى ووردبريس أنه يمكن أن يكون مدخلا لتعلم مهارات تطوير ويب ولغات أخرى. ولقد خضت هذه التجربة شخصيا، فلقد تعلمت أولا البرمجة الموجهة في PHP ثم تعلمت إطار عمل Laravel وأدوات البناء ثم LESS/SASS وأدوات سطر الأوامر وغيرها الكثير. ولقد خضت أيضا في غمار native app باستخدام #C وغيرها من اللغات. بمجرد معرفتك بكيفية عمل كل شيء، ستتعلم المزيد عند إنشاء مشاريع جديدة وكبيرة وكل شيء سيصبح أسهل، فبعد البرمجة كائنية التّوجّه في PHP لن تبذل الكثير من الجهد في تعلم #C لأن دماغك سيتعود على منطقه بطريقة مشابه لتعلم قيادة الشاحنات بعد تعلمك قيادة السيارات، فعلى الرغم من وجود الكثير من الاختلافات لكن بمجرد أن يكون لديك بعض الأساسيات سيسهل عليك التّحكمّ فيه. خاتمة ها قد عرفت الآن ما الذي تحتاجه للبدء في تطوير موقع ووردبريس، وقد تشعر بالإرباك، لكن لا تقلق، فالجميع سيشعر بذلك في هذه المرحلة. تذكّر أمرًا: من المهم أن لا تثبط عزيمتك، فجميع المبرمجين بدؤوا من مكان ما، فالكثير منهم كان سيئا للغاية عندما بدأ، يصارع لفهم المفاهيم الجديدة وشعر بالإحباط، لكنهم لم يستسلموا وكانوا دائما يدفعون أنفسهم للتّعلّم وهذا ما يُميّز المبرمج الجيد من السيئ. ترجمة -وبتصرف- للمقال: WordPress Development for Beginners: Getting Started لصاحبه Daniel Pataki والمقال WordPress.org and WordPress.com من موقع wordpress.org. حقوق الصورة البارزة: Designed by Freepik.

إذا كنت مهتمًا في تطوير ووردبريس فمن المؤكد أنك قمت بمحاولة تعديل قوالب ووردبريس سواء من خيارات القالب أو قمت بعمل قالب ابن من أجل تعديلات أكثر. تبعًا لتعريف موقع ووردبريس للقالب: مجموعة من الملفات التي تعمل معًا من أجل تشكيل واجهة للمستخدم. في هذا الدرس سوف نتعلم تطوير قوالب ووردبريس، سنبدأ مع الملفات الأساسية التي تشكل قالب ووردبريس وسوف نتقدم لنتعلم عن الحلقات وملفات ووردبريس الافتراضية، لتتمكن من عرض منشوراتك أو صفحات موقعك. بنهاية هذا الدرس سوف تكون قادرًا على بناء قالب ووردبريس الخاص بك. البداية إذا كنت جاهزًا و تملك نسخة ووردبريس تم تنصيبها على خادم محلي على حاسبك الشخصي، لنبدأ و نتعرف أين مكان القوالب في ووردبريس، توجد قوالب ووردبريس عادة في المسار wp-content/themes إذا ذهبت إلى هذا المسار داخل نسخة ووردبريس المثبتة على حاسبك فستجد عدة قوالب افتراضية من ووردبريس. لنقم بإنشاء قالب ووردبريس جديد. هناك بضع خطوات سهلة للقيام بذلك: أنشئ مجلد جديد في المجلد themes وأعطِه اسمًا مميزًا يشبه التالي my-awesome-theme. والآن في هذا المجلد قم بإنشاء ملفين باسم style.css و index.php الآن قم بفتح ملف style.css وانسخ التالي إليه: /* Theme Name: My Awesome Theme Theme URI: https://myawesometheme.awesome Author: Daniel Pataki Author URI: https://danielpataki.com Description: The theme for my awesome site Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-awesome-theme This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ هذه التفاصيل ستظهر بشكل أوتوماتيكي في قسم تفاصيل القالب في شاشة Appearance->Themes في لوحة تحكم ووردبريس. إذا قمت بزيارة قسم Appearance->Themes سوف ترى قالبك بين القوالب المعروضة وأيضًا يمكنك تفعيله. لكن هذا القالب لا يملك أي تعليمات برمجية لذلك سترى شاشة بيضاء عند تفعيله وسنضيف التعليمات البرمجية قريبًا. كيف تعمل ملفات قوالب ووردبريس تعمل قوالب ووردبريس باستخدام صفحات ووردبريس الافتراضية. لأنها بذلك تقلل عدد الملفات التي نحتاجها لكل موقع مقارنة مع html التي تتطلب بناء صفحة مكررة كثيرة. لكن منذ ظهور php ومعالجتها للملفات على الخادم(server) يمكننا أن نوفر مساحة كبيرة في الملفات فمن الممكن أن يكون ملف واحد مسؤول عن عرض المقال المنشور أو عرض الصفحة ويمكن ل php أن تعرف ماذا نريد وبناء على ذلك تستبدل المعلومات في هذا الملف. ها هو مثال لنرى كيف يعمل ذلك: <!DOCTYPE html> <html> <head> <title>A single post template</title> </head> <body> <div id="site-header"> <h1>Welcome to my site</h1> <nav> <ul> <li><a href=''>Home</a></li> <li><a href=''>About</a></li> <li><a href=''>Contact</a></li> </ul> </nav> </div> <div id="article"> <h2 class="article-title"><?php the_title() ?></h2> <div class="article-content"><?php the_content() ?></div> <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div> </div> <div id="site-footer"> <nav> <ul> <li><a href=''>Home</a></li> <li><a href=''>About</a></li> <li><a href=''>Contact</a></li> </ul> </nav> <div id="copyright">&copy; Daniel Pataki</div> </div> </body> </html> لاحظ أنك لا ترى محتوى ثابت مكتوب في هذه الملف، بدلًا من أن ترى عنوان المقال سترى دالة ()the_title و هي مسؤولة عن إخراج نص العنوان. هذه الدالة تحدد أي مقال تم طلبه حاليًا من خلال رابط الصفحة وتجلب المعلومات المناسبة من قاعدة البيانات لعرضها. وبذلك قمنا بعمل ملف لأي مقال في الموقع، وتأخذ ووردبريس هذه المرحلة إلى مستوى آخر وتقوم بفصل رأس وتذييل الموقع ووضعها في ملفات منفصلة واستدعائها عندما نريدها وليست نسخ رأس وتذييل الموقع كل مرة نحتاجهم فيها: <?php get_header() ?> <div id="article"> <h2 class="article-title"><?php the_title() ?></h2> <div class="article-content"><?php the_content() ?></div> <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div> </div> <?php get_sidebar() ?> <?php get_footer() ?> كيف تعمل قوالب ووردبريس سوف نستعمل مجموعة من ملفات قالب ووردبريس في قالبنا الذي نقوم بصنعه، ما نحتاج لمعرفته هو أسماء الملفات التي تلزمنا لعمل الصفحات الأساسية للموقع وأسماء هذه الملفات محددة في وردبريس من التسلسل الهرمي لملفات قوالب ووردبريس. لنلقي نظرة على أنواع الصفحات التي نحتاجها: الصفحات الأرشيفية مثل (التصنيفات، الوسوم، أرشيفات الوسوم، الناشرين في الموقع) الصفحات الواحدة (المقال الواحد، الصفحة الواحدة، نوع المقال) الصفحة الرئيسية وصفحة كل المقالات صفحة الخطأ صفحة نتائج البحث تسمى هرمية لأن ووردبريس تبحث عن مجموعة من الملفات وتعرض الذي له هرمية أعلى. لنأخذ مثلًا صفحة المؤلف أولاً ووردبريس تبحث عن صفحة باسم هذه المؤلف إذا وجدتها سوف تقوم باستخدامها، لكن إن لم تجدها سوف تقوم بالبحث عن ملف برقم المستخدم وإذا لم تجدها ستتابع البحث عن ملف باسم author.php وإن لم تجده ايضًا ستبحث عن achive.php وإذا فشلت كل المحاولات السابقة سوف تعرض سوف تستخدم ملف index.php والذي هو حتمًا موجود لأنه مطلوب لإنشاء القالب. لاحظ أن ووردبريس تبدأ مع الملفات الخاصة ثم تقوم بالتعميم. وهذا أفضل لأنه يمكنك إنشاء ملف واحد من أجل أن يقوم باستخدامه لعرض المستخدم وهو author.php ولكن ربما تريد عمل ملف خاص لأحد المستخدمين وبذلك يمكنك استخدام اسم المستخدم مثال author-danielpataki.php. لنقم ببناء قالب عند بناء قالب جديد، فمن الأفضل بناء الأساسيات التي سأحتاجها في كل الصفحات. مثل أقسام رأس الموقع(header) وتذييل الموقع(footer). يجب أن يكون ما زال لديك ملفي index.php و style.css اللذان قمنا بإنشائهما، لذا لتبدأ. بناء الأساسيات عادة أقوم بعمل صورة للقالب كي يتم عرضه في لوحة تحكم ووردبريس في تفاصيل القالب. هذ ليس مطلوبًا بشدة عند بناء قالب لكنه يعطيني انطلاقة جيدة وإلهام لما سيكون عليه القالب إذا كان لديك صورة للتصميم فمن الأفضل أن تضعها، أو يمكنك الاستعانة بموقع Unsplash. عندما تحصل على صورة تعجبك، قم بقصها لتصبح بعرض 880px وبطول 660px، قم بتسميتها screenshot.png وضعها في مجلد القالب إذا أردت صورة بسرعة فيمكنك الاستعانة بهذه الصورة التي قم بعملها وتنزيلها من هنا. الخطوة القادمة هي كتابة تعليمات html الأساسية التي ستظهر في كل الصفحات مثل عنصر . لنبدأ بإنشاء ملف header.php داخل هذا الملف سنقوم بلصق تعليمات html كالتالي: <!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> الآن سنقوم بإنشاء ملف footer.php الذي سيحتوي وسوم الإغلاق للوسوم المفتوحة في ملف header.php : <?php wp_footer() ?> </body> </html> يجب أن أشير إلى دالتين هامتين و هما ()wp_head و ()wp_footer . عندما تقوم بإنشاء أي قالب يجب وضع ()wp_head مباشرة قبل إغلاق وسم <head> و دالة ()wp_footer مباشرة قبل إغلاق وسم <body> لأن هذا يساعد ووردبريس و الإضافات التي تنصبها على موقعك بوضع روابط ملفاتهم الخاصة هنا. الآن لنعد إلى ملف index.php إذا قمت بزيارة موقعك فستجد صفحة فارغة. هذا لأن ملف index.php فارغ ولم تقم باستعمال ملفات header.php و footer.php بعد. قم بإضافة التعليمات التالية إلى ملف index.php: <?php get_header() ?> My Awesome Theme <?php get_footer() ?> إذا زرت الصفحة مجددًا فيجب أن ترى عبارة "My Awesome Theme" وإذا اطلعت على الشيفرة المصدرية للصفحة فستجد الكثير من الأشياء هناك وليس عليك القلق بشأنها في الوقت الحالي. والآن من المؤكد بأنك ترغب بإضافة تنسيقات بما أن ملف style.css لا يتم استدعائه بشكل تلقائي، وربما تفكر بإضافة ملف style.css كما كنت تفعل عندما تصميم مواقع html ولكن في ورردبريس لا يجب عليك فعل ذلك أبدًا دع هذا الأمر لووردبريس. أنشئ ملف functions.php وأضف التعليمات التالية: <?php add_action( 'wp_enqueue_scripts', 'mat_assets' ); function mat_assets() { wp_enqueue_style( 'my-awesome-theme', get_stylesheet_uri() ); } التعليمات في ملف functions.php تخبر ووردبريس عن ملفات css الخاصة بك و بعدها تقوم ووردبريس باستدعاء ملفات في مكان وضعك لدالة ()wp_head و هذه هي وظيفة دالة ()wp_head أن تستدعي ملفاتك و بعض ملفات ووردبريس في رأس الموقع. الآن يمكنك تجربة وضع بعض التعليمات في ملف style.css ورؤية النتيجة مثل: body {background:red} قبل المتابعة لنضف بعض التعليمات البسيطة إلى ملفاتنا لتصبح أفضل وأجمل: في ملف header.php: <!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="site-header"> <h1><?php bloginfo('title') ?></h1> </div> <div id='site-content'> في ملف footer.php: </div> <!-- site content --> <div id='site-footer'> <p>&copy; My Awesome Theme</p> </div> <?php wp_footer() ?> </body> </html> في ملف style.css: /* Theme Name: My Awesome Theme Theme URI: https://myawesometheme.awesome Author: Daniel Pataki Author URI: https://danielpataki.com Description: The theme for my awesome site Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-awesome-theme This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ html { height: 100%; background:#444; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.5em; } #site-header { text-align: center; } #site-header h1 { font-size:32px; color: #ffffff; font-weight: 300; letter-spacing: 1px; } #site-content { max-width:625px; background: #fff; margin: 0 auto; padding: 22px; border-radius:5px; } #site-footer { color: #fff; text-align:center; font-size:12px; text-transform: uppercase; } الآن كل صفحة ستقوم بزيارتها في موقع ستبدو نفسها لأننا فقط نملك index.php والذي سترجع إليه ووردبريس عند عدم وجود أي صفحات. فهم حلقة ووردبريس الحلقة هي أساس عمل كل الصفحات في ووردبريس. لأن الحلقة تحوي المعلومات التي ستعرض على الصفحة. ووردبريس تعرف ماذا يجب أن تحتوي كل صفحة، وتعرف هذه من روابط الصفحات مثلًا صفحة المقال الواحد يجب أن تحتوي مقال واحد وصفحتك الرئيسية يجب أن تحتوي أحدث 10 مقالات وهذا كله تعرفه ووردبريس. هذه المعلومات يتم جلبها من قاعدة البيانات بشكل أوتوماتيكي وكل ما عليك القيام به هو تفعيل الحلقة من أجل عرض البيانات من الأفضل شرح هذا بمثال أضف هذه التعليمات إلى ملف index.php: <?php if( have_posts() ) : ?> <?php while( have_posts() ) : the_post() ?> <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2> <div class="content"> <?php the_content() ?> </div> <?php endwhile ?> <?php else : ?> <p>Oh No, there are no posts!</p> <?php endif ?> عندما تنسخ هذه التعليمات وتزور صفحتك الرئيسية ستكتشف قوة ووردبريس وسحر قوالبها، سوف ترى قائمة مقالاتك التي قمت بإضافتها في لوحة تحكم ووردبريس. إذا قمت بالضغط على عنوان المقال سوف تذهب إلى صفحة تعرض لك هذا المقال بالرغم من أنك لم تقم بعمل صفحة للمقال الواحد. لنحلل التعليمات البرمجية ونرى كيف تعمل. كل هذا يبدأ مع عبارة if التي تتحقق من قيمة دالة have_posts(). هذه الدالة ستعيد قيمة true إذا كان هناك مقالات وقيمة false إذا لم يكن هناك مقالات لعرضها. كما ترى من عبارة else إذا لم يكن هناك مقالات فإننا نعرض رسالة للمستخدم بأنه ليس هناك مقالات. إذا كان هناك مقالات فإننا ننشئ حلقة while والتي لن تتوقف عن تنفيذ التعليمات التي بداخلها ما دامت دالة ()have_posts ترجع قيمة true. الدالة الأولى التي نستخدمها هي دالة ()the_post والتي تقوم بإعداد بعض البيانات لنا وتكمل الحلقة بعد ذلك، إذا كنا قد وصلنا للمقال الأخير هذا يعني أن دالة have_posts() ستعيد لنا false في المرة القادمة وبذلك تتوقف الحلقة و يتم تنفيذ التعليمات البرمجية التالية إذا كان هناك تعليمات باقية. عند عرض المقال، قمت بإضافة العنوان والمحتوى الكامل للمقال. لقد قمت باستخدام دالة ()the_permalink للحصول على رابط المقال، دالة ()the_title لعرض العنوان ودالة ()the_content لعرض محتوى المقال كاملًا. هذه الدوال تستخدم داخل حلقات ووردبريس وسوف تحدد المقال المطلوب كما هو متوقع. هكذا يبدو موقعي الآن: من الآن وصاعدًا عرض المقال بطرق مختلفة هي مسألة معرفة الدوال التي تستخدمها ووردبريس وإضافة بعض تعليمات CSS لجعل قالبك رائع، إليك بعض الدوال المفيدة التي تساعدك في عرض التصنيفات، الوسوم، تاريخ المقالات وأكثر من ذلك. القوالب وعبارة if ماذا تفعل إذا أردت عرض مقتطف من المقالات في الصفحة الرئيسية وكامل المقال في حال عرض المقال الواحد؟ في هذه الحالة لديك خيارين استخدام الدوال الشرطية التي توفرها ووردبريس أو عمل ملف قالب جديد. الدوال الشرطية التي توفرها ووردبريس تستخدم للتحقق من أشياء عديدة، على سبيل المثال إذا أردت معرفة إذا كنت تعرض مقال واحد أو عدة مقالات، إليك اللائحة الكاملة لهذه الدوال على موقع ووردبريس بمساعدة دالة ()is_singular يمكننا فعل التالي: <?php get_header() ?> <?php if( have_posts() ) : ?> <?php while( have_posts() ) : the_post() ?> <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2> <div class="content"> <?php if( is_singular() ) : ?> <?php the_content() ?> <?php else : ?> <?php the_excerpt() ?> <?php endif ?> </div> <?php endwhile ?> <?php else : ?> <p>Oh No, there are no posts!</p> <?php endif ?> <?php get_footer() ?> الحل الآخر هو استخدام ملفين منفصلين index.php لعرض مقتطفات من المقالات وملف single.php لعرض المقال كاملًا. من المؤكد أنك تسأل أي طريقة هي الأفضل؟ ليس هناك إجابة واضحة لهذا السؤال لأنه يعتمد بالدرجة الأولى على ما تريد إنجازه. في الواقع، عرض جميع المقالات وعرض المقالة الواحدة مختلف بما يكفي لعمل ملفين منفصلين، ولكن هناك بعض القوالب التي تطبق الطريقتين. وبعض القوالب تذهب أبعد من ذلك وتقوم بإنشاء ملف خاص بالحلقة فقط. لأن هذا سيجعل التعليمات نفسها تستخدم من قبل جميع الصفحات بدلًا من نسخ الحلقة في كل مكان نريد تواجد الحلقة فيه. لنلقي نظرة على ملف index.php المعدل: <?php get_header() ?> <?php if( have_posts() ) { while( have_posts() ) { the_post(); get_template_part( 'template-parts/content', '' ); } } else { get_template_part( 'template-parts/content', 'none' ); } ?> <?php get_footer() ?> قمت بوضع كل محتوى المقال في ملف مختلف. دالة ()get_template_part تجلب المحتوى من ملف وتجمع الوسيط الثاني مع الأول بإضافة “-” للمسار. في حالة الاستدعاء الثاني داخل عبارة else الدالة ستحاول استدعاء ملف template-parts/content-none.php، في الاستدعاء الأول لهذه الدالة تركت الوسيط الثاني فارغًا وهذا سيستدعي template-parts/content.php. في ملف single.php، سأضيف نفس التعليمات ولكن سأضيف كلمة single للوسيط الثاني من دالة ()get_template_part . أخيرًا لنقم بعمل مجلد template-parts وبداخله 3 ملفات: content.php و content-single.php وcontent.php وأقوم بنسخ تعليمات الحلقة المناسبة لكل ملف على سبيل المثال ملف content.php سيبدو كالتالي: <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2> <div class="content"> <?php the_excerpt() ?> </div> غطينا في هذا الدرس ما يكفي لعمل قالب بسيط، وهذا سيمكّنك من عرض مقالاتك بالطريقة التي تعجبك بتنسيقاتك الخاصة. ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Themes لصاحبه Daniel Pataki

تحدثنا في الدرس السابق مُقدّمة إلى تطوير قوالب ووردبريس حول إنشاء قالب ووردبريس بسيط، واليوم سنقوم بإكمال العمل عليه لعرض أرقام الصفحات أو عرض رابطيّ السابق والتالي للتنقل بين الصفحات والوصول إلى جميع المقالات ضمن المدوّنة. عند وجود عدد كبير من المقالات في المدوّنة، فلن يتم عرضها جميعاً في صفحة واحدة، بل يتم تقسيمها على عدد من الصفحات، بشكل افتراضي يتم عرض 10 مقالات في الصفحة الرئيسية أو الأرشيف (تصنيف أو وسم)، ويمكن تغيير رقم المقالات في الصفحة الواحدة من لوحة التحكم. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس (هذا الدرس) إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس Pagination تقدّم ووردبريس دالّة مخصّصة لعرض أرقام الصفحات هي ()paginate_links. سنقوم بالاطلاع على كيفية استخدامها وخياراتها، وننوه بوجود طرق أخرى لعرض أرقام الصفحات، مثل إضافة WP-PageNavi. يتم استخدام الدالّة بهذه الطريقة: <?php echo paginate_links($args);?> حيث متحول args$ هو مصفوفة تحوي إعدادات مخصصة لهذه الدالّة، يمكن أن نستخدم الإضافة دون تمرير هذا المتحول، أو يمكن أن تكون قيمة هذه المتحول هي بعض من الإعدادات الخاصة بالدالّة وليس جميعها. الإعدادات الكاملة هي كالتالي بقيمها الافتراضية: <?php $args = array( 'base' => '%_%', 'format' => '?page=%#%', 'total' => 1, 'current' => 0, 'show_all' => False, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => True, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'type' => 'plain', 'add_args' => False, 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' ); ?> يمكننا أن نضع بعض هذه الإعدادات في المتحول، وتقوم ووردبريس بمعالجة الإعدادات التي نقدّمها للدالّة، بحيث تضيف للإعدادات المُدخلة ما يكملها من الإعدادات الافتراضية. سنقوم الآن باستخدام هذه الدالّة ورؤية كيف تظهر الروابط دون وجود إعدادات للدالّة، نضع ما يلي في نهاية ملف index.php فيصبح: <div class="row"> <div class="medium-12 columns"> <?php echo paginate_links(); ?> </div> </div> </div> <?php get_sidebar(); ?> عندما نقوم بزيارة الصفحة الرئيسية للمدونة، نجد أن روابط أرقام الصفحات تظهر بشكل مشابه لهذه الصورة: سنرى في الفقرة التالية كيف يمكن تخصيص ظهور هذه الروابط. إضافة Style جديد سنحتاج إلى إضافة Style جديد إلى القالب الذي نقوم باستخدامه، وذلك لكي تظهر أرقام الصفحات بشكل يتناسب مع باقي القالب. قد يتبادر للذهن في البداية أن يتم استخدام النسخ واللصق لإضافة Style جديد إلى ملف css الرئيسي. رغم أن هذا ممكن ويؤدي الغرض المطلوب، إلا أن الطريقة الأفضل هي استخدام دالّة تدعى wp_enqueue_style. 1. إضافة دالّة ()wp_head إلى ملف header.php قبل إغلاق وسم </head> نقوم بإضافة السطر التالي: <?php wp_head();?> وهي دالّة مهمة جداً في أي قالب ووردبريس، حيث تقوم ووردبريس (والعديد من الإضافات) باستخدام هذه الدالّة سواءً لإضافة ملفات الشكل (CSS) أواستدعاء ملفات جافاسكريبت أو حتى إضافة وسوم إضافية تتعلق بـ SEO. قمنا بإضافة دالّة wp_head ﻷننا نريد استخدام دالّة ()wp_enqueue_style التي ستقوم بإدراج وسم HTML لاستيراد ملف CSS جديد. 2. إضافة ملف CSS الجديد نقوم بإنشاء ملف جديد هو custom.css، وهو الذي سنقوم باستدعاءه من خلال دالّة ()wp_enqueue_style. نقوم بنسخ ولصق محتوى هذا الرابط ونضعه ضمن ملف custom.css الذي أنشأناه، وهو ما سيقوم بإضافة الشكل المناسب ﻷرقام الصفحات في القالب. 3. استخدام دالّة ()wp_enqueue_style لنقم بفتح ملف functions.php من ملفات القالب، ولنضف عليه ما يلي: // Enqueue custom style add_action('wp_enqueue_scripts', function() { wp_enqueue_style('custom-pagination', get_template_directory_uri() . '/custom.css'); }); ما قمنا بفعله هو أننا أخبرنا ووردبريس أن تنفذ دالّة ()wp_queue_style عند وصول دورة تنفيذ ووردبريس إلى الحدث (action) المُسمّى wp_enqueue_scripts وهو المسؤول عن ترتيب وتنسيق وطباعة ملفات جافاسكريبت و CSS وتحليل متطلبات كل ملف -إن وجدت له متطلبات-، وفي النهاية يتم استخدام الملف/الملفات المطلوبة بعد أن يتم طلب جميع متطلباتها. الآن إن قمنا بفتح المصدر الخاص بالصفحة الرئيسية من المتصفح، نجد أن المصدر أصبح يحوي شيئاً مشابهاً لما يلي: <link rel='stylesheet' id='custom-pagination-css' href='http://localhost:8000/wp-content/themes/my_theme/custom.css?ver=4.1' type='text/css' media='all' /> وهو استدعاء ملف CSS خاص، الذي أردنا وجوده قبل البدء بعرض إرقام الصفحات. لننظر الآن كيف تبدو أرقام الصفحات: أجمل بكثير من سابقتها أليس كذلك؟ شرح إعدادات دالّة paginate_links كما أسلفنا، يمكن أن نمرر جزءًا من الإعدادات ويمكن ألا نمرر أي شيء على الإطلاق، فتقوم ووردبريس باستخدام الإعدادات الافتراضية التي أوردناها في الأعلى. base (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: %_% تُستخدم للإشارة إلى الرابط، الذي سيتم استخدامه لإنشاء روابط الصفحات. في رابط مثل: http://example.com/all_posts.php%_% يتم استبدال القيمة الافتراضية: %_% بقيمة format التي سنتحدث عنها في الفقرة التالية. format (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: ?page=%#% تُستخدم كهيكل للصفحات. في حال كنا نريد أو كنا نستخدم عناوين نظيفة (pretty permalinks) ستكون القيمة هي /page/%_%، حيث تعبير %_% يتم استبداله برقم الصفحة. total (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 1 مجموع عدد الصفحات، عند استخدام دالّة ()paginate_links داخل حلقة ووردبريس، تكون القيمة الافتراضية تساوي خاصّية max_num_pages$ في WP_Query. current (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 0 رقم الصفحة الحالية. show_all (القيمة اختيارية)، نوعها قيمة منطقية (true أو false). القيمة الافتراضية: false إذا كانت القيمة true عندها سيتم إظهار جميع الصفحات بدلاً من قائمة قصيرة من الأرقام المجاورة لرقم الصفحات الحالية. بشكل افتراضي هذا الخيار تكون قيمته false ويتم التحكم به عن طريق الخيارين end_size و mid_size. end_size (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 1 عدد الأرقام عند بداية ونهاية أطراف القائمة. mid_size (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 2 عدد الأرقام على جانبيّ الصفحة الحالية، (مع ملاحظة أن الرقم لا يشمل الصفحة الحالية). prev_next (القيمة اختيارية)، نوعها قيمة منطقية (true أو false). القيمة الافتراضية: true لتحديد إن كنا نريد روابط التالي والسابق أن يتم استخدامها في القائمة أم لا. prev_text (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: __('« Previous') حيث __() هي دالّة مسؤولة عن الترجمة. نص رابط الصفحة السابقة، تعمل فقط إن كان الخيار السابق (prev_next) فعّالاً (قيمته true). next_text (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: __('Next »') حيث __() هي دالّة مسؤولة عن الترجمة. نص رابط الصفحة التاية، تعمل فقط إن كان خيار (prev_next) فعّالاً (قيمته true). type (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: ‘plain’ تتحكم بشكل القيمة التي تقوم الدالّة بإرجاعها. القيمة الممكنة هي: plain: تكون القيمة التي يتم ارجاعها عبارة عن سلسلة نصّية مؤلفة من روابط مفصول بينها بمحرف السطر الجديد. array: تكون القيمة التي يتم ارجاعها عبارة عن مصفوفة من روابط الصفحات لتوفّر تحكم كامل بكيفية الظهور. list: تكون القيمة التي يتم ارجاعها عبارة عن قائمة HTML غير مرتّبة (ul). add_args (القيمة اختيارية)، نوعها مصفوفة. القيمة الافتراضية: false مصفوفة اسمية من المحددات ليتم إضافتها إلى الرابط، تكون المصفوفة على شكل: اسم => قيمة. add_fragment (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص لتتم إضافته إلى نهاية كل رابط بشكل مباشر (يمكن تمرير متحولات GET عن طريق هذا الخيار، بشكل يشبه خيار add_args لكن على شكل سلسلة نصية بدلاً من مصفوفة). before_page_number (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص ليتم إظهاره قبل كل رقم صفحة (النص وليس الرابط). after_page_number (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص لتتم إضافته بعد رقم الصفحة (النص وليس الرابط). أزرار التالي والسابق قد يفضّل البعض استخدام أزرار "التالي" و"السابق" بدلاً من أرقام الصفحات، أو ربما يتطلب القالب الذي يعملون عليه هذه الأزرار. تقدّم ووردبريس دالّة واحدة لعرض الرابطين معاً (التالي - السابق) هي: posts_nav_links. لنقم بوضع هذه الدالّة بدلاً من دالّة إظهار أرقام الصفحات التي تحدثنا عنها سابقاً: <?php posts_nav_link(); ?> يصبح القالب بهذا الشكل: يمكن أن تأخذ الدالّة ثلاثة محددات كلها اختيارية، هي: sep$: (سلسلة نصية)، يمثل النصّ المعروض بين الرابطين. القيمة الافتراضية: ' — ' prelabel$: (سلسلة نصية)، اسم رابط الصفحة السابقة. القيمة الافتراضية: '« Previous Page' nxtlabel$: (سلسلة نصية)، اسم رابط الصفحة التالية. القيمة الافتراضية: 'Next Page »' لنقم معاً بتعديل هذه الإعدادات لتصبح كالتالي: <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> تظهر لنا التعديلات في القالب كما يلي: ما رأيكم لو نختم الدرس بخدعة بسيطة، نقوم من خلالها بجعل روابط التالي السابقة تظهر بشكل مشابه لأرقام الصفحات؟ سأخبركم بتلميح: تكمن الخدعة بالاستفادة من المحدد الأول sep$. لنضع في البداية وسم ul محيطاً بدالّة ()posts_nav_links يأخذ نفس صنف CSS الموجود في أرقام الصفحات كما يلي: <ul class="page-numbers"> <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> </ul> الآن نريد إحاطة كِلا الرابطين بوسم li لكل رابط، يمكن أن نضع داخل وسم ul بداية وسم li ونضع قبل إغلاق وسم ul وسم إغلاق وسم li، فيصبح المصدر كالتالي: <ul class="page-numbers"> <li> <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> <li> </ul> ما فعلناه حتى الآن أننا أحطنا كلا الرابطين بوسم li واحد، لكننا نريد أن نحيط كل واحد من الرابطين بوسم مستقلّ، سنقوم باستبدال المحدد الأول $sep بـ: </li><li>. بما أن محتوى هذا المحدد سيكون بين الرابطين بشكل دائم، فسنضع فيه إغلاق وسم li الأول يليه بداية وسم li الثاني. فيصبح المصدر: <ul class="page-numbers"> <li> <?php posts_nav_link('</li><li>', '&laquo; السابق', 'التالي &raquo;'); ?> <li> </ul> يصبح شكل الروابط كالصورة التالية: خلاصة تعرّفنا خلال الدرس على كيفية إضافة أرقام الصفحات أو روابط التالي-السابق بحيث يتم استخدامها للتنقل بين صفحات الموقع. كما تعرفنا بشكل بسيط على كيفية إضافة ملف CSS جديد باستخدام دالّة ()wp_enqueue_style.

في الوقتِ الذي تكبر فيه إدارة الأعمال على الإنترنت بشكلٍ كبير، يتزايد عددُ العملاء الرّاغبين في دفع مبالغ كبيرة من المالِ للأشخاص الذين يمتلكون مهارةَ بناءِ المواقع. ربّما تكون قد تعلَّمت طريقة بناء موقعٍ بواسطة 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

مرّ معنا أثناء إضافة أرقام الصفحات كيف أضفنا ملف CSS جديد عن طريق وضع بضعة أسطر في ملف functions.php في ملفات القالب. سنتناول في هذا الدرس الشرح التفصيلي لهذه الآلية، وهي الطريقة الآمنة لإضافة ملفات JavaScript و CSS. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس (هذا الدرس) ما المقصود بالصف؟ هو وضع الملف في صفّ/دور/طابور (queue) لتقوم ووردبريس بمعالجته لاحقاً. تخيل أنك تضع الملف في دور/طابور شراء جهاز آي فون جديد مثلاً! وعندما يحين موعد عرض الملفات، تقوم ووردبريس بمعالجة الصفّ ومتطلبات كل ملفّ فيه، ثم إعادة ترتيب الصف حسب المتطلبات، وأخيراً عرض الملفات في مكانها المناسب مع متطلباتها. الخطوات العامة سنعرض الآن الخطوات بشكل عام، ثم تفصيلها وطريقة استخدامها في الفقرة اللاحقة. لصفّ ملفٍّ ما، سواء كان ملف JavaScript أو CSS نحتاج إلى: استخدام الحدث (action) المناسب. تسجيل الملف المراد استخدامه؛ حيث يجب استخدام معرّف (handle) للملف، مسار الملف، ويمكن تحديد متطلباته (dependencies) إن وُجدت. صفّ الملف (enqueue)؛ باستخدام المعرّف المُستخدم أثناء تسجيل الملف. تسجيل وصف ملفات CSS تسجيل ملف CSS لتسجيل ملفٍّ جديد نقوم باستخدام دالّة wp_register_style، يمكن للدالّة أن تقبل المحدّدات التالية: handle$: مطلوب، هو المعرّف الخاص بالملف، الذي سيتم استخدامه عند صفّ الملف (enqueue). src$: مطلوب، هو رابط (URL) ملف CSS المطلوب تسجيله، مثل:http://example.com/css/mystyle.css، لكن يجب ألا يتم استخدام الرابط بهذا الشكل، بل يجب أن يكون أكثر مرونة (التفصيل في الملاحظة بعد نهاية الفقرة). deps$: مصفوفة من المعرّفات، التي تمثّل متطلبات الملف الذي نقوم بتسجيله، كي يتم صفّها قبل صفّ الملف المُسجَّل. القيمة الافتراضية: مصفوفة فارغة ()array. ver$: إصدار الملف المُسجَّل، تقوم ووردبريس بوضعه كرقم بعد رابط الملف، على الشكل:custom.css?ver=123، إن لم يتم وضع قيمة لهذا المحدّد، فسيتم وضع إصدار ووردبريس الحالي بدلاً منه، لعدم وضع أي رقم نضع قيمة المحدّد null. القيمة الافتراضية:false. media$: قيمة حقل media الذي سيتم استخدامه مع وسم <link> أثناء صفّ الملف، القيمة الممكنة: all، screen، handheld، print. القيمة الافتراضية هي all. ملاحظة هامة: عند تسجيل أو صفّ الملفات، يجب أن تكون الروابط مرنة، أي أن يتم استبدال اسم الموقع/النطاق عن طريق دوالّ ووردبريس. مثال خاطئ: add_action( 'wp_enqueue_scripts', 'register_invalid_style' ); function register_invalid_style() { wp_register_style( 'my-invalid-style', 'http://localhost/wp-content/themes/my-theme/css/custom.css' ); } هل لاحظتم أنني وضعت المسار كاملاً؟ ترى هل سيعمل الرابط السابق إن قمنا باستخدام القالب على موقع على الإنترنت بدلاً من الموقع المحلّي؟ بالتأكيد لا! مثال صحيح: add_action( 'wp_enqueue_scripts', 'register_valid_style' ); function register_valid_style() { wp_register_style( 'my-valid-style', get_template_directory_uri() . '/css/custom.css' ); } تكون النتيجة في المتصفح مشابهة للتالي: <link rel='stylesheet' id='my-valid-style-css' href='http://localhost:8000/wp-content/themes/my-theme/css/custom.css?ver=4.2' type='text/css' media='all' /> تقوم دالّة ()get_template_directory_uri بإرجاع رابط القالب الفعّال (active)، مثلاً: http://example.com/wp-content/themes/my-theme، بحيث يكون اسم النطاق حسب الموقع الحالي، ثم يقوم المطوّر بإضافة مسار الملّف الذي يريده بعد رابط القالب الفعّال. إن أردنا تسجيل وصفّ الملفات ضمن الإضافات بدلاً من القوالب، نقوم باستخدام دالّة ()plugins_url بدلاً من الدالّة السابقة الخاصة بالقوالب. صف ملف CSS لصفّ ملف CSS نستخدم دالّة wp_enqueue_style، محدّدات الدالّة هي نفسها محدّدات دالّة wp_register_style، باستثناء: محدّد handle$ هو المحدد الوحيد المطلوب في حال استخدامنا لمعرّف ملف مُسجّل مسبقاً. محدد src$ غير مطلوب في حال نقوم باستخدام معرّف لملف مُسجّل مسبقاً، ومطلوب إن كنا نريد استخدام الدالّة لصفّ ملفّ غير مسجّل. فعوضاً عن تسجيل الملف بدالّة منفصلة ثم صفّه بدالّة أخرى، نقوم بصفّه مباشرة في هذه الدالّة. مثال عن صفّ ملف مسجّل مسبقاً: add_action( 'wp_enqueue_scripts', 'enqueue_style' ); function enqueue_style() { wp_enqueue_style( 'my-valid-style' ); } مثال عن صفّ ملف جديد دون تسجيل: add_action( 'wp_enqueue_scripts', 'register_enqueue_style' ); function register_enqueue_style() { wp_enqueue_style( 'my-valid-style', get_template_directory_uri() . 'my-theme/css/custom.css' ); } نلاحظ أننا في المثال الثاني استخدمنا دالّة wp_enqueue_style بشكل مماثل لدالّة wp_register_style. الفرق الرئيسي بين الطريقتين، أن الأولى تسمح لنا باستخدام الملف المُسجل في عدة أماكن، وتتيح مرونة أكبر بالتعامل مع الملفات. إلغاء صفّ أو إلغاء تسجيل ملف CSS قد نحتاج لإلغاء صفّ ملف، أو إلغاء تسجيله (كما سنرى في نهاية المقال)، تتيح ووردبريس دالّتين لهذين الغرضين هما: wp_dequeue_style لإلغاء صفّ ملف و wp_deregister_style لإلغاء تسجيل ملف. في كلا الدالّتين نقوم بتمرير محدّد واحد هو المعرّف الخاص بالملف الذي نريد إلغاء صفّه أو إلغاء تسجيله، لإلغاء صفّ إطار عمل Bootstrap مثلاً، نضع الأسطر التالية في ملف functions.php: add_action( 'wp_enqueue_scripts', 'dequeue_bootstrap' ); function dequeue_bootstrap() { wp_dequeue_style( 'bootstrap' ); } تسجيل وصفّ ملفات جافاسكريبت آلية تسجيل وصفّ ملفات جافاسكريبت هي مماثلة جداً للتعامل مع ملفات CSS، مع بعض الفروقات البسيطة التي سنستعرضها الآن. تسجيل ملف جافاسكريبت نقوم باستخدام دالّة wp_register_script، التي تقبل المحدّدات التالية: handle$: مطلوب، هو المعرّف الخاص بالملف، الذي سيتم استخدامه عند صفّ الملف (enqueue). src$: مطلوب، هو رابط (URL) ملف جافاسكريبت المطلوب تسجيله، مثل:http://example.com/js/myscript.js، لكن يجب ألا يتم استخدام الرابط بهذا الشكل، بل يجب أن يكون مرناً باستخدام ()get_template_directory_uri. deps$: مصفوفة من المعرّفات، التي تمثّل متطلبات الملف الذي نقوم بتسجيله، كي يتم صفّها قبل صفّ الملف المُسجَّل. القيمة الافتراضية: مصفوفة فارغة ()array. ver$: إصدار الملف المُسجَّل، تقوم ووردبريس بوضعه كرقم بعد رابط الملف، على الشكل:custom.js?ver=123، إن لم يتم وضع قيمة لهذا المحدّد، فسيتم وضع إصدار ووردبريس الحالي بدلاً منه، لعدم وضع أي رقم نضع قيمة المحدّد null. القيمة الافتراضية: false. in_footer$: بشكل افتراضي يتم صفّ ملفات جافاسكريبت وملفات CSS ضمن وسم <head>، لكن يمكن بوضع قيمة هذا المحدد true أن يتم صفّ ملفات جافاسكريبت في نهاية المستند، قبل إغلاق وسم <body/>، وهو الأفضل للأداء بالنسبة لزوار الموقع. القيمة الافتراضية: false. ملاحظة: صفّ ملفّات جافاسكريبت و CSS يتطلب وجود خطّاف ()wp_head ضمن القالب، وصفّ ملفات جافاسكريبت مع محدّد in_footer$ بقيمة true يتطلب وجود خطّاف ()wp_footer في القالب، قبل إغلاق وسم <body/>. صفّ ملف جافاسكريبت الاستخدام مشابه تماماً لصفّ ملف CSS، لكنه يتم عن طريق دالّة wp_enqueue_script، والتي تشابه بمحدداتها دالّة التسجيل wp_register_script. الفرق بين محددات دالة الصفّ ودالّة التسجيل الخاصة بملفات جافاسكريبت هي كالفرق بين محددات دالة الصف والتسجيل الخاصة بملفات CSS. محدّدات دالّة wp_enqueue_script هي نفسها محدّدات دالّة wp_register_script، باستثناء: محدّد handle$ هو المحدد الوحيد المطلوب في حال نقوم باستخدام معرّف لملف مُسجّل مسبقاً. محدد src$ غير مطلوب في حال نقوم باستخدام معرّف لملف مُسجّل مسبقاً، ومطلوب إن كنا نريد استخدام الدالّة صفّ ملفّ غير مسجّل. فعوضاً عن تسجيل الملف بدالّة منفصلة ثم صفّه بدالّة أخرى، نقوم بصفّه مباشرة في هذه الدالّة. إلغاء صفّ أو إلغاء تسجيل ملف جافاسكريبت طريقة إلغاء صفّ أو إلغاء تسجيل ملف جافاسكريبت هي مشابه للطريقة في ملفات CSS، لكن باستخدام دالّتي: wp_deregister_script و wp_dequeue_script. أمثلة وحالات استخدام بالمثال يتضح المقال، سنمرّ معاً على أربعة أمثلة وحالات استخدام لنرى من خلالها كيف يمكننا التعامل ثم الاستفادة من تسجيل وصفّ ملفات JavaScript و CSS: 1. عند استخدام إضافة رديئة الجودة لنفرض لسبب ما أنك تستخدم إضافة رديئة -لا تتبع المعايير ولا تستخدم أحد الإصدارات من المكتبات-، تتطلب هذه الإضافة وجود إصدارٍ قديم من مكتبة jQuery، بينما قالبك يستخدم الإصدار اﻷحدث منها. هل من المنطقي وجود نسختين من المكتبة في القالب؟ بالتأكيد لا. لحلّ هذه المشكلة نحن أمام ثلاثة خيارات: إن كانت الإضافة ليست رديئة الجودة كثيراً، وتقوم بصفّ مكتبة jQuery، فهذا شيء جيّد، يمكننا ببساطة إلغاء المكتبة من الصفّ وتنتهي المشكلة. إن كانت الإضافة رديئة كما وصفناها ولا تقوم بصفّ مكتبة jQuery، عندها يجب على المطوّر أن يقوم بالتعديل على ملفات الإضافة يدوياً لإلغاء تحميل مكتبة jQuery. وهناك احتمال كبير أن المطور سينسى التعديل الذي قام به، ومع مرور الأيام يقوم بتحديث الإضافة إلى إصدار جديد ويذهب التحديث اليدويّ الذي قام به! أو إن كان ذو ذاكرة قوية، سيقوم بالقيام بالتعديل اليدوي ذاته في كل مرة يظهر إصدار جديد من الإضافة. لكم أن تتخيلوا المعاناة التي ستصبح على كاهل المطوّر. الخيار الثالث والأسرع هو القيام بحذف هذه الإضافة رديئة الجودة والبحث عن واحدة أفضل منها تتبع المعايير والقواعد وتستخدم أحد الإصدارات من ملفات JavaScript و CSS. الخيار الثالث هو الأفضل لتقليل استخدام مسكنات ألم الرأس. من المهم اتباع المعايير والقواعد المتفق عليها حتى لا يقع المطوّر في الحُفر التي وُضعت تلك المعايير والقواعد من أجل تلافيها. 2. استخدام المكتبات الموجودة في ووردبريس ربّما حدّثتك نفسك في أحد الأيام أن تستعرض ملفات ووردبريس وترى محتواها، إنْ حدث ذلك فلا بدّ أنك رأيت الكثير من مكتبات جافاسكريبت مثل jQuery، jQuery UI، Backbone وغيرها. إن كانت هذه الملفات موجودة ضمن ووردبريس، فلمَ لا نقوم باستخدامها عند الحاجة إليها؟ لو كان القالب يحتاج إلى مكتبتيّ jQuery و jQuery UI فبدلاً من تحميل نسخة من كل مكتبة من الإنترنت ثم وضعها ضمن ملفات القالب واستخدامها، يمكننا بشكل مباشر استخدام نسخة jQuery و jQuery UI الموجودتان ضمن ووردبريس. بهذا نضمن الحصول على إصدار حديث من المكتبة يأتي مع كل تحديث لووردبريس بالإضافة لعدم التكرار (Don’t Repeat Yourself). من المكتبات الشهيرة المضمّنة في ووردبريس: jQuery jQuery UI Backbone jQuery Suggest Thickbox TinyMCE Underscore للاطلاع على كامل القائمة يمكن زيارة صفحة التوثيق. 3. استخدام jQuery بشكل مباشر من شبكة توصيل المحتوى (CDN) لا بدّ أنك سمعت بشبكة توصيل المحتوى (Content Delivery Network). تعريفها على ويكبيديا: هي مجموعة من الخوادم المتزامنة والموزعة والموجودة على الشبكة في أماكن جغرافية مختلفة، تحتوي على نسخ من البيانات. فالعميل يحصل على البيانات من الخادم الموجود في أقرب موقع جغرافي، بغرض تقليل التأخير الناتج في نقل البيانات. هناك موقع مخصص لاستخدام مكتبات JavaScript عن طريق شبكات توصيل المحتوى هو jsDelivr، سنقوم باستخدام رابط مكتبة jQuery منه (//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js) لنقوم بصفّها واستخدامها ضمن القالب، عوضاً عن استخدام النسخة المتضمنة في ملفات ووردبريس. للقيام بهذا نحتاج لوضع الأسطر القليلة التالي في ملف functions.php الخاص بقالبنا: add_action( 'wp_enqueue_scripts', 'register_jquery' ); function register_jquery() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', ( '//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js' ), false, null, true ); wp_enqueue_script( 'jquery' ); } قمنا بإلغاء تسجيل jQuery (كانت مسجلة مع الملف المتضمَّن في ووردبريس)، ثم قمنا بتسجيلها مع رابط الملف من شبكة توصيل المحتوى (CDN)، وأخيراً قمنا بصفّها (enqueue) ليتم إدراجها في القالب. 4. صفّ ملف جافاسكريبت يعتمد على jQuery في معظم الحالات نحتاج في القوالب لإضافة جافاسكريبت، سواء لإضافة حركات معيّنة أو لتعديل شيءٍ ما، وبسبب شهرة مكتبة jQuery فمعظم المطورين يعتمدون عليها كقاعدة أساسية لبناء ملفات جافاسكريبت الخاصة بقوالبهم. على فرض أن الملف الذي نريد إضافته يعتمد على مكتبة jQuery وهو موجود مع ملفات القالب في المسار: js/custom.js، لصفّ هذا الملف نقوم بإضافة الأسطر التالية إلى ملفfunctions.php: add_action( 'wp_enqueue_scripts', 'enqueue_custom_js' ); function enqueue_custom_js() { wp_register_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js', ['jquery'] ); wp_enqueue_script( 'my-custom-js' ); } قمنا بتسجيل الملف الذي نريد صفّه، ولنلاحظ كيف حدّدنا متطلبات الملف ضمن مصفوفة، يعتمد الملف على مكتبة jQuery فقط. ثم قمنا بصفّه باستخدام المعرّف الذي استخدمناه أثناء تسجيل الملف. تكون النتيجة في المتصفح مشابهة للتالي: <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js?ver=4.2"></script> <script type="text/javascript" src="http://localhost:8000/wp-content/themes/my-theme/js/custom.js?ver=4.2"></script> ونلاحظ أن ووردبريس قامت بصفّ مكتبة jQuery قبل الملف الذي قمنا بتسجيله، وذلك كي يقوم المتصفح بقراءة ملف المكتبة في البداية وتكون متوفرة للاستخدام، وعند قراءة المتصفح للملف الخاص يمكن للملف استخدام مكتبة jQuery بعد أن أصبحت متوفرة. تمرير متغيّرات من PHP للجافاسكريبت ماذا لو أردنا استخدام متغيّرات ما ضمن جافاسكريبت؟ قد يتهيؤ للبعض أن يقوم بعمل طلب AJAX أو وضع ما يريد استخدامه في جافاسكريبت بداخل ملف خارجي. قد تعمل هذه الحلول، لكنها لن تجدي نفعاً إن أردنا تمرير متغيّرات تتبدّل قيمتها باستمرار كأن تكون من قاعدة البيانات مثلاً. توفّر ووردبريس حلّاً سهلاً ومناسباً لهذه المشكلة، وذلك باستخدام دالّة wp_localize_script، اسم الدالّة قد يوحي أنها مخصصة للترجمة، لكن يمكن استخدامها لتمرير جمل الترجمة وأي نوع آخر من المتغيّرات إلى جافاسكريبت. محددات الدالّة هي: - handle$: معرّف لملف جافاسكريبت الذي نريد تمرير المتغيّرات له، يجب أن يكون الملف مسجّلاً قبل استخدام الدالّة. - name$: اسم متغيّر جافاسكريبت الذي سيتم وضع البيانات بداخله. - data$: مصفوفة المتغيّرات التي نريد تمريرها إلى جافاسكريب. مثال: لنقم بتمرير متغيّرين هما سلسلة نصية ورقم إلى ملف جافاسكريبت ذو المحدد my-custom-js: add_action( 'wp_enqueue_scripts', 'enqueue_custom_js' ); function enqueue_custom_js() { wp_register_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js', ['jquery'] ); $translation_array = array( 'some_string' => 'A String to be using inside JS', 'a_value' => '10' ); wp_localize_script( 'my-custom-js', 'object_name', $translation_array ); wp_enqueue_script( 'my-custom-js' ); } كي نصل إلى المتغيّرات من داخل ملف custom.js، نستخدم شيئاً مشابهاً: alert( object_name.some_string); يجب أن تظهر رسالة تنبيه (Alert) بداخلها النصّ الذي استخدمناه. صفّ الملفات في لوحة التحكم كل ما مرّ معنا من تسجيل وصفّ الملفات هو خاص بواجهة الموقع (Front-end)، أي الذي يراه الزوار. إن أردنا تسجيل وصفّ الملفات في لوحة التحكم (Dashboard) يمكننا ذلك بنفس الطريقة، لكن باستبدال حدث wp_enqueue_scripts بحدث: admin_enqueue_scripts. مثلاً لصفّ مكتبة jQuery Suggest في لوحة التحكم (المكتبة معرّفة مسبقاً في ووردبريس)، نستخدم الأسطر التالية: add_action( 'admin_enqueue_scripts' , 'enqueue_jquery_suggest' ); function enqueue_jquery_suggest() { wp_enqueue_script( 'suggest' ); } ملاحظة: من المناسب وضع شروط معيّنة قبل صفّ الملفات وقصرها على صفحاتٍ معينة، كي لا يتم وضع الملف في كل صفحات لوحة التحكم. الخاتمة تعرّفنا على كيفية صفّ ملفات JavaScript و CSS، هذه الآلية تسهّل كثيراً تنظيم الملفات والتعامل معها، ويجب الحرص على استخدامها بشكل دائم، فهي من المعايير والأشياء المتعارف عليها في تطوير قوالب وإضافات ووردبريس. أرجو أن يكون الشرح واضحاً ومفيداً، إن كان لديكم سؤال أو فكرة فلتشاركونا إياها في التعليقات.

بعد أن تطرّقنا في هذه السّلسلة حول أساسيات تطوير قوالب ووردبريس إلى تحويل صفحة HTML إلى قالب ووردبريس ثم إلى كيفية إضافة Pagination (أو ما يُعرف بالتّصفيح) إليها، سنتطرّق اليوم إلى خاصّيّة أخرى لا تقل أهمّية. قوائم التنقّل (Navigation Menu) هي إحدى ميزات القوالب، توفّر ووردبريس طريقة سهلة للتحكم بالقوائم المخصصة للقالب من داخل لوحة تحكم ووردبريس، وكل ما تحتاجه هو إضافة بضعة أسطر برمجية لتضيف دعم القوائم في قالبك. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس (هذا الدرس) صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس تسجيل القوائم بدايةً في ملف functions.php ضمن ملفات القالب نحتاج لإضافة دالّة تقوم بتسجيل أسماء القائمة (أو القوائم) التي تريد إضافتها. كالتالي: add_action('init', function() { register_nav_menu('our-custom-menu', 'القائمة الرئيسية'); }); بعد ذلك يمكن التأكد من صحة إضافة القائمة عن طريق الذهاب من لوحة التحكم إلى المظهر (Appearance) ثم القوائم (Menus)، ستظهر لدينا قائمة باسم القائمة الرئيسية في تبويب إدارة موضع القوائم. تأخذ دالّة register_nav_menu محدّدين هما: المكان (Location) والوصف (Description). محدّد المكان يستخدم كمعرّف للقائمة، حيث يتم طلب محتوى القائمة ضمن ملفات القالب عن طريق محدّد المكان (location) الذي قمنا بتعيينه أثناء تسجيل القائمة. في حالتنا قمنا بوضع قيمة المحدد هي: our-custom-menu. والوصف يتم استخدامه عند عرض القائمة في لوحة التحكم ليكون أنسب وأسهل للقراءة من محدد المكان، في حالتنا قمنا بوضع قيمة الوصف هي: القائمة الرئيسية. يمكننا تسجيل أكثر من قائمة في آن واحد عن طريق استخدام دالّة register_nav_menus التي تستخدم بشكل مشابه لدالّة register_nav_menu لكن المحدّدات تكون على شكل مصفوفة اسميّة (Associative Array)، كل عنصر في المصفوفة يمثّل قائمة واحدة بحيث يكون مفتاح العنصر هو محدّد المكان وقيمة العنصر هي محدّد الوصف. في قالبنا لا نحتاج سوى لقائمة واحدة، في ما يلي كيفية تسجيل أكثر من قائمة معًا: add_action('init', function() { register_nav_menus([ 'our-custom-menu' => 'القائمة الرئيسية', 'our-second-menu' => 'القائمة الفرعية', ]); }); كما ننوه إلى وجود دالّة معاكسة لدالّة تسجيل القوائم هي unregister_nav_menu لكننا لن نتطرّق إليها الآن. إظهار القائمة في القالب الخطوة الأخيرة ضمن القالب هي عرضه في المكان المناسب. في القالب الذي نستعمله نجد أن موقع القوائم أصبح في ملف header.php، في السطر 30 من الملف نجد وسم <section class="top-bar-section">، نريد أن نضع القائمة بدلاً من وسم <ul> الموجود بداخله. نقوم بحذف وسم <ul> مع محتواه، ثم نستخدم السطر البرمجيّ التالي لعرض القائمة: <?php wp_nav_menu(['theme_location' => 'our-custom-menu']); ?> تقبل دالّة wp_nav_menu مُحدداً واحداً هو مصفوفة تحوي عددًا من الإعدادات، الإعداد الوحيد الضروري هو theme_location ويتم استخدامه كما في السطر البرمجي السابق. يمثل هذا المحدّد قيمة محدّد المكان السابقة التي استخدمناها أثناء تسجيل قائمة جديدة والتي كانت: our-custom-menu. في حال لم يتم إدخال هذا المحدّد تقوم ووردبريس باستخدام قيمة إعداد menu (سنأتي إليه في الفقرة التالية)، وإن لم تجد قيمة فسيتم عرض أول قائمة غير فارغة تجدها ووردبريس، وفي حال عدم وجود أي قوائم غير فارغة وعدم تمرير محدّد المكان فلا يتم عرض شيء. إن ألقينا نظرة على القالب من المتصفح سنجد أن شكل عناصر القائمة أصبح مختلف قليلاً عن الشكل الذي كان عليه، وذلك ﻷن الدالّة تقوم بإضافة وسم <div> محيط بوسوم القائمة. في الفقرة التالية سنتعرف على بقية الإعدادات التي يمكن أن نستخدمها مع دالّة wp_nav_menu والتي ستمكننا من إظهار القائمة على الشكل الأنسب. إعدادات دالة wp_nav_menu كما قلنا من قبل فإن دالّة wp_nav_menu تأخذ محدّداً واحداً هو مصفوفة تحوي مجموعة إعدادات، المبرمج ليس مضطراً لإدخال جميع الإعدادات، يمكنه إدخال بعضها والباقي ستقوم ووردبريس بمعالجته وإسناد قيمته الافتراضية. الإعدادات بشكل كامل هي: <?php $defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); ?> theme_location مكان القائمة ضمن القالب، كما تم تحديده أثناء تسجيل القائمة باستخدام دالّة register_nav_menu، ليكون بإمكان المستخدم تحديد القائمة المطلوبة للمكان الذي تم تسجيله (دون تقييد المستخدم بقائمة واحدة). القيمة الافتراضية: '' (سلسلة نصية فارغة) menu القائمة المطلوب عرضها، تقبل قيمة المعرّف الرقمي (ID)، أو الاسم اللطيف (slug)، أو الاسم الخاص بالقائمة (وليس مكان القائمة ضمن القالب). القيمة الافتراضية: '' (سلسلة نصية فارغة) container لتحديد إن كان مطلوبًا من ووردبريس إحاطة وسم <ul> بوسم آخر أم لا، القيمة المسموحة هي div أو nav، وفي حال عدم الرغبة بإحاطة القائمة بوسم نجعل القيمة false. القيمة الافتراضية: 'div' container_class الصنف الخاص بوسم html المحيط بالقائمة، بشكل افتراضي يأخذ الصنف الشكل: menu-{menu slug}-container حيث يكون {menu slug} هو الاسم اللطيف للقائمة. القيمة الافتراضية: '' (سلسلة نصية فارغة) container_id معرّف CSS (ID) الذي يتم تطبيقه على الوسم المحيط (container). القيمة الافتراضية: '' (سلسلة نصية فارغة) menu_class الصنف الذي يتم تطبيقه على وسم القائمة <ul>، يمكن أن يتم وضع أكثر من صنف يتم الفصل بينهم بفراغات (space). القيمة الافتراضية: 'menu' menu_id معرّف (ID) CSS الذي يتم تطبيقه على وسم القائمة <ul>. بشكل افتراضي تكون قيمته: menu-{menu slug} حيث {menu slug} هو الاسم اللطيف للقائمة؛ في حال حدوث تكرار بالاسم يتم إضافة إشارة - مع رقم مميز يبدأ من 1 ويزيد عند كل تكرار، مثلًا: menu-{menu slug}-1، menu-{menu slug}-2، إلخ. القيمة الافتراضية: '' (سلسلة نصية فارغة) echo فيما إن كنا نريد إظهار القائمة مباشرة في مكان استخدام دالّة wp_nav_menu أو نريد إرجاعها (return). القيمة الافتراضية: true fallback_cb دالّة ليتم استخدامها في حال لم تكن القائمة موجودة، نضع قيمتها false في حال لم نكن نريد استخدام دالّة. ويتم تمرير محدّد $args للدالّة التي يتم استخدامها. القيمة الافتراضية: 'wp_page_menu' before إظهار نصّ قبل وسم <a>. القيمة الافتراضية: '' (سلسلة نصية فارغة) after إظهار نصّ بعد وسم </a>. القيمة الافتراضية: '' (سلسلة نصية فارغة) link_before إظهار نصّ قبل نصّ الرابط. القيمة الافتراضية: '' (سلسلة نصية فارغة) link_after إظهار نصّ بعد نصّ الرابط. القيمة الافتراضية: '' (سلسلة نصية فارغة) items_wrap يتم تفسيرها بنفس الطريقة التي يتم تفسير محدّد الهيئة (format) لدالّة sprintf. يحدث تعاون بين المحددات الأخرى عن طريق رموز رقمية. %1$s تُستبدل بقيمة محدد menu_id، %2$s تُستبدل بقيمة محدد menu_class، و %3$s تُستبدل بقيمة عناصر القائمة (وسوم <li>). إن تم استبعاد أي رمز رقمي من هذا المحدّد، سيتم استبعاد المحدّد المرتبط به من وسوم القائمة. القيمة الافتراضية: '<ul id="%1$s" class="%2$s">%3$s</ul>' depth يمثل عدد المستويات الهرمية التي سيتم استخدامها، حيث رقم 0 يعني جميع المستويات. ويتم استخدام قيمة -1 لتحويل جميع المستويات إلى مستوى واحد فقط. القيمة الافتراضية: 0 walker يتم تمرير عنصر هو نسخة من صنف Walker_Nav_Menu أو من صنف يرث من ذلك الصنف. الهدف من هذا المحدد هو التحكم بشكل كامل بالأصناف (classes) والمحدّدات (IDs) ووسوم HTML للقائمة. يمكن العودة لتوثيق WordPress للاطلاع على المثال المقدم القيمة الافتراضية: '' (سلسلة نصية فارغة) تحسين ظهور القائمة في القالب بعد أن تعرّفنا على إعدادات إظهار القائمة، دعونا نقوم بتعديلها في قالبنا لتصبح مناسبة أكثر. إن شاهدنا مصدر HTML للصفحة الرئيسية من المتصفح، نجد أننا نحتاج لإزالة الوسم المحيط بالقائمة (container)، ونحتاج لإضافة صنف right لوسم <ul> المحيط بعناصر القائمة. يمكننا تعديل السطر البرمجي في ملف header.php ليصبح: <?php wp_nav_menu([ 'theme_location' => 'our-custom-menu', 'container' => false, 'menu_class' => 'right', ]); ?> قمنا بجعل قيمة الوسم المحيط (container) تساوي false ﻷننا لا نريد إحاطة القائمة بأي وسم، فنحن من البداية نقوم بإحاطة القائمة بوسم <section> في قالب HTML الذي نستخدمه. وقمنا أيضًا بإضافة قيمة محدد menu_class لتساوي: right، ليتم إضافة صنف right لوسم القائمة <ul> ليظهر بشكل جيّد. بهذا نكون قد جعلنا القائمة تظهر بشكل مرن، ونعطي المستخدم إمكانية أكبر لاختيار ما يناسبه من عناصر للقائمة من خلال لوحة التحكم، وبنفس الوقت جعلنا القائمة التي يختارها المستخدم تظهر بأفضل شكل ضمن القالب الذي نعمل عليه. الشريط الجانبي الأشرطة الجانبية (Sidebars) هي إحدى ميزات القوالب، هو بشكل بسيط عمود شاقولي يقوم القالب بتزويده لعرض معلومات مختلفة عن المحتوى الأساسي للموقع، تقوم الأشرطة الجانبية بعرض ودجات/مربعات (widgets) يقوم مدير المدونة بالتحكم بها. التعامل مع الشريط الجانبي يشبه إلى حدّ كبير التعامل مع القوائم. تسجيل شريط جانبي لنقم معاً بإضافة ما يلي إلى ملف functions.php لتعريف شريط جانبيّ جديد: add_action('widgets_init', function() { register_sidebar(); }); إن قمنا بزيارة لوحة التحكم، نجد أن هناك عنصراً جديداً في قائمة المظهر (Appearance) هو الودجات (Widgets)، بداخله يظهر لنا الشريط الجانبي الجديد بعنوان الشريط الجانبي 1، إن قمنا بإضافة شريط جانبي آخر سيأخذ نفس الاسم لكن بزيادة الرقم بمقدار واحد. والسبب أننا عندما قمنا بتسجيل الشريط الجانبي لم نحدد له اسماً أو معرّفاً. سنقوم بهذا الآن بعد أن نتعرف على إعدادات هذه الدالّة. إعدادات دالّة register_sidebar الإعدادات الافتراضية: $args = array( 'name' => sprintf( __( 'Sidebar %d' ), $i ), 'id' => "sidebar-$i", 'description' => '', 'class' => '', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => "</li>\n", 'before_title' => '<h2 class="widgettitle">', 'after_title' => "</h2>\n", ); شرح الإعدادات: name اسم الشريط الجانبي (القيمة الافتراضية هي ترجمة كلمة ‘Sidebar’ مع معرّف رقميّ). id معرّف الشريط الجانبي - يجب أن يكون بأحرف صغيرة (lowercase), دون فراغات (القيمة الافتراضية هي معرّف رقمية يتم زيادته تلقائياً ). description وصف نصّي لماهيّة/مكان الشريط الجانبي. يظهر في واجهة إدارجة الودجات في لوحة التحكم. (القيمة الافتراضية: فارغة) class صنف CSS ليتم إسناده للشريط الجانبي في صفحة إدارة الودجات، ولن يتم استخدام هذا الصنف في القالب. ملاحظة: سيتم إضافة كلمة “sidebar” إلى قيمة الصنف. مثلاً: إن وضعنا اسم الصنف: tal ستكون قيمة الصنف هي: sidebar-tal. (القيمة الافتراضية: فارغة). before_widget وسم/وسوم HTML ليتم وضعها قبل كل واحد من الودجات (widget) (القيمة الافتراضية: ‘<li id="%1$s" class="widget %2$s">‘). ملاحظة: يتم استخدام دالّة sprintf لاستبدال المتحولات. after_widget وسم/وسوم HTML ليتم وضعها بعد كل واحد من الودجات (widget) (القيمة الافتراضية: '\n'). before_title وسم/وسوم HTML ليتم وضعها قبل كل عنوان (القيمة الافتراضية: <h2 class="widgettitle">). after_title وسم/وسوم HTML ليتم وضعها بعد كل عنوان (القيمة الافتراضية: “</h2>\n“). عرض الشريط الجانبي في القالب نتوجه إلى ملف sidebar.php، ونقوم بتعديله ليصبح كالتالي: <div class="large-4 columns sidebar"> <?php dynamic_sidebar(); ?> </div> قمنا باستبدال النصّ الموجود مسبقاً “Sidebar” بدالّة ()dynamic_sidebar التي وظيفتها عرض محتويات الشريط الجانبي في المكان المحدد. يمكن أن نمرّر قيمة واحدة لتلك الدالّة إما أن تكون اسم (name) أو معرّف (ID) الشريط الجانبي. وفي حال عدم تمرير أي قيمة يتم عرض الشريط الجانبي الأول. تخصيص الشريط الجانبي كما لاحظنا فشكل ودجات الشريط الجانبي غير مقبولة، لنقم معًا بتحسين مظهرها عن طريق إحاطة كل واحدة من الودجات (widgets) بوسم <div class="card"> الذي كان موجودًا في ملف sidebar.php قبل استخدام دالّة عرض الشريط الجانبي. لنقم باستخدام إعدادات دالّة ()register_sidebar التي مرّت معنا في الفقرات السابقة، في ملف functions.php نقوم بتعديل الدالّة لتصبح: register_sidebar(['before_widget' => '<div class="card">', 'after_widget' => '</div>']); قمنا بتمرير إعدادَين فقط لإضافة وسم div قبل واحدة من الودجات وإضافة إغلاق الوسم بعد كل واحدة منها. بهذا نكون قد انتهينا من إضافة قائمة رئيسية وشريط جانبي إلى القالب، وتعلمنا معاً كيف يمكن تخصيص شكل القائمة والشريط الجانبي ليتناسب مع القالب بأفضل شكل ممكن.

هل قمت من قبل باختيار قالب theme في ووردبريس وبدأت باستخدامه ومن ثم مع الوقت تفاجأت بأنّه غير مناسب للموقع؟ قد لا يكون استبداله في ذلك الوقت أمرًا ممكنًا بعد ما تمّ صرفه من وقت ومال في المشروع، فتجد نفسك عالقًا مع قالب كان من الأفضل لو اخترت واحد آخر عوضًا عنه. إنّ اختيار قالب أمرٌ مهمٌ كاختيار سيّارة، فمن السهل أن تنبهر بجمال وقوّة إحداها وينتهي بك الأمر بسيارة رياضيّة مكشوفة ذات مقعدين بينما ما تحتاجه حقًّا هو سيارة يُعتمد عليها بمقاعد مريحة تكفي لـ 5 أشخاص. لقد وجدت نفسي في هذا المأزق عدّة مرّات من قبل على الأقل، لكنّ التجربة والخطأ علّماني أن أضع نظامًا يعتمد على تحديد متطلبات المشروع وتقييمه ومقارنة القوالب المرشّحة للاختبار قبل أن أتخذ قرارًا. سأشرح الآلية التي أستخدمها عند اختيار قالب وكيف يمكن اعتمادها لزيادة فرص اختيار القالب الأمثل لمشروعك القادم باستخدام ووردبريس. يجب أن تعرف ما الذي تحاول بناءه تجنّب انتقاء قالب قبل أن تحدّد تمامًا ما الذي تحاول بناءه، فبالرغم من أنّ اختيار قالب يُعتبر أمرًا مشوّقًا، ولكنّ التخطيط لمحتوى الموقع هو الجزء الأهم والذي يتطلب أعلى انضباط في عملية بنائه. وحتى يكون موقع الويب مفيدًا، يجب أن نعير الاهتمام إلى اختيار المحتوى أوّلًا، وتحديد الهدف من الموقع، وهيكله العام، والنصوص والعناصر المرئيّة التي سنستخدمها في بنائه، قبل أن نبدأ التفكير باختيار قالب، ويساعد في هذا إنشاء قائمة بجميع ما ستتضمنه صفحات الموقع، وما ستحتويه كل صفحة. كن دقيقًا في التوصيف قدر الإمكان، فعلى سبيل المثال، إن كنت تقوم بإنشاء موقع لأغراض تجارية يحتوي على صفحة تعرض أهمّ موظّفي الشركة، فقد يكون توصيف الصفحة مثلًا: صفحة الموظّفين: الملفات الشخصية لـ 4 موظّفين في الإدارة التنفيذية. كل ملفّ سيتضمن صورة، وصفًا شخصيًّا يتراوح ما بين 125-150 كلمة، وأيقونة أو أكثر لشبكات التواصل الاجتماعي. يمكنك من خلال التوصيف السابق تحديد الميّزات التي ستحتاجها في القالب، ومن ثم عند بحثك عن قالب مناسب، عد لقائمة الميّزات التي قمت بتحديدها واختر القالب التي تدعم معظمها سلفًا، فهي النقطة الأهم في هذه الخطوة، لأنّ إساءة اختيار قالب هو وصفة مضمونة لترهق نفسك عندما تحاول تعديله ليتناسب مع أهدافك التي لم يُصمّم من أجلها أساسًا. إنّ العديد من القوالب المشهورة في فهرس قوالب ووردبريس، كـ Sydney، تعتمد بصورة أساسية على الصور ذات الحجم الكبير وهي مناسبة أكثر لتستخدم كمحفظة أعمال للمصمّمين والوكالات الفنّية، لذا تجنّب اختيار مثل هذه القوالب إن كنت تحاول إنشاء مدوّنة وابحث عن تلك التي صمّمت لتتناسب أكثر مع أغراض التدوين كـ Twenty Sixteen. وقد يُطرح سؤال هنا، هل نستطيع تعديل قالب كـ Sydney ليُصبح مناسبًا للاستخدام في مدوّنة؟ إن هذا ممكن بالطبع لكن ستستغرق الكثير من الوقت والجهد. يجب أن تعلم ما الذي تبحث عنه إنّ ميزانية المشروع والمدة الزمنية المخصصة له لهما الكلمة الفصل في مقدار الوقت الذي تستطيع صرفه في إنشاء الموقع، وهناك 3 فئات للقوالب التي يمكنك أخذها بعين الاعتبار اعتمادًا على متطلبات المشروع وعلى مقدار الوقت الذي يمكنك إمضاؤه بتحسين شكل الموقع النهائي. إن احتجت لبداية نظيفة فيمكنك استخدام قوالب أُطر العمل، كـ Genesis أو Thesis، أو Upfront، فهي منتجات تستطيع استخدامها لبناء أي نوع من المواقع بالاعتماد عليها. ومع بعض التمرّس، ستغدو قادرًا على إنشاء المواقع بسرعة باستخدام قالب إطار العمل المفضّلة لديك. ولكن إن كانت السرعة العامل الأهم، فقد يتوجب عليك تجنّب هذا الأمر والانتقال مباشرة إلى اختيار قالب صُمّم بناءً على إطار العمل الذي تستخدمه لمشروعك، فهناك العديد من القوالب التي تتناسب مع مختلف أنواع المشاريع والتي لا تحتاج إلّا إلى تعديلات قليلة، كالمذكورة سابقًا Sydney أو بناء قالب اعتمادًا على إطار عمل القوالب المُفضّل لديك. أخيرًا، إن لم تكن ترغب ببناء قالب من الصفر باستخدام باستخدام إطار عمل، ولم تتمكن من إيجاد قالب يتناسب تمامًا مع مشروعك، فيمكنك اختيار قالب مصمّم ليكون من السهل التعديل عليه، حيث أنّ هذا الكلام قد ينطبق على القوالب المصمّمة المبنية اعتمادًا على أُطر العمل ولكنه غير صحيح مع القوالب المستقلّة فالبعض منها من السهل تعديله لكنّ الأغلب يصعب معه ذلك دون الوقوع في مشاكل، وسنتناول الحديث عن الطرق التي يمكن اتباعها للتعديل على القوالب في نهاية المقال إن أردت السير في هذا الطريق. تجاهل المحتوى التجريبي عندما ترغب ببناء موقع فإنه لديك مجموعة من المحتويات التي ستستخدمها فيه وستكون مجبرًا على انتقاء الصور، الأشكال، الفيديوهات والنصوص بعناية، حيث سيكون هناك هدف لكل عنصر سيستخدم في الموقع، لكنّ مصمّم القوالب لا يواجه هذه المشكلة فهدفه النهائي هو إغراؤك لاقتناء القالب الخاص به وبالتالي سيعمل على استخدام معظم المزايا المتاحة له ويغرق الموقع بالمحتوى التجريبي demo content ونصوص lorem ipsum والصور الرمزية وما شابه ذلك. لذا وأنت تبحث تأكّد من أن تتجاهل المحتوى المؤقت المستخدم في القالب وركّز على مقدار مناسبتها لمتطلبات مشروعك. انتبه جيدا إلى المزايا التي يقدمها القالب من المهم الانتباه جيّدًا إلى المزايا المقدّمة من القالب (وليس إلى المحتوى التجريبي كما ذكرنا سابقًا)، وبالعودة إلى المثال السابق حول صفحة موظّفي الشركة، ألق نظرة على القالب التي تستعرضه وتأكّد من أنه يُلبّي احتياجك من حيث إنشاء ملفات شخصية بسهولة؟ Zerif Lite هو أحد القوالب الخاصة بـووردبريس والذي يتضمن ميّزة تفيد في هذا الغرض: إنّ بعض أهم عناصر القوالب التي يجب الانتباه إليها تتضمن: شكل قوائم تصفّح الموقع: ستملك عناصر التصفّح درجة من المرونة، لكن تأكّد من أن تصميمها يلبّي احتياجك. فإن احتجت لقوائم كبيرة mega menus فإنشاؤها سيكون أسهل بكثير إن اخترت قالبًا يدعم هذا النوع من القوائم. كيف يتم عرض شعار الشركة: إن كنت تملك شعارًا وعبارة تسويقية فتأكد بأنّهما يتناسبان مع المواقع والأحجام التي تفرضها القالب. تأكّد إن كانت الميّزات مقدّمة من القالب ذاته أو باستخدام مُلحقات plugins: من الأفضل أن تكون الميّزات مقدّمة من إضافات، فحينها ستستطيع المحافظة على معظم المزايا إن قررت تغيير القالب، وبحديثنا عن القوائم الكبيرة mega menus فمن الأفضل أن تستخدم القالب إضافة Max Mega Menu عوضًا عن إدراج الميّزة ضمن تصميم القالب الداخلي. مدى سهولة التعديل على القالب: فهل تفضّل العمل مع محرر مرئي مثل Visual Composer أو محرر Upfront Editor، أو تفضّل كتابة شيفرات CSS يدويًا للتعديل على مظهر الموقع؟ إن كنت تفضّل العمل بطريقة معينة فتأكد من أن القالب تتطابق مع اختيارك، وإحدى الأخطاء التي يجب تجنّبها هي كتابة شيفرات CSS بشكل يدوي في موقع يستخدم محررًا مرئيًّا. احصل على رأي غير منحاز حالما تستقر على مجموعة من القوالب التي تتناسب مع متطلبات مشروعك ومزاياه، فهناك مجموعة من الاختبارات التي تستطيع إجراءها لمقارنة الأداء فيما بينها. إحدى هذه الاختبارات هو إخضاع نسخة تجريبية demo من الموقع لاختبار Pingdom’s Website Speed Test. لا تقلق كثيرًا في البداية حول زمن التنفيذ أو حجم الصفحة إلّا إن ظهرت لك نتائج تنذر بسوء، فزمن التنفيذ يمكن أن يختلف كلّيًا بحسب الاستضافة وطريقة إعدادها والمكان الجغرافي للخادوم، كما يتعلق بالخبء المؤقت (cache) وضغط الصفحات minifying المطبّق على الموقع. إنّ حجم الصفحة للنسخة التجريبية غالبًا ما يكون ناتجًا عن كون النسخة متخمة بالصور والفيديوهات عالية الدقة، لذا فإنّ البيانات الأهم التي يجب الانتباه إليها في هذه المرحلة هي عدد طلبات HTTP التي تظهر والمرتبة النهائية للأداء التي نحصل عليها. إن وجدت بأنّ القالب التي اخترته لا يملك نتائج جيّدة عند تطبيق هذا الاختبار، فاعتبر هذا تحذيرًا بأنّك بحاجة لاختيار إضافة جيّدة للخبء مؤقت وضغط المحتوى كـ Hummingbird عوضًا عن رفض القالب ككل. إنّ أفضل طريقة لاستخدام النتائج أثناء التقييم هو المقارنة فعلى سبيل المثال إن اخترت استخدام Zerif Lite أو OnePress اعتمادًا على النتائج فيمكن منح نقطة إضافية لصالح OnePress على الرغم من أنّ القالبين يملكان نتائج جيّدة متقاربة. ومن الإضافات المناسبة أيضًا للاختبار هي Google PageSpeed Insights، ومرّة أخرى نذكّر بأنّه ليس هناك معيار نتائج معيّن نبحث عنه، حيث يجب اختبار جميع القوالب التي نفضّلها ونأخذ بعين الاعتبار النتائج التي نحصل عليها. يمكن أثناء تنفيذ هذا الاختبار أن نحدّد المشاكل التي تعاني منها القالب التي نختارها في نهاية المطاف ونحاول معالجتها. معاينة الخلفية آخر ما تحتاج للقيام به هو الحصول على بعض المعلومات عمّا سيكون عليه العمل مع القالب، فالعديد منها تسمح بالاطلاع على اللوحة الإدارية، لذا خذ بعض الوقت لإلقاء نظرة وفهم ما سيكون عليه الأمر عندما تعمل معها فإن احتوت على محرّر سحب وإفلات مرئي لعناصر الموقع فخذ بعض الوقت في تجربة ذلك لترى كيف يختلف المظهر الخارجي. أما لو كنت ستقوم بكتابة شيفرات CSS خاصة للتعديل على مظهر القالب فقم باستعراض ملفات CSS التي تستخدمها باستخدام أدوات المطوّر. إن الهدف هو معرفة كم سيكون سهلًا أو صعبًا التعديل على الموقع. هاك بعض الأمور التي تحتاج للتركيز عليها أثناء ذلك: كم عدد أسطر CSS المستخدمة: إنه من غير المستبعد أن تمتلك قالب ما بين مئات لعدة آلاف الأسطر من CSS، وعلى الرغم من أنّها ليست قاعدةً أساسية، فإنّه من الأسهل عادة التعديل يدويًا على شيفرات CSS في القوالب التي تستخدم أقلّ عدد ممكن من قواعد CSS. كم عدد ملفات CSS المستخدمة: معظم القوالب تستخدم قواعد CSS موزّعة على عدّة ملفات، وعلى الرغم من ذلك، فلو أردت القيام بتعديلات يدوية، فكلّما قلّ عدد الملفات كلّما كان ذلك أفضل، فالملفّات الأقل إشارة إلى هيكلة منظّمة أكثر وأسهل للتعديل. كم عدد المرّات التي استخدمت فيها قاعدة !important: رغم أنه من المتوقع نظريًّا أن تقوم معظم القوالب بتجاوز override القواعد الموروثة في CSS بين العناصر عدّة مرات، إلا أنّه في حال وجدت بأن السمة تستخدم هذه القاعدة بضع مئات من المرّات فتوقّع أن يكون التعديل اليدوي عليها أمرًا صعبًا. إن إحدى الطرق التي يمكنك اتباعها لتحديد مدى سهولة التعديل اليدوي على قواعد CSS هي باختيار أحد العناصر الذي ترغب بتعديله ومن ثم تستخدم لوحة المظهر في أدوات المطوّر لتقوم بالتعديل على مظهر العنصر مباشرة وترى مدى سهولة القيام بذلك. الخلاصة تحدّثنا عن العديد من الأمور الواجب مراعاتها عند انتقاء قالب، ولتلخيص ما سبق: نحدّد المحتوى أوّلًا ومن ثم التصميم: ابدأ بتحديد المحتوى وعناصره التي ستستخدمها وسيكون من الأسهل اختيار القالب. حدّد نوع القالب التي تبحث عنه: إطار عمل قوالب، قالب متعدّدة الأغراض للاستخدام كما هو، قالب معدّل. قارن أداء القوالب المرشّحة باستخدام الاختبارات التي ذكرناها. جرّب استخدام المحرّر المرئي المستخدم ضمن القالب أو إطار العمل، أو قم بالاطلاع على قواعد CSS التي تستخدمها القالب إن لم تملك محرّرًا مرئيًّا مدمجًا معها. يجب أن تكون قادرًا الآن على اختيار قالب إطار العمل أو القالب المناسب لمشروعك القادم. كيف تقوم باختيار القوالب لمشاريعك عادة؟ هل هناك معايير أخرى تعتمدها في اختيارها؟ أخبرنا في التعليقات أدناه. ترجمة -وبتصرّف- للمقال How to Pick the Perfect WordPress Theme لصاحبه Jon Penland.

تابعنا في الدرس السابق مخطط لعمل وتعرّفنا على ملفات القالب وتعلّمنا طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس. الجزء الثّاني: 2. تخصيص موقعك ووردبريس يمكنك تصميم موقعك المثاليِّ بداية بإنشاء نموذج للتصميم عن طريق فوتوشوب ومن ثَمَّ تحويل هذا التصميم إلى ملفّات HTML و CSS. بعد ذلك سنقوم بتحويل هذه الملفّات إلى قالب ووردبريس شغّالٍ بالكامِل. تصميم المواقع بواسطة فوتوشوب ومِن ثمَّ تحويلها إلى قوالب ووردبريس هي إحدى أسهل طرقِ تطوير المواقع هذهِ الأيّام. في الحقيقة هذه أحسن طريقة لتوفير مواقع لعملائك في أقل وقت ممكن وبسهولةٍ بالغة. في هذا الجزء من الدّرس سنقوم بالعملِ على الملفّات التاليّة: functions.php header.php footer.php searchform.php sidebar.php index.php single.php page.php page-about.php page-contact.php page-contact.php search.php content-search.php comments.php php.404 في الجزء الأوّل من هذا الدّرس تعلّمنا كيفيّة تحضير ملفّات HTML و CSS لتحويلها إلى قالب ووردبريس ثم بعد ذلك قمنا بتفعيل هذا القالب. في هذا الجزء ستتعلّم ماهي الأكواد التي يحتاجها قالب ووردبريس والتّي سيتوجّب عليك إضافتها كي تتمكّن من إنشاء قالب ووردبريس يعمل. بنهاية هذا الدّرس ستتحصّل على نفس القالب الذي أريناك صورةً عنه في بداية الجزء الأوّل. الخطوة 1.2- تعريف الثّوابتِ وتسجيل دعمِ قائمةِ شريط التنقّل القالب مُفعّلٌ مسبقا! الآن فلنقم بإضافة دعم قائمة التنقّل داخل ملفِّ functions.php. فلنبدأ بإنشاء ملفِّ functions.php في المجلّد الرئيسيِّ لقالبنا. بعد ذلك، فلنقم بتعريف ثوابت مسار مجلّدِ قالبنا. قُم بنسخ الكود أدناه داخل ملفِّ functions.php الذي أنشأناه قبل قليل. <?php /***********************************************************************************************/ /* Define Constants */ /***********************************************************************************************/ define('THEMEDIR', get_stylesheet_directory_uri()); define('IMG', THEMEDIR.'/images'); ?> بعد ذلك سنحتاج لتسجيل دالّة تفعيل قائمة التنقّل لقالبنا (navbar). قم بنسخ الكود التّالي داخل ملفِّ functions.php. <?php add_action('init', 'register_my_menus'); function register_my_menus() { register_nav_menus(array( 'main-menu' => 'Main Menu' )); } ?> تَمّ إضافة معلِّق add_action لتسجيل قائمة التنقّل. المُعامِل الأوّلُ يمثّل الوَسم (أين سنضيف هذا الفِعل) أمّا المُعامِل الثّاني فيمثِّل اسم الدالّة التي سنستدعيها للقيام بتسجيل القائمة. لتعرف أكثر حول هذا الأمر، اطّلع على هذه الصفحة . الخطوة 2.2- إنشاء ملفِّ header.php الآن أنشئ ملفَّ header.php. قم بفتحِ ملفِّ index.html وقم بنسخ كلِّ شيء منه بدءًا من DOCTYPE إلى إغلاق وسم header في هذا الملفِّ ثمّ انسخ كلّ شيءٍ داخل ملفّ header.php الذّي أنشأناه داخل مجلّد قالبنا. <!DOCTYPE html> <!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]--> <!--[if !IE]><!--> <html lang=&"en&"> <!--<![endif]--> <head> <meta charset=&"utf-8&"> <title>NEOBLOG</title> <meta name=&"description&" content=&"A simple WordPress blog theme for 1stwebdesigner.com&"> <meta name=&"author&" content=&"Sam Norton&"> <!-- Mobile Specific Meta --> <meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&"> <!-- Stylesheets --> <link rel=&"stylesheet&" href=&"css/reset.css&" /> <link rel=&"stylesheet&" href=&"css/bootstrap.css&" /> <link rel=&"stylesheet&" href=&"css/style.css&" /> <link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&"> <!--[if lt IE 9]> <script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script> <![endif]--> </head> <body> <!-- HEADER --> <header class=&"main-header align-center &"> <a href=&"index.html&" class=&"logo&" ><img src=&"images/logo.png&" class=&"img-responsive&" alt=&"NEOBLOG blog theme&" /></a> <nav class=&"main-nav&"> <ul class=&"inline&"> <li><a href=&"index.html&" class=&"active&">Home</a></li> <li><a href=&"about.html&">About</a></li> <li><a href=&"contact.html&">Contact</a></li> </ul> </nav> </header> بعض وُسومِ HTML سيتِّم تعويضها ببعض دوالّ ووردبريس مثل وسوم: اللّغة، ميتا “meta” وغيرها. أضف معلِّق wp_head قبل إغلاق وسمِ head. يُستخدم هذا المعلِّق لطبع بعضِ مرجعات الدّوال التي سنُضيفها لاحقا، او لجعله يقوم ببعض الأعمال في الخلفيّة. لمزيد من المعلوماتِ راجع دليل ووردبريس. من أجل قائمة التنقّل سنستخدم الدالّة التّي قمنا بإنشائها سابقًا wp_nav_menu لعرض قائمة التنقّل التي أنشأناها من خلال لوحة تحكّمِ المدير في ووردبريس. إعداد theme_location سيقوم بعرض القائمة المعيّنة للمكان المحدّد بالدالّة wp_nav_menu. في حالة لم يتمّ تعيين قائمة لذلك المكان، إعداد fallback_cb سيقوم بتحديد ما سيتّم عرضه. لمزيد من المعلومات حولَ دالّة wp_nav_menu راجع هذه الصّفحة. قم بنسخ الكود التّالي داخل ملفّ header.php لتعويض الكود الذي نسخته من قبل. <!DOCTYPE html> <!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]--> <!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset=&"<?php bloginfo('charset'); ?>&"> <title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title> <meta name=&"description&" content=&"<?php bloginfo('description'); ?>&"> <meta name=&"author&" content=&"Sam Norton&"> <!-- Mobile Specific Meta --> <meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&"> <!-- Stylesheets --> <link rel=&"stylesheet&" href=&"<?php bloginfo('stylesheet_url'); ?>&" /> <link rel=&"stylesheet&" href=&"css/bootstrap.css&" /> <link rel=&"stylesheet&" href=&"css/style.css&" /> <link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&"> <!--[if lt IE 9]> <script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <!-- HEADER --> <header class=&"main-header align-center &"> <a href=&"<?php echo home_url(); ?>&" class=&"logo&" ><img src=&"<?php print IMG;?>/logo.png&" class=&"img-responsive&" alt=&"<?php bloginfo('name');?>&" /></a> <nav class=&"main-nav&"> <?php wp_nav_menu(array( 'theme_location' => 'main-menu', 'container' => '', 'menu_class' => 'inline' )); ?> </nav> </header> الخطوة 2.3- إنشاء ملفِّ footer.php من أجل هذا الجزء سنقوم بإنشاء ملّف footer.php فارغٍ، ثمّ مجدّدًا نفتح ملفَّ index.html من مجلّد قالب HTML وCSS NeoBlog ثمّ نقوم بنسخ كلِّ شيءٍ انطلاقًا من ”sharing idea section” إلى آخر وسمٍ في هذا الملفِّ ثمّ قم بنسخها في ملفِّ footer.php الذي قمنا بإنشائه داخل مجلّد قالبنا ووردبريس. يجب أن يكون لديك نفس الكود أدناه. <!-- SHARING IDEAS AREA --> <section> <div class=&"sharing-container section-content align-center&"> <h3>WANT TO SHARE YOUR THOUGHTS?</h3> Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties. <h4><a href=&"contact.html&" >CLICK HERE TO LEARN MORE >>></a></h4> </div> </section> <!-- FOOTER --> <footer class=&"main-footer section-content align-center&" id=&"contact-info&"> copy; 2014 - <a href=&"https://1stwebdesigner.com/&" target=&"_blank&">NEOBLOG theme</a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a> </footer> </body> </html> مثلما فعلنا في السّابقِ مع ملفِّ header.php سنقوم مجدّدًا بتعويض بعض وسوم HTML بدوالِّ ووردبريس مثل رابطٍ للصفحة الرئيسية، السّنة الحاليّة ومعلومات المدوّنة. ألقِ نظرةً على الكود أدناه: <!-- SHARING IDEAS AREA --> <section> <div class=&"sharing-container section-content align-center&"> <h3>WANT TO SHARE YOUR THOUGHTS?</h3> Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties. <h4><a href=&"<?php home_url(); ?>&" >CLICK HERE TO LEARN MORE >>></a></h4> </div> </section> <!-- FOOTER --> <footer class=&"main-footer section-content align-center&" id=&"contact-info&"> copy; <?php echo date('Y'); ?> - <a href=&"<?php home_url(); ?>&"><?php echo bloginfo('name'); ?></a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a> </footer> <?php wp_footer(); ?> </body> </html> الخطوة 2.4- العمل مع ملفِّ searchform.php التّالي على القائمة سيكون وضع الترميز (باستخدام دوالّ ووردبريس)، الذي سيقوم بإظهار صندوق البحث في القائمة الجانبيّة. قم بإنشاء ملفِّ searchform.php ثمّ انسخ الكود التّالي بداخله. <div class=&"controller&"> <form role=&"search&" method=&"get&" class=&"search-form&" action=&"<?php echo home_url(); ?>&"> <input type='textbox' name=&"s&" class=&"form-control&" id=&"search-box&" value=&"<?php the_search_query(); ?>&" placeholder=&"Search..&"/> <input class=&"btn btn-primary no-border&" type=&"submit&" class=&"search-submit&" value=&"Search&" /> </form> </div> لاحِظ أنّنا استخدمنا دالّة the_search_query كقيمة لصندوق البحث، وهذا لإظهار الكلمات التي نبحث عنها داخل صندوق البحث في حالة قِيامنا بعمليِّة بحثٍ ما. الخطوة 2.5- العمل مع ملفِّ sidebar.php قبل البدءِ بإنشاء ملفِّ sidebar.php علينا أوّلًا تسجيل القائمة الجانبيّة في ملفِّ functions.php. قُم بفتح ملفِّ functions.php وأضِف له الكود التّالي <?php register_sidebar( array( 'id' => 'main-sidebar', 'name' => __( 'Main Sidebar', $text_domain ), 'description' => __( 'This the main sidebar.', $text_domain ), ) ); ?> الكود أعلاه سيقوم بإنشاء تعريفٍ للقائمة الجانبيّة ويقوم بإرجاع المُعرِّف. بعد هذا فلنقم باستدعاء هذه القائمة. بدايةً سنُنشِئ ملفَّ sidebar.php في مجلّد قالبنا الرئيسيِّ ثمّ بعد ذلك أنسخ هذا الكود بداخله. <?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?> <?php dynamic_sidebar( 'main-sidebar' ); ?> <?php endif; ?> هذا الكود يحتوي على دالّةٍ تقوم باستدعاء الوِدجت ذات المعرّفِ main-sidebar وتقوم بطبعها في القائمة الجانبيّة ولكن قبل ذلك ستتحقّق أنّ الوِدجت مُفعّلة من لوحة التحكّم. ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme

بدأنا في الدرس السابق بتخصيص الموقع عبر تعريف الثوابت وإنشاء ملفات header.php و footer.php والعمل على ملفات searchform.php و sidebar.php. الخطوة 2.6- كتابة ملفِّ index بعد إضافة كلِّ تلك الملفّات للقالب، حان الوقت للعمل على الصفحة الرئيسية للموقع، طبعا نحن نتحدّث عن ملفّ index.php. قم بإنشائه داخل مجلّد قالبنا ثم أضف إليه الكود التّالي: <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> دعنا الآن نلقي نظرةً على رئيسيّة الموقِع لنرى التغييرات التي طرأت عليها. لاحظ أنّه ما عدا القائمة الجانبيّة، فإنّ كلًّا من رأس وتذييل القالب في مكانها المحدّد. لإضافة بعض المحتوى إلى رئيسيّة الموقع افتح ملفّ index.html وقم بنسخ المنطقة المحدّدة بين “blog area section” إلى غاية وسم غلق div ذو الكلاس box-layer align-center page-nav ثمّ ألصِق كلّ ذلك في ملفِّ index.php مباشرةً تحت دالّة get_header ستحصل على شيء مشابه لهذا: <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <ul class=&"negative-margin&"> <li> <h1><a href=&"single-blog.html&" class=&"gray&">Should I use a Pencil or a Ballpen?</a></h1> By <a href=&"#&">Sam Norton</a> / On July 20, 2014 / <a href=&"#&">Life Hacks</a> <figure> <img class=&"opacity-hover box-layer img-responsive&" src=&"images/thumb1.jpg&" alt=&"Pencil or Ballpen&" /> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <div class=&"btn-margin&"> <a href=&"single-blog.html&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> <li> <h1><a href=&"single-blog.html&" class=&"gray&">How to test your patience!</a></h1> By <a href=&"#&">Sam Norton</a> / On July 20, 2014 / <a href=&"#&">Life Tips</a> <figure> <img class=&"box-layer img-responsive&" src=&"images/thumb2.jpg&" alt=&"Pencil or Ballpen&" /> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <div class=&"btn-margin&"> <a href=&"single-blog.html&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> </ul> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><a href=&"#&">Next Page >>> </a></li> </ul> </div> </div> الكود أعلاه سيقوم بعرض محتوًى ساكنٍ. لجعله ديناميكيٍّ سنستخدم حلقة تِكرارِ ووردبريس داخل منطقة التدوينات لعرضها بشكل متكرّرٍ مع محتوًى مختلفٍ. قم بتعويض الكود الذي نسخته سابقا بهذا الكود: <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <?php if (have_posts()) : ?> <div class=&"row&"> <div class=&"col-md-8&"> <ul class=&"negative-margin&"> <li> <?php while(have_posts()) : the_post(); ?> <h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"><?php the_title(); ?></a></h1> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php the_excerpt(); ?> <div class=&"btn-margin&"> <a href=&"<?php the_permalink(); ?>&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> <?php endif; ?> <?php endwhile; ?> </ul> <?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li> <li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li> </ul> </div> <!-- end box --> <?php endif; ?> <?php endif; ?> </div> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </div> </div> </div> </section> <?php get_footer(); ?> حلقة تِكرار ووردبريس عبارة عن أقسامِ أكواد تُستخدم من طرف ووردبريس لعرض المقالات. باستخدام حلقة التِّكرار هذه ووردبريس سيقوم بتناول كلِّ مقالٍ على حِدى ليتمّ عرضه في الصّفحة الحاليّة، بحيث يتم العرض وفق المعايير المحدّدة داخل وسوم حلقة التِّكرار. في العادة هذه الحلقة تأتي بهذه الأقسام من الأكواد: <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> الكود أعلاه يمثّل الشّكل القياسيِّ لحلقة تكرار ووردبريس لِعرض المقالات ومع ذلك مازال علينا استخدام الدوالّ التالية ضمن الحلقة: the_permalink : تقوم بعرضِ الرّابط الدائم للمقالِ الحاليِّ. the_title : تقوم باسترجاع عنوان المقالِ الحاليِّ. the_author_posts : تقوم بعرض عدد المقالات التّي قام الكاتب الحاليُّ بنشرها. the_author : تقوم بعرض اسم كاتبِ المقالِ الحاليِّ. get_the_date : تسترجع التوقيت الذي كُتب به المقالُ الحاليِّ. the_category : تعرض التصنيف أو التصنيفات التي ينتمي إليها المقال الحاليّ. the_post_thumbnail : تعرض الصّورة البارزة للمقالِ الحاليِّ كما تمّ تحديده في شاشة تعديل المقال (سنرى هذا بشكل مفصّلٍ بعد قليل). the_excerpt : تعرض المقتطف للمقالِ الحاليِّ. بعد تطبيقِ بعض الفلاتر عليها وتضمين auto-p عليها سنقوم بتحويل line-breaks إلى فقرة HTML فيما يتعلّق بالصّورة البارزة فسنستخدم الكود التّالي: <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php endif; ?> أوّلًا يتّم التأكّد من أنّ المقال يحتوي على صورةٍ بارزة، بعد ذلك إذا كان يحتوي على واحدةٍ، سنقوم بعرض رابط الموضوع إضافة إلى الصورة نفسها. لاحظ أنّنا أضفنا مصفوفة تحتوي على كلاس opacity-hover box-layer img-responsive. هذه طريقة لإضافة كلاس للصورة البارزة وجعلها تبدو بشكلٍ أجمل عن طريق إضافة: تأثيرٍ عند تمرير الفأرة فوقها، حدودٍ وظِلّ صندوق. لكنّ القيّام بكلّ هذا لن يقوم بعرض الصورة البارزة، يجب عليك أوّلًا تسجيل الصّورة البارزة. قم بنسخ الكود التّالي وأضِفه في ملفِّ functions.php. <?php /***********************************************************************************************/ /* Add Theme Support for Post Thumbnails */ /***********************************************************************************************/ if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); set_post_thumbnail_size(742, 428); } ?> جيّد! الصورة البارزة ستظهر الآن. التّالي سيكون إضافة دالّةٍ تقوم بنزع العارِضات والنِّقاط بينهما من نهاية المقتطف التي تعرض فيه بطريقة افتراضية. دائما في ملفِّ functions.php أضف الكود التالي: <?php /***********************************************************************************************/ /* Remove the brackets, ellipsis and hellip on excerpt */ /***********************************************************************************************/ function trim_excerpt($text) { $text = str_replace('[hellip;]', '...', $text); return $text; } add_filter('get_the_excerpt', 'trim_excerpt'); ?> تاليًّا، سنقوم بتشغيل ترقيم الصّفحات التيّ قمنا بإضافتها سابقًا في ملفِّ index.php. الكود التّالي سيقوم باستدعاء wp_query، هناك كلاس محدّدة في نواةِ ووردبريس تتعامل مع تعقيدات استعلامات المقالات (أو الصفحات) لمدوّنة ووردبريس. هذه الكلاس بإضافة روابط لـ previous_post_link و next_posts_link function للتنقّل بين صفحاتِ مدوّنتك. ألقِ نظرةً على الكود التّالي: <?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li> <li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li> </ul> </div> <!-- end box --> <?php endif; ?> <?php endif; ?> كلمسةٍ ختاميِّة، قم بتضمين دالّة get_sidebar داخل وسم div ذو كلاس col-md-3 col-md-offset-1 margin-sidebar الكلُّ داخل وسمِ HTML5 aside، ستحصل كود مشابه للتّالي: <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> كمراجعة نهائيّة ملفّ index.php يجب أن يحتوي على الكود أدناه، راجعه لتفادي أيّة أخطاء محتملة. <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <?php if (have_posts()) : ?> <div class=&"row&"> <div class=&"col-md-8&"> <ul class=&"negative-margin&"> <li> <?php while(have_posts()) : the_post(); ?> <h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"> <?php the_title(); ?> </a></h1> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php the_excerpt(); ?> <div class=&"btn-margin&"> <a href=&"<?php the_permalink(); ?>&" class=&"btn btn-primary&">CONTINUE READING >>> </a> </div> </li> <?php endif; ?> <?php endwhile; ?> </ul> <?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&"box-layer align-center page-nav&"> <ul class=&"btn&"> <li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li> <li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li> </ul> </div> <!-- end box --> <?php endif; ?> <?php endif; ?> </div> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </div> </div> </div> </section> <?php get_footer(); ?> الخطوة 2.7- العملُ مع ملفِّ single.php الآن سنقوم بعرض كلِّ مقالةٍ بشكل منفصل، أنشئ ملفّ single.php ثمّ أضف له الكود التّالي: <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <?php if (have_posts()) : while(have_posts()) : the_post(); ?> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <section> <h1><a href=&"<?php the_permalink(); ?>&" class=&"gray&"><?php the_title(); ?></a></h1> By <a href=&"<?php the_author_posts() ?>&"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php the_content(); ?> <?php endif; ?> </section> <?php endwhile; ?> <?php endif; ?> <section> <div class=&"comment-section&"> <?php // If comments are open or we have at least one comment, load up the comment template if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> </div> </section> </div> <!-- RELATED ARTICLE AREA --> <section> <div class=&"box-layer related-articles custom-padding&"> <h3 class=&"align-center&">Related Articles</h3> <?php $current_categories = get_the_category(); $first_category = $current_categories[0]->term_id; $args = array( 'post_per_page' => 3, 'category__in' => array($first_category), 'post__not_in' => array($post->ID) ); $related_articles = new WP_Query($args); if ($related_articles->have_posts()) : ?> <ul> <?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?> <li class=&"col-md-4&"> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> </figure> <a href=&"<?php the_permalink(); ?>&"><?php the_title(); ?></a> <?php endif; ?> </li> <?php endwhile; ?> <div class=&"clear&"></div> </ul> <?php endif; ?> <?php // Restore original Post Data wp_reset_postdata(); ?> </div> </section> </div> <!-- SIDEBAR AREA --> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> ولإظهار التعليقات، قم بإضافة الكود التّالي: <section> <div class=&"comment-section&"> <?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> </div> </section> هذا الكود سيتحقّق إن كانت التعليقات مُتاحةً أو إن كانت هناك تعليقات ليقوم باستدعاء نموذج التعليقات (سنتناول ذلك لاحقا). الخطوة 2.8- العملُ مع ملفِّ page.php بعد أن أنهينا العمل على صفحة التّدوينة، سنتوجّه للعملِ على الصّفحات العادية. أنشئ ملفّ page.php ثم ألصق به الكود التّالي: <?php get_header(); ?> <!-- BLOG AREA --> <section> <hr class=&"no-margin&" /> <div class=&"blog-container section-content&"> <div class=&"container&"> <div class=&"row&"> <div class=&"col-md-8&"> <div class=&"box-layer custom-padding&"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3> <?php the_title(); ?> </h3> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&"<?php the_permalink(); ?>&"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure> <?php endif; ?> <?php the_content(); ?> <?php endwhile; endif; //ends the loop ?> </div> </div> <!-- SIDEBAR AREA --> <aside> <div class=&"col-md-3 col-md-offset-1 margin-sidebar&"> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?> مجدّدًا لا جديد في هذا الملفِّ عدا أنّه لا يحتوي على قسمٍ للتعليقات كونه سيعرضُ صفحةً عاديّة. في الملفّين المقبلين سنقوم باستخدام نموذجين مُدمجين في ووردبريس لعرض الصّفحات بِنسقٍ مختلفٍ. ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme

إنّ اختيار قالب WooCommerce المناسب يمكن أن يكون أمرًا شخصيًا إلى حد كبير، فكما يُقال "الجمال في عين ناظره". لكنّ جمال القالب هو مجرد شيء سطحي، وهناك بعض الأمور التي يجب أن تؤخذ في الاعتبار عند اختيار القالب المناسب لمتجرك. جمالية القالب لا تبحث فقط عن قالب جيّد المظهر، إذ يجب أن يكون القالب ملائما لنوع متجرك. لنأخذ سيارة فراري كمثال؛ صحيح أنّ مظهرها رائع، لكنّها ليست الخيار الأفضل كسيارة تُستخدم للسير في الشوارع العادية ولقضاء الاحتياجات اليومية كالذهاب والإياب من وإلى المحلات التجارية مثلًا. يجب أن تأخذ في الاعتبار جمهورك، علامتك التجارية، والأهم من ذلك منتجاتك. حاول اختيار قالب يعكس هذه الأمور الثلاثة بطريقة أو بأخرى. على سبيل المثال، ابحث عن قالب بمساحات بيضاء وفن طباعة typography بسيط وواضح إذا كنت تبيع الأثاث البسيط. أما إذا كنت تبيع لعب الأطفال، فابحث عن قالب بطابع مرح وألوان زاهية. إذا كنت تفكّر في استخدام قالب معيّن، وكان يُزعم أنّه متكامل مع WooCommerce، احرص على التحقق من جميع صفحات WooCommerce لتتأكّد من ذلك. لا تنس بعض الصفحات مثل "My Account" (حسابي)، صفحة Cart (السلة)، وصفحة Checkout (الدفع). انتظام تحديث القالب يقوم كلا من ووردبريس و WooCommerce بإطلاق تحديثات بشكل منتظم تقريبًا بما فيها بعض الإصدارات الكبيرة في السنة. يمكن أن تسبب هذه التحديثات الأخطاء في القوالب إذا لم يتم اختبارها بدقة مع أحدث الإصدارات التجريبية. لذلك من الجيّد أن تقوم بالتحقق من سجل التغييرات الخاص بالقالب لمعرفة فيما إذا كان المطور يقوم بتحديثه وإجراء التغييرات عليه باستمرار. وكذلك تأكد من أن تسأل فيما إذا كان القالب متوافقًا مع الإصدار الأحدث من ووردبريس و WooCommerce قبل أن تقوم بتثبيته. يمكنك إجراء فحص بسيط وسريع لكي تتأكّد من توافق القالب مع الإصدار الأحدث من WooCommerce. قم بعرض النسخة التجريبية للقالب demo، ثم اعرض مصدر الصفحة (انقر بزر الفأرة الأيمن > View page source). في شيفرة المصدر ستلاحظ وجود وسم meta خاص بمولّد الصفحة (generator) وهو يشير إلى إصدار WooCommerce الفعّال لهذا القالب. ستشاهد شيفرة مشابهة للشيفرة أدناه: <!-- WooCommerce Version --> <meta name="generator" content="WooCommerce 2.0.13" /> تأكّد من أنّ النسخة التجريبية للقالب تشغّل إصدار WooCommerce الحالي. وإذا كان إصدار WooCommerce الذي يتوافق معه القالب أقدم من الإصدار الحالي بعدة إصدارات، اسأل عن السبب وعمّا إذا كان القالب قديمًا جدًا. كن حذرًا في هذا الأمر. بإمكانك إلقاء نظرة على قائمة قوالب WooThemes التي تعمل مع WooCommerce. الدعم تظهر الأخطاء البرمجية bugs في بعض الأحيان في أغلب قوالب ووردبريس والملحقات الكبيرة. وإذا وجدت أحد الأخطاء البرمجية التي تريد إصلاحها بسرعة، أو على الأقل تريد أن يتم إرشادك إلى كيفية إصلاحها، فربما يكون هذا الخطأ قد حدث بسببك. لكي تحصل على المساعدة المناسبة لإصلاح الأخطاء، تحقق من سياسية الدعم التي يعتمدها متجر القوالب إذا كنت ستشتري أحد القوالب المدفوعة premium. وإذا كنت تستخدم قالبًا من WordPress.org تحقق من مدى نشاط منتدى الدعم. الوظائف المخصصة من الأمور الأخرى التي يفضّل التحقق منها هي مقدار الوظائف المخصصة التي يقدّمها القالب. يوفّر بعض من مصممي القوالب كمية هائلة من الوظائف في قوالبهم. من الأمثلة على ذلك موقع ThemeForest الذي يشتهر بذلك. من الوظائف التي يشيع تضمينها مع القوالب هي معارض الصور sliders، الشيفرات المختصرة shortcodes، الودجات widgets، أدوات إدارة تخطيط القالب، وأدوات بناء المحتوى. كن حذرًا عند اختيار القوالب من هذا النوع. لأنّه عندما تقرر تبديل القالب لاحقًا ستفقد جميع الوظائف المخصصة التي قد أصبحت معتمِدًا عليها. وهذا الأمر يمكن أن يسبب لك المشاكل إذا كانت الوظيفة مرتبطة بجميع أجزاء الموقع. لنفترض أنّك تستخدم الشيفرة المختصرة [slider] لعرض الصور على جميع صفحات المنتجات على متجرك. عندما تقوم بتبديل القوالب ستضطر إلى إزالة جميع حالات instances الشيفرة المختصرة تلك، وهذه العملية مملة وغير ممتعة على الإطلاق. ننصحك أن تبحث دائمًا عن القوالب الخفيفة والمرنة ثم إضافة وظائف إضافية عبر الملحقات والامتدادات. فبهذه الطريقة يمكنك تبديل القوالب مع المحافظة على الوظائف. التجاوب الأمر الأخير الذي يجب أن تأخذه في الاعتبار عند اختيار القالب هو التحقق فيما إذا كان القالب بتصميم متجاوب. يعني التصميم المتجاوب ببساطة أنّ القالب محسّن ليعمل على جميع الأجهزة، من الهواتف الذكية المحمولة، إلى أجهزة الحاسوب المكتبية وأجهزة التلفاز. ننوّه مجددا إلى أنّ تفضيل القالب عائد إلى جمهورك، لكن من الجدير بالذكر أنّ الويب ينمو ويتنوّع بشكل سريع، وأنّ الناس يستخدمون الكثير من الأجهزة المختلفة للتصفّح كالهواتف الذكية، التلفاز، الأجهزة اللوحية، إلخ، وغايتك هي تقديم تجربة رائعة لجميع العملاء. وختامًا، بإمكانك إلقاء نظرة على القائمة الكاملة لقوالب WooThemes المتجاوبة. ترجمة -وبتصرّف- للدرس Choosing the right theme.

هذا هو الدرس الأخير من هذه السلسلة، ففي الدرس الأول قمنا بتصميم الواجهة باستخدام برنامج الفوتوشوب، وفي الدرس الثاني قمنا بتحويل التصميم إلى نموذج HTML5، أمّا في هذا الدرس فسوف نقوم ببناء قالب ووردبريس كامل وجاهز للاستخدام. إذا كان هذا هو أول درس تتابعه من هذه السلسلة فدعني أخبرك قليلًا عنها. أردنا في هذه السلسلة بناء قالب ووردبريس كامل، وكما ذكرت سابقًا فهذا هو الدرس الثالث والأخير من هذه السلسلة. وقلنا بأنّ اسم القالب سيكون "Typo" وبأنه سيعتمد بشكل كلي على فن Typography من دون استعمال أي صور حتى يكون التركيز بالكامل على المحتوى. اضغط هنا لمعاينة القالب بشكله النهائي. ملفات قالب الووردبريس بما أنّ القالب بسيط فسوف نقوم بإنشاء القالب باستخدام ملفات القوالب المعتادة والمألوفة، كما أنّه سيتم تقسيم نموذج HTML5 الذي قمنا بإنشائه سابقًا على ملفات القالب من أجل إنشاء الصفحات المختلفة للقالب. سنقوم أيضًا بنسخ جميع الصور وملفات CSS إلى مجلد القالب. ملف Style.css الخاص بالقالب Theme Name: Typo Theme URI: http://blog.spoongraphics.co.uk/ Description: A premium theme by Chris Spooner of Blog.SpoonGraphics. Version: 1.0 Author: Chris Spooner Author URI: http://blog.spoongraphics.co.uk/ body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #dedede url(images/bg.jpg); font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #666; } قمنا في بداية الملف بإضافة مجموعة من التفاصيل التي تخص القالب حتى يتعرف عليه الووردبريس، كما أننا قمنا بنسخ بعض التنسيقات الموجودة في نموذج HTML5 الذي أنشأناه سابقًا. ملف Header.php <!doctype html> <html> <head> <meta charset="UTF-8"> <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" /> <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic" rel="stylesheet" /> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lt IE 9]> <link href="<?php bloginfo('template_url); ?>/css/ie.css" rel="stylesheet" /> <![endif]--> <!--WP generated header--> <?php wp_head(); ?> <!--End WP generated header--> </head> <body> <div id="container"> <header> <h1><a href="<?php echo get_option('home'); ?>" title="Return to the hompage">Typo</a></h1> <nav role="navigation"> <ul> <li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_list_pages('title_li=' ); ?> </ul> </nav> </header> قمنا بنسخ الجزء الأول من الشيفرة البرمجية الموجودة في ملف index.html الخاص بالنموذج إلى ملف header.php. فقد قمنا بنسخ كل شيء ابتداءً من Doctype وانتهاءً بمحتويات الوسم <head> ووضعناه في ملف header.php، بعد ذلك أضفنا بعض الوسوم الخاصة بقوالب ووردبريس، وكمثال على ذلك فقد قمنا بإضافة <? ;()php wp_title?> لإظهار عنوان التدوينة أو الصفحة و<? ;('php wp_list_pages('title_li?> لعرض قائمة بجميع الصفحات، فالقيمة title_li استخدمت لإزالة الإعداد الإفتراضي الذي يقوم بإظهار العنوان "Pages" أعلى القائمة. ملف Index.php <?php get_header(); ?> <div id="content" role="main"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <? php the_content(''); ?> <ul class="postinfo"> <li><?php the_time('jS F Y'); ?></li> <li>Posted in <?php the_cetegory(', '); ?></li> <li><a href="<? php the_permalink(); ?>">Continue Reading &raquo;</a></li> </ul> </article> <?php endwhile; ?> <nav id="pagination"> <ul> <li class="older"><?php next_posts_link('Older posts'); ?></li> <li class="newer"><?php previous_posts_link('Newer posts'); ?></li> </ul> </nav> <? php else : ?> <article class="nothing"> <h2>Nothing Found</h2> <p>Sorry, but you are looking for something that isn't here</p> <p><a href="<?php echo get_option('home'); ?>">Return to the homepage</a></p> </article> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> قمنا بعد ذلك بنسخ الشيفرات البرمجية من عند نهاية ما هو موجود في ملف header.php وحتى بداية القائمة الجانبية، بعدها أضفنا حلقة ووردبريس (WordPress loop) لنتفحص فيما إذا كان هناك محتوى/تدوينات أم لا. وإذا كنت تذكر ففي ملف HTML الثابت الذي أنشأناه سابقًا قمنا بوضع 3 تدوينات بنصوص عشوائية، ولكننا الآن لن نحتاج لها لأن الووردبريس سوف يعرض التدوينات باستخدام الكود الموجود بين while وendwhile، ففي داخل هذه الحلقة تبقى بنية HTML موجودة ولكن العناصر التي تحتاج أن تكون متغيرة/ديناميكية (dynamic) استُبدِلت بوسوم PHP مناسبة، فعلى سبيل المثال فإنّ الكود <? ;()php the_permalink?> سوف يعرض عنوان URL الخاص بالتدوينة داخل وسم <a> وأمّا الكود <? ()php the_category?> سوف يقوم بعرض فئة التدوينة. وبالنسبة للمحتوى العشوائي فإنه يمكن استبداله بوسم واحد وهو <? ;()php the_content?> بحيث سيقوم الووردبريس بإدخال كل المحتوى المحفوظ في قاعدة البيانات من محرر النصوص بدل ذلك الوسم. أمّا في أعلى وأسفل هذا الملف فقد قمنا باستدعاء ملفات القالب للحصول على صفحة كاملة، فالوسم <? ;()php get_header?> يقوم بمناداة وإدخال ملف header.php، بينما يقوم الوسم <? ;()php get_sidebar?> بمناداة وإدخال ملف sidebar.php وهكذا بالنسبة لجميع الملفات. ملف Sidebar.php <aside id="sidebar"> <section id="about"> <h3>About me</h3> <p><?php echo get_option('omr_about_excerpt');?> <a href="<?php echo get_option('omr_about_link');?>">Find out more &raquo;</a></p> </section> <section id="categories"> <h3>Categories</h3> <ul> <?php wp_list_categories('show_count=0&title_li=&hide_empty=0&exclude=1'); ?> </ul> </section> <section id="social"> <h3>Social</h3> <ul> <?php if( !get_option('omr_social-one') ) { ?> <?php } else { ?> <li><a href="<?php echo get_option('omr_social-one_url');?>"><?php echo get_option('omr_social-one');?></a></li> <?php } ?> <!-- more custom tags for theme settings page --> <?php if( !get_option('omr_social-six') ) { ?> <?php } else { ?> <li><a href="<?php echo get_option('omr_social-six_url');?>"><?php echo get_option('omr_social-six');?></a></li> <?php } ?> </ul> </section> <section id="latest"> <h3>Latest Posts</h3> <ul> <?php query_posts('showposts=6'); if ( have_posts() ) : whitle ( have_posts() ) : the_post();?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; else: ?> <li>No posts found</li> <?php endif;?> <?php wp_reset_query();?> </ul> </section> <section id="search" role="search"> <h3>Search</h3> <form action="<?php bloginfo('url'); ?>/" method="get"> <fieldset> <input type="text" id="searchbar" placeholder="I'm looking for&hellip;" name="s" /> <input type="submit" id="searchsubmit" value="Search" /> </fieldset> </form> </section> </aside> الجزء التالي هو القائمة الجانبية بحيث تكون عناصره بين وسمي <aside>. نفس القاعدة تنطبق على أي محتوى عشوائي بحيث يتم استبداله بوسم PHP بحيث يتم ادخال المحتوى بشكل ديناميكي. ومن الأمثلة على ذلك <? ;()php wp_list_categories?> مع مجموعة من المتغيرات لتخصيص مخطّط الصفحة (layout). في هذا القالب هناك الكثير من الوسوم المخصصة التي تسمح للمستخدم بتخصيص القالب كما يريد باستخدام صفحة إعدادات خاصة، فجميع الوسوم التي تبدأ بـ _omr تقوم باستدعاء إعدادات مخصصة مثل جزء About وروابط الشبكات الاجتماعية. ملف Footer.php <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoonghraphics"><a href="http://blog.spoongraphics.co.uk">Theme by SpoonGrahpics</a></li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div> <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <!--WP generated footer--> <?php wp_footer(); ?> <!--END WP generated footer--> </body> </html> ملفات Archive.php وSearch.php <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoonghraphics"><a href="http://blog.spoongraphics.co.uk">Theme by SpoonGrahpics</a></li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div> <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <!--WP generated footer--> <?php wp_footer(); ?> <!--END WP generated footer--> </body> </html> البنية الرئيسية للصفحة يتم إنشاؤها باستخدام header.php ،index.php ،sidebar.php وfooter.php، ولكن index.php تُستخدم فقط في الصفحة الرئيسية (إذا كانت هناك تدوينات ليتم عرضها على الصفحة الرئيسية). هناك بدائل لـ index.php يتم استخدامها لخصائص متعددة في المدونة مثل تصفح التدوينات بناءً على ترشيح (filter) معين (كالترشيح حسب الفئة أو التاريخ أو حتى حسب الكاتب)، أو عند تصفح التدوينات بناءً على نتيجة بحث معينة. هنا يأتي دور archive.php وsearch.php، فمحتوى هذين الملفين يشبه إلى حد كبير محتوى ملف index.php باستثناء أنّ هذين الملفين يحتويان على عناوين إضافية لوصف المحتوى المعروض على الصفحة. ملفات Page.php وSingle.php <?php get_header(); ?> <div id="content" role=''main"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <artic1e <?php post_c1ass(); ?>> <h2 c1ass="post-title"><?php the_title(); ?></h2> <?php the_content("); ?> </article> <?php endwhile; ?> <?php endif; ?>> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> <?php get_header(); ?> <div id="content" role=''main"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <artic1e <?php post_c1ass(); ?>> <h2 c1ass="post-title"><?php the_title(); ?></h2> <?php the_content("); ?> </article> <?php endwhile; ?> <?php endif; ?>> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> عندما يتم تصفّح تدوينة أو صفحة واحدة فإنّ ملفات index.php ،archive.php أو search.php يتم استبدالها بملفات page.php أو single.php. هذه الملفات أيضًا متشابهة ولكن التخطيط الخاص بها عادةً لا يحتوي على بعض الخصائص مثل رابط العنوان (يصبح العنوان نص عادي وليس رابط)، معلومات التدوينة، اقرأ المزيد وروابط ترقيم الصفحات (pagination) لانّ هذه الأمور لم تعد مطلوبة ومهمة عند تصفح المحتوى أو التدوينات بشكل فردي. كما أنّ ملف single.php يحتوي على قسم التعليقات وقد تمت إضافته باستخدام وسم <? ;()php commentstemplate?>. ملف Comments.php <?php // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die (‘Please do not load this page directly. Thanks!'); if ( post_password_required() ) { ?> <p c1ass="nocomments">This post is password protected. Enter the password to view comments.</p> <?php return; } ?> <div id="comments"> <h3><?php comments_number('No Comments‘, '1 Comment’, '% Comments’ );?></h3> <?php if ( have_comments() ) : ?> <ol class="commentlist"> <?php wp_list_comments('avatar_size=&type=comment'); ?> <div class="pagination"> <p class="prev"><?php previous_comments_link(‘Older comments‘) ?></p> <p class="next"><?php next_comments_link(‘Newer comments‘) ?></p> </diV> <?php endif; ?> <?php if ( comments_open() ) : ?> <div id="respond"> <h3>Leave a response</h3> <form action="<?php echo get_option('siteurl'); ?> /wp-comments-post.php" method="post" id="commentform"> <fieldset> <label for="author">Name:</label> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" /> <label for="email">Email:</label> <input type=“text" name="email" id="email" value="<?php echo $comment_author_email; ?>" /> <label for="url">Website:</label> <input type="text" name="url" id="url" value="<?php echo scomment_author_url; ?>" /> <label for="comment">Comment:</label> <textarea name="comment" id="comment” rows="" cols=""></textarea> <input type="submit" class="commentsubmit" value="Submit" /> <?php comment_id_fields(); ?> <?php do_action('comment_form', $post->ID); ?> </fieldset> </form> <p class="cancel"><?php cancel_comment_reply_link('Cancel Reply'); ?></p> </div> <?php else : ?> <h3>Comments are now closed.</h3> <?php endif; ?> </div><!--Comments--> يمكنك القول بأنّ ملف comments.php هو أحد أكثر الملفات التي يمكن إعادة استخدامها في كل القوالب التي تصنعها لأنّ هذا الملف ومحتوياته لا يتغير كثيرًا. جميع التعليقات يتم إنشاؤها وإظهارها في الصفحة باستخدام وسم واحد فقط وهو <? ;()php wplistcomments?> ثم تحتاج إلى بعض تنسيقات CSS لتنسيق المحتوى، وفي نهاية الملف يوجد نموذج كتابة التعليقات. خاتمة يمكنك بعد إنشاء جميع ملفات القاب أن تقوم برفعها واختبارها على مدونة ووردبريس. حاول بعد ذلك تعديل بعض الإعدادات وإضافة بعض المحتوى (كتابة تدوينةأو تعليق مثلًا) حتى تتأكد أنّ كل شيء يعمل كما هو مطلوب. كما رأيت فعملية بناء قالب ووردبريس تتطلب نسخ ولصق العديد من الأكواد، وإذا كنت تبحث عن أي وسم لاستخدامه يمكنك اللجوء إلى موقع WordPress Codex فهو يحتوي على جميع الوسوم التي يمكنك استخدامها. يمكنك معاينة القالب من هنا. ترجمة -وبتصرف- للمقال: Create a Typography Based WordPress Blog Theme لصاحبه: Iggy.

في هذا الدرس سنتعلم كيفية إنشاء القوالب في Outlook واستخدامها بدلا من إنشاء نفس الرسائل، دعوات الاجتماعات، المهام، أو جهات الاتصالات المتكررة أو المتشابهة. كما سنتعلم كيفية تنسيق خلفيات الرسائل بإضافة نقوش أو ألوان عن طريق تطبيق القرطاسية Stationery أو النسق Themes على الرسائل. 0 استخدام القوالب إذا كنت ترسل نفس البريد الإلكتروني مرارا وتكرارا إلى عدد من الأشخاص، يمكنك توفير الكثير من الوقت والتخلص من هذا التكرار الممل بإنشاء قالب Outlook واستخدامه في كل مرة. يتم إنشاء القالب ببساطة كإنشاء رسالة جديدة. من تبويب الصفحة الرئيسية Home انقر فوق بريد إلكتروني جديد New Email: في نافذة الرسالة الجديد قم بكتابة النص، إرفاق الملف، أو إضافة الصور التي تتكرر بشكل مستمر. يمكنك أيضا كتابة عنوان الرسالة وعناوين البريد الإلكتروني للمستلمين. لكن يمكنك إضافة عناوين البريد الإلكتروني لاحقا عند إرسال الرسالة. وكذلك يمكنك كتابة أية ملاحظة أخرى ترغب في تذكير نفسك بها عند إرسال الرسالة: بعد الانتهاء من إضافة جميع العناصر التي تتكرر في كل رسالة اذهب إلى: ملف File > حفظ باسم Save As ثم اختر Outlook Template من خيارات Save as type. قم بتسمية القالب ولا تغير مجلد الحفظ، إذ يُفضل حفظ قوالب Outlook جميعها في هذا المجلد (Microsoft> Templates): قم بإغلاق نافذة الرسالة الجديد، وانقر No عندما يسألك البرنامج إذا كنت ترغب في حفظ الرسالة كمسودة. لأننا قمنا بحفظ القالب ولا حاجة لنا إلى حفظ الرسالة. في المرة القادمة التي ترغب فيها بإرسال تلك الرسالة المتكررة استخدم القالب بدلا من إنشاء بريد إلكتروني جديد. انقر فوق زر : New Items > More Items > Choose Form من خيارات Look in اختر User Templates in File System، حدد القالب الذي تريد استخدامه وانقر Open: عند فتح القالب قم بإجراء التغييرات المرغوبة وحذف الملاحظات التي كتبتها لنفسك (لن يتغير القالب في هذه الحالة فقط الرسالة التي تعمل عليها حاليا)، ثم ادخل عناوين البريد الإلكتروني للمستلم/المستلمين إن لم تكن قد أدخلتها مسبقا عند إنشاء القالب. عند الانتهاء قم بإرسال الرسالة من زر Send. وبهذه الطريقة يمكنك استخدام قالب الرسالة متى تشاء وتوفر الكثير من الوقت. بإمكانك أيضا إنشاء قوالب للتقاويم بنفس الطريقة. قم بإنشاء قالب اجتماع إذا كان لديك اجتماع بجدول محدد يتكرر بمواعيد غير محددة، حيث لا تستطيع في هذه الحالة استخدام خاصية Recurrence لأنّ مواعيد التكرار غير محددة. اذهب أولا إلى نافذة التقاويم: من تبويب الصفحة الرئيسية قم بإضافة اجتماع جديد New Meeting: في نافذة الاجتماع الجديد، قم بإضافة عناوين البريد الإلكتروني للأشخاص الذين يحضرون الاجتماع في كل مرة، عنوان الاجتماع، موقعه، وبعض الملاحظات إن وجدت. أما بالنسبة لتواريخ البدء والانتهاء فبإمكانك عدم تغييرها لحين وقت إرسال الدعوة: عند الانتهاء من تعديل القالب، اذهب إلى: File > Save As واختر Outlook Template من خيارات Save as type. قم بتسمية القالب ولا تغير مجلد الحفظ: اغلق نافذة دعوة الاجتماع ولا تقم بحفظه فلا حاجة إليه. سيتم حفظ القالب وستتمكن من استخدامه كلما رغبت في إرسال دعوة اجتماع جديدة. لإرسال دعوة اجتماع مستخدما القالب انقر: New Items > More Items > Choose Form من خيارات Look in اختر User Templates in File System، حدد قالب الاجتماع الذي تريد استخدامه وانقر Open: عند فتح القالب قم بتحديد وقت البدء Start Time ووقت الانتهاء End Time، وأجر التغييرات المرغوبة عليه. عند الانتهاء انقر زر Send لإرسال الدعوة إلى الأشخاص المحددين. يمكنك اتباع نفس الطريقة لإنشاء قوالب جهات اتصال أو قوالب مهام. في حالة جهات الاتصال، يمكنك اختصار الخطوات والاستفادة من خاصية Contact from the Same Company. استخدم هذا الخيار إذا كانت لديك جهة اتصال سابقة من شركة ما، وترغب في إضافة جهة اتصال من نفس الشركة. في هذه الحالة يمكنك استخدام معلومات جهة الاتصال الأصلية، كاسم الشركة، موقعها الإلكتروني، رقم الهاتف، إلخ دون الحاجة إلى إعادة إدخالها ثم إضافة بقية المعلومات الخاصة بجهة الاتصال الجديدة. حدّد جهة الاتصال التي تريد استخدامها كمصدر (في هذا المثال سأحدد Namida لأنني أرغب في استخدام بعض المعلومات الخاصة بجهة الاتصال هذه لغرض التوضيح فقط)، من خيارات New Items اختر Contact from the Same Company: ستُفتح نافذة جهة اتصال جديدة، وستلاحظ وجود معلومات الشركة الخاصة بجهة الاتصال الأصلية مسبقا، قم بإضافة اسم جهة الاتصال الجديدة وأية معلومات أخرى، وانقر Save & Close لحفظ جهة الاتصال الجديدة وإغلاق النافذة: استخدام القرطاسية في الرسائل يُقصد بالقرطاسية مجموعة من الخلفيات والنقوش، بالإضافة إلى عناصر التصميم الأخرى كالخطوط، الألوان والتأثيرات، معرّفة في البرنامج وجاهزة لاستخدامها في تخصيص رسائل البريد الإلكتروني ذات تنسيق HTML لجعل الرسائل أكثر جاذبية وإثارة لاهتمام القارئ. لاستخدام القرطاسية تأكد أولا من أن البرنامج معد لإنشاء البريد الإلكتروني بتنسيق HTML. اذهب إلى: File > Options > Mail واختر HTML من خيارات Compose messages in this format: ولتطبيق القرطاسية في جميع رسائل البريد الإلكتروني التي تنشئها، انقر زر Stationery and Fonts من نفس مربع الحوار Outlook Options: في مربع الحوار Signatures and Stationery انقر Theme من تبويب Personal Stationery: من قائمة النسق والقرطاسية تستطيع اختيار النمط المرغوب فيه. لاحظ أن القرطاسية توفر نقوش وألوان لخلفية للرسالة، بينما توفر النسق themes مجموعة من تنسيقات الخطوط، التعدادات النقطية، الروابط التشعبية، بالإضافية إلى النقوش والألوان. بعد اختيار النسق/القرطاسية انقر موافق، وسيتم تطبيقه على جميع الرسائل الجديد التي تقوم بإنشائها. للعودة إلى الخيارات الافتراضية اتبع نفس الخطوات السابقة واختر No Theme من مربع الحوار Theme or Stationary: إذا كنت ترغب في تطبيق قرطاسية على رسالة واحدة محددة (وليس على جميع الرسائل كما شرحنا في الفقرة السابقة)، انقر New Items بدلا من: New Email > E-mail Message Using > More Stationery: اختر النسق/القرطاسية المرغوبة وانقر OK وسيتم تطبيقها على خلفية الرسالة الجديدة. اكتب عنوان ونص الرسالة وعنوان البريد الإلكتروني للمستلم ثم أرسلها. بعد الإرسال سيعود البرنامج إلى استخدام النسق الافتراضي في الرسائل.

مِمَّا لا شكَّ فيه أنَّ هُناك قوالب ووردبريس رائعة المظهر ولكن هُناك العديد من الأمثلة على أشياءٍ بسيطة قد نُريد تغييرها في القالب. كلونٍ هُنا، حجم خطٍ هُناك ورُبَّما استدعاء للإجراء على الأزرار. تتمحور المُشكلة في أنَّ تعديل القالب حتَّى ولو كانَ تعديلًا بسيطًا يمنعُكَ من تحديثه إلى نُسخة جديدة في المُستقبل، هذا ببساطة راجع إلى أنَّه إذا قُمتَ بتحديثه فسيؤدِّي هذا إلى فُقدان كُلّ التغييرات التي أُحدِثَت عليه. تُقدِّم القوالب الفرعيَّة حلًّا لهذه المُشكلة عن طريق السَّماح لكَ باستخدام وظائف القالب المُختار إلى جانب إمكانيَّة التَّحديث دون الخوف من فُقدان تلكَ التَّعديلات. سنُقدِّم من خلال هذا الدرس توضيحًا للفائدة من استخدام قالب ووردبريس فرعي وكيفيَّة إنشائه. كيفيَّة عمل قوالب ووردبريس الفرعيَّة والفائدة من استخدامهاالقوالب الفرعيَّة هي قوالب مُنفصلة تعتمد على قالب أساسي في تأدية مُعظم وظائفها. إذا كُنتَ تستخدم قالب فرعي، فإنَّ ووردبريس سيقوم أوَّلًا بالتحقُّق من قالبك الفرعي ليتأكَّد من ما إذا كانت هُناك تأدية وظيفيَّة مُحدَّدة به. إذا لم يجد ووردبريس أيَّة تأدية وظيفية مُحدَّدة فسوف يستخدم القالب الأساسي مُباشرةً. تُعتبر هذه ميزة رائعة حيثُ أنَّها تُتيح لكَ التَّعديل على ما تُريد تعديله فقط. يجب استخدام القوالب الفرعيَّة إن كُنتَ تنوي تعديل ولو مُجرَّد حرف واحد في قالبك. هُناك سببين أساسيَّين للاستخدام، هما: التَّحديثات والتَّنظيم. 1. التَّحديثاتإذا قُمتَ بتعديل قالب بدون استخدام قالب فرعي فسيكون لديكَ خيارين بعد عمليَّة التَّعديل: قد تختار عدم تحديث قالبك في المُستقبل، أو تحديثه وخسارة كُلّ التغييرات المُضافة إلى القالب. رُبَّما يعملُ الخيار الثَّاني فنيًّا ولكنَّه أمرٌ غير مُقترح. حتَّى لو كان من السَّهل نسخ ولصق تعديلاتك، ما هي الفائدة من تضييع دقيقتين من وقتك على مُهمَّة قد تُعرِّضك للخطأ في كُلِّ تحديث؟ مُجرَّد التَّفكير في عدم تحديث القالب ليست فكرة جيِّدة. تُعتبر القوالب الغير مُحدَّثة من أكثر القوالب تعرُّضًا للاختراق. يجب عليكَ دائمًا الإبقاء -بدون استثناء- على كلٍّ من: ووردبريس، قالبك والإضافات مُحدَّثين بما يتناسب مع الوقت الحالي. 2. التَّنظيمعندما تُضيف شفرات لقالب موجود فإنَّك بهذا تُضيف إلى قاعدة شفرات قد تحتوي على الآلاف والآلاف من الأسطر. سيواجه المُطوِّرون ممن يعملون على موقعك (بالاضافة إليكَ بالتَّأكيد) أوقاتًا صعبة في تعقُّب التَّغييرات. نتيجة واحدة على الأقل لهذا الأمر هي تكاليف تطوير زائدة. حيثُ أنَّ القوالب الفرعيَّة تعود من جديد إلى القالب الأساسي -إلَّا إذا تمَّ تحديد ما هو غير ذلك- فإنَّ قالبك الفرعي هو عبارة عن مجموعة من التَّغييرات في قالبك الأساسي. يُمكن أن ينتج عن هذا تغييرات شاملة في حين أنَّ القالب الفرعي قد يحتوي على مُجرَّد مائة سطر من الشَّفرات. إنشاء قالب فرعييُعتبر إنشاء قالب فرعي أمرٌ بسيطٌ للغاية لدرجة أنَّه بامكانك تنفيذ هذا بمُجرَّد نسخ ولصق المثال الموجود بالأدنى. لإنشاء قالب فرعي لقالب عليكَ اتَّباع الخطوات التالية: أنشئ مُجلَّد قالب في تثبيت ووردبريس.أنشئ ملفّ نمط يحتوي على معلومات عن قالبك الفرعي.قُم بإيقاف تفعيل أنماط القالب الأساسي.يُمكنكَ تفعيل القالب الفرعي بمُجرَّد الانتهاء من تنفيذ هذه الخطوات وسيبدو موقعك تمامًا مثلما كان من قبل، الفرق الوحيد هو أنّ الموقع سيستخدم القالب الفرعي في عمله. دعونا الآن ندرس الخطوات أعلاه بالتَّفصيل. سأنشئ على سبيل المثال قالب فرعي للقالب الافتراضي Twenty Fourteen. أوَّلًا، توجَّه إلى مُجلَّد القالب وقُم بانشاء ملفًّا لقالبك الجديد. يُمكنكَ تسميته بالاسم الذي تُريد. من أجل التَّوضيح سنُسمِّي القالب twentyfourteen-child. الخطوة الثَّانية هي إنشاء ملفّ نمط. يجب تسمية هذا الملفّ style.css قُم بنسخ ولصق الشفرات التالية إلى الملف الذي أنشأته لتوِّك: /* Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite.com/twentyfourteen-child/ Description: My first child theme, based on Twenty Fourteen Author: Daniel Pataki Author URI: http://danielpataki.com Template: twentyfourteen Version: 1.0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child */العُنصرين الأساسيَّين في هذه الشَّفرة هي السُّطور البادئة بـ "Theme Name" و"Template". يُخبر اسم القالب Theme Name ووردبريس عن اسم قالبك ويُعرَضُ هذا في مُنتقي القالب. أمَّا Template فيُحدِّد لووردبريس أيُّ القوالب يجب اعتباره القالب الأساسي. ما تبقى يصف نفسه بنفسه باستثناء نطاق النَّصّ text domain والوسوم tags. يُستخدم نطاق النَّصَّ لترجمة المقاطع. يجب أن يكون نطاق النَّصّ مُميّزٌ لقالبك ويجب استخدامه متى قُمتَ باستخدام دوال التَّرجمة. لمعلوماتٍ أكثر راجع I18n لمُطوِّري ووردبريس. قسم الوسوم هو قائمة من الوسوم التي تُستَخدم بواسطة مُستودع قالب ووردبريس. على سبيل المثال قد قُمتُ بالنَّظر في ملف style.css الخاصّ بالقالب الأساسي وببساطة قُمتُ بنسخ ولصق الوسوم من هُناك. إلى هذه النُّقطة فإنَّ قالبك الفرعي يعمل بشكلٍ جيِّد. إذا قُمتَ بتفعيله ثُمَّ إعادة تحديث الصَّفحة ستجد كُلّ مُحتواك بها ولكن لن تحتوي على أيّ تنسيق. ذكرتُ سابقًا أنَّ ووردبريس يبحثُ عن التأديَّات الوظيفيَّة في القالب الفرعي وإذا لم يجدها فإنَّه يعود مُجدَّدًا إلى القالب الأساسي. في حالتنا هذه فإن لدينا بالفعل ملف نمط ولذلك فإنَّ ووردبريس قد فهم أنَّه غير مسموح بتحميل ملفّ القالب الأساسي. وبُناءً عليه فإنَّنا سنحتاج إلى إدراج ملفّ نمط القالب الأساسي لكي نتأكَّد من أنَّنا قد قُمنا بتحميله. يُمكن عمل هذا في ملفّ القالب function.php دعونا نُنشيء الآن هذا الملفّ وننسخ الشفرات التالية به: add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }إذا لم تكُن لديك أيَّة فكرة عن PHP وكُلّ ما تُريده هو تغيير بعض الأنماط فقط فلا تهتمّ كثيرًا لمعرفة سبب عمل هذا. يُمكنكَ الآن التوجُّه ببساطة إلى ملف النَّمط والبدء بعمل التَّغييرات التي تُريد. إذا كان لديكَ فضول لمعرفة المزيد عن الإدراج يُمكنكَ الاطِّلاع على صفّ وتسجيل ملفات Javascript و CSS في قوالب ووردبريس. تقنية القوالب الفرعيَّةإذًا كيف يعمل القالب الفرعي؟ تعملُ القوالب الفرعية في مستوى الملف. عند استخدام ملف خلال عملية تحميل قالب فيتمّ التحقُّق من ما إذا كان هذا الملفّ موجود في القالب الفرعي. إذا كان الملف موجودًا، يتمّ استخدام محتوى هذا الملف. أمَّا إذا لم يكن موجودًا، فيتمّ استخدام نفس الملف في القالب الأساسي. هُناكَ استثناءٌ واحد لهذه القاعدة ألا وهو ملفّ دوال القالب. يتمّ تحميل ملف functions.php الموجود في كلٍّ من القالب الأساسي والقالب الفرعي. إذا قامت دوال القالب الفرعي باستبدال دوال القالب الأساسي فقد تواجه موقعًا به خلل أو قد تحتاج إلى نسخ ولصق محتويات ملف دوال القالب الأساسي كلُّها إلى ملف القالب الفرعي والتي تُفشِلُ نوعًا ما الهدف من تمديد قالب. خطوات سير العمل عند تعديل التأدية الوظيفيَّة هي كالتَّالي: إذا أردتَ عمل تعديلات على التَّرويسة header فعليكَ نسخ ولصق ملفّ القالب الأساسي header.php إلى قالبك الفرعي. قُم بتعديل الملفّ كما يحلو لك، قُم بحفظ الملف بعد الانتهاء من التَّعديل وشاهد نتائج عملك. بعض المُلاحظات إلى صانعي قوالب ووردبريسإذا كُنتَ تُنشيء قالبكَ الخاصّ فهُناكَ بعض الإرشادات التي رُبَّما عليكَ اتِّباعها من أجل بناءٍ أسهل للقالب الفرعي. الإرشادين الأهمّ هما: معرفة الفرق بين دالَّتي ()get_stylesheet_directory و()get_template_directory، وإنشاء دوال قابلة للإضافة. 1. المُجلَّد الصحيحعليك -عند الرَّبط مع مُمتلكات باستخدام الدَّوال المذكورة- أن تكون على دراية بأنَّ عائلة دوال get_template_ ستُشيرُ دائمًا إلى مُجلَّد القالب الأساسي في حين أنَّ عائلة دوال get_stylesheet_ ستُشيرُ دائمًا إلى مُجلَّد القالب الفرعي. <a href="http://twitter.com/danielpataki"><img src="<?php echo get_template_directory_uri() ?>/images/twitter.png" alt='Twitter Logo'>Follow Me</a> <a href="http://github.com/danielpataki"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/github.png" alt='Github Logo'>On Github</a>في المثال أعلاه، يأخذ الرابط الأول صورته من القالب الأساسي في حين أنَّ الرابط الثاني يأخذ صورته من القالب الفرعي. ليس هُناك أفضيلة لطريقة على الأخرى، اختيار احداهما هو أمرٌ يرجع إليك. ميزة استخدام ()get_stylesheet_directory_uri هي أنَّه يُمكن لمُطوِّري القالب الفرعي استخدام صورهم الخاصَّة ويتمّ هذا ببساطة عن طريق إنشائها في الموقع المُناسب. على الجانب الآخر، إذا لم تكن الصور موجودة في القالب الفرعي فلن يتم عرضها على الإطلاق. سبب هذا هو أنَّه إذا كان القالب الفرعي مُفَعَّل فإنَّ دالَّة ()get_stylesheet_directory_uri لا تتحقَّق من (ولا تعرف) ما هو الملفّ الذي تقوم أنتَ بتحميله ولذلك فلن تقوم الدَّالَّة بالتحقُّق من وجوده أصلًا. ستقوم الدَّالَّة دائمًا بإعادة مُعرِّف الموارد المُوحَّد URI للقالب الفرعي. 2. دوال قابلة للتَّعديلالطريقة الأخرى التي عليكَ استخدامها هي ما يُسمِّيها ووردبريس دوال قابلة للإضافة. يسمح هذا لمالكي القالب الفرعي الكتابة على الدوال التي قُمتَ بتعريفها في القالب الأساسي. يشتمل هذا على إحاطة دوالّك بتأكيدات ()function_exists. لنفترض أنَّكَ قد قُمتَ بإنشاء دالَّة تُسمَّى ()my_meta لعرض بادئة تدوينة مُخصَّص. لا يوجد مجال للقالب الفرعي لتعديل هذه الدَّالَّة حيثُ أنَّه لا يُمكن تعريفها مرَّتين. حلّ المُشكلة هو إنشاء هذه الدَّالَّة إذا لم يتمّ تعريفها (تذكَّر، يتمّ تحميل ملف دالَّة القالب الفرعي أوَّلًا). if ( !is_defined( 'my_meta' ) ) { function my_meta() { // code for postmeta here } }ختامًايُمكنكَ باستخدام بعض خطوات النَّسخ واللَّصق البسيطة إنشاء بيئة مُستقبليَّة لقالبك والتي ستُبعد عنكَ الكثير من المتاعب. رغم أنَّه من المُغري استخدام مُحرِّر القالب المُدمج في ووردبريس، إلَّا أنَّه غالبًا ما يُسبِّب أخطاءً أكثر مِمَّا يحلّ في حالة عدم استخدام قالب فرعي. قُم باستغلال بعض الوقت لاتِّباع الخطوات الموجودة بهذا الدَّرس وسيكون موقعك ومُطوِّره شاكرين لفعلكَ هذا. أخيرًا، إن كان لديكَ بعض النَّصائح حول القوالب الفرعيَّة، لا تتردَّد في اعلامنا بها.