تطبيقات عملية على استخدام تويغ

سنتعرف في بداية هذا المقال إلى تطبيقات شائعة يُستخدَم فيها محرك القوالب تويغ، ثم سنشرح طريقة استخدام تويغ في ووردبريس كنوع من التطبيق العملي على تويغ.

تطبيقات شهيرة تستخدم تويغ

يتنوع استخدام تويغ بشكل كبير ولا ينحصر فهو يُستخدم في إطار عمل سيمفوني symfony ويستخدم أيضا في عدد من أنظمة إدارة المحتوى مثل دروبال وبلوت Bolt بالإضافة إلى إمكانية استخدامه في ووردبرس.

سيمفوني

يُعَدّ سيمفوني symfony أحد إطارات العمل المتكاملة التي توفر العديد من المزايا لمصممي تطبيقات الويب المتكاملة حيث يوفر على المبرمج الوقت والجهد يستخدم سيمفوني تويغ لتوليد قوالب الصفحات.

دروبال

دروبال Drupal نظام لإدارة المحتوى، ويمكن أن يعمل أيضًا كنظام للتدوين أو كنظام لبناء تطبيقات الويب متكاملة بسبب خصائص عديدة منها المرونة والتصميم الجيد التي يمكن التحكم بها وتطويرها بسهولة.

في دروبال تم اعتماد تويغ في تصميم القوالب بدءًا من الإصدار الثامن، لمزيد من المعلومات يمكنك الرجوع إلى هذه الصفحة.

بلوت

بلوت Bolt هو نظام إدارة محتوى خفيف وقد اعتمد تويغ لتصميم قوالب الصفحات، الفرق بين بلوت و ووردبرس هو أن بلوت لا يستهلك إلا القليل جدا من موارد النظام يمكنك الرجوع إلى هذه الصفحة لمزيد من المعلومات.

ووردبرس

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

تصميم قوالب فرعية في ووردبريس

نظرا لشعبية ووردبريس فلقد اخترنا أن ننشئ قالبًا فرعيا في ووردبريس كتطبيق عملي على تويغ ولكن ما هو القالب الفرعي؟

القالب والقالب الفرعي في ووردبريس

لنسأل أنفسنا، ما هو القالب في ووردبريس WordPress Theme؟

القالب هو وسيلة لتغيير تخطيط وتصميم موقع الويب الخاص بك، إذ تقوم القوالب بتخصيص مظهر موقعك، بما في ذلك التخطيط والطباعة واللون وعناصر التصميم الأخرى، ويمكن أن يؤدي اختيار المظهر الصحيح إلى جعل موقع الويب الخاص بك أكثر جاذبية وسهولة في الاستخدام وتحسين تفاعل الزوار.

في ووردبريس لست مضطرًا لتبدأ من الصفر عند تصميم أي قالب ووردبريس خاص بك، ويمكنك الانطلاق من قالب ووردبرس موجود مع تعديل بعض الصفحات أو الخصائص به بما يناسبك، وهذه التعديلات والإضافات التي تجرى تدخل ضمن ما يسمى بالقالب الفرعي أو الابن WordPress Child Theme.

عملية بناء وإنشاء قالب فرعي أي إدخال التعديلات المطلوبة على قالب موجود مسبقًا أسهل بالتأكيد من بناء قالب كامل من لا شيء ويبقى الخيار عائدًا لك أي مرحلة تختار.

اتبع الخطوات التالية التي اخترناها لك في هذا المقال لتصميم قالب فرعي خاصة بك:

1. كامل الكود الناتج متوفر للتحميل بشكل مباشر في نهاية المقال
2. من خلال مدير الملفات في خطة الاستضافة الخاصة بك اذهب إلى المجلد الحاوي على ووردبريس ثم انتقل إلى المجلد التالي: /wp-content/themes/
3. ضمن المجلد السابق أنشئ مجلد فرعيًا وسمه باسم twig-child-theme أو أي اسم تريده بشرط أن لا يحوي مسافات فيه
4. في المجلد السابق أنشئ الملفين التاليين: style.css وfunctions.php
5. أضف أية ملفات أخرى تحتاجها: في مثالنا نحتاج ثلاث ملفات إضافية هي: 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.

بعد تنصيب الإضافة السابقة لا نحتاج أي أوامر خاصة ولا نحتاج أية إعدادات فتعمل هذه الإضافة مباشرة عند تنصيبها من مدير الإضافات في ووردبرس.

بناء القالب الفرعي

أي قالب ووردبرس مستقل يجب أن يحوي على الأقل ملفين أساسيين:

1. ملف style.css
2. ملف 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