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

هل صنعت قالب 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

لا يُمكن أن يكلل بناء أي متجر على ووردبريس بالنجاح ما لم تستخدم قالبًا جيدًا يخدم المنتجات التي تريد الترويج لها. كما يوجد العديد من القوالب الجاهزة والتي توفر تصاميم جاهزة تناسب أنواع معينة من المنتجات وهنا سنذكر مجموعة من القوالب التي تدعم التجارة الإلكترونية من متجر قوالب ووردبريس الرسمي ومتجر بيكاليكا. سنشرح خطوات تثبيت كل قالب واستيراد التصاميم الجاهزة التي يقدمها، وأخيرًا سوف نتحدث عن أهم الإضافات المجانية أو المدفوعة التي لا بدَّ لنا من استخدامها أثناء تطوير متجرنا. قوالب ووردبريس مناسبة للتجارة الإلكترونية قد تتساءل ما الفرق بين قالب موقع عادي وقالب مخصص للمتجر الإلكتروني وهل يصلح أي قالب ووردبريس لأستخدمه في متجري؟ في الواقع لا فليست كل قوالب ووردبريس مناسبة للتجارة الإلكترونية فقوالب التجارية الإلكترونية يجب أن تتوافق بشكل أساسي مع إضافة ووكومرس WooCommerce المسؤولة عن تحويل موقع ووردبريس إلى متجر إلكتروني قابل للتخصيص بعبارة أخرى يجب أن تختار قالب ووردبريس يدعم واجهة ووظائف ووكومرس بشكل كامل بحيث يمكنك إضافة المنتجات، وإدارة الطلبات، وتتبع المخزون، وإدارة وسائل الدفع والشحن، وإجراء عمليات البيع والشراء بسهولة باستخدام إضافة ووكومرس. توفر قوالب ووردبريس المتوافقة مع ووكومرس تصميمات مخصصة للمتاجر الإلكترونية وتخصص صفحات عرض منتجات المتجر، وعربة التسوق وصفحات الدفع وحساب المستخدم ومراجعات المنتجات وتسويق المنتجات وغيرها. سنتعرف في الفقرات التالية على طريقة تثبيت وتخصيص قوالب ووردبريس متوافقة مع إضافة ووكوميرس وتصلح للاستخدام في بناء متجرك الإلكتروني، بالطبع القوالب التي سنتطرق لشرحها هي مجرد عينة توضيحية ويعتمد اختيار القالب على طبيعة متجرك الإلكتروني والمنتجات التي يوفرها. القالب الأول مدفوع من بيكاليكا وهو قالب لذيذ المخصص للمطاعم والكافيهات والقالب الثاني هو قالب أسترا المجاني الذي يناسب المتاجر الإلكترونية العامة، وسبب اختيارنا للقوالب المدفوعة يكون بشكل أساسي لكون بعض الميزات والتصاميم الجاهزة المميزة لا تتوافر إلا ضمن القوالب المدفوعة ومن الممكن أيضًا أن تواجهك بعض المشاكل مع القالب المجاني مثل عدم توافق القالب مع اللغة العربية أو ظهور أخطاء خلال التثبيت والتي يمكن لفريق الدعم التابع للقالب مساعدتك على حلها في حال كنت تملك النسخة المدفوعة وما زلت ضمن فترة الدعم والتي تبلغ عادة سنة كاملة أو 6 أشهر. فإذا لم تجد ما يناسبك من القوالب المجانية أنصحك بأن تأخذ جولة في متجر بيكاليكا للمنتجات الرقمية وستجد فيه العديد من قوالب ووردبريس الاحترافية وقوالب ووكومرس WooCommerce التي تتوافق بالكامل مع اللغة العربية وتلبي احتياجات أنواع مختلفة من المواقع والمتاجر الإلكترونية. قالب لذيذ من بيكاليكا اخترنا من متجر بيكاليكا قالب باسم لذيذ وهو قالب ووردبريس مدفوع مخصص لمواقع المطاعم والكافيهات يتميز بتصميم مميز وحديث ويوفر مجموعة واسعة من الميزات ولا يتطلب خبرة برمجية مسبقة لإدارة وتعديل الموقع يتميز هذا القالب بكونه متعدد النماذج حيث يحتوي على ثلاثة نماذج احترافية لمواقع المطاعم كما أنه يوفر لك 42 صفحة مختلفة تلبي احتياجات مواقع المطاعم الإلكترونية كما يوفر ديمو مسبق يمكن استيراده لجعل موقعك مطابقًا للنماذج المعروضة. يتضمن القالب كذلك لوحة تحكم احترافية متقدمة لتخصيص الموقع وإدارته ونظام ألوان ذكي يساعدك على تغيير ألوان القالب بسهولة وهو يدعم بشكل كامل إنشاء متجر إلكتروني متكامل باستخدام ووكومرس ويتميز بسرعة عالية في التصفح وتوافقية مع كافة أحجام الشاشات والمتصفحات ويوفر دعم فني وتحديثات دورية للقالب بدون تكاليف إضافية. قالب ASTRA من متجر قوالب ووردبريس يتوفر من هذا القالب نسختان الأولى مجانية والثانية مدفوعة مستخدمة من قبل أكثر من مليون موقع. النسخة المدفوعة منه تكلف 59 دولار اشتراك لمدة عام ويمكنك استخدامها على عدد غير محدود من المواقع. التقييمات التي حصل عليها القالب مرتفعة ومن بين العديد من القوالب التي استخدمتها فإن قالب ASTRA سهل التنصيب وسريع التحميل والدعم جيد جداً (أحيانًا نتيجة الضغط يتأخرون في الرد على مشكلتك)، وهو يمتلك خيارات تصميم جاهزة متنوعة كما يعطي حرية في التعديل على الموقع دون الحاجة لامتلاك خبرة برمجية (النسخة المدفوعة). يمكن أن تنزل القالب على جهازك من خلال زيارة الموقع ASTRA ثم الضغط على مفتاح Download والذي يطلب منك اسمك وبريدك الإلكتروني ثم يبدأ تنزيله بشكل ملف مضغوط يمكن استخدامه لتثبيت قالب ووردبريس أو يمكن تثبيته مباشرة على الموقع من داخل لوحة تحكم موقع ووردبريس كما سأشرح لاحقًا في فقرة كيفية تثبيت قالب في ووردبريس. الفرق بين النسخة المدفوعة والمجانية هي في الدعم وسهولة التعديل على التصميم ويمكنك الاطلاع على التفاصيل عبر الرابط مقارنة بين Astra pro وAstra free. كيفية تثبيت قالب من بيكاليكا كي تتمكن من شراء قالب من متجر بيكاليكا يجب عليك إنشاء حساب جديد عن طريق النقر على زر حساب جديد أو تسجيل الدخول إلى حسابك الموجود على موقع حسوب. بعد ذلك، يجب إيداع مبلغ في رصيد حسابك كي تتمكن من إجراء عمليات الشراء من المتجر. بعد تسجيل الدخول يمكنك استعراض المنتجات وفقًا للتصنيفات حيث يمكنك اختيار واحدة من بين العديد من تصنيفات المنتجات مثل قوالب ووردبريس، قوالب ووكومرس، قوالب HTML وغيرها كما يمكنك البحث على المنتج الذي تحتاجه بسهولة وسرعة عن طريق إدخال الكلمة المفتاحية في شريط البحث الموجود في الصفحة الرئيسية للموقع ومن ثم انقر على زر البحث لعرض المنتجات المتوافق. بعد تسجيل الدخول إلى موقع بيكاليكا اخترت تصنيف قوالب ووردبريس وتصفحت القوالب المتاحة على الموقع. بعد ذلك تصفحت قوالب ووكومرس للعثور على قالب يلبي متطلبات الموقع الذي أرغب في إنشائه وبعد أن وقع اختياري على قالب لذيذ حددت رخصة استخدام القالب ونقرت فوق زر إضافة المنتج للسلة كما في الصورة التالية: بعد إضافة المنتج ظهرت لي النافذة التالية، نقرت هنا فوق زر إتمام الشراء وانتقلت إلى صفحة سلة التسوق في صفحة سلة المشتريات سيظهر لك المنتج أو مجموعة المنتجات التي اخترتها وسعرها الإجمالي انقر فوق زر الدفع الظاهر أسفل هذه الصفحة. كل ما عليك الآن هو النقر فوق زر إتمام عملية الدفع ليتم اقتطاع سعر المنتج من رصيد حسابك في الموقع ويصلك إشعار بإتمام الطلب وتوفير رابط لتحميل القالب. بالنقر فوق زر التحميل كما هو موضح في الصورة التالية سيبدأ تحميل المنتج الذي اشتريته على جهاز الحاسوب الخاص بك بعد اكتمال التحميل حصلت على ملف مضغوط يتضمن مجموعة من الملفات أهمها ملف القالب وملف ابن أو فرعي للقالب child theme في حال رغبت بإجراء تعديلات على ملفات القالب الرئيسية مثل تعديل التصميم أو الوظائف وضمان عدم فقدانها في حال تحديث القالب الأصلي و النماذج والوسائط المستخدمة في القالب وملفات توثيق ومن الضروري قراءة التوثيق بعناية للتعرف على الطريقة الصحيحة لتثبيت القالب في متجرك الإلكتروني وتعديله ليناسب متطلباتك. بعد اكتمال تحميل القالب انتقل الآن لموقع وودربريس واختر من لوحة التحكم المظهر ثم قوالب ثم أضف جديد بعد ذلك اضغط على زر رفع قالب أعلى النافذة ثم انقر فوق زر اختيار ملف وحدد موقع الملف المضغوط lazeez.zip الخاص بالقالب وانقر على زر التنصيب الآن لتنصيب القالب من الملف المرفوع. بعد اكتمال عملية التنصيب انقر فوق الرابط تفعيل لتفعيل قالب لذيذ في موقعك. أخيرًا قم بتنصيب وتفعيل الإضافات المطلوبة مع القالب الخطوة التالية هي استيراد بيانات النماذج التي يوفرها القالب من خلال التبويب المظهر ثم النقر فوق استيراد بيانات النماذج، في حالتي اخترت نموذج كافيه ومحل عصائر، بعدها سيطلب منك القالب تنصيب مجموعة من الإضافات الضرورية لاستيراد النموذج ومن ضمنها إضافة ووركوميرس ويستورد لك مجموعة من المنتجات الافتراضية لمتجرك. سنحصل في نهاية هذه الخطوات على موقع ووردبريس يمتلك إضافة ووكومرس ومجهز بالصفحات الخاصة بمنتجات العصائر والمشروبات والتي يمكنك تعديلها وفق بيانات وصور منتجاتك الفعلية. بعد اكتمال عملية الاستيراد تظهر لك النافذة التالية التي تبين نجاح العملية: يمكنك الآن زيارة الموقع لعرض النتيجة ورؤية المحتوى التجريبي الذي استوردته و التغيير الكبير الذي حصل في مظهر الموقع ومحتوياته من صفحات ومقالات، أنت بالطبع حر في تعديل ما تشاء منها أو إضافة محتوى جديد عليها. كما يوفر لك هذا القالب الاحترافي لوحة تحكم سهلة الاستخدام تصل لها بالنقر فوق اسم القالب ضمن التبويب المظهر في لوحة التحكم وستلاحظ توفر الكثير من الخيارات التي يمكنك من خلالها تعديل ما تريده من مظهر موقعك سواء الخطوط أو الألوان أو غير ذلك. ارجع إلى توثيق القالب وستجد الكثير من التفاصيل للتعامل مع هذا القالب وتخصيصه وفق متطلبات علامتك التجارية. كيفية تثبيت قالب من متجر ووردبريس الرسمي الآن سوف أقوم بشرح طريقة تثبيت قالب من المتجر الرسمي لقوالب ووردبريس وسأختار هنا قالب أسترا المعروف الذي يوفر محتوى جاهز لمتجرك يتضمن منتجات وصفحات افتراضية مستفيدين من ميزة الاستيراد التي يقدمها لها القالب وبعض الإضافات المساعدة. سنحصل في نهاية هذه الخطوات على موقع ووردبريس يمتلك إضافة ووكومرس ومجهز بالصفحات الخاصة بالمنتجات وعملية الشراء وينقصه فقط إضافة بعض المنتجات. سوف أستخدم موقع ووردبريس الذي أنشأته في درس سابق باستخدام استضافة Cloudways لذا سجل دخول لحسابك في الاستضافة وانتقل للوحة تحكم أدمن الموقع الموجودة على الرابط example.com/wp-login.php كما شرحنا في المقال السابق. طبعًا ما زال الموقع يستخدم القالب الافتراضي نفسه عند تنصيب الموقع عبر استضافة Cloudways وهو في حالتنا القالب الافتراضي Twenty Twenty ويظهر ذلك من زيارة الصفحة الرئيسية للموقع أو يمكن معرفة ذلك من خلال النقر فوق التبويب مظهر على يمين لوحة التحكم ثم النقر فوق قوالب، حينها يمكنك رؤية كافة القوالب المثبتة على موقعك ومعرفة أي قالب هو المُفعل، ولتثبيت قالب ووردبريس جديد عليك النقر فوق زر "أضف جديد" الموجود في أعلى النافذة. الآن سوف تظهر لك نافذة جديدة تحوي العديد من القوالب المجانية التي تستطيع تثبيتها بمجرد الضغط عليها وهي موجودة ضمن مخزن قوالب ووردبريس الرسمي ولكن في حال أردت تنصيب قالب غير موجود ضمن المخزن ولكني أمتلك ملفاته على حاسوبي اضغط على خيار "رفع قالب" في أعلى الصفحة وبعدها أختار الملف من حاسوبي. الآن اضغط على خيار "التنصيب الآن" ليبدأ الموقع برفع الملف من الحاسوب وفك ضغطه وتثبيته على الاستضافة. وبعد الانتهاء من عملية التثبيت سوف يطلب منك الموقع تفعيل القالب وذلك بالضغط على خيار تفعيل. بعد تفعيل القالب سوف يتم تحويلك إلى النافذة المبينة في الصورة التالية والتي تبين أنَّ القالب المفعل الآن أصبح Astra وفي حال قمت بزيارة الموقع سوف تلاحظ أنَّ شكله قد تغير. بعد الانتهاء من تثبيت قالب Astra سيوجهك القالب لتنصيب إضافة Spectra وهي إضافة ووردبريس مثالية طورتها نفس شركة تطوير قالب Astra وظيفتها توسيع محرر المكونات في ووردبريس وتزوديه بالعديد الكتل الإضافية والتصاميم الاحترافية التي تساعدك على إنشاء صفحتك بسهولة وسرعة، لذا أنصحك بتثبيتها على الفور، وفي حال لم تثبتها مباشرة بعد تثبيت القالب لا مشكلة يمكنك تثبيتها لاحقًا بطريقة مماثلة لتثبيت أي إضافة ووردبريس أخرى. كما تلاحظ فإن موقعنا إلى الآن لا يتضمن محتوى باستثناء المقالة الافتراضية بعنوان "أهلًا بالعالم" والصفحة الافتراضية بعنوان "مثال على صفحة" التي يضيفها نظام ووردبريس بشكل افتراضي ولم يتم تخصيص تصميمه بشكل احترفي، لذا أمامنا خياران إما أن نقوم بأنفسنا بعملية التخصيص وإضافة المحتوى بشكل يدوي أو نستورد قوالب جاهزة تسرع العمل وتبني لنا الموقع المطلوب بمحتوى تجريبي ويمكننا بالطبع أن نعدله كما نشاء بعدها. سنختار حاليًا الطريقة الثانية وللقيام بذلك نحتاج إلى تثبيت إضافة مساعدة هي إضافة Starter Templates التي توفر مجموعة قوالب أو تصاميم جاهزة تستخدم قالب Astra وتوفر عليك عناء التصميم الذي يتطلب الكثير من الوقت والجهد والخبرة في استخدام إضافات البناء Page builder plugins وتجدر الإشارة لأن بعض هذه التصاميم مجاني وبعضها مدفوع. لكن قبل أن نبدأ بتنصيب الإضافة Starter Templates دعنا قبل ذلك نحول هذا الموقع من مدونة إلى متجر إلكتروني من خلال تثبيت إضافة ووكومرس الشهيرة woocommerce التي تمكننا من إنشاء متجر إلكتروني متكامل وإدارته بسهولة فائقة. لتثبت الإضافة يجب تسجيل الدخول للوحة تحكم الموقع بدور مسؤول ثم الانتقال إلى التبويب إضافات ثم تبويب "إضافة جديد" بعدها نكتب ضمن مربع البحث woocommerce ثم ننقر فوق زر التنصيب الآن للبدء بتنصيبها ثم زر تفعيل لتفعيلها على الموقع. بعد تفعيل الإضافة سوف ينقلك الموقع إلى صفحة إعداد إضافة ووكومرس WooCommerce ولأن إعداد الإضافة يتضمن العديد من المراحل سوف نتطرق لشرحها بالتفصيل في المقال التالي من هذه السلسلة، لذلك سنكتفي حاليًا بهذه الخطوة ونضغط على الرابط skip setup store details الظاهر أسفل الصفحة وسنعود لإتمام هذه العملية لاحقاً. بالعودة لإضافة Starter Templates والبدء باستخدامها علينا التوجه من جديد للتبويب إضافات في لوحة التحكم والنقر فوق أضف جديد وكتابة starter templates Astra في مربع البحث وعند ظهور للإضافة المطلوبة ننقر فوق زر التنصيب الآن ثم تفعيل. بعد تفعيل الإضافة ستلاحظ وجود خيار جديد في التبويب المظهر باسم Starter Templates وبالنقر فوقه ستظهر لك صفحة تعريفية بالإضافة، انقر فوق الزر Build Your Website Now للبدء باستخدامها وبناء موقعك بالاستعانة بأحد تصاميمها. الخطوة التالية هي تحديد إضافة باني الصفحات التي ستعتمدها لتحرير موقعك وهنا أفضل اختيار محرر ووردبريس الافتراضي Block Editor المعروف كذلك باسم محرر جوتنبرج Gutenberg فهو محرر مرن وسهل الاستخدام وقابل للتوسيع من خلال إضافات مساعدة بعدها سأنتقل مباشرة للخطوة التالية. تستطيع اختيار ما شئت من قوالب تعجبك وتتناسب مع تصميم ومحتوى موقعك، أما بالنسبة لي فسوف أختار التصميم Organic Store. ستظهر لك نافذة يمكنك من خلالها تخصيص بعض الأمور الخاصة بموقعك مثل صورة الشعار وحجمه وتخصيص الألوان وما إلى ذلك أو يمكنك النقر فوق زر Skip and Continue لمتابعة عملية الاستيراد وتخصيصها في مرحلة لاحقة. تبدأ الآن عملية الاستيراد وقد يستغرق الأمر بعض الوقت لإتمام العمل، بعد انتهاء عملية الاستيراد بنجاح سوف تظهر لك رسالة تخبرك بأن الأمر تم بنجاح ويمكنك الآن استعراض الشكل الجديد للموقع بالنقر فوق الزر View your website وستلاحظ التغيير الكبير الذي ظهر على مظهر الموقع ومحتوياته من صفحات ومقالات. تجدر الإشارة بأن عملية الاستيراد قد تقوم بتثبيت مجموعة من الإضافات الجديدة وفق ما يتطلبه التصميم الذي اخترته وهذا يمكنك ملاحظته إذا توجهت إلى تبويب الإضافات المنصبة في موقعك. خاتمة تعرفت في هذا المقال على طريقة تثبيت وتخصيص قوالب مناسبة لمتجرك الإلكتروني ولكن هذا لا يعني أن هذه الخيارات هي الوحيدة المتوفرة أو أنها سوف تبقى الأفضل. فيوميًا تظهر قوالب جديدة وميزات جديدة منافسة لما هو متوفر الآن لذلك عليك أن تبقى مطلعًا باستمرار على كل ما هو جديد وتختار الأنسب لمتطلبات موقعك. سيتضمن المقال القادم شرح المزيد من الخطوات حول تثبيت إضافة ووكومرس WooCommerce وتخصيص المتجر وإضافة المنتجات لموقعك، سوف تجد أيضًا شرح الأقسام المختلفة لهذه الإضافة بالتفصيل. اقرأ أيضًا المقال التالي: تثبيت إضافة WooCommerce وضبطها وبدء العمل على إنشاء متجر إلكتروني المقال السابق: لمحة عن لوحة تحكم ووردبريس استخدام قوالب ووردبريس كيفية تخصيص قالب ووردبريس الخطوات الأولى للعمل مع ووردبريس

سوف أتكلم في هذا المقال من سلسلة إنشاء متجر إلكتروني باستخدام ووكوميرس عن لوحة تحكم ووردبريس وأقسامها الرئيسية ووظيفة كل قسم لكن بشكل مختصر إذ أنَّ التفصيل والإسهاب في الشرح لن يفيد بقدر الفائدة التي سوف تكتسبها من التجريب، كما أنَّ وجود الكثير من التفاصيل في بعض الجوانب يُصعب عملية الشرح ضمن المقال. لوحة تحكم الووردبريس لوحة تحكم ووردبريس أو مايعرف باسم WP admin panel أو WordPress admin dashboard هي المكان الذي يمكنك من التحكم بكل ما يتعلق بموقع ووردبريس أو متجر ووكوميرس، وتتكون لوحة التحكم من عدة أقسام أو تبويبات أساسية هي: الرئيسية مقالات وسائط صفحات تعليقات مظهر إضافات أعضاء أدوات الإعدادات ملاحظة: لوحة التحكم المبينة في صور هذه المقالة هي لحساب مدير ضمن الموقع، وقد تختلف الأقسام التي تظهر لك في الأنواع الأخرى من الحسابات والتي سوف نتحدث عنها، كما أن لوحة التحكم قد تتضمن أقسام أخرى نتيجة تثبيت إضافات أو قوالب معينة لموقع ووردبريس كما سنشرح لاحقًا ضمن السلسلة. لنشرح كل قسم من أقسام لوحة التحكم وأهم الوظائف التي يوفرها. الرئيسية يوجد تبويبان ضمن هذا القسم هما الرئيسية والتحديثات. الرئيسية هي صفحة تحتوي اختصارات للتنقل السريع ضمن ووردبريس (قسم المزيد من الإجراءات) كما تقدم معلومات عن صحة الموقع (في حال وجود مشاكل يتم اقتراح حلول لتحسين الموقع من الناحية التقنية) وآخر النشاطات وعدد المقالات والتعليقات والصفحات. ويمكنك ترتيب عناصر الرئيسية بالطريقة التي تناسبك وذلك باستخدام تقنية السحب والإفلات (Drag and Drop). ولإخفاء أو إظهار المزيد من هذه الأقسام عليك الضغط على خيارات الشاشة الموجودة في أعلى الصفحة من اليسار. ولإظهار القسم عليك بوضع إشارة بجانبه أما لإخفائه فعليك إزالة هذه الإشارة. أما قسم التحديثات فهو مسؤول عن عرض التحديثات المتاحة لووردبريس أو الإضافات المنصبة أو القوالب المنصبة أو الترجمات لجميع ما سبق ذكره. يمكنك تحديث ووردبريس في كل مرة يتم إصدار نسخة جديدة عنه، أما بالنسبة للقوالب والإضافات فهنالك نوعان منها المجاني والمدفوع. تستطيع تحديث النسخ المجانية منها باستمرار ولكن النسخ المدفوعة تسمح لك بالحصول على تحديثاتها طول مدة الدعم والتي تكون عادة سنة. ويجب التنويه أنَّ بعض الإضافات أو القوالب لا ترسل تحديثاتها بشكل مباشر للموقع لذلك تحتاج لتحميل النسخ المحدثة من الموقع الخاص بها والذي قمت بشرائها منه (تتم عملية التحديث هذه من خلال رفع الملفات بشكل يدوي عبر بروتوكول FTP أو من خلال مدير الملفات للاستضافة - سوف أقوم بشرح هذه العملية خلال الدروس المقبلة). مفتاح "إجراء فحص جديد" يقوم بالتأكد إن كان هناك نسخة أحدث من ووردبريس بينما مفتاح "إعادة التركيب بشكل آلي" يقوم بإعادة تنصيب ووردبريس واستبدال الملفات التابعة له. مقالات يتضمن هذا القسم 4 تبويبات هي "كل المقالات" و"أضف جديداً" و"تصنيفات" و"وسوم"، وتستطيع عبر هذا القسم إضافة مقالات جديدة أو التعديل على مقالات سابقة أو حتى حذفها. كما تسمح لك التصنيفات والوسوم بترتيب المقالات إضافة إلى ترتيب عرضها ضمن الموقع وهذا يسهل الوصول لها على القارئ. "كل المقالات" توصلك إلى المقالات الموجودة ضمن الموقع سواء المنشورة أو المسودة أو حتى المحذوفة منها (ضمن سلة المحذوفات)، كما تستطيع تحرير أي مقال موجودة أو حتى البدء بكتابة مقال جديد. "أضف جديداً" هي عبارة عن رابط سريع لمحرر المقالات والذي يسمح لك بإضافة مقال جديد كما يشير الاسم. "تصنيفات" تمكنك من الاطلاع على التصنيفات الموجودة أو إضافة تصنيف جديد أو حذف تصنيف سابق. "وسوم" تمكنك من الاطلاع على الوسوم الموجودة أو إضافة وسم جديد أو حذف وسم سابق. وسائط يحتوي هذا القسم على تبويبتين فقط الأولى هي مكتبة الوسائط التي تستطيع عبرها مشاهدة جميع ملفات الوسائط التي تم رفعها للموقع أو إضافة ملفات جديدة وهو ما يقدمه الرابط السريع "أضف جديد". صفحات يوجد ضمن الصفحات أيضًا تبويبان هما "كل الصفحات" و"أضف جديداً". التبويب الأول يسمح بالإطلاع على الصفحات الموجودة أو التعديل عليها أو حذفها ويمكن إضافة صفحة جديدة من خلال التبويب الثاني مباشرة أو من خلال تبويب كل الصفحات. تعليقات ضمن قسم التعليقات سوف تجد كافة تعليقات الزوار على المقالات وذلك في حال كانت التعليقات مفعلة على الموقع بشكل عام. يمكنك من هنا الموافقة على تعليق أو اعتباره مزعج أو تحريره والتعديل عليه أو حتى حذفه. مظهر تستطيع في القسم مظهر إضافة قوالب جديدة أو تغيير القالب المُفعل من خلال تبويب "قوالب"، ومن خلال "تخصيص" تستطيع تغيير مظهر القالب وهذا يعتمد على ما يقدمه من خيارات (يختلف من قالب لآخر). تجد أيضا قسم "ودجات" والذي تستطيع من خلاله إضافة ودجت للموقع (لكل قالب ودجات خاصة به) لإضافة محتوى بشكل محدد أو ضمن مكان محدد. في قسم "القوائم" يمكنك إضافة أو تعديل أو حذف قائمة والتي عادة تكون في أعلى الصفحة ضمن قسم يدعى الترويسة. "محرر القوالب" يمكنك من الوصول لملفات القالب والتعديل عليها إن أردت وهو أمر لا يُنصح به ما لم يكن لديك نسخة احتياطية عن الموقع وتعلم ما تفعل بنفس الوقت. ملاحظة: "خلفية" هي تبويبة غير أساسية وتابعة للقالب المستخدم لذلك لم أشر إليها وهنا هي مستخدمة لتغيير الخلفية ضمن الصفحة الرئيسية. إضافات من هنا يمكنك الوصول إلى "إضافات منصبة" والتي تسمح لك بالتعرف على كل الإضافات المنصبة على موقعك وإلغاء تفعيلها أو حذفها أو تفعيل ما هو معطل منها. أيضًا يمكنك تثبيت إضافة جديدة من خلال "أضف جديد" وذلك بأحد طريقتين، رفع ملفات الإضافة المضغوطة من حاسبك أو تثبيتها من مكتبة ووردبريس مباشرة (في حال كنت تستخدم خادم محلي يجب أن تكون متصل بشبكة الويب). والتبويب الأخير هو "محرر الإضافات" و يماثل في وظيفته محرر القوالب حيث يمكنك من الوصول لملفات الإضافة والتعديل عليها. أعضاء تتضمن ثلاث تبويبات هي "الأعضاء" و"أضف جديد" و"حسابك". الأول يسمح لك بالوصول لجميع الأعضاء ضمن الموقع وتستطيع تعديل معلومات أي عضو أو إضافة عضو أو حذفه بينما التبويب الثاني فهو رابط سريع لإضافة عضو جديد. بالنسبة لـ "حسابك" فهنا يمكنك الوصول لمعلومات حسابك على الموقع والتعديل عليه من معلومات مثل كلمة المرور والبريد الالكتروني والاسم. أدوات يفيد هذا القسم في التعرف على صحة الموقع من خلال التبويب الرابع، أو استيراد بيانات (مقالات، صفحات، وسائط) من موقع ووردبريس آخر أو العكس وذلك بتصدير هذه البيانات. ويوجد خياران آخرين لتصدير البيانات الشخصية (المرتبطة بحسابك) أو حذفها. الإعدادات وهو من الأقسام المهمة جدًا ضمن الموقع وكما تلاحظ يوجد عدة تبويبات هي "عام" و"كتابة" و"قراءة" و"مناقشة" و"روابط دائمة" و"الخصوصية". لن أتكلم كثيرًا هنا عن وظائف هذه التبويبات ولكن في القادم من هذا المقال سوف تجد شرحًا كافيًا. قسم المقالات وكيفية إضافة مقال سوف نتحدث بدايةً عن تبويب "المقالات" والذي يعرض لك كل المقالات الموجودة ضمن الموقع سواء كانت منشورة أو قيد المراجعة أو مسودة وتستطيع من خلال هذه النافذة التعديل على أي مقال من خلال إمرار مؤشر الفأرة فوق المقال المطلوب ليظهر في الأسفل مجموعة من الخيارات هي: تحرير و تحرير سريع وعرض وحذف. نلاحظ أنَّ كل مقال يظهر عنوانه واسم الكاتب والتصنيفات التابع لها المقال إضافة إلى الوسوم وتاريخ النشر. تجد في أعلى النافذة خيار "إضافة جديد" وهو نفسه التبويب الثاني والذي يسمح لك بإضافة مقال جديد للموقع. أسفل هذا الخيار سوف تجد "الكل" و"المنشورة" وعندما يكون الموقع قيد العمل سوف تجد أيضًا "قيد المراجعة" و"المسودة" والتي تسهل عليك التنقل بين المقالات وتحريرها. كيفية إضافة مقال جديد عليك بالضغط على مفتاح "أضف جديدًا" ضمن صفحة كل المقالات أو إن كنت في أي صفحة أخرى ما عليك سوى وضع مؤشر الفأرة على قسم مقالات لتظهر التبويبات الفرعية، عندها اضغط على "أضف جديدًا" لتظهر لك النافذة المبينة في الصورة التالية. يمكنك الاطلاع على الخطوات التعريفية التي تظهر في الصورة السابقة ولكن بالنسبة لهذا المقال سوف أتجاهله وأترك لك هذا الأمر. وفي الصورة التالية سوف تلاحظ وجود العديد من الجوانب التي يجب الانتباه لها لذا سوف أحاول التكلم عن جميع الأجزاء ولكن موضوع تجريبها مُلقى على عاتقك. العنوان الكبير "إضافة عنوان" ملفت وهو أول خطوة علينا الانتباه لها ضمن المقال سواء كنت تريد تعلم كيفية كتابة مقال على ووردبريس أو كيفية كتابة مقال متوافق مع محركات البحث، هنا يمكنك إضافة عنوان المقال والذي يكون بوسم H1 وهو الوحيد ضمن المقال الذي يمتلك هذا الوسم (إن أردت التعرف أكثر على فائدة هذه الوسوم عند كتابة أي مقال سواء على محرر ووردبريس أو غيره عليك تعلم مبادئ تهيئة المواقع لمحركات البحث SEO). وبعد اختيار العنوان سوف يظهر أسفله رابط هو رابط المقال يحتوي على كلمات من العنوان مفصول بينها بإشارة "-". عليك الآن البدء بكتابة محتوى المقال وإضافة ما يلزم لها من صور واقتباسات…الخ وذلك من خلال الضغط على مفتاح "+" بجانب عبارة "ابدأ بالكتابة أو اكتب / لاختيار مكون". ليظهر جزء من المكونات عند الضغط عليها. عند الضغط على إشارة الزائد بجانب شعار ووردبريس في الزاوية العليا من اليمين سوف تظهر لك كافة المكونات والأنماط التي تستطيع إضافتها. مفتاح القلم الموجود بجانب المفتاح السابق يسمح لك بتحرير المقال أو تحديد قسم منها وقلما أحتاج استخدامه لأني أبقى في نمط التحرير. بعد الانتهاء من كتابة المقال عليك تحديد هل تريد عرض المقال لجميع زوار الموقع؟ أم تريد جعله خاص لمن هم برتبة مدير أو محرر؟ أم تريد حصر المقال بزوار محددين من خلال حمايته بكلمة مرور لا يمتلكها الا هذه المجموعة. يمكنك اختيار حالة ظهور المقال من العمود الموجود على اليسار والذي يظهر من خلال الضغط على مفتاح المسنن في الشريط العلوي للمقال من جهة اليسار. الآن عليك اختيار وقت نشر المقال، افتراضيًا يكون لحظة الضغط على مفتاح النشر ولكن في بعض الأحيان تحتاج لتحديد تاريخ قديم ليظهر على المقال أو ربما لا تريد نشرها الآن ولكن في الوقت الذي تريد نشرها من المحتمل أن تكون بعيد عن حاسبك لذلك يمكن جدولة المقال واختيار تاريخ ووقت مؤجل (أي في المستقبل) وسوف يقوم ووردبريس بنشرها في التاريخ المحدد بشكل تلقائي. الروابط الدائمة مهمة جدًا ويتم اختيار بنيتها من الإعدادات (سيتم شرحها لاحقاً ضمن هذه المقال)، أيضًا من المهم إسناد المقال تصنيفات ووسوم محددة لأن ذلك يساعد في تنظيم الموقع ونشر مقالات من نمط واحد ضمن قسم أو صفحة معينة. يمكن إضافة التصنيفات والوسوم بشكل مباشر أثناء كتابة المقال أو من خلال نافذة التصنيفات والوسوم التي سوف نتعرف عليها في الخطوات القادمة. لكل مقال صورة بارزة أو رئيسية تظهر في بداية المقال أو الرابط الذي يؤدي إلى المقال. يجب أن تكون الصورة المختارة من الناحية التقنية صغيرة الحجم قدر الإمكان وذات أبعاد مناسبة للقالب المستخدم في الموقع (هذا يقلل من زمن تحميل الصفحة). اختيار الصورة البارزة يتم من خلال الضغط على المربع الرمادي في أسفل الصورة السابقة ليتم بعدها فتح نافذة الوسائط، من خلالها يمكن اختيار صورة موجودة ضمن مكتبة الموقع او رفع صورة من مكتبة حاسبك الشخصي. الخطوة الأخيرة والتي تسبق الضغط على مفتاح النشر هي كتابة مقتطف عن المقال والذي يظهر في الروابط التي تؤدي للمقال (حسب القالب المستخدم) وتقدم للقارئ فكرة عن محتوى المقال، أيضًا بعض الكتاب أو بعض المقالات تحتاج لآراء القراء ولذلك تسمح بتلقي تعليقات على المقال وهو أمر يحدده الكاتب لذلك يمكنك تفعيل أو تعطيل التعليقات للمقال فقط (حسب الصورة) أو يمكن إلغاء التعليقات بشكل كامل للموقع من خلال الإعدادات (سنتكلم عنها لاحقاً ضمن المقال). قالب المقالة هو الشكل أو التصميم الذي تظهر فيه المقال والخيارات الموجودة تعتمد على القالب وما يقدمه من قوالب جاهزة. وبعد الانتهاء مما سبق يمكنك الضغط على نشر ليصبح المقال ظاهر على الموقع وقابل للقراءة من قبل الزوار (طبعاً حسب حالة الظهور التي اخترتها). ملاحظة هامة: ما سبق وشاهدته من خيارات أو شكل المحرر المبين في الصور هو لموقع ووردبريس يستخدم القوالب الافتراضية التي تأتي معه لذلك قد تتفاجئ بوجود خيارات أوسع أو مختلفة في حال استخدام قالب مختلف أو إضافات متنوعة قد تُضيف ميزات للمقال. وكذلك نريد التنويه لموضوع آخر وهو التحرير السريع للمقالات والذي يسمح لك بتغيير العنوان والعنوان اللطيف (الكلمات ضمن الرابط) وتاريخ النشر والناشر وحالة المقال (منشور أو مسودة أو قيد المراجعة). ويظهر خيار التحرير السريع عند إمرار مؤشر الفأرة فوق اسم المقال. وفي حال أردت تجهيز تصنيفات محتوى المقالات (أقسام المقالات) أو الوسوم قبل البدء بكتابة المقالات فعليك بزيارة الصفحات الخاصة بها من خلال قسم مقالات وآلية الإضافة بسيطة فعليك اختيار التصنيف أو الوسم وهل يعتبر تصنيف فرعي لتصنيف أب أم لا، (الوسوم لا تملك تفريعات). يوجد دائمًا تصنيف واحد على الأقل هو التصنيف الافتراضي والذي يكون "غير مصنف" أو "uncategorized" عند تثبيت ووردبريس. يمكنك تغييره من الإعدادات بعد إضافة تصنيفات جديدة. إن أردت المزيد من التفاصيل، ننصحك بالاطلاع على مقال كتابة المقالات (Posts) في ووردبريس. كيفية إضافة صور لووردبريس الأمر بسيط جدًا، عليك إما التوجه للمكتبة والضغط على مفتاح "أضف جديدًا" ومن ثم اختيار الملفات من حاسوبك ورفعها أو الضغط مباشرة على "أضف جديد" ضمن قسم وسائط وبعدها البدء باختيار الصور ورفعها. وأغلب المحررين والكتاب يقومون برفع الصور أثناء كتابة المقال لذلك استخدامك لهذا القسم سوف يكون فقط حين تصفح الصور ضمن الموقع ومعرفة في أي مقال مستخدمة. كيفية إضافة صفحة ووردبريس بالتوجه إلى تبويب الصفحات ثم كل الصفحات ومن هنا يمكنك تصفح جميع الصفحات ضمن الموقع أو تحريرها أو حذفها أو ربما فقط تحريرها بشكل سريع ولإضافة صفحة جديدة تستطيع الضغط على خيار "أضف جديدًا" ضمن صفحة كل المقالات أو الضغط على خيار "أضف جديد" ضمن قسم الصفحات. سوف يظهر لك الآن محرر مشابه لمحرر المقال لذلك لن أقوم بشرح ما يوجد من خيارات ضمن الصورة التالية وأكتفي بإرفاقها لتقارن بينها وبين صفحة إضافة المقال. ننصح بالاطلاع على مقال الصفحات: إنشاؤها وتنظيمها واختلافها عن المقالات في ووردبريس لمزيد من التفاصيل حول الصفحات في ووردبريس وكيفية إضافة صفحة جديدة. شرح موسع عن قسم مظهر تستطيع إلقاء نظرة على ما لديك من قوالب مثبتة على الموقع من خلال قسم قوالب كما يمكنك أيضًا تغيير القالب المُفعل من هنا أو تثبيت قالب جديد وذلك بالضغط على خيار "أضف جديد" ورفع ملفات القالب الجديد للموقع. يسمح لك قسم التخصيص بتغيير شكل القالب من ألوان وتوزيع بعض الودجات والقوائم وإضافة لما سبق يسمح لك بإضافة كود مخصص CSS (يساعد بتغيير الشكل واللون) ورؤية الموقع بقياسات مختلفة تتبع لحجم الحاسوب والحاسوب اللوحي والهاتف الذكي. الودجات وهي عبارة عن أدوات برمجية بسيطة تُضاف للموقع بمبدأ السحب والإفلات وعادةً ما يتم إضافتها لمواقع محددة ضمن الصفحة هي الترويسة والتذييل والشريط الجانبي. ويظهر في الصورة التالية مكانان فقط لإضافة الودجات وهما في التذييل (تختلف الأماكن والودجات من قالب لآخر) حيث يمكنك باستخدام الفأرة باختيار أحد الأدوات الموجودة على اليمين وإفلاتها في أحد المساحتين المتوفرتين كما في الصورة. حيث هنالك ودجات لعرض أحدث المقالات وودجات أخرى لعرض أيقونات شبكات التواصل الاجتماعي وغيرها من الأمور التي قد تهم القارئ. يوجد في أي موقع مجموعة من القوائم، ضمن ووردبريس هذه القوائم تكون مقسمة بشكل رئيسي لقائمة في الترويسة وقائمة في التذييل وبعض القوالب تمتلك قائمة خاصة بالهواتف الذكية وقائمة فرعية لقائمة الترويسة …الخ. لإنشاء قائمة عليك اختيار اسم لها في مربع اسم القائمة والضغط على إنشاء قائمة بعد ذلك يمكنك إضافة عناصر لهذه القائمة (صفحات ومقالات وتصنيفات ووسوم …الخ) من القائمة الموجودة في جهة اليمين (في الصورة تظهر غير مفعلة لأني لم أقم بإنشاء قائمة). يمكنك ترتيب عناصر القائمة من خلال السحب والإفلات وتضمين عناصر فرعية ضمن العناصر الأساسية (لكي يظهر تبويبات فرعية ضمن التبويبات الرئيسية) وبعد ذلك يمكن إسناد القائمة للترويسة أو التذييل من خلال الخيارات الموجودة في قسم إعداد القائمة. التبويب الأخير من قسم مظهر هو محرر القوالب والذي يسمح لك بالوصول لملفات القالب والتعديل عليها برمجيا من خلال حذف أكواد وإضافة أكواد لتعديل وظائف معينة ضمن القائمة أو إضافة وظائف جديدة وهذا يتطلب خبرة برمجية لذلك لن نتطرق لها في هذه السلسلة التعليمية. كيفية تثبيت إضافة في ووردبريس إن قسم إضافات يحتوي عدة تبويبات كما ذكرنا سابقاً وتبويب "إضافات مُنصَبه" يعرض لك كل الإضافات المثبتة على موقعك وقد تكون هذه الإضافات مُفعلة أو معطلة ويظهر ذلك من خلال لونها (إن كان السطر الخاص بها أبيض الخلفية فهي معطلة وإذا كان أزرق فهي مفعلة) أو الخيارات التي تظهر أسفل كل إضافة. يمكن تثبيت الإضافات بطريقتين: الأولى من خلال البحث ضمن مخزن ووردبريس ويمكن الوصول له بالضغط على "أضف جديد" في أعلى هذه الصفحة أو من خلال الضغط على تبويب "أضف جديد" في قسم إضافات. يعرض هذا التبويب كل الإضافات المجانية الموجودة على مخزن ووردبريس وكل إضافة تعرض تقييمها وعدد التنصبيات الفعالة وآخر تحديث لها وإن كانت متوافقة مع نسختك من ووردبريس أو لا. عملية التثبيت بسيطة جدًا وتتطلب منك الضغط على "التنصيب الآن" للإضافة التي تحتاجها ومن ثم الضغط على "تفعيل" بعد انتهاء الموقع من تثبيتها. الطريقة الثانية لتثبيت إضافة تتطلب منك امتلاك ملفاتها مضغوطة بامتداد zip ومن ثم تقوم برفعها على الموقع من خلال الضغط على خيار "رفع إضافة" المبين في الصورة التالية (سوف أقوم بشرح هذه الطريقة بعدة أشكال في الدروس اللاحقة). كيفية إضافة أعضاء إلى ووردبريس أولًا عليك التعرف على صفحة "كافة الأعضاء" والتي تعرض لك (إن كنت قد سجلت دخولك للموقع كمدير) جميع الأعضاء ضمن الموقع وجميع رتبهم. ويمكنك من هنا تحرير معلومات أي عضو أو حذف حسابه أو إضافة حساب جديد. ولإضافة حساب جديد عليك استخدام مفتاح "أضف جديد" الموجود ضمن صفحة "كافة الأعضاء" أو التبويب السريع ضمن قسم الأعضاء "أضف جديد" لتظهر لك نافذة جديدة عليك ملؤها بمعلومات العضو الجديد. المعلومات المطلوبة هي اسم المستخدم (يجب أن يكون بالأحرف اللاتينية بدون فراغات) والبريد الإلكتروني وكلمة المرور إضافة إلى اختيار رتبة العضو وبعدها عليك الضغط على انشاء حساب جديد. بقية المعلومات ليست أساسية ويمكنك استخدامها أو إبقاؤها فارغة. ما هي رتب الأعضاء ضمن ووردبريس؟ يوجد 5 رتب افتراضية ضمن ووردبريس هي المدير والمحرر والكاتب والمساهم والمشترك، وفي حال قمت بتثبيت إضافة ووكومرس سوف يظهر لديك رتب جديدة هي الزبون ومدير المتجر. المدير: يستطيع الحساب ذي رتبة المدير الوصول لجميع أجزاء الموقع والتعديل على ما يشاء وإضافة ما يشاء ضمن هذا الموقع وحتى التحكم برتب المستخدمين الآخرين سواء كانوا مدراء مثله أم أقل رتبة. المحرر: يستطيع الحساب ذي رتبة المحرر نشر المقالات وإدارتها والتعديل عليها سواء كان هو كاتب هذه المقالات أم لم يكن أي له مطلق الحرية في التصرف بجميع المقالات الموجودة على الموقع. الكاتب: يستطيع الحساب ذي رتبة الكاتب كتابة ونشر مقالات تحت اسمه ولا يستطيع التعديل أو التحكم إلا بمقالاته التي قام بإنشائها فقط. المساهم: يستطيع الحساب ذي رتبة المساهم كتابة وإدارة مقالاته ولكن لا يمتلك القدرة على نشرها بل تبقى كمسودة أو قيد المراجعة ليقوم مدير الموقع او المحرر باتخاذ قرار نشرها. المشترك: يستطيع الحساب ذي رتبة مشترك إدارة حسابه فقط من معلومات تتضمن الاسم الأول والاسم الأخير وصورة الحساب …الخ الزبون: يتم اسناد هذه الرتبة للمشتركين الجدد في متجرك وهي مشابهة بالصلاحيات لرتبة المشترك ولكن الزبون يمكنه تعديل معلومات حسابه ومشاهدة الطلبات السابقة والحالية له. مدير المتجر: يمتلك مدير المتجر نفس صلاحيات الزبون مع إمكانية تعديل إعدادات الووكومرس وإنشاء أو تعديل منتجات إضافة للوصول لجميع التقارير التي يقدمها ووكوميرس كما يستطيع تحرير المقالات تمامًا كرتبة المحرر. وأخيرًا ننوه أنه يمكنك تغيير أي معلومات تريدها ضمن حسابك ما عدا اسم المستخدم. قسم الأدوات تبويب أدوات متاحة يحتوي على أداة لتحويل التصنيفات إلى وسوم أو العكس أما بالنسبة لتبويب استيراد فهو يستخدم عندما تريد نقل محتوى لموقعك المبني على ووردبريس من منصة ووردبرس أخرى أو منصة مختلفة مثل Blogger أو Tumbler وللقيام بأحد عمليات الاستيراد هذه يجب أن تقوم بتنصيب الأداة المناسبة وامتلاك الملفات التي تريد نقلها من المنصة الأخرى. تبويب التصدير سوف تحتاج له إن أردت نقل محتويات الموقع من مقالات وصفحات ووسائط إلى موقع ووردبريس آخر. وعليك اختيار المحتوى الذي تريد تصديره ومن ثم الضغط على تنزيل ملف التصدير. تبويب صحة الموقع يتفحص موقعك ويعطيك نصائح وتحذيرات مثلًا إن كنت تستخدم نسخة بي اتش بي قديمة أو إن كان أحد وحدات لغة البرمجة بي اتش بي لا تعمل وهي ضرورية لووردبريس. وطبعًا هنا معظم المشاكل الحرجة تحتاج إلى شخص مختص لحلها وقد تكون المشكلة من ووردبريس بما يبتع له من إضافات وقوالب أو من الاستضافة نفسها. تبويب تصدير البيانات الشخصية أو مسح البيانات الشخصية هو لتقديم طلب إما لتصدير أو حذف بياناتك كمستخدم للموقع. قسم إعدادات التبويب الأول ضمن قسم إعدادات هو "عام" ومن خلاله تستطيع تغيير اسم الموقع ووصفه كما تستطيع تغيير البريد الالكتروني لإدارة الموقع وعند التغيير تحتاج لموافقة من البريد الإلكتروني القديم (لذلك نصحت عند تثبيت ووردبريس استخدام بريد الكتروني حقيقي تملكه). يمكنك أيضًا السماح للزوار بالتسجيل بالموقع وهذا مهم إن كنت تدير متجر الكتروني أو موقع توظيف مثلًا كما يمكنك اختيار الرتبة الافتراضية للمسجلين وهي عادة مشترك في حالة المدونات وزبون في حالة المتاجر. ويمكن أيضًا اختيار لغة الموقع الافتراضية من هنا والمنطقة الزمنية التي تعمل منها إضافة إلى صيغة الوقت والتاريخ ومتى يبدأ الأسبوع. ضمن تبويب كتابة تستطيع اختيار التصنيف الافتراضي للمقالات في حال لم تسند لها أي تصنيف والبنية الافتراضية للمقالات والتي تكون في المدونات والمتاجر قياسية، ويمكنك الاطلاع على البنى الأخرى المتوفرة. الخيارات الأخرى الموجودة للنشر على ووردبريس من خلال البريد الالكتروني لن نتطرق لها في المستوى الحالي من هذه السلسة التعليمية ونادرًا جدًا استخدام هذه الميزة حاليا ولكنها ما زالت موجودة. تبويب قراءة يسمح لك بالتحكم بالصفحة الرئيسية للموقع وماذا تعرض حيث يمكنك اختيار عرض آخر المقالات أو اختيار صفحة محددة ذات تصميم مسبق من قبلك مغاير للتصميم التقليدي لعرض المقالات. وعند إنشاء موقعك تستطيع تجريب الفرق والخيار الثاني الذي تحدد به صفحة رئيسية وصفحة للمقالات هو المتبع من قبل الغالبية. تبويب المناقشة يخص التعليقات ضمن الموقع وهل تريد تفعيلها أم لا وفي حال تفعيلها هل يجب على الزائر تسجيل الدخول للموقع أم لا. جميع الخيارات واضحة ومبينة في الصورة التالية. وتختلف إعدادات الوسائط بحسب القالب المستخدم وعند رفع أي صورة يقوم ووردبريس بعمل عدة نسخ عنها بأبعاد مختلفة كي يوفر الزمن اللازم لتحويلها عند طلبها من قبل متصفح حاسوب او هاتف ذكي او حاسب لوحي وذلك لأن أبعاد الصورة تختلف من شاشة لأخرى حسب حجمها. تبويب الروابط الدائمة مهم جدًا وهو يحدد شكل روابط المقالات التي تظهر في شريط عنوان المتصفح ويُنصح باستخدام الخيار الثاني أو الثالث لأنهما محبذان من قبل محركات البحث، طبعا بعض القوالب قد تفرض نوع مختلف من الروابط الدائمة لذلك ليس لديك الحرية دائما لانتقاء ما تريد. ملاحظة هامة: يجب اعتماد شكل روابط دائمة والثبات عليه بعد بناء الموقع لأنه في كل مرة يتم تغيير الشكل فيها يتم تغيير الروابط وبالتالي الروابط الموجودة ضمن محركات البحث ستصبح بلا فائدة وأي زائر من خلال محرك البحث سوف يتم تحويلهُ إلى صفحة خطأ 404 لعدم وجود الرابط الذي يحاول زيارته. يجب على كل موقع أن يحتوي على صفحة سياسة الخصوصية والتي تضمن لزائر الموقع عدم استخدام بياناته بطرق لا يقبل بها أو غير قانونية والكثير من الخدمات الالكترونية التي يمكن إضافتها للموقع تطلب رابط صفحة الخصوصية لقرائته ومقارنته مع سياسات الخدمة التي تقدمها إن كان متوافق أم لا. خاتمة أصبحت تملك الآن مفاتيح تساعدك على التعرف بشكل أكبر على لوحة ووردبريس لذلك لا تقف عند هذا المقال وجرب بنفسك وتابع في المقال القادم كيفية تثبيت قالب مناسب لمتجرك على ووردبريس مع تثبيت أفضل الإضافات التي تساعد على عمل المتجر ورفع سويته. اقرأ أيضًا المقال التالي: أفضل القوالب للتجارة الالكترونية ومتاجر ووكومرس المقال السابق: دليلك المصور لتثبيت ووردبريس والبدء بإنشاء متجر ووكومرس الخطوات الأولى للعمل مع ووردبريس شرح مفصل لصفحات الإدارة وكيفية التحكم الكامل بموقع ووردبريس

إضافة صورة كخلفية لموقع ووردبريس قد تبدو فكرة بسيطة، لكنّها ليست كذلك، خصوصا إن لم يكن القالب الذي تستعمله يدعم هذه الخاصية. ألن يكون من الرائع أن تظهر صورة الخلفية على الشاشة كاملة (full-screen)؟ بالتأكيد سيكون من الجيد التوفر على صور خلفية مختلفة لكل تصنيف (category)، ماذا عن استعمال الصورة البارزة في كل تدوينة (featured image) كصورة خلفية؟ سنتطرّق إلى كل هذه الجوانب في هذا المقال. قبل أن تبدأ فكر مليا في الصور المتوافرة لديك يمكن أن يكون لاستعمال الصور الخلفية مجموعة من التأثيرات الإيجابية على موقعك كتحسين الجانب الجمالي للموقع إضافة إلى بناء العلامة التجارية (branding) بشكل ذكي وسلس. يساعد استعمال صورة خلفية مناسبة كذلك على إعطاء تلميحات حول محتوى الموقع وطبيعة المواضيع التي يتطرق لها. لا يمكنك أن تستعمل أي صورة كيفما كانت كخلفية لموقعك، من المهم جدا أن تقوم باختيار الصور بعناية كبيرة خصوصا من ناحية تحديد الحجم المناسب. قبل إضافة صورة كخلفية عليك أولا أن تطّلع على إحصائيات موقعك، وبالأخص أحجام الشاشات الخاصة بالمستخدمين ما سيعطيك فكرة مجملة عن أحجام الصور التي يجب أن تستعملها. تثبيت الملحقات هنالك ملحقان تحتاج إلى تثبيتهما للحصول على صور خلفية تعمل بشكل جيد على موقع ووردبريس: Background Images: يقوم هذا المُحلق من إضافة دعم قالبك لصور الخلفية، كما يعمل على توليد رابط URL المناسب من أجل عرض الصفحة. WPCustom Category Image: يعمل هذا الملحق على إضافة صور بارزة (featured images) للتصنيفات (categories)، لا تحتاج إلى تثبيته ما لم ترغب في تغيير صورة الخلفية لكل تصنيف على حدة. الآن بما أنك قمت بتثبيت الملحقات لنقم بإضافة بعض الصور الخلفية. إضافة صورة خلفية عامة يتم توفير إمكانية إضافة الصور الخلفية من خلال خيار تخصيص الخلفية الخاص بالقالب، لا تدعم كل القوالب هذه الخاصية، هنا يأتي دور ملحق background images لإضافة هذا الدعم، ما يعني أيضا إضافة فئة class custom-background إلى وسم body. يمكنك إعداد صورة خلفية إما من خلال Appearance < Background (على يسار الصورة أسفله) أو من خلال مخصص القالب theme customizer (على يمين الصورة أسفله). أيا كانت الطريقة التي اخترت اتباعها عليك باستعمال الإعدادات التالية: Position (الموقع): center (الوسط) Repeat (التكرار): no repeat (لا تكرار) (لا تبدو الخلفيات جيدة إذا كان هناك تكرار) Attachment (الارتباط): fixed (ثابت) Background Color (لون الخلفية): أترك الخيار كما هو إضافة صورة خلفية خاصة بكل تصنيف (Category) إن كنت تريد استخدام صورة خلفية خاصة بتصنيف معين فستحتاج إلى تثبيت ملحق WPCustom Category Image الذي سيسمح لك بإضافة صورة خاصة لكل تصنيف. بمجرد قيامك بتثبيت الملحق اذهب إلى Posts < Categories، اختر التصنيف التي تريد (category) وسترى زر Add Image الذي سيسمح لك باختيار صورة موجودة في Media Library أو رفع صورة جديدة. إعداد ملحق Background Images بعد أن قمت بتحديد صورة خلفية عامة وأيضا تخصيص صور خلفيات لكل تصنيف أصبحت الآن جاهزا لإعداد كيفية عمل صور الخلفية على موقعك. من لوحة التّحكم اذهب إلى Appearance < Background Images للذهاب إلى صفحة الإعدادات الخاصة بالملحق، لنتطرق إلى الخيارات واحدة بواحدة. تتوفر لك فقط أربع إعدادات للتحكم الكامل في صور الخلفيات: Display background on home page only (عرض الخلفية في الصفحة الرئيسية فقط) ستعمل هذه الخاصية على حصر استخدام صورة الخلفية في الصفحة الرئيسية فقط، ما يعني إهمال الخيارات الخاصة بالمنشورات والتّصنيفات. Make images fullscreen (ظهور الصور على الشاشة كاملة) رغم أن ظهور صور الخلفية على الشاشة كاملة (حتى وإن تطلب الأمر تمديدها) يعتبر أمرا أساسيا إلا أنه يمكنك التحكم في الأمر أيضًا. إن فعّلت هذا الخيار سيقوم الملحق بإدخال شيفرة CSS التالية التي تضمن أن صورك تظهر على الشاشة كاملة بغض النظر عن جهاز أو حجم شاشة المستخدم: body.custom-background { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } من الجدير بالذكر أننا نستعمل CSS3 هنا، لذا فإن الزوار الذين يستخدمون متصفحا قديما مثل IE8 أو أقدم ستظهر لهم الصور بالشكل العادي. Using featured image on posts (استعمال الصور الخاصة بالمنشورات) إن فعّلت هذه الخاصّيّة سيتم استعمال الصورة الخاصة بالمنشور كخلفية عوض صورة الخلفية العامة. إذا أردت استخدام هذه الخاصية فعليك التّحقّق من أن الصور التي تستخدمها في المنشورات كبيرة كفاية لتُسْتَخْدَمَ كصور خلفية، إن كانت كبيرة جدا فلا بأس بذلك لأنه سيتم تغيير حجمها لاستعمالها كصور خاصة بالمنشور. سيكون هذا الخيار مُعطّلا في حال ما إذا كان القالب الذي تستخدمه لا يدعم الصور الخاصة (featured images). Use featured image on categories (استعمال الصور الخاصة بالتّصنيفات) عند تفعيل هذه الخاصّيّة سيقوم الملحق بالبحث عن صورة خاصة بالتّصنيف لاستعمالها عوض صورة الخلفية العامة. سيكون هذا الخيار معطلا إذا لم يكن ملحق WPCustom Category Image مفعلا. بعض الإعدادات المتقدمة عندما جرّبت هذا المُحلق مع بعض القوالب، تبيّن لي بأن الجزء الظاهر من الصّورة لم يكن كافيًا لتحقيق الهدف المنشود من الأمر. يكمن الحل في تخفيف درجة تعتيم لون خلفية المُحتوى بحيث نفهم محتوى صّورة الخلفية لكن دون جعل القراءة صعبة. على سبيل المثال، فيما يلي صفحة بدرجة تعتيم 0.9: تعديل طفيف لكن التّأثير الذي يُحدثه كبير: للقيام بهذا التعديل على موقعك عليك بالنظر إلى مصدر أي صفحة لتجد الأصناف (classes) الخاصة بأول وسم بعد وسم body، بالنسبة للعديد من قوالب ووردبريس يكون هذا الوسم من نوع div مع صنف site. لإعداد درجة التعتيم عليك باستخدام كود CSS من قبيل: div.site { background-color: rgba(255,255,255,0.90); } يمكنك إضافة هذه الشِفرة سواء من خلال استخدام ملحق تخصيص التصميم (مثل Jetpack) أو من خلال إنشاء قالب فرعي (child theme) . لا تقم أبدًا بالتعديل على ملف style.css الأساسي في قالب موقعك.يضمن القيام بتغيير درجة تعتيم الخلفية فقط بقاء الخط والصور بدرجة تعتيم كاملة. إن أردت أن تظهر صورة الخلفية بشكل كامل فما عليك إلا تحديد درجة تعتيم لون الخلفية إلى 0. أبدع في اختيار خلفيات موقعك إضافة خلفيات لموقع الووردبريس الخاص بك بطريقة صحيحة من شأنها تحسين تأثيره الجمالي. من خلال هذين الملحقين إضافة إلى تعديل CSS الذي أشرنا إليه يمكن الحصول على تحكم كامل وسلس في ما يخص الصور التي يتم استخدامها كخلفيات وفي مواطن ظهورها. ترجمة -بتصرف- للمقال: How To Properly Add Background Images To Your Wordpress Site لصاحبه: Chris Knowles.

تحدثنا في الدرس السابق مُقدّمة إلى تطوير قوالب ووردبريس حول إنشاء قالب ووردبريس بسيط، واليوم سنقوم بإكمال العمل عليه لعرض أرقام الصفحات أو عرض رابطيّ السابق والتالي للتنقل بين الصفحات والوصول إلى جميع المقالات ضمن المدوّنة. عند وجود عدد كبير من المقالات في المدوّنة، فلن يتم عرضها جميعاً في صفحة واحدة، بل يتم تقسيمها على عدد من الصفحات، بشكل افتراضي يتم عرض 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.

يأتي قالب Twenty Seventeen كقالب افتراضي مع إصدار ووردبريس 4.7، وهذا القالب الموجّه للشركات والأعمال يُظهِر انحرافًا واضحًا في القوالب الافتراضي التي كانت تأتي مع ووردبريس والتي كانت متمحورة حول المدونات، والذي يُبيّن تحوّل ووردبريس من منصة تدوين إلى منصةٍ قادرةٍ على إنشاء جميع أنواع مواقع الويب. إذا كنتَ تخطط لتجربة قالب Twenty Seventeen فستلاحظ أنَّ هذا القالب يختلف جذريًا عن القوالب التي سبقته، فالقوالب الافتراضية السابقة لا تتطلب إعدادًا مطولًا وكان الغرض منها هو استعمالها لإنشاء مدونات؛ لكن الأمر مختلفٌ مع قالب Twenty Seventeen. نعم، تستطيع استعمال هذا القالب كقالبٍ لمدونتك، لكن هذا ليس هو الغرض الذي صُمِّمَ هذا القالب لأجله، فهو مصممٌ لإنشاء مواقع لشركات باستخدام صفحة رئيسية تُمثِّل صفحة هبوط (landing page) مُقسمَّةٍ إلى أقسام، ويمكن أن ترى ذلك بوضوح بالنظر إلى الموقع التجريبي الرسمي لهذا القالب. النتيجة التي أدى لها هذا التغيير في الهدف من القالب هي جعل إعداد قالب Twenty Seventeen يأخذ وقتًا أطول من بقية القوالب الافتراضية. سنستكشف في هذا الدرس قالب Twenty Seventeen وما الذي يستطيع تقديمه، وسأريك كيفية إعداد القالب لضبط صفحة هبوط احترافية بسهولة. ملاحظة: يجب أن تعلم أنَّ هذا الدرس مبنيٌ على نسخة قالب Twenty Seventeen المُضمَّنة بإصدار ووردبريس 4.7 RC، ويُفتَرَض أنَّ هذه النسخة مُطابِقة للنسخة النهائية من القالب التي ستوضَع في إصدار 4.7، لكن يُحتَمَل وجود بعض التعديلات الصغيرة. لمحة عن قالب Twenty Seventeen انتشرت في الآونة الأخيرة فكرة استخدام الصفحة الرئيسية كصفحة هبوط لمواقع الشركات، ويسمح لنا قالب Twenty Seventeen –المُضمَّن افتراضيًا في ووردبريس–بإنشاء صفحة هبوط جذابة. لكي تأخذ فكرةً عن إمكانيات هذا القالب، فانظر إلى الموقع التجريبي الرسمي. ستلاحظ مباشرةً مقطع الفيديو المعروض في الترويسة. مرِّر إلى الأسفل قليلًا وسترى التصميم -الذي يُقسِّم الصفحة إلى أقسام- جليًا أمامك، فكلُّ قسمٍ مفصولٍ عن غيره بصورة خلفية مُطبّقٌ عليها تأثير اختلاف المنظور (parallax) والتي تحتل كامل طول وعرض نافذة المتصفح. شريط التنقل بسيطٌ جدًا وهو ثابتٌ في أعلى الصفحة. ويُستعمَل خطٌ وحيدٌ ألا وهو Libre Franklin في عموم القالب مع تنوعٍ في أوزانه (weights) وألوانه وتنسيقه. بعد ضبط القالب ضبطًا سليمًا، فيُمثِّل قالب Twenty Seventeen قالبًا عصريًا ذا مظهرٍ احترافي، مبنيًا على خطٍ سهل القراءة، واستخدامٍ قويٍ للعناصر البصرية اللافتة للنظر مع استخدام المسافات البيضاء استعمالًا صحيحًا. كيفية إنشاء أقسام في الصفحة الرئيسية بأخذ كمية العمل التي أجراها Matt Mullenweg على المُخصِّص (Customizer) في الآونة الأخير بالحسبان، فلن نُفاجأ أنَّ كمًّا كبيرًا من إعداد قالب Twenty Seventeen سنجريه في المُخصِّص. تُبيّن الصورة الآتية الخيارات المتاحة في المُخصِّص بعد تفعيل قالب Twenty Seventeen: إضافةً إلى الميزات الافتراضية مثل ضبط القوائم والودجات، يمكننا أن نضبط من المُخصِّص صورةَ (أو فيديو) الترويسةِ، ونُبدِّل الألوان إلى نظام ألوانٍ مختلف، ونُسنِد المحتوى إلى أقسام الصفحة الرئيسية. يتضمن إصدار ووردبريس 4.7 ميزةً جديدةً اسمها «visible edit shortcuts» ، حيث تظهر هذه الميزة على شكل أيقونات زرقاء كما في الصورة أعلاه، والضغط على أي اختصارٍ من هذه الاختصارات سيؤدي إلى فتح قائمة المخصص المسؤولة عن تعديل هذا الجزء من الموقع. هذا سيُسهِّل تعديل الكثير من الميزات في قالب Twenty Seventeen مثل صورة الترويسة، وعنوان الموقع والشعار اللفظي له، والمحتوى الذي يظهر في كل قسم من أقسام الصفحة. فكل ما عليك فعله هو العثور على المحتوى الذي تشاء تعديله ثم الضغط على الاختصار الظاهر بجواره، ثم تخصِّصَه كما تشاء. تأتي ووردبريس 4.7 بميزةٍ أخرى في المُخصِّص التي يمكنك أن تراها في خيار «Additional CSS» (بالعربية: «تنسيقات CSS الإضافية»)، وهذه الميزة أصبحت متوافرةً لكامل القوالب المثبّتة في ووردبريس 4.7 وليست خاصةً بقالب Twenty Seventeen. لشرح كيفية ضبط قالب Twenty Seventeen فسأحاول إعداده كما لو كنتُ سأستخدمه لموقعي الشخصي. الخطوة الأولى: إنشاء صفحة لكل قسم من أقسام الصفحة الرئيسية علينا أولًا إنشاء بضع صفحات: إنشاء صفحة لنستعملها كصفحة رئيسية ثابتة. إنشاء صفحة لنستعلمها للمدونة أو لعرض المنشورات. إنشاء أربع صفحات إضافية تتضمن المحتوى الذي نريد عرضه في أقسام الصفحةالرئيسية. أنشِئ ثلاث صفحات إضافية إذا كنتَ تُخطِّط لاستعمال مدونتك أو صفحة المنشورات كقسمٍ من أقسام الصفحة الرئيسية. أما للموقع الذي سنضبطه في هذا الدرس، فسأنشِئ صفحةً رئيسيةً، وصفحة للمدونة، وصفحة about، وصفحة services، وصفحة contact. الخطوة الثانية: إضافة صورة بارزة لكل صفحة للاستفادة من تأثير اختلاف المنظور (parallax) فسنحتاج إلى صورةٍ بارزةٍ (featured image) كبيرة والتي ستُشكِّل جزءًا من أقسام الصفحة الرئيسية. لن تحتاج إلى إضافة صورة بارزة لصفحة Home التي أنشأتها في الخطوة السابقة، لكن يجب أن تُضيف صورةً بارزةً لجميع الصفحات الأخرى. الصور التي تستعملها النسخة التجريبية من Twenty Seventeen بقياس 2000×1200 بكسل، استعمل الصور التي تكون أبعادها قريبةً من الرقم السابق؛ أما الصور الصغيرة فستعطي نتيجةً سيئةً. استعملتُ في المثال صورًا مجانيةً من StockSnap وأعدتُ تحجيمهم جميعًا إلى حوالي 2000 بكسل بالعرض و 1200 بكسل بالطول (± 10%). الخطوة الثالثة: إسناد صفحة رئيسية ثابتة وصفحة للمنشورات حان الوقت الآن لبدء عملية التخصيص، افتح المُخصِّص بالذهاب إلى «Appearance > Customize» (مظهر > تخصيص) في لوحة التحكم أو عبر الضغط على زر «Customize» (تخصيص) في شريط الإدارة الظاهر في الواجهة الأمامية لموقعك. اختر عنصر «Static Front Page» (صفحة رئيسية ثابتة) من القائمة وأجرِ التعديلات الآتية: تحت عنوان «Front page displays» (تعرض الصفحة الرئيسية)، انتقِ «Astatic page» (صفحة ثابتة). في قائمة «Front page» (الصفحة الرئيسية) المنسدلة اختر الصفحة الرئيسيةالتي أنشأتها سابقًا. في قائمة «Posts page» (صفحة المقالات) المنسدلة اختر صفحة المنشورات أوالمدونة. لا تنسَ الضغط على زر «Save & Publish» (حفظ ونشر)، ثم انتقل إلى الخطوة التالية. الخطوة الرابعة: إسناد كل صفحة إلى قسمٍ من أقسام الصفحة الرئيسية لإسناد مختلف الصفحات التي أنشأتَها مسبقًا إلى أقسام الصفحة الرئيسية فاضغط على عنصر «Theme Options» (خيارات القالب) في قائمة المُخصِّص. ثم استخدم القوائم المنسدلة لإسناد كل صفحة إلى القسم الملائم لها والذي تريد إظهارها فيه. الخطوة الخامسة: إنشاء قائمة التنقل الرئيسية يمكنك إنشاء قائمة التنقل عبر الخيار «Menus» (قوائم) من داخل قائمة المُخصِّص أو عبر الذهاب إلى صفحة «Appearance > Menus» (مظهر > قوائم) في لوحة التحكم. وبغض النظر عن مكان إنشائك للقائمة، فأحب أن أنوِّه إلى أنَّ إنشاء القوائم لم يتغير في إصدار 4.7، أي أنشِئ القائمة كما فعلت سابقًا ثم أسندها إلى المكان المُسمى «Top Menu» (القائمة العلوية). الخطوة السادسة: إضافة فيديو كترويسة للصفحة لنضع مقطع فيديو بدلًا من صورة الترويسة الافتراضية «المملة». اذهب إلى القسم الملائم في المُخصِّص عبر الضغط على أيقونة التعديل الزرقاء أو ابحث عن خيار «Header Media» (وسائط الترويسة) في المُخصِّص. ارفع أو اختر مقطع الفيديو الذي تريد استخدامه، ويمكنك أيضًا وضع رابط URL لفيديو على موقع يوتيوب إذا أردتَ ذلك. إذا أردتَ رفع مقطع فيديو فاعلم أنَّ من الأفضل أن تكون أبعاد الفيديو 2000×1200 بكسل. اخترتُ مقطع فيديو مجاني لأستعمله في موقعي، وهو بأبعاد 1920×1080 بكسل، ولا يتوافق تمامًا مع الأبعاد المُستحسنة، لكنه يبدو بشكلٍ جيد في الموقع. أنهينا الآن إنشاء الصفحة الرئيسية مع إسناد الأقسام المختلفة إليها. هذه هي الصفحة التي أنشأتُها في موقعي باتباع الخطوات التي ذكرناها أعلاه (هذه الصورة متحركة): إنشاء قائمة تنقّل بين أقسام الصفحة الرئيسية إحدى الميزات غير الموجودة في قالب Twenty Seventeen هي دعم التنقل بين أقسام الصفحة الرئيسية. فمن الجميل أن تتمكن من الانتقال إلى القسم الذي تريده في الصفحة الرئيسية مباشرةً؛ لكن لحسن الحظ، يمكن إضافة هذه الميزة المُغفَلة بسهولة. أوّل ما علينا فعله هو إنشاء قائمة التي تُشير روابطها إلى خاصية id لأقسام الصفحة الرئيسية بدلًا من إشارتها إلى صفحات مختلفة في موقعك. ولفعل ذلك، علينا إنشاء قائمة مخصصة التي تبدو روابطها كما في الصورة: عند كتابة مُعرِّفات id في القائمة السابقة، فاستعمل أسماء الصفحات المُعروضة في أقسام الصفحة الرئيسية، لكن اجعل حالة الأحرف صغيرة وضع شرطة - بدلًا من الفراغات. إذا ثبّتتَ ووردبريس في مجلدٍ فرعي (وهذا شائعٌ جدًا خصوصًا للمواقع المطوَّرة في بيئات التطوير المحلية) فعليك تضمين المجلد الفرعي في الروابط التي تُدخِلها في القائمة التي أنشأتها. فمثلًا، كان الموقع التجريبي الذي أعمل عليه موجودًا في الرابط http://localhost/wp4point7 وهذا يعني أنَّ ووردبريس مثبتةٌ في مجلدٍ فرعي (‎/wp4point7) ولكي تعمل الروابط عملًا سليمًا، فسأحتاج إلى تضمين اسم المجلد الفرعي في رابط URL كما يلي: ‎/wp4point7/#about. أما إذا لم تُثبِّت ووردبريس في مجلدٍ فرعي، فلا حاجة إلى وضع اسم المجلد واستعمل البُنية الظاهرة في الصورة أعلاه. بعد إنشاء قائمة التنقل فستحتاج إلى إضافة مُعرِّفات id لكل قسم من أقسام الصفحة. يمكنك فعل ذلك بطريقتين. الحل الأسهل هو إضافة مُعرِّفات id مباشرةً إلى عناوين الصفحة باستخدام مُحرِّر الصفحات في ووردبريس، وذلك بإضافة شيفرة HTML مباشرةً إلى حقل العنوان. لاحظ أنَّه لإضافة مُعرِّف id كان علي وضع العنوان ضمن عنصر <span>، وكان المُعرِّف مكتوبًا بأحرفٍ صغيرة مع وضع شرطات - بدلًا من الفراغات. وهذا يعني أنَّ المُعرِّفات التي نضعها هنا ستُطابِق تلك التي وضعناها في روابط قائمة التنقل. إضافة إلى أنني أضفتُ حاشيةً علوية (top padding) بمقدار 96 بكسل. وعندما يُضغَط على الروابط فستؤدي قيمة الحاشية السابقة إلى دفع المحتوى باتجاه الأسفل لكي نتمكن من رؤية العنوان تحت شريط التنقل الثابت في أعلى الصفحة. لكي أكون صادقًا معك، أرى أنَّ هذه الطريقة غير عملية ولا أحبِّذ استعمالها. والطريقة التي أُفضِّلها هي إضافة عنصر span ومُعرِّف id والحاشية باستخدام jQuery. وبهذا لن أحتاج إلى تعديل عناوين الصفحات وإضافة شيفرات إليها، وسأحصل على نفس النتيجة في نفس الوقت. هذه هي الشيفرة التي كتبتُها والتي تفعل ما نرغب به: jQuery( "h2.entry-title" ).each( function() { var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-"); jQuery( this ).wrapInner(function() { return "<span style='padding-top:96px;' id='" + panelId + "'></span>"; }) }) ما تفعله الشيفرة السابقة هو العثور على عنوان كل قسم ثم وضعه في عنصر span مع تنسيقٍ مناسب؛ وستُنشِئ الشيفرة مُعرِّف id بقيمةٍ مناسبة بأخذ عنوان القسم وجعله بحالةٍ صغيرة وبإبدال الشرطات بالفرغات. فلو كان عندما قسمٌ بعنوان My Blog (كما في الصورة السابقة)، فالشيفرة السابقة تُضيف خاصية id الآتية: id='my-blog'‎ وهي نفس الصيغة التي استعملتها عند إنشاء روابط قائمة التنقل. لتحميل الشيفرة السابقة إلى موقعك فيمكنك إضافتها في أحد المكانين الآتيين: ملف JavaScript الذي يُشكِّل جزءًا من قالب ابن لقالب Twenty Seventeen، أو إلى إضافةٍ التي تُضيف شيفرات JavaScript مخصصة. اتخذتُ الطريقة الثانية في موقعي واستعملتُ إضافةً لتحميل شيفرات JavaScript و CSS إلى الموقع والمشروحة في مقالة How to Turn Any WordPress Theme Modification into a Simple Plugin، لكن يمكنك استخدام إضافة أخرى مثل Simple Custom CSS and JS لتحميل شيفرة jQuery السابقة. بعد إضافة شيفرة jQuery وإنشاء قائمة التنقل، فسأريك كيف أصبحت قائمة التنقل في موقعي (صورة متحركة): رائع، لقد أصبح قالب Twenty Seventeen جاهزًا كصفحة هبوط، وأضفنا إليه شريطًا للتنقل بين أقسام الصفحة. إذا أردتَ إضافة أشياء أخرى إلى ما أنشأناه، فخذ هذه التحسينات بالحسبان: إضافة قواعد إعادة توجيه لكي يتمكن أيُّ شخصٍ يزور أحد صفحاتك المعروضة كقسمٍ في صفحتك الرئيسية أن يُعاد توجيهه إلى القسم المناسب في الصفحة الرئيسية. فمثلًا، أعد توجيه الصفحة http://example.com/contact إلى القسم الآتي في الصفحة الرئيسية http://example.com/#contact. إذا قررتَ استخدام jQuery لتفعيل ميزة التنقل بين أقسام الصفحة الرئيسية، فضع وسومًا شرطيةً (conditional tags) لتحميل الشيفرة في الصفحة الرئيسية فقط. إذا تضمن موقعك صفحاتٍ إضافيةً لا تمثِّل أقسامًا في صفحتك الرئيسية، فأضف تلك الصفحات إلى قائمة التنقل، وأنقل جمع روابط التنقل الخاصة بأقسام الصفحة الرئيسية إلى قائمة فرعية تظهر عند الضغط على كلمة «Home» كما في الصورة أدناه. الخلاصة قالب Twenty Seventeen بدأ عصرًا جديدًا من قوالب ووردبريس (القوالب الافتراضية على الأقل)، ومن الواضح أنَّ مطوري ووردبريس الذين يقفون خلف قالب Twenty Seventeen ملتزمون بدفع ووردبريس لتصبح أكثر من منصة تدوين ولتدخل عالم مواقع الشركات والتجارة الإلكترونية. يوفِّر قالب Twenty Seventeen تصميمًا عصريًا للصفحة الرئيسية التي تُقسَّم إلى أقسام؛ لكن ضبطه يحتاج وقتًا أطول وجهدًا أكثر مقارنةً بما سبقه من القوالب الافتراضية. رأيتَ في هذا الدرس كيف أنَّ الجهد المبذول لإعداد القالب قد آتى أُكله، وأنَّ النتيجة كانت موقعًا احترافيًا وجذابًا والذي لم نكن لنحلم بتحقيقه باستخدام القوالب الافتراضية السابقة. ترجمة -وبتصرّف- للمقال How to Customize the Free Twenty Seventeen WordPress Theme for Businessلصاحبه 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

يعد ووردبريس من أحد أكثر نظم إدارة المحتوى (CMS) قوة. فهو يتميز بإمكانية تعديله وتطوعيه حسب رغبتك. كما يمنحك القدرة على إضافة الميّزات والتعديل على التصاميم وكذلك إضافة قسم للمواضيع المميزة في غضون دقائق معدودة. بإمكانك مشاهدة العديد من الخصائص الموجودة في قائمة الودجات Widgets مثل التصنيفات، آخر المواضيع والأرشيف. ولكن ماذا لو أردّت أن تسلط الضوء على بعض المقالات المميزة ليشاهدها القراء على موقعك. تسمّى هذه الخاصّية عادة بـقسم المواضيع المميزة أو المواضيع ذات المحتوى المميز. بإمكانك أن تجد هذه الإضافة Plugin بسهولة في قسم تحميل أدوات ووردبريس. ولكن من الجيّد أنه بإمكانك أن تضيفها يدويًا باستخدام بعض الشيفرات والدوال Functions. مُلاحظة: لا يركّز هذا الدرس على التصميم الخاص بقسم المواضيع المميزة، بل ينصب التركيز على الجانب التطبيقي لعملية إنشاء القسم وعرضه، ولك كامل الحرية في تغيير تنسيقات CSS لتعديل التصميم وتشكيله حسب رغبتك. المتطلبات اللازمة لإكمال الدرس: تحميل وتثبيت ووردبريس.الخبرة الكافية بـ Wordpress Codex و PHP.الوقت و الصبر.ما الذي ستقوم ببنائه: قم بتحميل النسخة النهائية من هنا الشروع في العملسنستخدم قالبًا افتراضيًا يسمى Test-theme. وهو مكوّن من مجموعة Template (غير مكتملة) ستُستخدم لغرض إظهار قسم المواضيع المميزة فحسب. يمكنك تحميله من هنا أو قم باستخدام أي قالب Theme آخر تفضِّله لإكمال الدرس. سيركز الدرس على الخصائص التالية: إضافة صندوق meta box (على هيئة Checkbox) إلى الصفحات/المقالات.تخزين معلومات صندوق المُحتوى (meta box).إظهار قسم المواضيع المميّزة على الصفحة الرئيسية للموقع.الخطوة الأولى: إضافة صندوق محتوى meta box إلى الصفحات/المقالاتقم بفتح ملف function.php، وأضِف الشيفرة التالية لإدراج صندوق الاختيار checkbox. سيقوم الكود بإنشاء صندوق محتوى meta box سيظهر في شاشة تحرير الصفحات/المقالات على شكل صندوق اختيار checkbox. function add_featured_meta_box($post){ $featured = get_post_meta($post->ID, '_featured-post', true); echo "<label for='_featured-post'>".__('Feature this post?', 'foobar')."</label>"; echo "<input type='checkbox' name='featured-post' id='featured-post' value='1' ".checked(1, $featured)." />"; } إذا أراد المستخدمون إضافة أيّة مقالات إلى قسم المواضيع المميزة على الصفحة الرئيسية أو أي صفحة أخرى، سيكون بإمكانهم فعل ذلك ببساطة عن طريق الضغط على مربّع الاختيار. ولكن بيانات المقال لن يتم تخزينها في هذه المرحلة، لأننا لم نضف بعد كود حفظ بيانات صندوق المحتوى. الخطوة الثانية: تخزين بيانات صندوق المحتوى (meta box)قم بفتح ملف function.php مرة أخرى، وأضِف الشيفرة التالية أسفل شيفرة add_featured_meta_box الذي أضفناه في الخطوة السابقة. function save_featured_meta($post_id){ if (isset($_REQUEST['featured-post'])) update_post_meta(esc_attr($post_id), '_featured-post', esc_attr($_REQUEST['featured-post'])); } add_action('save_post', 'save_featured_meta');ستقوم هذه الشيفرة بالتأكّد من أن المقال قد تم تحديده ليظهر في قسم المواضيع المميزة، ومن ثم سيقوم بتحديث البيانات أو حِفظها في قاعدة البيانات مُستخدمًا دالة تحديث بيانات الميتا الخاصّة بالمقال update_posts_meta، هذه الدالة ستقوم بتحديث قيمة value مفتاح بيانات الميتا meta_key الخاص بالموضوع المحدد. ستقوم الشيفرة قبل كل شيء بالتأكد من أن مفتاح بيانات الميتا meta_key$ موجود بالفعل على المعرِّف الفريد الخاص بالمقال post_id$، وفي حال عدم وجوده، سيتم استعداء الدالة التالية عوضا عنه: add_post_meta($post_id ,$meta_key ,$meta_value)الخطوة الثالثة: إظهار قسم المواضيع المميزة على الصفحة الرئيسية للموقعسنقوم في هذه الخطوة بإظهار قسم المواضيع المميزة على الصفحة الرئيسيّة للموقع، ولفِعل ذلك، قم بإضافة الشيفرة التالية إلى القالب Template الذي ترغب فيه، وقم كذلك باختيار المكان الذي تراه مناسبًا لظهور القسم على الصفحة. في هذا الدرس، تمَّ إضافة الكود إلى ملف الصفحة الرئيسية index.php، وتمَّ تحديد موقع قسم المواضيع المميزة ليظهر في الشريط الجانبي sidebar للصفحة. <h2>Featured Posts</h2> <?php $args = array( 'posts_per_page' => 5, 'meta_key' => '_featured-post', 'meta_value' => 1 ); $featured = new WP_Query($args); if ($featured->have_posts()): while ($featured->have_posts()): $featured->the_post(); ?> <h3><a href="<?php the_permalink();?>"> <?php the_title();?></a></h3> <p class="details">By <a href="<?php the_author_posts();?>"><?php the_author();?></a> / On <?php echo get_the_date('F j, Y');?> / In <?php the_category(', ');?></p> <?php if (has_post_thumbnail()): ?> <figure> <a href="<?php the_permalink();?>"><?php the_post_thumbnail('', array('class' => 'box' ));?></a> </figure> <p><?php the_excerpt();?></p> <?php endif; endwhile; else: endif; ?> ستعمل الشيفرة ببساطة على تحليل المصفوفة المسؤولة عن عدد المواضيع المميزة لعرضها، وكذلك تحليل القيم Value و المعرف الفريد ID الخاص بها. ستقوم بعد ذلك باستخدام صنف WP_Query للاستعلام عن مواضيعك المميزة. قم بعمل حلقة loop للمواضيع المميّزة على الشريط الجانبي واحصل على تفاصيل المقال مثل العنوان، الروابط الدّائمة Permalink والكاتب ..إلخ. مُلاحظة: تمَّ إضافة تنسيق CSS للقالب الافتراضي المُستخدم، وبإمكانك التعديل عليه حسب رغبتك وفي أي وقت تشاء. إذا قمت بمُراجعة الصفحة الرئيسية للموقع، فإنّك ستجد النتيجة ظاهرة كما في الصورة التالية: الخاتمةتهانينا، لقد قمت بإنشاء أول قسم للمواضيع المميزة بنفسك باستخدام صندوق المحتوى met box وبعض الشيفرات والدّوال، إذا لم تكن مرتاحًا لهذه العملية، فبإمكانك استخدام إضافاتٍ Plugin مثل: TSP Featured Posts أو Featured Postes Widget. أتمنّى أن يكون هذا الدرس مفيداً لكم، وإذا كان لديكم أيّة طريقةٍ أخرى لإضافة قسم للمواضيع المميزة إلى ووردبريس، فلا تبخلوا بمشاركتها معنا على التعليقات. ترجمة ـوبتصرف- للمقال: http://www.1stwebdesigner.com/create-featured-posts-section. حقوق الصورة البارزة: Designed by Freepik.

إنّ اختيار قالب 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.

إذا كنت تُصمّم قالبًا جديدًا لووردبريس أو تعدّل قالبًا جاهزًا، فإن الخطوط المُخصّصة ستجدّد منظر قالبك. في حين تأتي متصفحات الإنترنت بخطوط جاهزة افتراضية، وهي التي تستدعيها في ملف style.css، استخدام نفس الخطوط التي يستخدمها الآخرين يبدو مملًا بعض الشيء. لحسن الحظ، بإمكانك إضافة الخط الذي تختاره بسهولة عن طريق قاعدة font-face@ في CSS3. كل ما تحتاجه هو رفع الخط إلى خادوم الويب الخاص بك، ثم إضافته إلى قالبك عن طريق بضعة سطور من CSS. العثور على خطهناك أماكن عديدة للعثور على خطوط ويب جيدة مجانًا مثل FontSquirrel أو Adobe Edge Web Fonts. فقط تأكد من اختيارك لخط ذي رخصة تلائم احتياجاتك. حيث أن الخطوط المجانية ليست جميعها متاحة للاستخدام التجاري، ولكن يمكنك شراء خطوط بمقابل مادّي للاستخدام التجاري من أماكن عديدة مثل Typekit. هناك نوعان رئيسيان من الخطوط في اللغة الإنجليزية: serif و sans-serif. تمتلك خطوط serif منحنيات في أطرافها بينما لا تمتلكها خطوط sans-serif. عندما يقع اختيارك على الخط الجديد، ستحتاج لتحميل ملفه. ضع في اعتبارك أن هناك أنواع مختلفة من ملفات الخطوط وليست كلها متوافقة مع أغلب متصفحات الإنترنت. إليك مُلخّصا سريعًا عن الأنواع المختلفة للخطوط وصيغ ملفاتها: (TrueType Font (TTF: متوافق مع إنترنت اكسبلور 9.0 وما يليها، وكروم بداية من الإصدارة 4.0، فيرفكس من الإصدارة 3.5، سافاري من الإصدارة 3.1 وأوبرا من الإصدارة 10.0.(OpenType Font (OTF: له نفس التوافقيات لخط TrueType.(Web Open Font Format (WOFF: يدعمه إنترنت إكسبلورر من الإصدارة 9.0 وما يليها، كروم بداية من الإصدارة 5.0، فيرفكس من الإصدارة 3.6، سافاري من الإصدارة 5.1 وأوبرا من الإصدارة 11.1.(Web Open Font Format 2.0 (WOFF2: مدعوم فقط في كروم من الإصدارة 36.0، فيرفكس من الإصدارة 35.0، وأوبرا من الإصدارة 26.0.(Embedded Open Type Font (EOT: متاح خصيصًا لإنترنت إكسبلورر 6.0 وما يليه.صيغة Web Open Font Format هي الصيغة المفضلة نظرًا لأن الخطوط تٌضغط فيها لتستهلك مساحة أقل من الاتّصال المتاح لك وتحتوي على بيانات وصفية إضافية. ولكن للأسف فإنها ليست دائمًا متاحة للتحميل. فإذا وجدت صعوبة بالعثور على هذه الصيغة، يمكنك استخدام صيغ TrueType وOpenType المتاحة بشكل أكبر للتحميل كما أنها اختيارجيد أيضًا. رفع خطوطك على خادوم الويبحين تجد الخط الذي تريد استخدامه وتتبع إرشادات مصدر الخط لتحميل الملف، فقد حان الوقت إذن لرفعه إلى خادوم الويب الخاص بك. وقبل أن تفعل ذلك، تذكر أن تحتفظ بنسخة احتياطية من موقعك بالكامل قبل إجراء أي تعديلات. من المستحسن إضافة الخط إلى المجلد الذي يحوي قالبك، والذي يمكن أن تجده في المسار: wp-content > themes > your-theme حيث your-theme هو اسم قالبك. يمكنك أيضًا إذا أردت إضافة مجلد Fonts ليحتوي خطوطك حتى تنظم حاجياتك، خاصة إذا كنت تخطط لإضافة أكثر من خط واحد. فك ضغط الملف المضغوط وارفع المحتويات إلى مجلد القالب الخاص بك عن طريق لوحة التحكم. عبر النّقر على زر File Manager تحت Files في الصفحة الرئيسية للوحة التحكم. وغالبًا ستظهر لك نافذة منبثقة، فحينها ستختار مكان موقعك وبعدها تضغط زر الذهاب Go. انتقل إلى مجلد القالب الخاص بك واضغط زر الرفع Upload في أعلى الصفحة. يمكنك ترك صلاحيات الملف 644 ولن تواجه مشاكل غالبا. ولكن إذا واجهتك مشكلة صلاحية، فجرب حذف الملفات ثم إعادة رفعها مجددا بصلاحيات مختلفة. اضغط على زر اختيار الملف Choose file في صفحة رفع الملفات واختر ملفات الخط من حاسوبك. عندما تفتحها، فإن عملية الرفع ستبدأ تلقائيًا دون ضغط زر إضافي على هذه الصفحة. لا يهم المكان الذي تضع فيه ملف الخطوط، بل ستحتاج لتتذكر مساره. وستجده مكتوبًا في صفحة رفع الملفات بالبنط العريض بعد جملة Select files to upload to. إضافة خطوطك إلى القالبلإظهار خطوطك المرفوعة في قالبك، ستحتاج لاستدعائها في ملف style.css الخاص بالقالب، حيث يمكنك العثور عليه في: wp-content > themes > yourtheme في لوحة التحكم، اختر الملف ثم اضغط زر التعديل في أعلى الصفحة. إذا لم تكن قد منعت النوافذ المنبثقة مسبقًا، ستظهر لك نافذة منبثقة، في هذه الحالة اضغط على Go في الأسفل. انسخ النص البرمجي بالأسفل إلى الملف، ويفضل لصقه في الجزء المُخصّص لاستدعاء الخطوط. تأكد أن هناك سطرًا فاصلًا بين كل جزء من أجزاءئ النّص البرمجي في الملف. @font-face { font-family: FontName; src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf); font-weight: normal; }لا تنس استبدال FontName باسم الخط الذي اخترته، وعدّل في الشيفرة البرمجية لتغيير مسار ملفات الخطوط إلى المسار الصحيح. أضف نفس شيفرة CSS مجددًا لتعريف النمط السميك، المائل، والعناوين الرئيسية للخطوط وما شابه، وتأكد من تغيير اسم الخط ومسار الملف بشكل صحيح. وفي النهاية، حدّد كيفية استخدام خطك ببعض النصوص الإضافية من CSS مثل المثال بالأسفل: p { font-family: FontName; } في هذا المثال، كل نصوص الفقرات (الموسومة بوسم p) ستستخدم الخط الجديد. حين تنتهي من تعديل النص البرمجي إلى اختياراتك الخاصة وتحفظ الملف، سيظهر الخط الجديد على موقعك. خاتمةمع هذه التعليمات، يجب أن تكون قادرًا على إضافة خطوط جديدة إلى القالب الخاص بك دون أي مشاكل. ومع ذلك، هناك العديد من الإضافات التي يمكنها مساعدتك على إضافة خطوط دون الحاجة إلى أي برمجة إذا أردت حلًا أسهل. لمزيد من المعلومات عن استخدام الخطوط في ووردبريس، اقرأ الدليل التالي: اللعب بالخطوط. ترجمة -وبتصرف- للمقال: Adding Custom Fonts to WordPress with @Font-Face and CSS3 لصاحبه: Jenni McKinnon.

كمطور، لابد أنك تفخر بمنتجاتك التي أمضيت ساعات عديدة على تطويرها، وتريد لها النجاح. ولكن ماذا لو لم تجد النتائج التي كنت تأملها بعد كل المجهود الذي بذلته؟ ماذا لو لم يشترِ أحد منتجك؟ هذا سيكون مُحبطًا بالطبع. لكن قبل أن تتخلى عن طموحاتك وأحلامك، اسأل نفسك، هل فعلت كل ما في وُسعك لتسويق منتجك بكفاءة؟ إذا أثار السؤال العديد من علامات الاستفهام لديك، فالإجابة حتمًا هي "لا". بناء خطة تسويق جيدة من شأنها أن تلعب دورًا كبيرًا أيّا كان المُنتج الذي ترغب في بيعه. وفي حالة مجتمع ووردبريس التنافسي، فإنها ضرورية للغاية. قبل أن تفقد الأمل من إمكانية نجاح منتجك، جرّب هذه النصائح التي أفادت مطورين آخرين، فقد تكون دليلك إلى خطة تسويقية ممتازة. قدّم إصدارًا مجّانيًاعادة ما ينفر الناس من تجربة أشياء جديدة، ويزداد الأمر سوءًا إن لم يكونوا قد سمعوا بصاحبها من قبل. لذا، إذ كنت مطورًا جديدًا على السّاحة وكنت بصدد إطلاق منتجك الأول، فمن المستحسن أن تقدم "شيئًا" مجّانيًا في البداية، هذا الأمر أعطى نتائج جيّدة مع جايسون هولوتّ. قدّم هولوتّ إصدارين من إضافته، واحد مجاني والآخر بمقابل مادي. لم يحتوِ الإصدار المجاني على خصائص كثيرة لكنه كان وسيلة لتجربة الإضافة. أثبت نموذج التجربة قبل الشراء نجاحه لفترة طويلة ومهّد للعديد من المطورين انطلاقة جيدة في السوق. ركّز على مجال معينوفقًا لتشارلي باتل، مؤسس Gabfire Themes فإنّ إحدى أفضل الخطط التسويقية هي التركيز على مجال بعينه. هذه الخطة ساعدت Gabfire Themes على إثبات كفاءتها في سوق التّصميم المُوجّه للصحافة والمجلات بشكل سريع، بالإضافة إلى بناء مجتمع وفيّ لعلامتهم التجارية. التركيز على مجال بعينه قد يكون صعبًا، خاصة إذا كنت تمتلك العديد من الأفكار وتريد تنفيذ جميعها. لكنها فكرة تستحق التّجربة. ينصح باتل في هذا الموضوع بأن تبحث عن نقاط قوتك وتركّز على استغلالها وتقويتها، ويطرح مثالًا لكيفية التركيز في مجال معين: الأمر كله يعتمد على الكيف أكثر من الكمّ، إذ يقول باتل أنهم لا يعملون على توفير عدد معين من القوالب شهريًا، ولا ينوون تقديم المئات من القوالب فقط لامتلاك مثل هذا العدد، بل يقدمون قوالبهم بشكل يمكّن المستخدم من تعديلها لتناسب احتياجاته الشخصية، فالأكثر لا يعني الأفضل بالضرورة. توفير محتوى وافٍعند التعريف بمنتجك، يجب أن توفر كافة المعلومات الممكنة عنه في صفحة المنتج على موقع ووردبريس، شاملًا صفحات مثل الأسئلة الشائعة واللقطات screenshots. بالإضافة إلى توفير مُحتوى مُفيد للزّوّار. حيث يجب أن توفّر في موقعك مدونة، صفحة للأسئلة الشائعة، أمثلة لاستخدام الإضافة، دراسات تحليلية، وما شابه وفقًا لنصيحة هولوتّ. فكلما وفرت محتوى أكثر فائدة، ظهرت في صورة أكثر احترافيّة. توفير المحتوى لموقعك سيشجع الناس على معاودة الزيادة مجددًا. ويذكر باتل أنه من الممكن استغلال هذه الميزة في إنشاء "محتوى موسمي"، مثلًا نشرة بريدية شهرية ستكون طريقة جيدة لإطلاع المستخدمين على آخر الأخبار، وإعلامهم بالتحديثات، وتوفير استبيان لمعرفة الآراء. المحتوى هو طريق الويب. يُحدّد كيف يعثر الناس على موقعك ويهتمون بعروضك. ويرشد محركات البحث إليك. هذه أسباب كافية للاهتمام بخطة للمحتوى تتضمن مقالات أصيلة ذات جودة عالية. جرب تنفيذها في مدونتك ويمكنك كتابة تدوينات دعائية في المدونات الأخرى للوصول إلى الاستفادة القصوى. توفير الدعملن تتخيل مدى أهمية هذه النقطة. هناك العديد من مصممي القوالب والإضافات ممّن ينشئون منتجًا ثم يمضون في طريقهم. ولكن هذا يقود إلى الفشل الذريع. في سوق القوالب والإضافات الخاصّة، يمكن أن يبني الدعم الفنّي سمعتك أو أن يدمرها. يذكر باتل فخرهم بمستوى دعمهم للمستخدمين، إذ يتفق المعظم على أن الدعم المتوفر لهم يفوق تكلفة المنتج نفسه. ويمكنك توفير الدعم عن طريق تخصيص وقت للرد على البريد الإلكتروني وتذاكر الدعم، تقديم تحديثات دورية للمنتج، وحتى التواجد على الأقل من أجل مستخدميك، فإن الدعم هو جزء من منتجك الذي تبيعه. خطّط لانطلاقة تسويقية للمنتجعندما يكون منتجك على وشك الانطلاق، فمن الهام أن تركز جهودك حول موعد إطلاقه. بالنسبة لهوارد يه، المؤسس الشريك لـ ContactUs.com، التي أطلقت إضافة Contact Form by ContactUs.com لووردبريس والذي تمّ تحميلها أكثر من 89,000 مرّة، هذا يعني تنفيذ "خطة تسويقية لزيادة عدد مرات تحميل الإضافة". ويقول هوارد أنّه يحرص على الإشارة إلى أي مراجعات أو تدوينات من أشخاص آخرين عن الإضافة على صفحة الإضافة الرسمية. ولنفعل هذا بكفاءة، فإن فريق هوارد يُسهّل المهمّة عبر توفير وصف للإضافة، إضافة إلى صور/لقطات والأسئلة الشائعة. وفوق ذلك فهم يأخذون بالحسبان كل مراجعة تصلهم، بما فيها السلبية منها. وهذا يدخل ضمن جزئية "تقديم الدعم" التي تحدثنا عنها سابقًا ويثبت أنك مستعد للاستماع إلى ردود الفعل، حتى لو كانت غير مشجعة دومًا. استخدام الشبكات الاجتماعيةهذا يٌفترض أن يكون بديهيًا ولكني عادة ما أقابل مطورين أقصى ما وصلوا إليه في التسويق عن طريق الشبكات الاجتماعية هو إنشاء حساب تويتر لإضافتهم. وهذا خطأ فظيع، خاصة إذا أخذت في الاعتبار أنك توفر منتج متاحًا على الإنترنت فقط. من الهام للمطورين المبتدئ منهم والخبير الظهور، والأهم التفاعل، على الشبكات الاجتماعية. مثلًا Elegent themes لهم أداء جيد على تويتر وفيس بوك، وأيضًا Yoast مثال جيد آخر على التفاعل الاجتماعي. المشاركة في الشبكات الاجتماعية بانتظام توسّع جمهورك أنت ومنتجاتك. بالإضافة إلى حس الانفتاح والدعم. كلما تعددت وسائل تواصل شركتك مع المستخدمين، صرت أفضل. لا يعني ذلك أنك تحتاج للمشاركة في كل الشبكات الاجتماعية. فمن الأفضل أن تختار الشبكة الاجتماعية المناسبة وتلتزم بها بدلًا من التشتت بين الشبكات الاجتماعية المختلفة. خاتمةالتسويق هو خطوة كثيرًا ما يغفل عنها في تطوير إضافات وقوالب ووردبريس. وهذا خاطئ ستعرف إضافتك زيادة مُعتبرة من حيث مرّات التّحميل (أو المبيعات) لو خصّصت وقتًا أكثر لوضع خطة تسويقية. مترجم بتصرف من مقال How to Market WordPress Plugins and Themes للكاتبة Brenda Barron.

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