شهد نظام إدارة المحتوى ووردبريس تحولات جذرية في طريقة بناء وتصميم المواقع الإلكترونية، ولعل أبرز هذه التحولات الانتقال الكامل نحو نظام قوالب البناء الافتراضي المعتمد على كتل جوتنبرج والمعروف باسم (Full Site Editing - FSE). لم تعد بحاجة إلى كتابة آلاف الأسطر البرمجية في ملفات PHP معقدة مثل header.php أو single.php أو archive.php لإنشاء مظهر فريد ومخصص لموقعك. يتيح لك نظام قوالب البناء الافتراضي تصميم هيكل الموقع بالكامل باستخدام الكتل المرئية مباشرة من لوحة التحكم، مما يمنح المطورين وأصحاب المواقع مرونة فائقة غير مسبوقة.

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

ما هو قالب البناء الافتراضي في ووردبريس ولماذا تحتاجه؟

قوالب البناء الافتراضي (Block Themes) هي نوع حديث من قوالب ووردبريس التي تعتمد بالكامل على الكتل (Blocks) لتخطيط كل جزء في الموقع، بدءاً من رأس الصفحة (Header) وحتى التذييل (Footer) وكل ما بينهما. على عكس القوالب الكلاسيكية التي تعتمد على الأكواد البرمجية والتخصيص المحدود عبر لوحة التحكم التقليدية، تمنحك القوالب الحديثة سيطرة كاملة على التصميم بصرياً مع الحفاظ على معايير البرمجة النظيفة.

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

الهيكل الأساسي لقالب البناء المخصص

لكي يتعرف ووردبريس على قالبك الجديد، يجب أن يتضمن مجلد القالب هيكل ملفات محدد بدقة. أنشئ مجلداً جديداً داخل مسار wp-content/themes/ وليكن اسمه sitegeeky-theme. داخل هذا المجلد، يجب أن توفر الحد الأدنى من الملفات الضرورية للتشغيل السليم:

• مجلد templates/: ويحتوي على ملفات القوالب الأساسية بصيغة HTML مثل الصفحة الرئيسية والصفحات الفردية والأرشيف.
• مجلد parts/: ويحتوي على الأجزاء المشتركة التي تتكرر في مختلف صفحات الموقع مثل الرأس والتذييل والشريط الجانبي.
• ملف style.css: يحتوي على معلومات القالب الأساسية وتعرّيفاته.
• ملف theme.json: ملف التكوين المركزي لإعدادات القالب والتصميم وإدارة الألوان والخطوط.

إعداد ملف المعلومات (style.css)

هذا الملف في قوالب البناء ليس مسؤولاً عن تنسيق التصميم وتخطيط الصفحات كما كان في القوالب الكلاسيكية، بل هو بمثابة بطاقة تعريف للقالب لتتعرف عليه نواة ووردبريس. افتح ملف style.css وضع الترويسة الأساسية التالية:

/*
Theme Name: SiteGeeky Block Theme
Theme URI: https://sitegeeky.com
Author: SiteGeeky Team
Description: قالب ووردبريس مخصص مبني باستخدام نظام قوالب البناء الافتراضي.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.5
Text Domain: sitegeeky-theme
*/

إعداد ملف التكوين المركزي (theme.json)

يُعد ملف theme.json العقل المدبر لقالبك؛ فهو يحدد الألوان، الخطوط، أحجام المسافات، وخيارات التخطيط، ويتحكم أيضاً فيما يمكن للمستخدم تعديله بحرية من لوحة التحكم المرئية. أنشئ الملف في الجذر الرئيسي للقالب وضع فيه هذا المثال الأساسي والشامل:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    },
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#00512c",
          "name": "اللون الأساسي"
        },
        {
          "slug": "background",
          "color": "#ffffff",
          "name": "لون الخلفية"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Cairo, sans-serif",
          "slug": "cairo",
          "name": "كيرو"
        }
      ]
    }
  }
}

يقوم هذا الملف بتمكين أدوات المظهر المتقدمة appearanceTools، وتحديد عرض المحتوى القيادي بـ 800 بكسل والعرض الواسع بـ 1200 بكسل، بالإضافة إلى تعريف لوحة ألوان موحدة ونظام خطوط متوافق مع الهوية البصرية للموقع.

إنشاء قوالب HTML الأساسية

في نظام قوالب البناء، يتم كتابة القوالب بلغة HTML مدمجة مع تعليقات كتل ووردبريس المخصصة. انتقل إلى مجلد templates/ وأنشئ الملفات الأساسية التي يحتاجها الموقع للعمل:

1. قالب الصفحة الرئيسية (index.html)

هذا القالب هو الملجأ الأخير لعرض المحتوى إذا لم توجد قوالب مخصصة أخرى محددة لأنواع المنشورات. ضع الكود التالي داخل templates/index.html:

<!-- wp:template-part {"slug": "header", "area": "header"} /-->

<!-- wp:group {"tagName": "main", "style": {"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<main class="wp-block-group">
  <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
  <div class="wp-block-query">
    <!-- wp:post-template -->
      <!-- wp:post-title {"isLink":true,"level":2} /-->
      <!-- wp:post-date /-->
      <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
    
    <!-- wp:query-pagination -->
      <!-- wp:query-pagination-previous /-->
      <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->
  </div>
  <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug": "footer", "area": "footer"} /-->

يشرح هذا الملف البنية بشكل مباشر: يستدعي جزء الرأس، ثم يفتح وسم main رئيسي، وبداخله حلقة عرض المقالات (Query Loop) التي تجلب المقالات تلقائياً وتُظهر عنوانها وتاريخها ومقتطفاً منها، ثم تتيح أزرار التنقل بين الصفحات، وتختتم المحتوى بجزء التذييل.

2. أجزاء القالب: الرأس والتذييل (parts/header.html و parts/footer.html)

أنشئ مجلداً فرعياً باسم parts/ وضع بداخله ملف header.html بالتنسيق التالي:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
  <!-- wp:site-title /-->
  <!-- wp:navigation {"layout":{"type":"flex","justifyContent":"space-between"}} /-->
</div>
<!-- /wp:group -->

وبالمثل لملف parts/footer.html لتحديد حقوق النشر والتصميم السفلي:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:20px;padding-bottom:20px">
  <!-- wp:paragraph {"align":"center"} -->
  <p class="has-text-align-center">جميع الحقوق محفوظة © 2024 موقع SiteGeeky</p>
  <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

لقطات الشاشة تصمصم قالب بإستخدام "Gutenberg"


⬇️


⬇️


⬇️


⬇️


⬇️

كيفية تفعيل وفحص القالب في بيئة العمل

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

1. توجه إلى لوحة تحكم ووردبريس ثم انتقل إلى قسم المظهر (Appearance) ثم القوالب (Themes).
2. سترى قالبك الجديد (SiteGeeky Block Theme) ظاهراً وجاهزاً، انقر فوق زر تفعيل (Activate).
3. انتقل بعد ذلك إلى القائمة نفسها واختر محرر (Editor).
4. هنا ستتمكن من رؤية وتعديل الهيكل بصرياً. أي تغييرات تجريها وتحفظها عبر المحرر المرئي يتم تخزينها كبيانات نمط في قاعدة بيانات ووردبريس، بينما تظل ملفات القالب البرمجية الأساسية هي نقطة البداية الصلبة للموقع.

الأخطاء الشائعة عند تطوير قوالب البناء

يقع بعض المطورين أثناء مرحلة الإنشاء في أخطاء متكررة تؤدي إلى تعطل القالب أو عدم ظهوره بالشكل المطلوب في لوحة التحكم. إليك أبرز هذه الأخطاء لتجنبها:

• نسيان تفعيل دعم البناء في theme.json: إذا لم تضع التكوينات الأساسية وخاصية الإصدار الصحيحة، فلن تظهر خيارات التصميم المتقدمة في المحرر المرئي.
• أخطاء في تعليقات الـ HTML: تعليقات الكتل في ووردبريس حساسة جداً للأخطاء الإملائية. وجود مسافة زائدة أو قوس ناقص أو نسيان علامة الإغلاق مثل <!-- /wp:group --> سيؤدي إلى كسر الكتلة وظهورها كنص عادي داخل محرر المقالات.
• تجاهل استجابة التصميم للشاشات الصغيرة: الاعتماد المطلق على القياسات الثابتة دون استخدام إعدادات التخطيط المقيد (Constrained Layout) سيتسبب حتماً في خروج المحتوى عن إطار الشاشة في الهواتف الذكية والأجهزة اللوحية.

أفضل الممارسات البرمجية والتصميمية

لبناء قالب احترافي، آمن، ومستدام على المدى الطويل، احرص على تطبيق الإرشادات والمعايير التالية:

• حافظ على نظافة مجلد القالب ولا تضف ملفات PHP غير ضرورية؛ فبما أنك تعتمد بالكامل على قوالب البناء، تجنب كتابة الأكواد الطويلة في ملف functions.php إلا إذا كنت بحاجة ملحة لتسجيل وظائف برمجية مخصصة لا توفرها النواة.
• استخدم دائماً المتغيرات القياسية للألوان والمسافات المعرفة مسبقاً في theme.json داخل ملفات القوالب، لضمان سهولة التعديل المركزي لإجهاد التصميم لاحقاً دون الحاجة لتعديل كل ملف على حدة.
• اختبر قالبك جيداً ومتعدد السيناريوهات مع الإضافات الشائعة والأساسية مثل إضافات تحسين محركات البحث (SEO) وإضافات المتاجر الإلكترونية الشهيرة مثل WooCommerce لضمان توافق التصميم التلقائي مع صفحات المتجر وأرشيف المنتجات.

الخلاصة

يمثل الانتقال إلى نظام قوالب البناء الافتراضي في ووردبريس نقلة نوعية تتيح للمطورين وأصحاب المواقع بناء منصات رقمية سريعة وخفيفة بعيداً عن تعقيدات البرمجة التقليدية الثقيلة. من خلال فهم هيكل الملفات الأساسي، وتوظيف ملف theme.json بذكاء، وبناء قوالب HTML باستخدام الكتل المعيارية، يمكنك إنتاج قوالب مخصصة بالكامل وبأعلى معايير الأداء وتجربة المستخدم.