عرض الحقول المخصصة في ووردبرس باستخدام قالب تويغ

عرض الحقول المخصصة والحقو المخصصة المتقدمة في ووردبرس باستخدام قالب تويغ مع إمكانية تعديل طريقة العرض بسهولة في محرر ووردبرس

الأصل الإنكليزي لإضافة عرض الحقول المخصصة في ووردبرس باستخدام قالب تويغ

NP Twig: Front End for WordPress Custom Field & ACF:
* https://www.miniindustry.com/d/np-twig
* https://wordpress.org/plugins/np-tiwg/

إعداد إضافة عرض الحقول المخصصة في ووردبرس باستخدام قالب تويغ

1. تحتاج هذه الإضافة إلى إضافة أخرى Timber يجب تركيبها قبل تركيب هذه الإضافة لذا قم بتركيب الإضافة Timber عبر الرابط التالي: https://wordpress.org/plugins/timber-library/ ثم قم بتفعيلها
2. من لوحة تحكم ووردبرس من قسم الإضافات اختر أضافة جديدة ثم أكتب في محرك البحث NP Twig
3. اختر الإضافة الخاصة بنا ثم قم بتركيبها وتفعيلها
4. يمكن الحصول على فوائد إضافية من هذه الإضافة في حال كنت تستخدم الحقول المخصصة المتقدمة ACF
5. تعمل هذه الإضافة على مواقع ووردبرس سواء في عرض سطح  المكتب أو عرض الجوال بطريقة AMP

وصف إضافة عرض الحقول المخصصة في ووردبرس باستخدام قالب تويغ

• لقد قمت باستخدام قوالب تويغ لعرض صفحات ووردبرس والحقول المخصصة وذلك بهدف جعل تخصيص طريقة العرض أمر سهلاً وبسيطاً
• تويغ و الحقول المخصصة المتقدمة هما إضافات من تطوير /طرف ثالث/ الشركات الخاصة بهما ولقد استخدمتها لتسهيل تخصيص صفحات ووردبرس

البدء باستخدام إضافة عرض الحقول المخصصة في ووردبرس باستخدام قالب تويغ

• تأكد من تركيب الإضافة Timber وتفعيلها
• قم بإنشاء صفحة خاصة أو مقال خاص غير مرئي سوى لمدير الموقع كما يمكن أن يكون المقال من أي نوع مخصص متاح في موقعك
• لجعل هذه المقال قالب عام لنوع مخصص من المقالات اختر له الاسم لطيف slug من الشكل التالي:
  tpl-{{ post_type }}
• لصنع قالب لصفحة مخصصة أو مقال مخصص يمكنك اختيار أي اسم لطيف تختاره
• سوف يتم عرض النوع المخصص من المقالات حسب القالب الذي له الاسم اللطيف المناسب
• لإلزام مقال محدد بقالب محدد قم باختيار اسم القالب المناسب من الحقل المخصص قالب تويغ Twig Template

الحقول المخصصة والحقول المخصصة المتقدمة

• يدعم ووردبرس بشكل افتراضي الحقول المخصصة ويمكنك أضافتها مباشرة لأي مقال ويمكن استخدام هذه الإضافة لتخصيص طريقة عرضها
• هناك عدة إضافات لتحسين الحقول المخصصة في وورد برس أهمها الحقول المخصصة المتقدمة ACF
• يمكن استخدام الحقول المخصصة المتقدمة لتخصيص طريقة إدخال البيانات لمقالات ووردبرس بالشكل الذي تريده
• لمزيد من المعلومات عن الحقول المخصصة المتقدمة يمكن زيارة الرابط الرسمي للإضافة
  https://wordpress.org/plugins/advanced-custom-fields/

قواعد كتابة القالب في تويغ

ملاحظة: أفضل أن نستخدم المحرر التقليدي في ووردبرس لتحرير القالب

لفهم تويغ يتوجب علينا معرفة دلالة ثلاث صيغ فقط هي صيغة التعليقات، صيغة أظهر شيء ما وصيغة افعل شيء ما

صيغة التعليقات {#  #}

من المهم في كثير من الأحيان أن نكتب ملاحظة لأنفسنا لكننا لا نريدها أن تظهر في عند عرض الصفحة ولتحقيق ذلك نكتب الملاحظة على النحو التالي

{# ملاحظة #}

صيغة إظهار النتائج {{ }}

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

المتغيرات في قوالب تويغ لـ ووردبرس هي عنوان المقال، المقال نفسه، خصائص المقال، والحقول المخصصة التابعة للمقال

لإظهار عنوان المقال يمكن كتابة التعبير التالي في القالب

{{ title }}

إذا كان المقال الخاص بك يحوي حقل مخصصه اسم price يمكن عندها استعمال التعبير التالي لإظهار قيمة الحقل عند عرض المقال

{{ price }}

للوصول إلى خصائص كائن ما أو للوصول إلى عنصر مصفوفة يمكن استخدام عامل النقطة (.)

مثلاً للوصول إلى محتويات المقال يمكن كتابة التعبير التالي

{{ post.content }}

صيغة افعل شيئا ما {%  %}

يستخدم التركيب التالي:

{% ...... %}

للطلب من محرك القالب القيام بشيء محدد مثل التحقق من شرط ما أو تنفيذ تكرار ما. لا يظهر التركيب السابق نتائج عند عرض المقال لكنه يوجه القالب نفس لكيفية التصرف ولفم التركيب السابق بشكل جيد سوف نأخذ مثالين هما if و for.

إظهار المتغيرات عند تحقق شروط محددة

في قوالب تويغ نستخدم الوسم if للتحقق من أن المتغير المحدد يحوي قيمة ما أو أن التعبير المحدد له القيمة صواب true

لنفرض أن لدينا حقل مخصص يسمى agent ونريد أن نظهر عبارة ما عندما يحوي هذا الحقل على أي قيمة ولا نريد أن تظهر تلك العبارة عندما يكون الحقل السابق خاليا

{% if agent %}
    يوجد لدينا وكيل في منطقتك
    اسم الوكيل: {{ agent }}
{% endif %}

مثال آخر لنفرض أن لدينا حقل مخصص يدعى السعر ونريد أن نعرض نصا ما عندما يحوي حقل السعر قيمة وتكون تلك القمة 0

{% if price == 0 %}
   <p>هذا منتج مجاني</p>
{% endif %}

يرجى ملاحظة أننا نستخدم العامل == للتحقق من أن قيمتين متساويتين

إذا كان الحقل المخصص عبارة عن مصفوفة أو حقل تكرار يمكن التأكد من أنه يحوي قيم وليس خاليا عن طريق اختبار قيمته على النحو التالي

{% if meanings %}
   <p>المصفوفة السابقة تحتوي على عنصر أو أكثر</p>
{% endif %}

استخدم دائمًا {% endif %} لإغلاق شرط if السابق، فكل عبارة if يجب أن تغلقها عبارة endif.

المصفوفات والحقول المخصصة من النوع تكرار

إذا كان المتغير أو الحقل المخصص عبارة عن مصفوفة أو حقل مخصص من النوع تكرار فإننا يمكن أن نستعرض كل بند فيه من خلال الوسم for

استخدام الوسم for

• استخدم التعبير التالي للبدء في حلقة for

{% for m in meanings %}

في السطر السابق نقوم ببدء حقلة تكرار لمحتويات مصفوفة تدعى meanings وقد تم تسمية كل عنصر من عناصر المصفوفة بـ m

• للوصول إلى عناصر المصفوفة نستخدم الاسم الذي اخترناه بأنفسنا والذي هو في الحالة السابقة m
• للوصول إلى خصائص عنصر من عناصر المصفوفة نستخدم عامل النقطة (.)
• كل عبارة for يجب حتما أن تنتهي بعبارة {% endfor %} ويرجى ملاحظة أن endfor هي كلمة واحدة وليس كلمتين.

مثال عن قالب بسيط

<h2>Meaning of {{ title }}</h2>
{# This is a comment and will not render #}
{% for m in meanings %}
    {% if m.meaning %}
        Meaning: {{ row.meaning }}
    {% endif %}
    {% if m.example %}
        Example: {{ m.example }}
    {% endif %}
{% endfor %}

تنبيه هام عند كتابة قوالب تويغ

بعد كتابة القالب قم بعرض مصدر الصفحة وتأكد من عدم وجود أي وسم غير مطلوب ضمنها مثلاً

{% <span> endfor </span> %}

معلومات إضافية هامة عن محرك القوالب تويغ Twig

بالطبع هذا ليس كل شيء عن قوالب تويغ لمعرفة المزيد عن كيفية بناء القوالب بواسطة تويغ يمكن قراءة المقالين التاليين

• لماذا نستخدم محرك القالب ولمحة عن تويغ: مدخل إلى محرك القوالب تويغ Twig
• راجع الفقرة بنية قالب تويغ وصيغ التعبيرات فيه في المقال التالي: انطلاقة سريعة مع محرك القوالب تويغ
• ولمزيد من التقنيات يمكن قراءة المقال التالي: كيفية بناء القوالب عبر تويغ Twig
• تطبيقات عملية على استخدام تويغ

نقاط هامة للمطورين

إضافة نوع بيانات مخصصة إلى القالب بواسطة بي إتش بي

• قم بإنشاء دالة لها الاسم get_fields_{{post_type}}
• إذا كان اسم الحقل المخصص يحوي – استبدلها بـ _
• ضع في هذه الدالة البيانات المخصصة التي تريد إضافتها
• يوجد مثال عن ذلك في الملف user-functions.php الموجود مع الإضافة

إضافة بيانات محددة إلى كل مقال أو صفحة

• أنشئ دالة سمها np_content_singular
• ضع في هذه الدالة البيانات المخصصة التي تريد إضافتها
• يوجد مثال عن ذلك في الملف user-functions.php الموجود مع الإضافة

خلاصة مقال عرض الحقول المخصصة

لقد تحدثنا في المقال السابق عن إضافة ووردبرس من إعدادنا تهدف إلى تسهيل عرض الحقول المخصصة في ووردبرس مع إمكانية تعديل طريقة العرض بسهولة
لقد قمنا باستخدام محرك القوالب تويغ لتحقيق هذه الغاية وقمنا بشرح طريقة كتابة القالب المطلوب لعرض الحقول المخصصة

المناقشة والتعليقات حول عرض الحقول المخصصة

يمكنكم مناقشة هذا المقال في موقع ووردبرس على الرابط التالي

https://wordpress.org/support/plugin/np-tiwg/

كما يمكن مناقشة المقال عبر فيس بوك عبر الرابط التالي