دليل شامل لإنشاء قوالب ووردبريس مخصصة من الصفر للمبتدئين والمحترفين

إنشاء قالب ووردبريس مخصص في 2026 يعني الاختيار بين نهجين: القوالب الكلاسيكية (بـ PHP وملفات template) والقوالب الكتلية (Block Themes) المعتمدة على محرر الموقع (Site Editor، المعروف سابقاً بـ FSE) وملف theme.json. كلاهما مدعوم رسمياً، ولكن FSE هو الاتجاه السائد منذ ووردبريس 6.0، ومنذ 6.6 أصبح أداة قوية للمحررين دون الحاجة للبرمجة. هذا الدرس يبني قالباً كتلياً عاملاً من الصفر، مع شرح متى يكون القالب الكلاسيكي أفضل خياراً.

المتطلبات

• تثبيت ووردبريس محلي (Local WP، XAMPP، أو Docker)
• محرر كود (VS Code مع إضافة WordPress)
• معرفة أساسية بـ HTML وCSS
• معرفة بسيطة بـ PHP مفيدة لكن غير ضرورية لقوالب FSE
• الوقت المقدر: ٣ ساعات

الخطوة 1 — اختيار النهج: كلاسيكي أم كتلي

القالب الكلاسيكي يعتمد على ملفات PHP (header.php، footer.php، single.php) ويتطلب تعديل الكود لكل تغيير. القالب الكتلي يعتمد على ملفات HTML للأنماط (templates/single.html) ويتيح للمحرر تعديل التصميم بصرياً عبر FSE. القالب الكتلي أفضل لـ 90% من المشاريع الحديثة.

الخطوة 2 — هيكلية القالب الكتلي

القالب الكتلي يحتوي على هيكل ملفات بسيط ولكنه صارم. أنشئ مجلداً في wp-content/themes/montheme/ يحتوي على:

montheme/
├── style.css           # رأس القالب فقط (Theme Name, Author...)
├── theme.json          # إعدادات الألوان، الخطوط، الفراغات
├── functions.php       # تسجيل الميزات (اختياري)
├── index.php           # ملف فارغ مطلوب للتوافق
├── templates/          # قوالب HTML
│   ├── index.html
│   ├── single.html
│   └── page.html
├── parts/              # أجزاء قابلة لإعادة الاستخدام
│   ├── header.html
│   └── footer.html
└── patterns/           # أنماط محتوى جاهزة
    └── hero.php

محتوى style.css يقتصر على معلومات القالب: الاسم، المؤلف، النسخة. لا حاجة لـ CSS هنا — كل التنسيق يأتي من theme.json. index.php يبقى فارغاً، فقط لأن ووردبريس يتحقق من وجوده تاريخياً.

الخطوة 3 — ملف style.css ومعلومات القالب

هذا الملف هو « بطاقة الهوية » للقالب. ووردبريس يقرأ التعليقات في رأس الملف لعرض القالب في لوحة الإدارة.

/*
Theme Name:    MonTheme
Theme URI:     https://example.com/montheme
Author:        Aïda Sow
Author URI:    https://example.com
Description:   قالب كتلي حديث لـ ووردبريس 6.9+
Version:       1.0.0
Requires at least: 6.7
Tested up to:  6.9
Requires PHP:  8.2
License:       GPL v2 or later
Text Domain:   montheme
*/

كل حقل له دور: Theme Name ضروري، Requires PHP يمنع التثبيت على إصدار قديم، Text Domain يستخدم للترجمة. بعد إضافة هذا الملف، اذهب إلى المظهر → القوالب في لوحة الإدارة، يجب أن تجد قالبك جاهزاً للتفعيل.

الخطوة 4 — theme.json: قلب القالب الكتلي

هذا الملف يحدد كل خيارات التصميم: الألوان، الخطوط، الفراغات، الأنماط. يخدم كذلك لتقييد ما يمكن للمحرر تعديله. هذا يضمن تماسك التصميم عبر كامل الموقع.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary",   "color": "#1f6feb", "name": "أساسي" },
        { "slug": "neutral",   "color": "#1a1a1a", "name": "محايد" },
        { "slug": "background","color": "#ffffff", "name": "خلفية" }
      ]
    },
    "typography": {
      "fontFamilies": [
        { "slug": "system", "name": "نظام", "fontFamily": "system-ui, sans-serif" },
        { "slug": "arabic", "name": "عربي", "fontFamily": "\"Noto Sans Arabic\", system-ui" }
      ],
      "fontSizes": [
        { "slug": "small", "size": "14px" },
        { "slug": "medium", "size": "16px" },
        { "slug": "large", "size": "24px" }
      ]
    },
    "spacing": {
      "spacingScale": { "steps": 7 }
    }
  }
}

عند تعريف لوحة ألوان هنا، تظهر تلقائياً في كل أدوات المحرر لاختيار اللون. هذا يضمن أن المحرر لا يستطيع استخدام لون عشوائي يكسر هوية الموقع. بعد حفظ theme.json، قم بإعادة تحميل المحرر — التغييرات تظهر فوراً.

الخطوة 5 — قوالب HTML للصفحات

كل قالب في templates/ هو ملف HTML بسيط يستخدم تعليقات خاصة بـ WordPress للإشارة إلى الكتل (blocks). أبسط قالب لصفحة فردية:

<!-- templates/single.html -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-title {"level":1} /-->
  <!-- wp:post-featured-image {"width":"100%"} /-->
  <!-- wp:post-content /-->
  <!-- wp:post-comments-form /-->
</main>
<!-- /wp:group -->

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

التعليقات بتنسيق <!-- wp:... --> هي طريقة ووردبريس لتسجيل الكتل. wp:post-title يعرض عنوان المنشور، wp:post-content يعرض المحتوى. لتعديل ترتيب العناصر أو إضافة كتل جديدة، يمكن للمحرر فعل ذلك مباشرة من المظهر → المحرر دون لمس الكود.

الخطوة 6 — أجزاء قابلة لإعادة الاستخدام (Template Parts)

الترويسة (header) والتذييل (footer) عادة ما تكون متطابقة عبر كل الصفحات. بدلاً من تكرارها، تُعرّف كأجزاء (parts) في مجلد parts/.

<!-- parts/header.html -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
  <!-- wp:site-title {"level":0,"isLink":true} /-->
  <!-- wp:navigation {"layout":{"type":"flex"}} /-->
</div>
<!-- /wp:group -->

كتلة wp:site-title تعرض اسم الموقع كرابط للصفحة الرئيسية. wp:navigation توفر قائمة قابلة للتحرير من الإدارة. أي تعديل على ملف parts/header.html ينعكس على كل الصفحات تلقائياً، بما أنها كلها تستدعيه عبر wp:template-part.

الخطوة 7 — أنماط محتوى جاهزة (Patterns)

الأنماط هي مجموعات كتل مُصمَّمة جاهزة للإدراج. مثلاً، نمط « بطل الصفحة » (hero) أو « قائمة المميزات الثلاث ». يمكن تعريفها كملفات PHP في patterns/.

<?php
/**
 * Title:       Hero
 * Slug:        montheme/hero
 * Categories:  featured
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":480} -->
<div class="wp-block-cover">
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"level":1,"textAlign":"center"} -->
    <h1 class="has-text-align-center">عنوان رئيسي مؤثر</h1>
    <!-- /wp:heading -->
    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
      <!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">ابدأ الآن</a></div><!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
  </div>
</div>
<!-- /wp:cover -->

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

الخطوة 8 — اختبار ونشر القالب

قبل الإطلاق، اختبر على ثلاثة محاور: الأداء (PageSpeed Insights)، إمكانية الوصول (Lighthouse Accessibility audit)، والتوافق (Theme Check plugin). الهدف: 90+ في كل المحاور.

# تثبيت إضافة Theme Check للتحقق من المعايير
wp plugin install theme-check --activate
# ثم: المظهر → التحقق من القالب → اختر القالب → ابدأ

# الضغط للنشر
cd wp-content/themes/
zip -r montheme-1.0.0.zip montheme/ -x "montheme/.git/*" -x "montheme/node_modules/*"

الملف الناتج جاهز للرفع عبر المظهر → القوالب → إضافة جديد → رفع قالب. للنشر على ووردبريس.org الرسمي، اتبع إرشادات مراجعة القالب التي تتطلب بعض التعديلات الإضافية مثل دعم RTL الكامل والترجمة.

أخطاء شائعة

للمزيد

• مرجع theme.json developer.wordpress.org
• دليل القوالب الكتلية block-themes
• مرجع كتل ووردبريس core-blocks
• Theme Check theme-check