كيفية بناء سمة بلوك مخصصة لـ WordPress باستخدام theme.json: دليل خطوة بخطوة

ملخص

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

مقدمة

أحدث تحرير الموقع الكامل (FSE) ثورة في تطوير سمات WordPress، مما يسمح لك بتصميم كل جزء من موقعك بصريًا. لكن لا يزال العديد من المطورين يعتمدون على السمات الكلاسيكية أو يكافحون لإنشاء سمات بلوك من الصفر. مفتاح إطلاق قوة FSE هو theme.json — ملف تهيئة يتحكم في الأنماط والإعدادات والقوالب العالمية. تقدم هذه المقالة دليلًا عمليًا خطوة بخطوة لبناء سمة بلوك مخصصة باستخدام theme.json. ستتعلم إعداد هيكل المجلدات، وتحديد لوحات الألوان وإعدادات الخطوط، وإنشاء قوالب مخصصة بعلامات البلوك، وإضافة تنويعات الأنماط. في النهاية، ستحصل على سمة بلوك جاهزة للإنتاج وسهلة الصيانة والتوسعة. لنبدأ ونزيل الغموض عن تطوير FSE.

للنظرة الأوسع حول كيفية تشكيل FSE لمستقبل تصميم WordPress، اطّلع على غوتنبرغ FSE: مستقبل تصميم WordPress في 2026.

1. إعداد سمة بلوك بسيطة

تتطلب سمة البلوك ملفين على الأقل: style.css و index.html. لننشئهما.

هيكل المجلدات

أنشئ مجلدًا باسم my-block-theme في دليل wp-content/themes/. بداخله، ضع:

• style.css
• index.html
• (اختياري) theme.json

style.css

على الرغم من أن سمات البلوك تعتمد أقل على CSS، إلا أن style.css لا يزال مطلوبًا لتحديد السمة:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

يضمن السطر Requires at least: 5.9 عمل السمة مع ميزة FSE.

index.html

هذا هو القالب الاحتياطي الخاص بك. يجب أن يبدأ بعلامات البلوك. أنشئ تخطيطًا بسيطًا:

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

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

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

يستخدم هذا بناء جملة البلوك لتضمين أجزاء الرأس والتذييل، ويعرض عنوان المنشور والمحتوى.

تحذير: يجب ألا تحتوي سمات البلوك على ملفات قوالب PHP مثل header.php أو footer.php. سيؤدي خلط القوالب الكلاسيكية والبلوك إلى كسر FSE.

تفعيل السمة

ارفع المجلد عبر FTP أو التثبيت بالضغط، وقم بتفعيله. يجب أن ترى موقعًا فارغًا بهيكلك البسيط. بعد ذلك، سنقوم بتنسيقه باستخدام theme.json.

2. إتقان theme.json: الأنماط والإعدادات العالمية

يقوم theme.json بمركزة جميع عناصر التحكم في التصميم. يقع في جذر مجلد السمة. لننشئ واحدًا بإعدادات الألوان والخطوط.

الهيكل الأساسي

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

يحدد هذا لوحة ألوان وعائلات خطوط وأحجام خطوط وأنماطًا عالمية. تشير دوال var() إلى خصائص CSS المخصصة التي يولدها WordPress تلقائيًا. يمكن للمستخدمين بعد ذلك تغيير هذه في محرر الموقع.

نصيحة: استخدم خصائص CSS المخصصة للتناسق. تجنب ترميز القيم في ملفات CSS؛ اجعل theme.json هو المصدر الوحيد للحقيقة.

3. إنشاء قوالب مخصصة

قوالب البلوك هي ملفات HTML بعلامات بلوك. تتبع تسلسلًا هرميًا مشابهًا لملفات القوالب الكلاسيكية. على سبيل المثال، أنشئ 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 /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

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

بالمثل، أنشئ page.html و archive.html إلخ. يمكنك أيضًا إنشاء قوالب مخصصة بإضافة بلوك wp:post-template داخل حلقة استعلام.

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

أجزاء القالب

أنشئ مجلد parts/ للأجزاء القابلة لإعادة الاستخدام. على سبيل المثال، header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

و footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. إضافة أنماط البلوك وتنويعات الأنماط

أنماط البلوك هي تخطيطات مصممة مسبقًا. حددها في مجلد patterns/. أنشئ patterns/hero.php:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Welcome</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">This is a custom hero section</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

تسمح تنويعات الأنماط للمستخدمين بتبديل المظهر بالكامل. أنشئ styles/default.json و styles/dark.json لتجاوز إعدادات السمة.

5. تحذيرات وأفضل الممارسات

• الأداء: يتم تخزين theme.json مؤقتًا. امسح ذاكرة التخزين المؤقت بعد التغييرات. استخدم خطاف wp_register_theme_json إذا لزم الأمر.
• التوافق مع الإصدارات السابقة: تعمل سمات البلوك فقط من WordPress 5.9. إذا كان موقعك يجب أن يدعم الإصدارات الأقدم، فكر في نهج هجين لكن تجنب خلط ملفات القوالب.
• السمات الفرعية: يمكن استخدام سمات البلوك كسمات أصلية للسمات الفرعية الكلاسيكية، لكن ليس العكس. استخدم template في style.css للإعلان عن سمة بلوك أصلية.
• التدويل: استخدم دالة __() داخل أجزاء قالب PHP للسلاسل القابلة للترجمة. في علامات البلوك، حدد نطاق النص عبر الخاصية textDomain.

للمزيد حول أفضل ممارسات تطوير الإضافات، اطّلع على بناء إضافات WordPress قوية: دليل عملي لأفضل الممارسات.

الخاتمة

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

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

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