إضافة حقل مخصص لدعم HTML في إعدادات WooCommerce

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

كيفية إضافة حقل مخصص إلى إعدادات WooCommerce

للبدء، يجب عليك تعديل الكود الخاص بك للسماح بإدخال المحتوى HTML. وتعتبر الطريقة المثلى لذلك هي استخدام حقل نصي متعدد الأسطر (textarea) بدلاً من حقل نصي بسيط. يعتبر هذا التعديل حيوياً لأن معظم الأكواد HTML مثل iframe تحتاج إلى سعة أكبر من النصوص البسيطة.

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

add_filter('woocommerce_general_settings', 'general_settings_shop_map_address');
function general_settings_shop_map_address($settings) {
    $key = 0;
    foreach( $settings as $values ){
        $new_settings[$key] = $values;
        $key++;
        // إدراج الحقل الجديد بعد رمز البريد في قسم "عنوان المتجر"
        if($values['id'] == 'woocommerce_default_country'){
            $new_settings[$key] = array(
                'title'    => __('Store Address (Map)'),
                'desc'     => __('Copy your store Google Map iframe here'),
                'id'       => 'woocommerce_store_map',
                'type'     => 'textarea',
                'desc_tip' => true,
                'css'      => 'width:500px;height:150px;', // ضبط العرض والارتفاع حسب الحاجة
            );
            $key++;
        }
    }
    return $new_settings;
}

حفظ القيمة المدخلة في الحقل

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

add_action('woocommerce_update_options_general', 'save_general_settings_shop_map_address');
function save_general_settings_shop_map_address() {
    woocommerce_update_option('woocommerce_store_map');
}

السماح بإدخال HTML في الحقل

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

add_filter('woocommerce_admin_settings_sanitize_option_woocommerce_store_map', 'allow_html_in_store_map', 10, 3);
function allow_html_in_store_map($value, $option, $raw_value) {
    return wp_kses_post($raw_value);
}

هذا الكود يضمن أن المحتوى المدخل سيتعامل معه بشكل آمن، مما يسمح بإدخال أكواد HTML مع الحفاظ على سلامة الموقع.

الختام

بعد إضافة هذا الكود إلى ملف functions.php في ثيمك أو في إضافة مخصصة، يمكنك الآن إدخال محتوى HTML مثل iframe خريطة جوجل في حقل "عنوان المتجر (الخريطة)" في صفحة إعدادات WooCommerce العامة. ستتيح هذه الميزة للمستخدمين عرض مواقعهم بشكل أفضل لعملائهم.

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