عد نقرات الأزرار في ووردبريس وإضافتها في حقل ميتا

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

التخطيط لبنية البيانات

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

إنشاء الزر في إليمينتور

عندما تقوم بإضافة زر في إليمينتور، يمكنك تخصيصه من خلال إضافة فئة CSS، مثل “track-click-button”، وإضافة سمة مخصصة تحدد ID المنشور. هذه السيطرة تعزز إمكانية تتبع عدد النقرات على كل زر بشكل فردي.

كتابة الشيفرات اللازمة

للقيام بذلك بنجاح، سنحتاج إلى ثلاث لقطات برمجية:

اللقطة البرمجية الأولى هي OpenPHP لهذا التفاعل. هذه الشيفرة تتحقق من وجود ID للمنشور وتقوم بتحديث عدد النقرات:

function update_click_count() {
    if (isset($_POST['post_id'])) {
        $post_id = intval($_POST['post_id']);
        if (get_post_type($post_id) === 'industry-jobs') {
            $current_count = (int) get_post_meta($post_id, 'click_count', true);
            $new_count = $current_count + 1;
            update_post_meta($post_id, 'click_count', $new_count);
            wp_send_json_success(['new_count' => $new_count]);
        } else {
            wp_send_json_error('Invalid post type.');
        }
    } else {
        wp_send_json_error('Missing post ID.');
    }
    wp_die();
}
add_action('wp_ajax_update_click_count', 'update_click_count');
add_action('wp_ajax_nopriv_update_click_count', 'update_click_count');

اللقطة البرمجية الثانية هي لتسجيل وتحميل السكريبت الذي سيتولى عملية التفاعل. سيكون هناك حاجة لتحميل الجافا سكريبت بحيث يتم تنفيذه في أسفل الصفحة:

function enqueue_combined_click_tracker_script() {
    if (is_singular('industry-jobs')) {
        wp_register_script(
            'click-tracker-script',
            get_stylesheet_directory_uri() . '/js/click-tracker.js',
            ['jquery'],
            null,
            true
        );
        wp_localize_script('click-tracker-script', 'clickTrackerData', [
            'ajaxurl' => admin_url('admin-ajax.php')
        ]);
        wp_enqueue_script('click-tracker-script');
    }
}

اللقطة البرمجية الثالثة هي الشيفرة الجافا سكريبت لتتبع النقرات على الزر:

jQuery(document).ready(function ($) {
    const button = $('.track-click-button');
    if (button.length > 0) {
        button.on('click', function () {
            const postID = $(this).data('post-id');
            if (postID) {
                $.ajax({
                    url: clickTrackerData.ajaxurl,
                    type: 'POST',
                    data: {
                        action: 'update_click_count',
                        post_id: postID,
                    },
                    success: function (response) {
                        if (response.success) {
                            console.log('Click count updated successfully');
                        } else {
                            console.error('Failed to update click count', response);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX request failed:', status, error);
                    }
                });
            } else {
                console.error('Post ID is missing from the button');
            }
        });
    } else {
        console.error('Button not found');
    }
});

الختام

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