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

تعتبر السيرة الذاتية من أهم الأدوات عند التقدم للحصول على وظيفة ولذلك يجب أن تكون جيدة الصياغة وتعرض مؤهلاتك بصورة ذكية. يتيح مايكروسوفت وورد إمكانية إنشاء سيرة ذاتية باستخدام القوالب الجاهزة أو إنشائها يدويا من الصفر. ولمعرفة كيفية إنشاء سيرتك الذاتية بإحدى الطريقتين، بالإضافة إلى بعض الأدوات والنصائح لتحسينها تابع معنا هذا الدرس. إنشاء السيرة الذاتية باستخدام القوالب بالإمكان الوصول إلى قوالب السيرة الذاتية مباشرة من نافذة بداية وورد: في حقل البحث سنكتب Resume ونضغط Enter لعرض القوالب الخاصة بالسير الذاتية. وهذه القوالب مصنفة بفئات مختلفة. أن كنت تستخدم إصدارات أقدم من وورد 2013 يمكنك الوصول إلى هذه القوالب من: ملف File > جديد New ثم البحث في حقل البحث الخاص بالقوالب. حقوق الصورة ننقر على أحد المصغرات لعرض معاينة للقالب، ونستخدم الأسهم للتنقل بين القوالب. عندما نختار المناسب ننقر إنشاء Create: بعد تنزيل القالب وفتحه في وورد سنبدأ بتحرير القالب وكتابة المعلومات الشخصية، الهدف المهني، المهارات، الخبرات، إلخ. يحتوي القالب على إرشادات بسيطة تخبرنا ما الذي يجب كتابته في كل حقل: بإمكاننا نسخ ولصق النصوص من نسخة قديمة من السيرة الذاتية إن وجدت. عند لصق النصوص يمكننا تنسيقها من خانة الأنماط لتتلاءم مع تنسيقات القالب. أو استخدام خيارات اللصق عن طريق زر Ctrl. نستخدم الأمر Keep Text Only إذا كنا نرغب في اللصق دون تنسيق: أو نستخدم خيار Merge Formatting لدمج التنسيقات، أي جعل حجم ونوع الخط متناسقا مع القالب، والاحتفاظ بالتنسيقات الأخرى للنص الأصلي كالنصوص العريضة والمائلة، إلخ: يجب أن نأخذ في الاعتبار عند إنشاء السيرة الذاتية أن نكون محددين جدا في فقرة الهدف المهني Objective. إذ يجب أن يكون الهدف مختلفا باختلاف الشركة التي نقدم للحصول على وظيفة فيها. لا تستخدم نفس الهدف المهني لجميع الشركات. تحتوي القوالب، وخصوصا قوالب السير الذاتية، على حقول بتنسيقات معينة، وتحتوي على نصوص إرشادية، تسمى هذه الحقول عناصر التحكم بالمحتوى Content Controls. كمثال على هذه العناصر الحقل المؤشر في الصورة أدناه: لدينا خيار استخدام هذه العناصر أو إزالتها بالنقر بزر الفأرة الأيمن عليها واختيار Remove Content Control: يمكننا التعديل على تنسيق وتصميم القالب من تبويب تصميم Design. يمكننا اختيار التنسيق الذي يناسبنا من أحجام النصوص، الألوان أو المسافات بين الأسطر والفقرات، وغيرها، وذلك معرض تنسيقات المستند Document Formatting: أو من معرض نسق Themes: استخدام الجداول في إنشاء السيرة الذاتية يفضل البعض عدم استخدام القوالب لإنشاء السيرة الذاتية، ويعتمدون على مفتاح tab أو المسطرة في تنسيق المسافات بين عناوين الأقسام وما يقابلها. لكن هناك طريقة أسهل وأسرع وهي استخدام الجداول. ولفعل ذلك سنقوم بالخطوات التالية: سنقوم بفتح مستندًا جديدًا وكتابة المعلومات الشخصية في بداية الصفحة، ثم سنقوم بإدراج جدول Table من تبويب إدراج Insert: سنقوم بإدراج عمودين، أحدهما لعنوان القسم، والآخر لما يقابل تلك الأقسام من معلومات. أما عدد الصفوف فيعتمد على عدد الأقسام التي تريد إضافاتها، أي صف للهدف المهني، صف للخبرات، صف للمهارات، إلخ. بعدها سنقوم بكتابة المحتويات، وسنستخدم خلية واحدة لكل قسم، أي سنكتب جميع المهارات أو الخبرات السابقة في خلية واحدة من الجدول مهما كان عددها: الخطوة التالية بعد الانتهاء من الكتابة هي تنسيق الجدول. سنقوم بتقليل عرض العمود الأول لإزالة المساحة الزائدة والاستفادة منها في زيادة عرض العمود الثاني. سنضع المؤشر على الحد بين العمود إلى أن يتغير شكله إلى متجهين، ثم سنقوم بالسحب إلى جهة اليسار: ثم سنقوم بإضافة عمود وسطي كحاجز رفيع يفصل بين العمودين، بالنقر على علامة (+) التي تظهر عن وضع المؤشر على الحد بين العمودين وهي طريقة سريعة لإدراج أعمدة (أو صفوف) في إصدار 2013 من البرنامج: أو بالنقر داخل أحد خلايا العمود الأول، والتأشير فوق إدراج Insert واختيار إدراج عمود إلى اليمين Insert Column to Right: وسنقوم بتقليل عرض هذا العمود لأننا لا نريد من الحاجز أن يكون كبيرًا جدًا: بالتأكيد لا نريد إظهار حدود الجدول في السيرة الذاتية لذلك سنقوم بإزالتها. سنحدد جميع خلايا الجدول أولا من أيقونة (+) في حافة الجدول: ثم سنذهب إلى تبويب تصميم Design السياقي الخاص بالجدول، ونختار بلا حدود No Borders من أمر حدود Borders: ما زال بإمكاننا تعديل أبعاد الجدول حتى بعد إزالة الحدود. يمكننا استخدام خطوط الشبكة Gridlines. هذه الخطوط لا تظهر عند الطباعة لكنها تساعدنا على معرفة أماكن حدود أعمدة وصفوف الجدول. سنقوم بتحديد الجدول أولا من أيقونة (+) كما في الخطوة السابقة، ومن أمر حدود سنختار عرض خطوط الشبكة View Gridlines: انتهينا تقريبا من إنشاء السيرة الذاتية. ما تبقى هو تنسيق النصوص وأحجامها، أو إضافة عناصر تصميمية في رأس Header الورقة. نصائح وأدوات لتحسين السيرة الذاتية اليوم أصبح أغلب الباحثين عن عمل يقدمون سيرهم الذاتية عبر الإنترنت. وتخضع تلك السير الذاتية للبحث عن كلمات معينة بواسطة أنظمة تتبع تستخدم من قبل أصحاب العمل. الأمر أشبه بتهيئة محركات البحث SEO، إذ يجب أن تتضمن سيرتك الذاتية الكلمات التي تجعل العثور عليها سهلا عند البحث. تسمى هذه الكلمات بالكلمات المفتاحية Keywords أو الكلمات الفعالة Power Words. تحتاج إلى سيرة ذاتية احترافية؟ استعن بأفضل خبراء التوظيف في الوطن العربي لمساعدتك على إنشاء سيرة ذاتية احترافية بتصميم عصري وجذاب أنشئ سيرتك الذاتية الآن تختلف هذه الكلمات باختلاف الوظيفة التي تُقدم إليها ويجب عليك أن تذكر الكلمات المناسبة ذات الصلة بالعمل الذي تبحث عنه والتي تجذب صاحب العمل. ابحث عن الكلمات المستخدمة في الوصف الوظيفي وضمنها في سيرتك الذاتية. فإذا كانت الوظيفة تتطلب خبرة في برامج التصميم الجرافيكي من ضمنها Photoshop ،Illustrator ،After Effects ...إلخ، تحدث عن هذه البرامج ضمن خبراتك أو اذكرها ضمن مهاراتك، لكن بالطبع إذا كنت مؤهلا لذلك. وإذا كنت تقدم طلبا للعمل في شركة هواتف، تحدث عن الهواتف بالتحديد وليس الأجهزة الذكية بصورة عامة. كن محددا. من الأمور الأخرى التي يجب مراعاتها في السيرة الذاتية هو تجنب تكرار الكلمات. في بعض الأحيان تكرر الكثير من الكلمات دون أن تدرك ذلك. في المثال أدناه هناك العديد من الكلمات المكررة، "expert specialist"، "high experience"... ما سنفعله هو أننا سنقوم بالبحث عن مرادفات لتلك الكلمات واستبدالها. أولا سنقوم بوضع المؤشر فوق إحدى الكلمات، ثم ننقر بزر الفأرة الأيمن ونؤشر فوق مرادفات Synonyms، وسنختار واحدة من المرادفات المقترحة: وإذا لم نجد الكلمة التي تناسبنا سنبحث في Thesaurus الذي يوفر المزيد من المرادفات: وكذلك هناك ما يسمى بصفحة المقدمة أو الخطاب المرفق مع السيرة الذاتية Cover Letter. وهي عبارة عن صفحة تُرفق في بداية السيرة الذاتية توضح بشكل مختصر وسريع الهدف من الوظيفة والمؤهلات التي تجعلك مناسبا للوظيفة التي تقدم إليها. يجب أن تحرص على صياغة صفحة المقدمة بطريقة ذكية وجذابة، فقد تكون هي فرصتك للحصول على الوظيفة. وإذا لم تكتب صفحة مقدمة من قبل، أو لم تكن معتادا على كتابتها يمكنك استخدام قوالب وورد. إذ تتوفر عدة قوالب بالتنسيق الرسمي، يمكنك تنزيلها وتحريرها. من صفحة البداية وفي حقل البحث، اكتب resume cover letter واختر أحد القوالب. قم بتنزيل القالب وابدأ بتحريره حسب الإرشادات في حقول التحكم بالمحتوى. بهذا تكون قد تعرفت على كيفية إنشاء سيرتك الذاتية، والتي إن كنت منشغلًا عن إتمامها كما يجب، أو كنت بحاجة لواحدة ذات احترافية عالية، فيمكنك استعمال خدمة كتابة السير الذاتية المقدمة من منصة بعيد، التي تمنحك سيرةً ذاتيةً احترافيةً مقدمةً من طرف خبراء في التوظيف، وهذا بتصاميم مميزة تستهدف مجالات العمل المختلفة؛ إلى جانب بعض المزايا الإضافية التي ستفيدك أكثر لرفع حظوظك بالتوظيف، وسنوضح بعضها في الآتي: الحصول على استشارة فردية مع أحد خبراء التوظيف. الحصول على السيرة الذاتية بنسختين عربية وإنجليزية حسب الباقة التي ستختارها، وبالنموذج الذي تراه مناسبًا لك. إجراء مقابلة توظيف تجريبية يقودها أحد اخصائيي التوظيف، لتكون بمثابة تدريب لك ليوم مقابلة العمل الفعلية مع التطرق إلى أهم الأسئلة التي قد تُطرح عليك فعليًا، وبطبيعة الحال ستحصل على بعض التعقيبات والتوجيهات التي ستساهم في رفع جاهزيتك والتحضير لمقابلات العمل. الحصول على مساعدة لإعداد ملف مهني احترافي على بعيد وإعداد ملفاتك الشخصية على مستقل وخمسات للتعريف بخبراتك ومهاراتك الشخصية. وإن كنت بحاجة لفهم أوسع حول الأمور قبل حصولك على باقة من الباقات المتاحة، فيمكنك التواصل مع الدعم الفني للمنصة لإجابتك عن استفساراتك.

لقد تم بناء تويغ ليكون قابلًا للتوسيع بشكل كامل حيث يمكنك التحكم في كل شيء فيه كما يمكنك ضبط بيئة العمل بما يناسب المستخدم و تعريف دوال ومرشحات مخصصة تلبية أي متطلبات تريدها. خيارات بيئة العمل في تويغ عند استدعاء تويغ فإننا نكتب السطر التالي: $options = array(); $twig = new \Twig\Environment($loader, $options); يحوي الوسيط الثاني options خيارات التحكم بطريقة عمل تويغ مثلا لتفعيل وضع تصحيح الأخطاء: $options = ['debug' => true]; حيث تخزن خيارات بيئة العمل على شكل مصفوفة كل عنصر منها يشمل خيارًا محددًا هي: debug: تفعيل وضع تصحيح الأخطاء، القيمة الافتراضية غير مفعل false، وفي حال استخدام تويغ مع ووردبريس فيرتبط بتفعيل الخيار wp_denug في ووردبريس. charset: تحديد طريقة ترميز الأحرف القيمة الافتراضية utf8. cache: فيه نجد المسار الذي سوف نخزن به ملفات PHP الناتجة عن القالب أو نستعمل القيمة false في حال عدم رغبتنا بتخزينها وهذا هو الوضع الافتراضي. auto_reload: يطلب من محرك القالب أن يعيد توليد أو تصريف ملف PHP الناتج عن القالب كل مرة حتى في حال عدم تغير القالب. strict_variables: في حال كون قيمته true، فإن تويغ يعطي خطأ في حال استخدام اسم متغير غير موجود أما في حال ضبطه على false وهو الوضع الافتراضي فإن تويغ يعيد قيمة فارغة في حال لم يعثر على المتغير المطلوب. autoescape: يطلب من تويغ القيام بعملية تهريب آمنة مناسبة عند إخراج أي متغير. استخدام الدالة dump في وضع تصحيح الأخطاء يختلف عمل هذه الدالة تبعا للخيار debug وهو الخيار المسؤول عن تفعيل وضع تصحيح الأخطاء في بيئة عمل تويغ، وإذا كان وضع تصحيح الأخطاء غير مفعل لا تعيد الدالة dump أي قيمة أما عندما يكون وضع تصحيح الأخطاء مفعلًا فإن للدالة السابقة استخدامين اثنين، الأول عند استدعائها دون تمرير أي وسيط فإنه تظهر كافة المتغيرات المتعلقة بالقالب مع قيمتها مثل: {{ dump() }} أما الطريقة الثانية فهي أن نمرر لها متغيرًا ما، فإنها تعيد قيمة ذلك المتغير وفي حال كان المتغير مصفوفة فإنها تطبع جميع عناصر المصفوفة: {{ dump( user ) }} يفيد استعمال هذه الدالة كثيرًا في استكشاف الأخطاء. حيث تستخدم لطباعة البيانات في وضع تصحيح الأخطاء، كما تتميز بطباعة كل محتويات المتغير مهما كان نوعه، فإذا كان المتغير مصفوفة طبعت كافة محتويات المصفوفة و إذا كان المتغير كائن طبعت جميع خصائص الكائن. لنفرض أن التعبير التالي لا يعيد قيمة {{ post.title }} فإننا يمكن أن نعدل الكود ليصبح على الشكل التالي: {{ post.title }} {{ dump( post ) }} {# the last line output: object (post) public ‘title’ => string ‘’ public content => string ‘my post’ #} لاحظ أن الدالة السابقة تعيد جميع خصائص الكائن post مع نوع كل خاصية مما يسهل تتبع الأخطاء. توسيع عمل تويغ يهدف توسيع تويغ إلى تمكين المستخدِم من العديد من التقنيات غير المتوفرة بشكل افتراضي في تويغ. التوسيع بواسطة مكتبات جاهزة Twig مرن جدا بحيث يسمح للمطور بسهول بتعريف مرشحات ودوال خاصة، كما توجد العديد من المكتبات الجاهزة التي تدعم تويغ وتضيف له العديد من المرشحات والدوال الإضافية مثلا يمكن الاطلاع من هذه الصفحة على قائمة ببعض المكتبات الشهيرة وتحميلها. استخدام التوسعات Extensions توسعات Twig هي حزم تضيف مزايا جديدة إليه، وتستطيع تسجيل توسعة من خلال التابع addExtension()‎: عند العمل بدون composer $twig->addExtension(new ExtensionClassName()); كما يمكن أن يتم تسجيل التوسعة من خلال composer: $ composer require twig/extension-file بعد إضافة توسعة إلى تويغ يمكن استخدام الدوال أو المرشحات الجديدة التي تحتويها، مثلا المكتبة markdown-extra تضيف عددًا من المرشحات التي تتعامل مع نصوص من نوع ماركدون: {% apply html_to_markdown %} <h2>Title 2</h2> <h3>Title 3</h3> {% endapply %} {# output: ## Title 2 ### Title 3 #} التوسيع بواسطة الشيفرة الجامعة macro أن أبسط طريقة لتوسيع تويغ هو استخدام تويغ نفسه ويتم ذلك من خلال الوسم macro حيث يمكننا من تعريف شيفرة جامعة خاصة بنا يمكننا إعادة استخدامها: {% macro EcoHello( student ) %} Hello {{ student }}! {% endmacro %} {{ _self.EcoHello('Ziad') }} {# output: Hello Ziad! #} يمكن تعريف الشيفرات الجامعة في ملف تويغ منفصل ثم استيراده في الملف الحالي، مثلا ننشأ ملف اسمه macros.twig، ونكتب به ما يلي: {# macros.twig #} {% macro EcoHello( student ) %} Hello {{ student }}! {% endmacro %} ثم عند الرغبة في استخدام هذا الماكرو نستورد الملف على النحو التالي: {% import "macros.twig" as mymacros %} {% if mymacros.EcoHello is defined %} {{ mymacros.EcoHello('Ziad') }} {% endif %} {{ mymacros.EcoHello('Ziad') }} {# output: Hello Ziad! #} كما لا حظنا في المثال السابق يمكن أن نتحقق من وجود شيفرة جامعة قبل استخدامها للتأكد من أنها مُعرَّفة في الملف الذي استوردته. ملاحظة: يمكن كتابة السطر الأول على النحو التالي وذلك يؤدي نفس الهدف: {% from "macros.twig" import mymacros %} المتغيرات العامة هي متغيرات متاحة في جميع قوالب تويع ويمكن أن نضيفها إلى تويغ بعدة طرق أبسطها هو الشكل التالي: $twig = new Twig_Environment($loader); $twig->addGlobal('MyWebsite', 'example.com'); بعد ذلك يمكن استعمال المغير السابق في أي قالب على النحو التالي: {{ MyWebsite }} إنشاء مرشحات مخصصة لإضافة أي مرشح إلى تويغ نقوم بتعديل الملف الذي نستدعيه لتثيبت تويغ أو لإخراج القالب ونضيف المرشح عليه، ويمكنك مراجعة المقال الأول لمعرفة المزيد عن تثبيت تويغ. مثلا في الأسطر الثلاث الأخيرة من الشيفرة التالية سوف نلاحظ أننا قمنا بتعريف مرشح ثم أضفناه إلى تويغ ثم أعطينا الأمر بإخراج المستند المنسق: <?php spl_autoload_register(function ($classname) { $filename = './' . str_replace('\\', '/', $classname) .'.php'; if (file_exists($filename)) require_once $filename; }; require_once 'Twig\Loader\FilesystemLoader.php'; $loader = new Twig\Loader\FilesystemLoader('.'); $twig = new Twig\Environment($loader); $filter = new Twig\TwigFilter('countchars', 'count_chars'); $twig->addFilter($filter); echo $twig->render('template.twig', ['var1' => 'value1', 'var2' => 'value2']); لقد أضفنا مرشح أسميناه countchars يستدعي هذا المرشح دالة PHP موجدة اسمها count_chars وهي تعيد عدد الأحرف في نص ما و لاستدعاء هذا المرشح في ملف تويغ نستعمله مثل أي مرشح آخر قد تم استدعائها في القالب التالي عند كتابة اسم المرشح الذي اضفناه countchars مسبوقا بـ | : {{ 'Ziad'|countchars }} {# output: 4 #} يمكن لإنشاء المرشح استخدام دالة PHP جاهزة أو إنشاء دالة PHP خاصة بنا، ثم إضافتها مثل مرشح في تويغ، أي أن المرشحات في تويغ هي عبارة عن دوال في PHP. قد تكون تلك الدوال مبية في لغة PHP وقد تكون دوال من إنشاء المطور نفسه. إضافة دوال خاصة يمكن بسهول إضافة دالة إلى تويغ بطريقة مشابهة لإضافة مرشح وكمثال يمكن أن نكتب التالي: $function = new \Twig\TwigFunction('SayHello', function () { return 'Hello'; }); $twig->addFunction($function); بعد ذلك يمكن استدعائها في أي قالب على النحو التالي: {{ SyaHello() }} {# output: Hello #} تهدف المرشحات والدوال الخاصة إلى اضافة مزايا إضافية غير متوفرة مباشرة في بنية تويغ بحيث تلبي الاحتياجات للموقع. كلمة الختام لقد تحدثنا في هذا المقال عن تهيئة بيئة العمل في تويغ وعن استخدام الدالة dump في وضع تصحيح الأخطاء ثم انتقلنا إلى كيفية اضافة مرشحات ودوال خاصة بنا إلى تويغ. بهذا القدر من المفترض بك عزيزي القارئ أن تكون قد وصلت فكرة واضحة عن تويغ بحيث يمكن الانطلاق بقوة في العمل مع تويغ وفي حال رغبتك بالمزيد من التفاصيل يمكنك مراجعة الترجمة العربية للتوثيق الرسمي لتويغ في موسوعة حسوب.

سنتعرف في بداية هذا المقال إلى تطبيقات شائعة يُستخدَم فيها محرك القوالب تويغ، ثم سنشرح طريقة استخدام تويغ في ووردبريس كنوع من التطبيق العملي على تويغ. تطبيقات شهيرة تستخدم تويغ يتنوع استخدام تويغ بشكل كبير ولا ينحصر فهو يُستخدم في إطار عمل سيمفوني symfony ويستخدم أيضا في عدد من أنظمة إدارة المحتوى مثل دروبال وبلوت Bolt بالإضافة إلى إمكانية استخدامه في ووردبرس. سيمفوني يُعَدّ سيمفوني symfony أحد إطارات العمل المتكاملة التي توفر العديد من المزايا لمصممي تطبيقات الويب المتكاملة حيث يوفر على المبرمج الوقت والجهد يستخدم سيمفوني تويغ لتوليد قوالب الصفحات. دروبال دروبال Drupal نظام لإدارة المحتوى، ويمكن أن يعمل أيضًا كنظام للتدوين أو كنظام لبناء تطبيقات الويب متكاملة بسبب خصائص عديدة منها المرونة والتصميم الجيد التي يمكن التحكم بها وتطويرها بسهولة. في دروبال تم اعتماد تويغ في تصميم القوالب بدءًا من الإصدار الثامن، لمزيد من المعلومات يمكنك الرجوع إلى هذه الصفحة. بلوت بلوت Bolt هو نظام إدارة محتوى خفيف وقد اعتمد تويغ لتصميم قوالب الصفحات، الفرق بين بلوت و ووردبرس هو أن بلوت لا يستهلك إلا القليل جدا من موارد النظام يمكنك الرجوع إلى هذه الصفحة لمزيد من المعلومات. ووردبرس يعمل ووردبرس على تقديم بيئة سهلة لبناء المدونات ومواقع الويب و يمتاز بغناه بقوالب يمكن من خلالها تعديل مظهره بسهولة ويمكن استخدام تويغ في تصميم وبناء تلك القوالب والتصميمات. تصميم قوالب فرعية في ووردبريس نظرا لشعبية ووردبريس فلقد اخترنا أن ننشئ قالبًا فرعيا في ووردبريس كتطبيق عملي على تويغ ولكن ما هو القالب الفرعي؟ القالب والقالب الفرعي في ووردبريس لنسأل أنفسنا، ما هو القالب في ووردبريس WordPress Theme؟ القالب هو وسيلة لتغيير تخطيط وتصميم موقع الويب الخاص بك، إذ تقوم القوالب بتخصيص مظهر موقعك، بما في ذلك التخطيط والطباعة واللون وعناصر التصميم الأخرى، ويمكن أن يؤدي اختيار المظهر الصحيح إلى جعل موقع الويب الخاص بك أكثر جاذبية وسهولة في الاستخدام وتحسين تفاعل الزوار. في ووردبريس لست مضطرًا لتبدأ من الصفر عند تصميم أي قالب ووردبريس خاص بك، ويمكنك الانطلاق من قالب ووردبرس موجود مع تعديل بعض الصفحات أو الخصائص به بما يناسبك، وهذه التعديلات والإضافات التي تجرى تدخل ضمن ما يسمى بالقالب الفرعي أو الابن WordPress Child Theme. عملية بناء وإنشاء قالب فرعي أي إدخال التعديلات المطلوبة على قالب موجود مسبقًا أسهل بالتأكيد من بناء قالب كامل من لا شيء ويبقى الخيار عائدًا لك أي مرحلة تختار. اتبع الخطوات التالية التي اخترناها لك في هذا المقال لتصميم قالب فرعي خاصة بك: كامل الكود الناتج متوفر للتحميل بشكل مباشر في نهاية المقال من خلال مدير الملفات في خطة الاستضافة الخاصة بك اذهب إلى المجلد الحاوي على ووردبريس ثم انتقل إلى المجلد التالي: /wp-content/themes/ ضمن المجلد السابق أنشئ مجلد فرعيًا وسمه باسم twig-child-theme أو أي اسم تريده بشرط أن لا يحوي مسافات فيه في المجلد السابق أنشئ الملفين التاليين: style.css وfunctions.php أضف أية ملفات أخرى تحتاجها: في مثالنا نحتاج ثلاث ملفات إضافية هي: single.php وsingle.twig وmain-file.twig المحتويات الأساسية لملفات القالب الفرعي: الملف style.css: @charset "UTF-8"; /* Theme Name: Twig Child Theme Template: twentytwentyone Version: 1.0 Text Domain: twig-child-theme */ الملف functions.php: <?php //functions.php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ووردبريس و تويغ لكي نتمكن من استخدام تويغ مع وردبرس يجب تركيب إضافة تسمى Timber تمكنك هذه الإضافة من الاستفادة من الجمع بين وردبريس وتويغ ويمكننا آنذاك كتابة قوالب ووردبريس بواسطة تويع عند تنصيب Timber. يُعَد Timber نافذة وردبرس باتجاه تويغ، حيث يؤمن طريقةً أسرع وأسهل وأكثر فاعلية لبناء قوالب ووردبريس، إذ يساعدك تيمبر Timber على إنشاء قوالب ووردبريس مخصصة بالكامل بسرعة أكبر مع كود أكثر بساطةً و استخدامًا. يؤدي هذا إلى إنشاء كود نظيف وواضح بحيث يمكن لملف PHP التركيز على توفير البيانات، بينما يمكن لملف تويغ التركيز طريقة عرض البيانات. تنصيب تويغ ضمن ووردبريس بعد إضافة تويغ إلى ووردبريس أمرًا أكثر سهولةً من تنصيب تويغ بطريقة منفصلة، فكل ما عليك فعله الانتقال إلى قسم الإضافات في لوحة تحكم ووردبرس ثم اختيار أضف جديد واختيار Timber عند تنصيب الإضافة Timber فيُنصَّب تويغ تلقائيًا كما تؤمن الإضافة Timber العديد من مزايا ربط تويغ بموقع ووردبريس. يرجى ملاحظة أن timber هي إضافة ووردبريس عادية مثل أي اضافة أخرى يمكن تركيبها مثل أي إضافة أخرى وهي متوفرة عبر الرابط التالي Timber. بعد تنصيب الإضافة السابقة لا نحتاج أي أوامر خاصة ولا نحتاج أية إعدادات فتعمل هذه الإضافة مباشرة عند تنصيبها من مدير الإضافات في ووردبرس. بناء القالب الفرعي أي قالب ووردبرس مستقل يجب أن يحوي على الأقل ملفين أساسيين: ملف style.css ملف index.php أما في القوالب الفرعية، فيمكن الاستغناء عن الملف الثاني حيث يُستخدم الملف index.php الموجود في القالب الأب نفسه. عندما يظهر ووردبريس أي صفحة فإنه يبحث في ملفات القالب عن أنسب ملف لعرض تلك الصفحة وفق مبدأ أولية الملفات، يُعَدّ الملف index.php الخيار الأخير حيث يتم اختياره فقط في حال عدم توفر أي ملف أكثر تحديدا وأكثر ملائمةً للمقال. قد يحتوي قالب ووردبريس على ملف مخصص لعرض الصفحات الثابتة وآخر لعرض المقالات وآخر لعرض الأرشيف مثلا عن الرغبة بعرض مقال ما فإن ووردبرس يبحث عن ملف single.php هو يعني مقال مفرد، اختصار للاسم single-post، فإذا وجده استخدمه لعرض المقال أما عندما لا يجده فإنه يبحث عن ملف singular.php وهو يعني مقال أو صفحة ثابتة فإذا وجد الملف singular.php فإنه يستخدمه، أخيرا في حال لم يجد أي من الملفين السابقين فإن ووردبرس يستخدم الخيار الأخير وهو index.php. لقد اصطلح ووردبريس ذلك التسلسل وتلك الأسماء في بنيته الداخلية ويمكن مراجعة ملفات قوالب ووردبريس عبر الرابط التالي WordPress Post Template Files. يسمى المبدأ السابق مبدأ أولوية الملفات في قوالب ووردبرس وبذات الطريقة يمكن الحديث أن أي صفحة في قالب ووردبرس مثلا عند الرغبة بعرض المقالات الموجودة في دليل ما فإن ووردبريس يبحث عن ملف اسمه category.php، فإن وجده استخدمه لعرض المقالات وإن لم يجده يبحث عن ملف اسمه archive.php فإن وجده استخدمه في عرض المقالات وإن لم يستخدمه فإنه يستخدم الملف index.php. لمعرفة تفاصيل أكثر عن ملفات القالب في ووردبرس يمكن زيارة الرابط التالي Template Files Section. يحوي ووردبرس على متغير عام اسمه posts يحوي جميع المقالات الموجود في الدليل أو الأرشيف الحالي ويمكن استخدامه في حلقات for. لسنا مضطرين لإنشاء ملفًا خاصًا بنا لعرض الأرشيف حيث أن غياب الملف في القالب الفرعي يخبر ووردبرس أن عليه أن يستخدم الملف الأصلي في القالب الأب، والهدف الأساسي من القالب الفرعي الخاص بنا هو تعديل طريقة إظهار المقالات الفرعية في قالب محددة لذا سوف يكون عملنا أساسًا على الملف single.php وعدد محدود من الملفات الأخرى. لا يهدف استخدام تويغ إلى الاستغناء كليًا عن PHP، بل يهدف إلى جعل استخدمها في إعداد البيانات وإعطاء الأوامر لمحرك القالب بإظهار البيانات لذا حتى عند استخدام تويغ لابد كتابة عدد محدود من تعليمات PHP لكي نقوم بإظهار قالب تويغ، مثلا أن اكتب الأسطر التالية في ملف single.php الخاص بالقالب الفرعي: <?php /** * file name: single.php * The Template for displaying all single posts */ $context = Timber::context(); $timber_post = Timber::get_post(); $context['post'] = $timber_post; Timber::render( 'single.twig', $context ); أما ملف تويغ single.twig فسوف يحوي تعليمات تويغ التي نريدها لإظهار القالب، وفي مثال على ذلك، لدينا الآتي: {# single.twig #} <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="description" content="{{ site.description }}"> <link rel="stylesheet" href="{{ site.theme.link }}/style.css" type="text/css" /> </head> <body> <article> <h1>{{ post.title }}</h1> <img src="{{ post.thumbnail.src }}"> <div class="article-body"> {{post.content}} </div> </article> </body> </html> في السطر الأول تمت كتابة ملاحظة مع اسم الملف وهي لا تظهر عند إخراج صفحة ويب بل هي مجرد ملاحظة لنا. في السطر التالي من القالب: <meta name="description" content="{{ site.description }}"> تم الطلب من محرك القالب أن يخرج قيمة وصف الموقع حيث لدينا متغير اسم site وهذا المتغير يحتوي على عدة معلومات فرعية أو خصائص منها description ومن أجل وصف الموقع قمنا بكتابة {{ site.description }}. في السطر السابع تم استخدام عبارة مشابهة لإخراج المسار الكامل للقالب الذي نعمل به وربط ملف css بالموقع، وقد تم استخدام الشيفرة {{ post.title }} لإظهار عنوان المقال وبطريقة مشابهة تم إظهار صورة المقال ومحتوياته. قد لا يبدو الأمر بسيطًا ولكنه في الواقع أبسط من استخدام PHP لتحقيق ذات الأهداف كما أنه يحقق مرونة أكبر ويؤمن فصل جيد لملف إظهار الصفحة عن كود تهيئة البيانات مما يعطي سرعة أكبر في الإنتاجية ويسمح لنا باستخدام محررات HTML لتنسيق ملف تويغ بالشكل الذي نريده. الأمر لم ينته لقد بدأنا للتو هناك الكثير يمكن عمله والكثير علينا تعلمه قبل إنشاء قالب ووردبريس بواسطة تويغ. الكتل ووراثة القوالب في تويغ أحد الأمور الرائعة في تويغ هي الكتل Blocks وهي تمكننا من تعريف كتلة ما من القالب ثم إعادة استخدامها في أي مكان نريد سواء في ذات القالب أو في أي قالب مشتق من ذلك القالب. لتعريف كتلة ما نقوم باستخدام الصيغة {% %} التي تخبر محرك القالب أن عليه أن يفعل شيئًا ما وفي حالتنا هو تعريف كتلة محددة. تبدأ كل كتلة بعبارة من الشكل {% block name %} حيث نضع اسم الكتلة بعد الكلمة block، وتنتهي كل كتلة بعبارة {% endblock %}، وتخزن التعليمات داخل الكتلة واستدعائها عند الحاجة. تعمل الكتل ووراثة القوالب بشكل متناغم في تويغ فنحن نقوم عادة بتعريف الكتل في القالب الأب ثم نعدل محتويات الكتلة في القوالب المشتقة منه ويفدينا ذلك بشكل كبير في تقسيم الملفات مما يسهل العمل. فمثلا يُستخدم قالب ووردبريس WordPress theme لعرض مجموعة مختلفة من الصفحات والمقالات والأرشيف لكن لها جميعا بنية متشابه مثل ترويسة الموقع وشريط القوائم والشريط الجانبي وغيرها، نقوم بتعريف البنية الأساسية في قالب تويغ رئيسي ثم ننشئ قوالب تويغ مشتقة منه لكل نوع فرعي. لنطبق ذلك، يمكن تقسيم ملف تويغ الذي ذُكِر بالفقرة السابقة إلى قسمين: الأول الملف الرئيسي ويحوي البنية الأساسية للملفات مع وضع تعريف للكتل في مكانها الصحيح: {# main-file.twig #} <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="description" content="{{ site.description }}"> <link rel="stylesheet" href="{{ site.theme.link }}/style.css" type="text/css" /> </head> <body> {% block content %}{% endblock %} </body> </html> أما الملف الفرعي الثاني فهو يحوي الإشارة إلى الملف الرئيسي مع تعريف محتويات الكتل فيه: {# single.twig #} {% extends "main-file.twig" %} {% block content %} <article> <h1>{{ post.title }}</h1> <img src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}" > <div class="article-body">{{ post.content }}</div> </article> {% endblock %} يفيد هذا التقسيم في اختصار الكتابة كثيرًا، حيث أن ملف تويغ الرئيسي يبقى نفسه سواءً كنا نريد عرض مقال أم أرشيف أم صفحة البحث أو غيرها لكن كتلة المحتويات هي التي تتغير ويكون ملف تويغ المخصص لعرض المقال مختلفًا عن المخصص لعرض أرشيف المقالات. بطريقة مشابهة يمكننا أيضا تعديل الملف achive.php أو أي قسم من قالب ووردبريس الفرعي، لاستخدام القالب الفرعي الذي صممناه ننتقل إلى لوحة تحكم موقع ووردبرس ثم ننتقل إلى قسم المظهر ونختار علامة التبويب قوالب، وإن كنت قد اتبعت الخطوات أعلاه ستجد اسم القالب الفرعي Twig Child Theme في قائمة القوالب المتوفرة لديك ويمكنك النقر على تفعيل القالب أو اختيار معانية له. بهذه الطريقة نكون قد صممنا قالبًا فرعيًا لـ ووردبريس باستخدام تويغ لكن الأمر لم ينتهي هنا بل هذه مجرد بداية يمكنك الانطلاق منها نحو تصميم مميز وفريد وبجودة عالية محققًا لمتطلباتك الخاصة. لمزيد من المعلومات عن الكتل والوراثة في تويغ يمكن زيارة قسم وراثة القوالب في Twig في موسوعة حسوب. الخلاصة لقد تحدثنا في هذا المقال عن تطبيقات شهيرة تستخدم تويغ ثم تحدثنا عن استخدام تويغ مع ووردبرس من خلال الإضافة timber، ثم بدأنا بالتطبيق العملي لتصميم قالب فرعي في ووردبريس باستخدام تويغ كنوع من التطبيق العملي على ما تعلمناه. في المقال القادم سوف نلقي نظرةً على بنية تويغ وطريقة تخصيص بيئة العمل الخاصة به. twig-child-theme-main.zip

يقدم تويغ تقنيات أكثر بكثير مما تم شرحه في المقالين السابقين، مدخل إلى محرك القوالب تويغ Twig، وانطلاقة سريعة مع محرك القوالب تويغ. إذ يتألف القالب في تويغ من أربع فئات أساسية هي: الوسوم والمرشحات والدوال والاختبارات، وهو ما سنتحدث عنه في هذا المقال. الوسوم Tags في تويغ الوسوم في Twig هي الأوامر التي تستخدم في صيغة افعل شيئا ما {% %} وهي بنيات تحكم، تتحكم في طريقة عمل القوالب وسيرها، فيعد كل من if و for التي تحدثنا عنها في المقال السابق انطلاقة سريعة مع محرك القوالب تويغ، نوعًا من الوسوم في تويغ ولكنها ليست الوحيدة المتاحة هناك حوالي 20 وسمًا مختلفًا في تويغ يمكنك الاطلاع عليها في الرابط التالي ولن نتناول كل تلك الوسوم فالهدف من هذه المقالات هو تمكين القارئ من المضي قدمًا في تويغ وليس الإحاطة بكل ما فيه من تقنيات. نذكر أن كل وسم في تويغ يحتاج إلى كتلة إغلاق للوسم وتتكون وتكون كتلة الإغلاق: {% endtag %} حيث تتبع end باسم الوسم دون فراغ. مثلا يحتاج الوسم if إلى كتلة الإغلاق {% endif %} ويحتاج الوسم for إلى كتلة الإغلاق {% endfor %} وهكذا. الوسم set والمتغيرات الداخلية في القالب يمكننا أن نعرف متغير ما داخل القالب نفسه باستخدام الوسم set مثلا في السطر التالي تم تعريف المتغير student، وتم إسناد القيمة ziad له: {% set student = 'ziad' %} Hello {{ student }} {# output: Hello ziad #} يمكن للمتغير أن يكون رقما أو نصا أو مصفوفة، مثل: {% set age = 20 %} {% set colors = ['red', yellow'] %} هناك طريقة ثانية في تويغ لإسناد قيمة للمتغير وهي على النحو التالي: {% set student %} Ziad {% endset %} لاحظ في الطريقة الأولى أننا تضع علامة المساواة بعد اسم المتغير ثم نضع بعدها قيمة المتغير أما في الطريقة الثانية فإننا نغلق تعليمة تعريف المتغير ثم نكتب قيمته ثم نضع عبارة {% endset %}. الوسم include يُستخدَم الوسم include لإدراج محتويات قالب آخر ضمن القالب الحالي مما يتيح لنا تقسيم الملفات أو إعادة استخدام أجزاء منها، فيمكن أيضا إدراج محتويات أي ملف نصي عادي أيضًا وليس فقط ملف تويغ. لنفرض مثلًا أننا نريد أن نكتب صفحات ويب ونريد اختصار الجهد بتفادي كتابة ترويسة html في كل صفحة عندها ننشئ ملف نسميه header.twig: {# file name: header.twig #} <!doctype html> <html> <head> <meta charset="utf-8" /> <title>{{ title }}</title> </head> <body> <h1>{{ title }}</h1> بعد ذلك يمكننا كتابة أي صفحة نريدها على النحو التالي: {# كتابة صفحة بطريقة سريعة #} {% include ‘header.twig’ %} My 1st article </body> </html> يمكننا أيضا أن نمرر متغير إلى ملف الترويسة بحيث نحدد عنوان صفحة ويب: {# تمرير متغير إلى الملف المطلوب إدراجه #} {% include ‘header.twig’ with {'title': 'My 1st page'} %} My 1st article </body> </html> يمكننا أيضا تخزين محتويات الملف في متغير ما، لنفرض أننا قمنا بكتابة وصف عام للشركة في ملف نصي ثم نريد أن نستخدم هذا الوصف كقيمة لمتغير داخلي في قالب تويغ: {# خزن ملف نصي في متغير #} {% set description %} {% include ‘description.txt’ %} {% endset %} {# or #} {% set description = include('description.txt') %} لمزيد من المعلومات عن الوسوم في تويغ يمكن زيارة صفحة الوسوم على موسوعة حسوب. ما هي المرشحات في تويغ تقوم المرشحات في تويغ بمعالجة البيانات قبل عرضها أو قبل إسنادها إلى متغير داخلي أما البيانات نفسها فلا تتأثر محتوياتها وتبقى كما هي، وتستخدم في صيغة أظهر شيء ما {{ }} حيث نضع بعد اسم المتغير | ثم نكتب المرشح المطلوب استخدامه، انظر إلى المثال التالي: {% set student = 'ziad' %} Welcome {{ student|upper }} Hello {{ student }} {# outputs: Welcome ZIAD Hello ziad #} المثال السابق يُستخدم المرشح upper لجعل الأحرف كبيرة قبل إظهار قيمة المتغير name، مع ملاحظة أن القيم المخزنة في المتغير لم تتغير بل بقيت كما هي عندما تم استدعائها مرة ثانية دون المرشح السابق. يمكننا أيضا استخدام الوسم apply للتعامل مع المرشحات على النحو التالي: {% apply upper %} Hello ziad {% endapply %} {# output: HELLO ZIAD #} وباختصار عندما نستدعي أي مرشح في تويغ فإنه يمرر قيمة المتغير ويستخدمه كمدخل لعملية محددة ثم يظهر لنا نتيجة تلك العملية. المرشحات upper وlower وcapitalizes لقد شاهدنا أن المرشح upper يقوم بتحويل النص إلى الحروف الكبيرة بينما المرشح lower يعطي النص مكتوبًا بالحروف الصغيرة أما capitalizes فهو يحول أول حرف من الجملة فقط إلى حرف كبير: {{ 'my first car'|capitalize }} {# outputs 'My first car' #} مرشح التنسيق Format يقوم المرشح format بوضع نص محدد بدلا عن نائب النص s% انظر مثلًا: {{ "Hello student %s"|format('Ziad') }} {# output: Hello student Ziad #} مرشح هروب الأمان Escape يعد من أهم المرشحات حيث يستخدم للتخلص من أية وسوم قد تسبب مشاكل في الإظهار ويفضل استخدامه دوما مع المتغيرات النصية. يمكن اختصار استخدام المرشح escape إلى e حيث يمكن كتابته على النحو التالي: {# escape for Html safty #} <div>{{ description|e }}</div> كما يمكن كتابته على النحو التالي أيضًا: {# escape for Html safty #} <div>{{ description|escape }}</div> يمكن تمرير وسيط للمرشح السابق لتحديد نوع يناسب المكان الذي سوف يظهر به المتغير مثال: {# escape for js safety #} <script> function getDescription() { return {{ description|e('js') }}; } </script> {# escape for css safety #} <style> {{ mystyles|e('css') }} </style> لمزيد من المعلومات عن هذا المرشح وبقية المرشحات، يمكن زيارة توثيق المرشحات في موسوعة حسوب. الدوال في تويغ الدوال في تويغ هي مجموعة من التعليمات البرمجية التي تؤدي مهمة ما ينتج عنها قيمة. يمكن استدعاء الدالة وإعادة استخدامها عدة مرات. نستدعي الدوال عن طريق كتابة أسمائها متبوعة بأقواس، ويمكن أن نمرر لها وسيطًا واحدًا أو أكثر داخل تلك الأقواس وذلك بهدف تمرير المعلومات إلى الدالة. كمثال الدالة range تعيد مصفوفة تحتوي على أعداد صحيحة محصورة بين رقمين: {% for i in range(0, 3) %} {{ i }}, {% endfor %} {# outputs 0, 1, 2, 3, #} عند استدعاء الدالة السابقة نقوم بتمرير ثلاث وسطاء لها، الوسيط الأول هو بداية المجال والثاني نهاية المجال وأما الوسيط الثالث فهو الخطوة أو الفارق بين رقمين في المجال وهو اختياري. الوسم والدالة block في تويغ يمكن أن يكون لدينا دالة لها ذات الاسم المستخدم للوسم، فالكلمة block في تويغ قد تشير إلى الوسم block، كما قد تشير إلى الدالة block ويمكن التمييز بين الحالتين بسهولة عبر المثال التالي: <html> <head> <title> {% block title %} Hello Twig {% endblock %} </title> </head> <body> <h1>{{ block('title') }}</h1> </body> </html> نلاحظ أن الوسم يكون ضمن صيغة افعل شيئا ما {% %} ويستخدم لتعريف الكتلة وتحديد محتوياتها بينما الدالة تكون ضمن صيغة أظهر شيئا ما {{ }} يتم اتباعها بقوسين يوجد بينهما وسيط يمرر للدالة حيث تستخدم الدالة block لإظهار محتويات كتلة سبق أن تم تعريفها بالوسم block. المرشح والدالة date يقوم المرشح date بتغير تنسيق التاريخ عند إظهار قيمة متغير ما حسب الصيغة المعطاة له {{ birth|date("m/d/Y") } أما الدالة date فإنها تعيد التاريخ الحالي عند استدعائها بدون وسطاء: {{ date() }} {# تظهر التاريخ الحالي #} يمكن أن تمرر وسيط للدالة date ويمكن لقيمة الوسيط أن تكون تعبير نصي عن التاريخ مثلا النص "2022/01/01" يحول إلى التاريخ المقابل له كما يمكن أن يكون فرق بالتاريخ عن التاريخ الحالي: {{ date('2022/01/01') }} {# تعيد التاريخ المحدد 2022/01/01 #} {{ date('-2days') }} {# تعيد التاريخ الحالي مطروح منه يومين #} يمكن أن نمرر لها وسيطين حيث يحوي الوسيط الثاني على المنطقة الزمنية التي سوف يكون التاريخ فيها: {{ date('-2days', 'Europe/Paris') }} يمكن موازنة التواريخ المعادة بواسط تعبير شرطي: {% if post.date > date('-30days') %} This is a new post {% endif %} الفرق بين المرشح والدالة تتصف المرشحات في تويغ بالخصائص التالية: المرشحات مخصصة لمعالجة البيانات المرشح يعيد قيمة دوما القيمة التي يعيدها المرشح تكون نص دومًا يأخذ المرشح وسيط واحد أو أكثر يكتب الوسيط الأول قبل المرشح ويوضع بينهما | مثال: {{ student|upper }} عندما يحتاج إلى وسيط واحد لا يتم إتباعها بأقواس عندما يحتاج أكثر من وسيط يتم اضافة قوسين بعد اسم المرشح مع وضع الوسيط بينهما {{ description|escape('html') }} يرجى ملاحظة أن الوسيط الأول هو المتغير نفسه الذي يأتي قبل علامة | أما ما بين ' ' فهو الوسيط الثاني. أما الدوال، فتتصف بالخصائص التالية: الدوال مخصصة لإعادة قيمة غير مرتبطة بالبيانات عادة يمكن أن تكون القيمة تعيدها الدالة نصا أو رقما أو تاريخا أو مصفوفة الدوال في تويغ تعيد قيمة دوما وهذا يختلف عن تعريف الدوال في لغات البرمجة يمكن للدوال أن لا تأخذ أي وسيط ويمكن أن تأخذ وسيط واحد أو أكثر حتى عندما لا تأخذ الدالة أي وسيط فإنها تتبع بأقواس {{ date() }} عندما تحتاج الدالة إلى وسيط واحد أكثر فإنها تمرر إليها بين الأقواس: {% set list = range(1, 6) %} الاختبارات في تويغ الاختبارات في تويغ هي عبارة عن عوامل تختبر قيمة متغير ما وتستخدم على النحو التالي: {% if line is odd %} ....... {% endif %} حيث تستخدم مع عبارة is و تتحق من كون المتغير يحقق شرط محدد والاختبارات المعرفة مسبقا في تويغ هي: defined, divisible by, even, iterable, odd, same as لمزيد من المعلومات عن الاختبارات يمكن الرجوع إلى صفحة الاختبارات في موسوعة حسوب. ختامًا لقد تحدثنا في هذا المقال عن مكونات تويغ من وسوم ومرشحات ودوال واختبارات وهي المكونات الأساسية التي يقوم عليها القالب، وفي المقال القادم سوف نقوم بالتطبيق العملي على ما تعلمناه حيث نتعلم إنشاء قالب فرعي لووردبرس باستخدام تويغ.

سوف نتحدث في هذا المقال عن طريقة تثبيت تويغ وعن الصيغ الثلاث المستخدمة في بناء قوالب تويغ بالاضافة إلى عدد من المفاهيم الأساسية متطلبات تويغ للعمل يمكن استعمال بيئة عمل سحابية على الويب أو بيئة عمل محلية على الحاسوب مباشرة: على استضافة ويب: تحتاج إلى خطة استضافة تدعم تشغيل PHP وأن يكون الإصدار المركب فيها 7.3 أو إصدار أعلى تقريبا جميع الاستضافات تدعم ذلك بما في الاستضافات المجانية. على الحاسوب المحلي: إن كنت سوف تستخدم استضافة فلست بحاجة لتركيب أي شيء على حاسوب محلي لكن يمكن أن تجعل من كمبيوترك المحلي مخدم ويب وتركيب عليه تويغ وفي هذه الحالة تحتاج إلى خادم ويب يدعم PHP مثلًا XAMPP لمزيد من المعلومات يمكن الرجوع إلى المقال التالي. تثبيت تويغ يتوفر خياران لتثبيت تويغ وهو إما التثبيت المباشر من خلال تنزيله وتركيبه يدويًا أو من خلال كومبوزر composer وسنشرح كلا الطريقتين تاليًا. التثبيت المباشر تحميل الإصدار الأخير من تويغ وذلك من خلال الرابط التالي أو من خلال GitHub فك المجلد المضغوط السابق على الحاسوب المحلي ثم افتح المجلد الناتج وهو Twig-3.x في حالتي الآن أثناء كتابة المقال في داخل المجلد السابق يوجد مجلد اسمه src أعد تسميته إلى Twig ثم قم برفعه إلى المجلد العام www أو public_html في الاستضافة الخاصة بك. في المجلد public_html لموقعك أنشئ ملفًا باسم index.php وأضف له النص التالي ini_set('display_errors',1); # comment if you do not need debugging spl_autoload_register(function ($classname) { $dir = '.'; $filename = $dir . str_replace('\\', '/', $classname) .'.php'; if (file_exists($filename)) require_once $filename; }); require_once '\Twig\Loader\FilesystemLoader.php'; كل ما سبق من خطوات يمكن اختصارها في حال التركيب من خلال composer التثبيت بواسطة composer ثبت Composer وشغل الأمر التالي في الطرفية من أجل الحصول على الإصدار الأخير: composer require "twig/twig" البدء باستخدام تويغ أصبح تويغ جاهز الآن ويمكنك تجريبه بالشكل التالي، أضف السطور التالية على ملف index.php الذي أنشأته عند تركيب تويغ بدون استخدام composer أو على ملف index.php فارغ في حال استخدام composer: $loader = new \Twig\Loader\FilesystemLoader('.'); $twig = new \Twig\Environment($loader); echo $twig->render('template1.twig', [‘name’ => 'سامر']); في ذات المجلد public_html أنشئ ملفًا آخر باسم template1.twig واكتب العبارة التالية فيه: مرحبا بالطالب المجد {{ name }} لا بد أنك عزيزي القارئ تود رؤية مثال عن قوالب تويغ وتتساءل كيف يمكن أن ننطلق باستخدام تويغ في الواقع إن نموذج بسيط للقالب قد تم إيراده بالفعل في أعلى المقال دون أن نحتاج أن نقدم شرح له: مرحبا بالطالب المجد {{ name }} لاحظ أن الأقواس المربعة قد استخدمت للتعبير عن وجود متغير في القالب فقراءة قوالب تويغ سهلة للغاية ويمكن فهم الكثير من قوالب تويغ بسهولة. في الواقع ليس من الضروري أن تعلم كل شيء عن تويغ قبل الانطلاق باستخدامه يكفي في البداية أن تتعلم الأساسيات فقط ثم توسع مدى معرفتك بالتدريج بعد ذلك والهدف من هذا المقال هل جعلك تمتلك تلك الأساسيات التي تمكنك من الانطلاق والبدء باستخدام تويغ. بنية قالب تويغ وصيغ التعبيرات فيه لفهم تويغ يتوجب علينا معرفة دلالة ثلاث صيغ فقط هي {{ }}، {% %}، {# #} سنشرحها بالترتيب: 1- صيغة إخراج المتغيرات وإظهار النتائج الصيغة الأولى المهمة من صيغ Twig التي عليك تعلمها هي: {{ }} تستخدم هذه الصيغة لإظهار نتيجة ما للمستخدم مثلا قيمة متغير أو ناتج دالة ما. المتغيرات في القالب هي أي شيء تريد تريد تبديله حسب إدخالات المستخدم أو حسب البيانات المقدمة للقالب يمكن أن يكون عنوان المقال أو اسم المستخدم أو رقم هاتفه أو أي شيء آخر. لإخراج أي متغير في القالب يكفي أن يتم وضع اسم المتغير بين قوسين مقوسين على النحو التالي: {{ name }} {{ foo.bar }} انتبه من المثال أنه يمكن استخدام النقطة (.) للوصول إلى عناصر المصفوفة أو خصائص كائن ما. لمعرفة المزيد عن المتغيرات في تويغ يمكن زيارة قسم المتغيرات من صفحة محرك تويغ لمصممي القوالب في موسوعة حسوب. 2- صيغة التعليقات من المهم في كثير من الأحيان أن نكتب ملاحظة لكننا لا نريدها أن تظهر في المستند المنسق ولتحقيق ذلك يكفي أن نكتب تلك الملاحظة أو التعليق بالصياغة التالية: {# ملاحظة #} لمعرفة المزيد عن الملاحظات في تويغ يمكن زيارة قسم التعليقات من صفحة محرك تويغ لمصممي القوالب في موسوعة حسوب. 3- صيغة افعل شيئا ما يستخدم التركيب التالي: `{% ...... %} للطلب من محرك القالب القيام بشيء محدد مثل التحقق من شرط ما أو تنفيذ تكرار ما. لا يظهر التركيب السابق نتائج للمستخدم لفم التركيب السابق بشكل جيد سوف نأخذ مثالين هما if و for. الشروط والحالات الشرطية لنعد إلى مثال الطالب المجد بالتأكيد لقد حصل على علامات مرتفعة، لذا يتوجب علينا اختبار علامته قبل إظهار رسالة الترحيب به. بين التعبيرين السابقين يتم وضع ما نريد عرضه عند تحقق الشرط وإليك مثال عنه: {# كل شرط يبدأ بالتركيب التالي #} {% if mark > 90 %} Hello smart student {{ name }} {# كل شرط ينتهي بالتركيب التالي #} {% endif %} {# لاحظ أن العبارة الأخيرة هي كلمة واحدة #} في السطر الأول يتحقق تويغ من علامة الطالب التي يمثلها المتغير mark فإن كانت أكثر من 90 فإنه ينتقل للسطر التالي حيث يظهر رسالة الترحيب أما السطر الأخير endif فهو يغلق الشرط. كما أنه يمكن أن تتحقق عبارة if في Twig مما إذا كان للمتغير قيمة ما حيث يمكننا إضافة شروط لعرض أي نص. لنفترض أن لدينا متغيرا باسم agent ونريد عرض نص عندما يحتوي على نص، يمكننا تمثل ذلك بالمثال التالي: {% if agent %} We have an agent in your area Our agent: {{ agent }} {% endif %} مثال آخر؛ دعنا نقول أن لدينا متغير يسمى السعر. نريد عرض نص إذا كان السعر صفرًا. {% if price == 0 %} This product is free {% elseif price > 10 %} This product is cheap {% else %} You have to pay {{ price }} {% endif %} يرجى ملاحظة أننا نستخدم العامل التالي == للتحقق من المساواة وأننا يمكننا التحقق من أكثر من حالة للشرط باستعمال elseif ووضع حالة أخيرة للشرط إن لم تتحقق أي حالة من الحالات السابقة عبر else. استخدم دائمًا {% endif %} لإغلاق شرط if السابق، فكل عبارة if يجب أن تغلقها عبارة endif. للمزيد من المعلومات عن استخدام اطلع على صفحة الوسم if في توثيق تويغ العربي. الحلقات التكرارية وتكرار أمر ما إذا كان حقلنا أو متغيرنا عبارة عن مصفوفة فيها عناصر أو أي نوع بيانات لديه عناصر يمكن المرور عليها واحدة واحدة، فيمكننا تنفيذ أمر ما أو عرض معلومة ما لكل عنصر من تلك العناصر باستخدام for كما في المثال التالي: {% for name in names_list %} Hello: {{ name }} {% endfor %} حيث names_list هو اسم المصفوفة أما name فهو اسم تم إطلاقه على كل عنصر من عناصر المصفوفة. في السطر التالي يتم تنفيذ الأوامر التي بين for وبين edfor على كل عناصر المصفوفة وبالتالي في مثالنا السابق تظهر عبارة ترحيب لكل اسم من الأسماء التي تحتويها المصفوفة، أما السطر الأخير فهو لإغلاق الحلقة وإعلام محرك القالب أن عليه المتابعة بشكل اعتيادي لباقي تعليمات القالب اي أن التعليمات التي تأتي بعد {% endfor %} لن تكون خاصة بالحلقة. كل عبارة for يجب حتما أن تنتهي بعبارة {% endfor %} ويرجى ملاحظة أن endfor هي كلمة واحدة وليس كلمتين. ماذا بعد؟ بالتأكيد هذا ليس كل شيء في تويغ فهناك الكثير لكن بهذا القدر البسيط من المعلومات يمكنك الانطلاق مع تويغ والبدء بكتابة قالب ما وتجربته. إن كنت قد وصلت إلى هذه النقطة بشكل متسلسل فيفترض أنك أصبحت مستعدا لكتابة قالبك الأول وتجربته عمليا نقدم لك فيما يلي نموذج لقالب تويغ لعرض قائمة منتجات مع سعرها: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Products</title> </head> <body> <h1>Products</h1> {# This is a comment and will not render #} {% for product in products %} Product name: {{ product.name }}<br> {% if product.price == 0 %} Free {% else %} Procust price {{ product.price }} {% endif %} {% endfor %} </body> </html> الخلاصة لقد تحدثنا في هذا المقال عن طريقة تثبيت تويغ مع وبدون استخدام composer ثم انتقلنا إلى بنية قالب تويغ وصيغ التعبيرات فيه: صيغة إخراج المتغيرات وإظهار النتائج، صيغة التعليقات و صيغة افعل شيئا ما ثم تحدثنا عن العبارات الشرطية وعن حلقات التكرار في المقال التالي سوف نتعمق أكثر ونتحدث عن الوسوم، المرشحات، والاختبارات.

لا نهدف في هذه المقالات إلى ترجمة الموقع الرسمي لمحرك قوالب Twig والتي تجدها في موسوعة حسوب، توثيق Twig، لكننا نهدف إلى توليد فهم عميق وبسيط لهذه التقنية يمكنك من الاستفادة القصوى منها، بحيث يكون مفيدًا للمبتدئين وممتعًا للمتقدمين. مفهوم محرك القالب وعمله معالج القوالب المعروف أيضًا باسم محرك القوالب template engine، هو وسيلة لأتمتة إنشاء المستندات بما في ذلك صفحة الويب، حيث تسمح أنظمة الأتمتة بتقليل إدخال البيانات إلى الحد الأدنى، وكذلك تقليل الوقت الذي يستغرقه إنشاءها أو تعديلها، وتقليل المخاطر المرتبطة بالخطأ البشري. من أهم الفوائد الناتجة عن استخدام محرك القالب هو جعل جملة من المستندات أو صفحات الويب ضمن فئة واحدة بحيث يؤدي تعديل القالب إلى تعديل كامل المستندات المنسقة المرتبة به. كما يمكن أن نعرف محرك القوالب الخاص بصفحات الويب على أنه أسلوب يمنح المطورين القدرة على فصل HTML / CSS عن الكود المنطقي للتطبيق لصفحة ويب مثلًا كود PHP. لتوضيح الصورة عن عمل محرك القالب، لنفرض أن لدينا عشرة طلاب نريد أن نرسل لكل منها رسالة ترحيب على النحو التالي: نسمي العبارة السابقة بالقالب نسمي أسماء الطلاب المتمثلة بالحقل name بالبيانات أما عبارات الترحيب الناتجة فهي المستند المنسق وأخيرًا فإن محرك القالب هو البرنامج الحاسوبي الذي قام بدمج القالب السابق مع البيانات والتي هي أسماء الطلاب في مثالنا حيث يتم استبدال اسم الطالب في موضعه حسب الحاجة. ناتج القالب السابق إن كان لدينا قائمة باسمي طالبين ما يلي: مرحبا بالطالب المجد سامر مرحبا بالطالب المجد زياد وهكذا بحيث يختلف الاسم تبعا لبيانات المقدمة للقالب. أشهر محركات القوالب المستخدمة في برمجة صفحات الويب لا ينحصر مجال عمل محركات القالب في الويب، وفي الواقع يمكن أن تشمل أي نص أو رسم يمكن توليده وتنسيقة سواء كانت صفحة كتاب أو إعلان بسيط. تؤمن لغة البرمجة بي إتش بي PHP آليات سهلة لمعالجة القوالب حيث يمكن كتابة القالب بلغة PHP على النحو التالي مثلًا: Hello student <?php echo $student; ?> بالرغم من كون PHP تؤمن خصائص محرك القالب إلا أنها من النادر أن تستخدم لهذا الغرض من قبل المبتدئين وينحصر استخدامها من قبل من يتقن تلك اللغة. لقد تنوعت التقنيات وتقدمت كثيرا ويوجد الكثير من محركات القوالب سوف نذكر أشهر محركات القوالب: سمارتي Smarty: محرك قالب شهير سهل التركيب مكتوب بلغة PHP وهو يأتي في المرتبة الثانية بعد تويغ من حيث شيوع الاستخدام بليت Plates: محرك قالب له طريقة كتابة معقدة بعض الشيء وهو أقل قابلية للقراءة من قبل المبتدئين فولت Volt: محرك قالب مكتوب بلغة سي وطريقة كتابة القالب به تشبه تويغ تويغ Twig محرك قالب سريع ومرن وشائع جدا مكتوب بلغة بي اتش بي الفرق بين محرك القالب والقالب ولغة القالب نود أن نوضح شيئا مهما يوضح الفرق بين المفاهيم المتداخلة، محرك القالب والقالب ولغة القالب: محرك القالب templating engine هو برنامج كتبته الشركة التي صممت محرك القالب ويمكن تحميله من الموقع الرسمي للشركة. القالب template هو أوامر التنسيق أو الإخراج التي التي نكتبها نحن ونقدمها إلى محرك القالب مثلا الملف single.twig يدعى قالب. لغة القالب template syntax فهي طريقة الكتابة التي يطلب منا محرك القالب الالتزام بها ليفهم ما نكتبه. أي القواعد التي علينا مراعاتها عند كتابة القالب مثلا طريقة اخراج المتغيرات وطريقة استدعاء الدوال والمرشحات وغيرها من التقنيات التي يوفرها القالب مثلا يمكن القول بأن لغة القالب فولت تشابه كثيرا لغة القالب تويغ. لكل محرك قالب طريقة خاصة به لكتابة القوالب عادة تسمى باسم محرك القالب نفسه ونحن هنا لا نقصد لاحقة الملف بل نقصد طريقة الكتابة ضمن الملف نفسه أي template syntax. تعريف تويغ Twig ومزاياه يُعَدّ تويغ Twig محرك قالب مجاني، مفتوح المصدر، سريع، آمن، مرن وسهل التعلم وهو مبني على لغة PHP ويتم استخدامه بشكل أساسي لإخراج صفحات HTML، ولكن يمكن استخدامه أيضًا لإخراج أي تنسيق نصي آخر. ويعتبر تويغ Twig مكون مستقل يمكن دمجه بسهولة في أي مشروع PHP، ويتمتع تويغ Twig بالمزايا التالية: السرعة قد يتبادر إلى الذهن أن استعمال قوالب تويغ Twig سوف يبطئ صفحة ويب مقارنة باستخدام PHP لكن في الواقع هذا غير صحيح لأن تويغ يقوم يتصريف أو ترجمة القالب إلى لغة بي إتش بي ثم ينفذ الكود الناتج مباشرة. لا يكتفي تويغ بترجمة الكود إلى PHP بل يقوم بعدد من عمليات تحسين صياغة الكود بهدف زيادة السرعة في التنفيذ. الحفاظ على البيانات عندما يستخدم مصمم السمة أو pack end تويغ فإنه يمكن من المسؤول عن شكل الموقع أو front end أن يقوم هو بتعديل القوالب حسب ما يراه مناسبا دون المخاطرة بالبيانات حيث أن التعليمات المكتوبة في قوالب تويغ تكون آمنة وهي تستخدم لقراءة البيانات وإظهارها وليس لتعديلها لا للتعليمات الخطرة والأخطاء الحرجة يمنحك تويغ أمانا إضافيا مقارنة باستخدام PHP مباشرة حيث أن التعليمات المتاحة في قوالب تويغ لا يمكنها أن تتسبب في انهيار الموقع. هل توقف موقعك عن العمل نتيجة كود بي اتش بي خاطئ؟ يحتوي Twig على وضع صندوق الاختبار (Sandbox) من أجل تقييم شيفرات القوالب غير الموثوق بها قبل تنفيذها. شيوع الاستخدام عندما نتعلم تقنية ما فمن المهم أن نكون قادرين على استخدامها في مجالات شتى وهذا يؤمنه تويغ بسهولة فهو مستخدم في الكثير من المشاريع مفتوحة المصدر والكثير من أطر العمل على سبيل المثال: Symfony وDrupal8 وphpBB وLaravel. بالإضافة إلى إمكانية استخدامه في تصميم قوالب وردبرس وهذا ما سوف نتطرق له كمثال عملي لاحقا المرونة ودعم الوراثة يتمتع تويغ بالمرونة حيث أنه من السهولة توسيع عمل تويغ وإضافة فلاتر أو دوال له كما يدعم الوراثة فإذا كان لدينا قالبان متشابهان فيمكن أن لا نحتاج كتابة كلا القالبين يكفي أن نكتب أحدهما ثم نكتب الفروق في القالب الثاني بحيث يمكن أن يكون القالب الابن مجرد تعديل بسيط للقالب الأب. مقارنة بين تويغ ومحركات القوالب الأخرى سوف نقوم بمقارنة محركات القالب من حيث سهولة الاستخدام وشيوع محرك القالب وسرعة التنفيذ سهولة القراءة والتعلم يحتل تويغ و فولت المنزلة الأولى في سهولة القراءة حيث أن لهما ذات المعايير في كتابة القالب يليه سمارتي وأخيرا PHP وبليت وكمثال عن طريقة إخراج متغير: {# Twig #} {{ name }} volt {# volt #} {{ name }} smarty {* smarty *} {$name} <?php echo $name; ?> <!-- plate --> Hello <?=$this->e($name)?> كلما كان بناء القالب بسيطا وأقرب إلى اللغة العامة كانت سهولة العلم أسرع وكما نلاحظ من المثال أعلاه فنلاحظ أن استخدام تويغ لا يتطلب إضافة أحرف خاصة لـ اسم المتغير على عكس باقي محركات القالب. الاستخدام الشائع بين المطورين بهدف اختبار شيوع استخدام كل من محركات القالب الثلاث، فقد تمت موازنة ترتيب أليكسا للموقع الرسمي لكل من محركات القالب باستثناء PHP؛ أما بالنسبة إلى PHP، فإن شهرتها باعتبارها لغة برمجة تجعل ترتيب موقعها في أليكسا لا يعطي انطباعًا صحيحًا عن مدى شهرتها كمحرك قالب يقيم إليكسا المواقع بالاعتماد على مدى شيوعها وعدد الزوار شهريا للموقع فمثلا يحتل غوغل الرقم 1، وكلما كان عدد زوار الموقع أكبر كان ترتيب الموقع أقل وبمعنى آخر هناك 56000 ألف موقع تتفوق على سمارتي من حيث عدد الزوار أما بالنسبة لموقع تويغ الرسمي فهناك 13000 موقع فقط تتفوق عليه من حيث عدد الزوار أما تقيم alexa فأن الموقع الرسمي لـ تويغ يحتل فهر يسبق جميع محركات القالب المذكورة حيث كان 13000 بينما يحتل سمارتي المركز الثاني 56000. في المنزلة قبل الأخيرة تأتي فولت بتقييم 127000 أما محرك القالب بلوت فكان له التريب التالي في إليكسا وهو أقل محركات القوالب السابقة شيوعا بتقييم 1,600,000. السرعة عند الاستخدام تقوم محركات القالب بتوليد شيفرة PHP مقابل للقالب ثم تقوم تنفيذ الشفرة الناتجة مما يجعل سرعة الأداء متقاربة. لقد تم الرجوع إلى الموقع المختص بمقارنة الأداء phpbenchmarks.com فكانت سرعة الإصدار الأخير من محركات القالب الشهيرة متقاربة جدا عند عند استخدامها مع الإصدار 7.3 من PHP. سهولة التركيب في هذه النقطة تتفوق سمارتي Smarty على Twig حيث يتم تركيب سمارتي بصفته مكون مستقل أما تويغ طريقة تنصيبه الرسمية تتضمن استعمال composer وعادة ما يكون جزءًا من مشروع آخر . لكن في المقال التالي سوف نقوم بتقديم طريقة سهلة لتركيب تويغ بشكل مستقل وبدون استخدام composer بحيث يصبح الفرق أقل أهمية. أما PHP فهي لا تحتاج إلى أي تركيب حيث تكون ممكنة مسبقًا على مختلف مواقع الويب المبنية فيها. كلمة أخيرة تتنوع محركات القوالب كثيرا و في العصر الحالي تحتل الإنتاجية وسرعة الأداء أهمية بالغة وهذا ما يوفره Twig، كما يسهل استخدام Twig الحصول على كود نظيف واضح وبسيط يسهل صيانتها عند الحاجة. بحيث نركز في القالب على الشكل العام للمستند المنسق وعلى بناء المستند. لقد تطرقنا في هذا المقال إلى مدخل سريع عن تويغ وتم بيان عدد من مزاياه مثل السرعة والحفاظ على البيانات وغيرها كما أجرينا مقارنة بين عدد من محركات البحث وفي النهاية قمنا بشرح الفرق بين محرك القالب والقالب ولغة القالب وفي المقال الثاني سوف نقوم بانطلاقة سريعة مع تويغ تهدف إلى تعريفنا بمتطلبات العمل وبطريقة تثبيت تويغ مع لمحة سريعة عن طريقة استخدامه.

تابعنا في الدرس السابق العمل على ملفات 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

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

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

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