التعامل مع إعدادات القالب (Theme )

درس التعامل مع إعدادات القالب (Theme ) في ووردبريس

1. مقدمة: إيه هو Theme Customizer؟

Theme Customizer هو أداة داخل ووردبريس بتسمح لمالك الموقع إنه يغير إعدادات شكل الموقع وتكوينه بشكل مباشر وبشكل تفاعلي.
اللي بيستخدمها بيقدر يشوف التعديلات بشكل مباشر قبل ما يحفظها.

2. أهمية Theme Customizer في تخصيص القوالب

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

3. كيف يعمل Theme Customizer؟

الـ Customizer بيشتغل باستخدام API موجود في ووردبريس، بيعتمد على إضافة إعدادات (Settings)، أقسام (Sections)، وعناصر تحكم (Controls).
كل جزء ليه وظيفته:

  • Setting: القيمة أو الخاصية اللي هتتحفظ.
  • Section: قسم من الإعدادات بيحتوي على مجموعة عناصر تحكم.
  • Control: العنصر اللي المستخدم بيتعامل معاه (زر، لون، نص، صورة…).

4. إضافة إعدادات (Settings) جديدة في القالب

الإعدادات دي بتكون متغيرات بتتحفظ في قاعدة البيانات عشان نستخدمها بعدين في القالب.

مثال بسيط لإضافة إعداد لون:

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_setting('header_textcolor', array(
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ));
}
add_action('customize_register', 'mytheme_customize_register');

5. إضافة أقسام (Sections) في الـ Customizer

الأقسام بتساعدنا ننظم الإعدادات في واجهة الـ Customizer.

مثال إضافة قسم جديد:

$wp_customize->add_section('mytheme_colors', array(
    'title' => __('ألوان الموقع', 'mytheme'),
    'priority' => 30,
));

6. إضافة عناصر التحكم (Controls) المختلفة

العناصر دي هي اللي بتظهر في الـ Customizer زي اختيار اللون، نص، اختيار صورة، … إلخ.

مثال لإضافة عنصر اختيار لون:

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_control', array(
    'label' => __('لون عنوان الهيدر', 'mytheme'),
    'section' => 'mytheme_colors',
    'settings' => 'header_textcolor',
)));

7. حفظ واسترجاع القيم المُعدلة

عشان نستخدم القيم دي في القالب، بنستخدم الدالة get_theme_mod().

مثال:

$header_color = get_theme_mod('header_textcolor', '#000000');
echo '<style>header { color: '. esc_attr($header_color) .'; }</style>';

8. تحديث القالب تلقائياً (Live Preview)

عشان التعديلات تظهر بدون إعادة تحميل الصفحة، بنستخدم الجافاسكربت في ملف customizer.js:

( function( $ ) {
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( newval ) {
            $('header').css('color', newval);
        } );
    } );
} )( jQuery );

9. أمثلة عملية مع كود كامل

مثال كامل لإضافة قسم ألوان للعنوان مع تحديث مباشر

في ملف functions.php:

function mytheme_customize_register( $wp_customize ) {
    // إضافة قسم
    $wp_customize->add_section('mytheme_colors', array(
        'title' => __('ألوان الموقع', 'mytheme'),
        'priority' => 30,
    ));

    // إضافة إعداد
    $wp_customize->add_setting('header_textcolor', array(
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport' => 'postMessage',
    ));

    // إضافة عنصر التحكم
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_control', array(
        'label' => __('لون عنوان الهيدر', 'mytheme'),
        'section' => 'mytheme_colors',
        'settings' => 'header_textcolor',
    )));
}
add_action('customize_register', 'mytheme_customize_register');

// ربط الجافاسكربت للتحديث المباشر
function mytheme_customize_preview_js() {
    wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '1.0', true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

وفي ملف customizer.js:

( function( $ ) {
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( newval ) {
            $('header').css('color', newval);
        } );
    } );
} )( jQuery );

وفي ملف القالب (مثلاً header.php):

<header>
    <h1 style="color: <?php echo esc_attr(get_theme_mod('header_textcolor', '#000000')); ?>">مرحبا بك في موقعي</h1>
</header>

10. نصائح مهمة عند استخدام Theme Customizer

  • استخدم sanitize_callback دايمًا عشان تحمي البيانات.
  • استخدم خاصية transport مع القيمة 'postMessage' عشان تقدر تعمل تحديث مباشر (Live Preview).
  • نظّم الإعدادات في أقسام واضحة وسهلة الاستخدام.
  • استخدم أنواع عناصر التحكم المناسبة (ألوان، نصوص، صور، قوائم…).
  • اختبر التخصيص على أكثر من جهاز ومتصفح.

11. مراجعة سريعة

  • Theme Customizer أداة قوية لتخصيص القالب بسهولة.
  • لازم تضيف إعدادات، أقسام، وعناصر تحكم باستخدام API الخاص بووردبريس.
  • يمكن عرض التغييرات بشكل مباشر قبل الحفظ.
  • استخدم get_theme_mod() لاسترجاع القيم المعدلة.
  • دائما حافظ على أمان البيانات بالتنظيف (sanitize).

12. أسئلة شائعة

س: هل يمكن إضافة إعدادات غير شكلية زي إعدادات الأداء أو الوظائف؟
ج: ممكن، لكن Customizer عادة بيستخدم لإعدادات الشكل. للإعدادات المعقدة ينصح باستخدام صفحات إعدادات مخصصة (Settings Page).

س: هل لازم كل الإعدادات تظهر في واجهة المستخدم؟
ج: لأ، ممكن تستخدم إعدادات مخفية أو تستخدمها داخليًا بدون تحكم مباشر للمستخدم.

س: هل يدعم Customizer الإضافات Plugins؟
ج: نعم، الإضافات ممكن تضيف إعدادات خاصة بيها في Customizer.

س: هل التعديلات بتظهر على الموقع بدون تحديث الصفحة؟
ج: لو استخدمت خاصية transport مع postMessage وكتبت جافاسكربت مخصصة، هتظهر.

مقالات مشابهة