توسيع theme.json لأنواع المنشورات المخصصة ومخرجات الإضافات: دليل عملي

ملخص

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

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

فهم نطاق theme.json

قبل البدء، من الضروري فهم أن theme.json هو مفهوم لسمات الكتل. يحدد الأنماط العامة والإعدادات (مثل لوحات الألوان وأحجام الخطوط) وأنماط الكتل الخاصة في محرر الكتل والواجهة الأمامية. ومع ذلك، فإن نطاقه محدود: فهو يتحكم فقط في الكتل التي تعلن صراحة عن دعم خصائص theme.json عبر register_block_type أو add_theme_support القديمة. أنواع المنشورات المخصصة التي تم إنشاؤها باستخدام register_post_type لا ترث هذه الأنماط تلقائيًا إلا إذا تم بناؤها باستخدام الكتل أو تم تصميمها صراحة.

الخطوة 1: تسجيل أنواع المنشورات المخصصة مع دعم محرر الكتل

الخطوة الأولى هي التأكد من أن نوع المنشور المخصص الخاص بك يستخدم محرر الكتل. عند استدعاء register_post_type، قم بتعيين 'show_in_rest' => true وقم بتضمين 'editor' في مصفوفة supports. هذا يمكّن محرر الكتل لنوع المنشور هذا، مما يسمح للمحررين باستخدام أنماط الكتل من theme.json. على سبيل المثال، إليك نوع منشور 'عضو فريق':

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'أعضاء الفريق',
            'singular_name' => 'عضو فريق',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

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

الخطوة 2: إضافة أنماط كتل مخصصة عبر theme.json

في بعض الأحيان تريد تطبيق أنماط محددة على جميع محتويات نوع منشورك المخصص—على سبيل المثال، إعطاء المنشور بأكمله لون خلفية أو حشوة خاصة. يمكنك استهداف core/post-content أو تغليف المحتوى في كتلة مجموعة مخصصة وتصميمها عبر theme.json. أضف التالي إلى ملف theme.json الخاص بك تحت كائن styles:

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

سيؤدي هذا إلى تطبيق خلفية فاتحة وحشوة على منطقة المحتوى لجميع المنشورات، بما في ذلك نوع منشور عضو فريق الخاص بك. يمكنك أيضًا تعريف متغيرات خاصة بالكتل داخل settings.blocks لتوفير خيارات أنماط في المحرر.

الخطوة 3: استخدام الخصائص المخصصة من theme.json لمخرجات الإضافات

غالبًا ما تنتج الإضافات محتوى عبر الرموز القصيرة أو الأدوات أو الكتل المخصصة. لتصميم هذه بشكل متناسق، استفد من خصائص CSS المخصصة التي يولدها theme.json. على سبيل المثال، إذا كانت سمتك تحدد لونًا أساسيًا كـ --wp--preset--color--primary، يمكنك استخدامه في CSS الخاصة بإضافتك:

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

يضمن هذا أنه عندما يغير مسؤول الموقع لوحة الألوان في theme.json، يتم تحديث زر الإضافة تلقائيًا. لجعل هذا قويًا، استخدم دائمًا متغيرات CSS المعدة مسبقًا بدلاً من ترميز القيم. بالإضافة إلى ذلك، إذا كانت إضافتك تسجل كتلًا خاصة بها، يمكنك وراثة إعدادات theme.json باستخدام useSetting في JavaScript أو تمرير $attributes في عرض PHP، كما هو موضح في إتقان الكتل الديناميكية في ووردبريس.

الخطوة 4: معالجة الكتل الديناميكية

بالنسبة للكتل المخصصة التي تنتج محتوى ديناميكيًا (مثل شريط تمرير الشهادات)، تحتاج إلى تسجيل الكتلة مع دعم محرر الكتل وربطها بـ theme.json بشكل صريح. في PHP، استخدم register_block_type مع $args التي تتضمن 'render_callback' وتأكد من أن ملف block.json للكتلة يحدد 'supports' => array( 'color' => true, 'typography' => true ). ثم، في رد العرض الخاص بك، يمكنك الوصول إلى الأنماط العامة عبر wp_get_global_styles() وتطبيقها. على سبيل المثال:

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

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

تحذيرات

بينما يعد توسيع theme.json قويًا، احترس من هذه المزالق:

1. الأداء: إضافة الكثير من الأنماط المخصصة في theme.json يمكن أن تثقل الملف وتزيد وقت تحليل CSS. التزم بالإعدادات العامة واستخدم أنماط الكتل المخصصة بشكل مقتصد.
2. تعارض الإضافات: بعض الإضافات تعيد تعيين أو تتجاوز إعدادات theme.json. اختبر دائمًا مع مجموعة إضافات محدودة وفكر في استخدام خطاف after_setup_theme لإعادة تطبيق تخصيصاتك.
3. السمات الكلاسيكية: إذا كانت سمتك لا تستخدم محرر الكتل (أي أنها سمة كلاسيكية)، فإن theme.json له تأثير محدود. فكر في الترحيل إلى سمة كتل أو استخدام وظيفة wp_enqueue_global_styles لتحميل الأنماط.
4. ذاكرة التخزين المؤقت للمتصفح: قد لا تظهر التغييرات في theme.json فورًا بسبب التخزين المؤقت. امسح ذاكرة التخزين المؤقت للمتصفح واستخدم إصدارات لورقة الأنماط الخاصة بك.

الخلاصة

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