تعديل القالب من لوحة تحكم ووردبريس

1. مقدمة: إيه هي صفحة خيارات القالب؟

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

2. الفرق بين صفحة خيارات القالب وTheme Customizer

	صفحة خيارات القالب (Options Page)	Theme Customizer
المكان	لوحة تحكم ووردبريس (Backend)	واجهة التخصيص مع معاينة حية (Frontend)
الاستخدام	إعدادات متقدمة وتحكم شامل	تخصيص شكل الموقع بشكل تفاعلي
سهولة الاستخدام	أقل تفاعلية، ممكن تحتاج تحديث الصفحة	تفاعلية، معاينة مباشرة
التطبيقات	تحكم في إعدادات معقدة أو غير شكلية	تغيير ألوان، نصوص، صور، شكل

3. أهمية صفحة خيارات القالب

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

4. إنشاء صفحة خيارات جديدة في لوحة تحكم ووردبريس

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

5. تسجيل صفحة الخيارات باستخدام add_menu_page وadd_submenu_page

• add_menu_page: لإضافة قائمة رئيسية في لوحة التحكم.
• add_submenu_page: لإضافة صفحة فرعية تحت قائمة موجودة.

مثال تسجيل صفحة خيارات:

function mytheme_add_admin_menu() {
    add_menu_page(
        'إعدادات القالب',  // عنوان الصفحة
        'خيارات القالب',    // عنوان القائمة
        'manage_options',   // صلاحيات المستخدم
        'mytheme_options',  // معرف الصفحة
        'mytheme_options_page',  // الدالة المسؤولة عن العرض
        'dashicons-admin-customizer',  // أيقونة القائمة
        60  // ترتيب القائمة
    );
}
add_action('admin_menu', 'mytheme_add_admin_menu');

6. إضافة حقول الإدخال المختلفة

عشان نضيف حقول متعددة، بنستخدم واجهة الـ Settings API، اللي بتسهل تسجيل الإعدادات والتحقق منها وحفظها.

خطوات استخدام Settings API:

1. تسجيل الإعدادات register_setting()
2. تسجيل القسم add_settings_section()
3. تسجيل الحقول add_settings_field()
4. كتابة دوال عرض الحقول

مثال لإضافة حقل نصي وحقل اختيار لون

function mytheme_settings_init() {
    // تسجيل الإعدادات
    register_setting('mytheme_options_group', 'mytheme_options');

    // إضافة قسم
    add_settings_section(
        'mytheme_section_general',
        __('الإعدادات العامة', 'mytheme'),
        'mytheme_section_callback',
        'mytheme_options'
    );

    // إضافة حقل نصي
    add_settings_field(
        'mytheme_text_field',
        __('نص الترحيب', 'mytheme'),
        'mytheme_text_field_render',
        'mytheme_options',
        'mytheme_section_general'
    );

    // إضافة حقل اختيار لون
    add_settings_field(
        'mytheme_color_field',
        __('لون الخلفية', 'mytheme'),
        'mytheme_color_field_render',
        'mytheme_options',
        'mytheme_section_general'
    );
}
add_action('admin_init', 'mytheme_settings_init');

function mytheme_section_callback() {
    echo __('عدل الإعدادات التالية لتخصيص القالب', 'mytheme');
}

function mytheme_text_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_text_field]' value='<?php echo esc_attr($options['mytheme_text_field'] ?? ''); ?>'>
    <?php
}

function mytheme_color_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_color_field]' value='<?php echo esc_attr($options['mytheme_color_field'] ?? '#ffffff'); ?>' class='my-color-field' >
    <script>
    jQuery(document).ready(function($){
        $('.my-color-field').wpColorPicker();
    });
    </script>
    <?php
}

7. حفظ البيانات بشكل آمن

ووردبريس بيستخدم دالة register_setting() مع خاصية التحقق من الصحة. لازم تهتم بـ sanitize و validate عشان تأمن البيانات وتحمي موقعك من إدخال بيانات خاطئة أو ضارة.

8. استرجاع وعرض البيانات في القالب

لاستعمال البيانات المحفوظة في القالب، استخدم get_option().

مثال:

$options = get_option('mytheme_options');
$welcome_text = $options['mytheme_text_field'] ?? 'أهلاً بك';
$bg_color = $options['mytheme_color_field'] ?? '#ffffff';
?>

<style>
    body { background-color: <?php echo esc_attr($bg_color); ?>; }
</style>
<div class="welcome-message"><?php echo esc_html($welcome_text); ?></div>

9. مثال عملي: بناء صفحة إعدادات بسيطة لقالب

في ملف functions.php:

function mytheme_add_admin_menu() {
    add_menu_page('إعدادات القالب', 'خيارات القالب', 'manage_options', 'mytheme_options', 'mytheme_options_page', 'dashicons-admin-customizer', 60);
}
add_action('admin_menu', 'mytheme_add_admin_menu');

function mytheme_settings_init() {
    register_setting('mytheme_options_group', 'mytheme_options', 'mytheme_options_sanitize');

    add_settings_section('mytheme_section_general', 'الإعدادات العامة', 'mytheme_section_callback', 'mytheme_options');

    add_settings_field('mytheme_text_field', 'نص الترحيب', 'mytheme_text_field_render', 'mytheme_options', 'mytheme_section_general');

    add_settings_field('mytheme_color_field', 'لون الخلفية', 'mytheme_color_field_render', 'mytheme_options', 'mytheme_section_general');
}
add_action('admin_init', 'mytheme_settings_init');

function mytheme_section_callback() {
    echo 'عدل الإعدادات التالية لتخصيص القالب';
}

function mytheme_text_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_text_field]' value='<?php echo esc_attr($options['mytheme_text_field'] ?? ''); ?>'>
    <?php
}

function mytheme_color_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_color_field]' value='<?php echo esc_attr($options['mytheme_color_field'] ?? '#ffffff'); ?>' class='my-color-field' >
    <script>
    jQuery(document).ready(function($){
        $('.my-color-field').wpColorPicker();
    });
    </script>
    <?php
}

function mytheme_options_page() {
    ?>
    <form action='options.php' method='post'>
        <h2>خيارات القالب</h2>
        <?php
        settings_fields('mytheme_options_group');
        do_settings_sections('mytheme_options');
        submit_button();
        ?>
    </form>
    <?php
}

function mytheme_options_sanitize($input) {
    $output = array();

    if (isset($input['mytheme_text_field'])) {
        $output['mytheme_text_field'] = sanitize_text_field($input['mytheme_text_field']);
    }

    if (isset($input['mytheme_color_field'])) {
        $output['mytheme_color_field'] = sanitize_hex_color($input['mytheme_color_field']);
    }

    return $output;
}

10. تحسينات إضافية وتجربة المستخدم

• استخدام مكتبة jQuery UI Color Picker لتسهيل اختيار الألوان.
• إضافة حقول تحميل صور باستخدام wp_enqueue_media لرفع الصور (مثلاً لوجو الموقع).
• فصل الإعدادات في أقسام متعددة لتنظيم أفضل.
• استخدام Ajax للحفظ بدون تحديث الصفحة (للمطورين المتقدمين).

11. نصائح مهمة عند بناء صفحة إعدادات القالب

• دايمًا استخدم sanitize لتنظيف البيانات.
• حدد صلاحيات المستخدمين (عادة manage_options) عشان تحمي الصفحة.
• نظّم واجهة المستخدم بشكل واضح وسهل.
• اختبر الصفحة على مختلف المتصفحات.
• استخدم الترجمة باستخدام __() و _e() عشان تجعل القالب متعدد اللغات.

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

• صفحة خيارات القالب بتسمح بتخصيص متقدم من لوحة التحكم.
• استخدم دوال add_menu_page وregister_setting لإنشاء الصفحة وإعداداتها.
• قم بتنظيف البيانات المدخلة قبل الحفظ.
• استرجع الإعدادات في ملفات القالب باستخدام get_option.
• حسّن تجربة المستخدم باستخدام أدوات مثل Color Picker وتحميل الصور.

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

س: هل يمكن إضافة صفحة خيارات متعددة؟
ج: نعم، تقدر تضيف أكثر من صفحة أو صفحة فرعية باستخدام add_submenu_page.

س: هل يمكن استخدام AJAX لحفظ الإعدادات؟
ج: نعم، لكنه يتطلب برمجة متقدمة خارج إطار Settings API.

س: هل يمكن استيراد وتصدير إعدادات الصفحة؟
ج: ممكن لكن يتطلب إضافات أو كود مخصص.

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