إضافة ميزة خدمات جديدة على Elementor ووردبريس

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

فهم متطلبات الميزة

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

تنفيذ الوظائف باستخدام جافا سكريبت

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

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

jQuery(document).ready(function($) {
    $('.unhide-service-btn').on('click', function(e) {
        e.preventDefault();
        var serviceId = $(this).data('service-id');
        $.ajax({
            url: my_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'unhide_service',
                serviceId: serviceId,
                nonce: my_ajax_object.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#service-' + serviceId).removeClass('hidden-service');
                }
            },
            error: function(xhr, status, error) {
                console.log('Error:', status, error);
            }
        });
    });
});

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

معالجة الطلب باستخدام PHP

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

الشيفرة التالية توضح كيفية القيام بذلك:

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
    wp_localize_script('custom-js', 'my_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('unhide_service_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
function unhide_service_callback() {
    check_ajax_referer('unhide_service_nonce', 'nonce');
    $service_id = isset($_POST['serviceId']) ? sanitize_text_field($_POST['serviceId']) : '';
    if ($service_id) {
        $user_id = get_current_user_id();
        update_user_meta($user_id, 'visible_service_' . $service_id, true);
    }
    wp_send_json_success();
}
add_action('wp_ajax_unhide_service', 'unhide_service_callback');

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

التأكد من الإعدادات

من المهم التأكد من الإعدادات المناسبة في ووردبريس. يجب أن يتم تفعيل AJAX وأن تكون الصلاحيات مناسبة ليتمكن المستخدمون من تنفيذ هذه العملية بنجاح. تأكد أيضًا من تضمين jQuery بشكل صحيح في موقعك لضمان عدم وجود مشاكل مع الكود الخاص بك.

اختتام

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