مثال عملي لبرمجة إضافة ووردبريس – الجزء الثاني

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

مقدمة في برمجة إضافات ووردبريس

إضافة ووردبريس هي قطعة من البرمجيات مكتوبة بلغة PHP مع إمكانية استخدام HTML، CSS، وJavaScript، تُضاف إلى موقع ووردبريس لإضافة ميزات أو تعديل سلوك الموقع دون التأثير على ملفات النواة (Core) الخاصة بووردبريس. تتميز الإضافات بسهولة التفعيل والتعطيل، مما يسمح بالتحكم الكامل في الوظائف الإضافية للموقع.

في هذا الجزء الثاني، سنغطي العديد من المفاهيم المتقدمة والممارسات العملية التي تشمل تنظيم ملفات الإضافة، إنشاء صفحة إعدادات خاصة، التعامل مع قواعد البيانات، استخدام الـ hooks (الخطاطيف) actions وfilters، وأيضاً بناء واجهات المستخدم الديناميكية.

1. هيكلية مجلد الإضافة

أول خطوة مهمة في تطوير إضافة منظمة وسهلة الصيانة هي ترتيب ملفاتها بشكل منظم ومرن. عادةً، تتكون الإضافة من ملف رئيسي بامتداد PHP يحتوي على معلومات الإضافة وتعريفها، بالإضافة إلى مجلدات فرعية للملفات البرمجية، وأوراق الأنماط (CSS)، والسكربتات (JavaScript)، وملفات القوالب (Templates) إذا كانت ضرورية.

مثال على هيكلية مجلد إضافة:

perl
CopyEdit
my-plugin/
│
├── my-plugin.php          # الملف الرئيسي للإضافة
├── readme.txt             # ملف التوثيق الخاص بالإضافة
├── includes/              # ملفات الـ PHP الداعمة
│   ├── admin-settings.php # إعدادات لوحة التحكم
│   └── functions.php      # وظائف عامة
├── assets/                # الملفات الثابتة (CSS، JS، صور)
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
└── templates/             # ملفات القالب الخاصة بالإضافة
    └── display-template.php

بهذه الطريقة يصبح لديك تنظيم واضح يسهل التوسع لاحقًا.

2. الملف الرئيسي للإضافة وتعريفها

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

php
CopyEdit

/*
Plugin Name: My Custom Plugin
Plugin URI: https://example.com/my-custom-plugin
Description: إضافة تجريبية توضح كيفية برمجة إضافة ووردبريس.
Version: 1.0
Author: اسم المؤلف
Author URI: https://example.com
License: GPL2
*/

يُكتب هذا في بداية ملف my-plugin.php، وبعدها يبدأ المطور في إضافة الأكواد التنفيذية.

3. التسجيل والاستخدام الصحيح للخطاطيف (Hooks)

تُعد الـ hooks (الخطاطيف) من أهم أدوات برمجة الإضافات، فهي تسمح لك بربط وظائفك بعمليات ووردبريس المختلفة، سواء كانت عند تحميل الصفحة، حفظ المقالات، أو عند عرض المحتوى.

هناك نوعان رئيسيان:

• Actions (الإجراءات): تسمح بإضافة وظائف تنفذ في أوقات معينة.

• Filters (المرشحات): تسمح بتعديل بيانات معينة قبل عرضها أو حفظها.

مثال عملي لإضافة إجراء:

php
CopyEdit
function my_plugin_enqueue_scripts() {
    wp_enqueue_style('my-plugin-style', plugin_dir_url(__FILE__) . 'assets/css/style.css');
    wp_enqueue_script('my-plugin-script', plugin_dir_url(__FILE__) . 'assets/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_scripts');

هنا نقوم بتحميل ملف CSS وملف JavaScript خاصين بالإضافة عند تحميل صفحات الموقع.

4. إنشاء صفحة إعدادات خاصة بالإضافة

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

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

php
CopyEdit
function my_plugin_add_admin_menu() {
    add_menu_page(
        'إعدادات الإضافة',
        'إعدادات الإضافة',
        'manage_options',
        'my-plugin-settings',
        'my_plugin_settings_page',
        'dashicons-admin-generic'
    );
}
add_action('admin_menu', 'my_plugin_add_admin_menu');

function my_plugin_settings_page() {
    ?>
    
class="wrap">
        <h1>إعدادات إضافة My Custom Pluginh1>
        <form method="post" action="options.php">
            php
            settings_fields('my_plugin_settings_group');
            do_settings_sections('my-plugin-settings');
            submit_button();
            ?>
        form>
    div>
    php
}

function my_plugin_settings_init() {
    register_setting('my_plugin_settings_group', 'my_plugin_option');

    add_settings_section(
        'my_plugin_section',
        'إعدادات عامة',
        function() { echo 'يمكنك تعديل الإعدادات هنا.'; },
        'my-plugin-settings'
    );

    add_settings_field(
        'my_plugin_field',
        'الخيار الخاص',
        'my_plugin_field_render',
        'my-plugin-settings',
        'my_plugin_section'
    );
}
add_action('admin_init', 'my_plugin_settings_init');

function my_plugin_field_render() {
    $value = get_option('my_plugin_option', '');
    ?>
    "text" name="my_plugin_option" value="$value); ?>" />
    
}

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

5. التعامل مع قاعدة البيانات

في بعض الإضافات، قد تحتاج إلى تخزين بيانات إضافية لا تتناسب مع الخيارات التقليدية. ووردبريس يوفر طريقة لإنشاء جداول خاصة بالإضافة داخل قاعدة البيانات باستخدام فئة $wpdb.

إنشاء جدول خاص بالإضافة عند التفعيل

php
CopyEdit
function my_plugin_create_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'my_plugin_data';

    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        name varchar(100) NOT NULL,
        email varchar(100) NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'my_plugin_create_table');

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

إدخال بيانات في الجدول

php
CopyEdit
function my_plugin_insert_data($name, $email) {
    global $wpdb;
    $table_name = $wpdb->prefix . 'my_plugin_data';

    $wpdb->insert(
        $table_name,
        array(
            'name' => $name,
            'email' => $email,
        ),
        array(
            '%s',
            '%s',
        )
    );
}

يمكن استدعاء هذه الوظيفة لإضافة بيانات جديدة إلى الجدول.

استرجاع البيانات

php
CopyEdit
function my_plugin_get_data() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'my_plugin_data';

    $results = $wpdb->get_results("SELECT * FROM $table_name", ARRAY_A);
    return $results;
}

6. إضافة Shortcode لعرض محتوى إضافي

واحدة من أقوى ميزات ووردبريس هي إمكانية إنشاء Shortcodes (رموز مختصرة) تسمح بإدخال محتوى ديناميكي في الصفحات أو المقالات.

مثال عملي على إنشاء Shortcode لعرض البيانات من جدول الإضافة:

php
CopyEdit
function my_plugin_shortcode_display() {
    $data = my_plugin_get_data();

    $output = '';
    $output .= '';

    foreach ($data as $row) {
        $output .= '';
        $output .= '';
        $output .= '';
        $output .= '';
    }

    $output .= '
الاسم
البريد الإلكتروني
' . esc_html($row['name']) . '
' . esc_html($row['email']) . '
';

    return $output;
}
add_shortcode('my_plugin_list', 'my_plugin_shortcode_display');

عند وضع رمز [my_plugin_list] داخل صفحة أو مقال، سيتم عرض جدول يحتوي على البيانات المسجلة.

7. تحميل ملفات CSS وJavaScript بشكل صحيح

لتحسين تجربة المستخدم، من المهم تحميل ملفات التنسيق والسكريبتات بشكل صحيح ومتوافق مع ووردبريس.

يتم تحميل ملفات CSS وJS في الأمام (واجهة الموقع) باستخدام wp_enqueue_scripts وفي لوحة التحكم باستخدام admin_enqueue_scripts.

مثال لتحميل الملفات في لوحة التحكم:

php
CopyEdit
function my_plugin_admin_scripts() {
    wp_enqueue_style('my-plugin-admin-style', plugin_dir_url(__FILE__) . 'assets/css/admin-style.css');
    wp_enqueue_script('my-plugin-admin-script', plugin_dir_url(__FILE__) . 'assets/js/admin-script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_plugin_admin_scripts');

8. تأمين الإضافة ضد الهجمات

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

• استخدام الدوال check_admin_referer وwp_nonce_field لضمان سلامة الطلبات.

• التأكد من صلاحيات المستخدمين باستخدام دالة current_user_can قبل السماح بإجراء تغييرات أو الوصول إلى إعدادات حساسة.

• تعقيم البيانات القادمة من المستخدم قبل تخزينها أو عرضها باستخدام دوال مثل sanitize_text_field وesc_html.

مثال على التحقق من صلاحيات وحماية:

php
CopyEdit
if (!current_user_can('manage_options')) {
    wp_die('ليس لديك الصلاحية للوصول إلى هذه الصفحة.');
}

check_admin_referer('my_plugin_settings_action', 'my_plugin_nonce');

9. استخدام AJAX في الإضافات

لإنشاء تجربة تفاعلية أكثر، يمكن استخدام AJAX لتحديث المحتوى بدون إعادة تحميل الصفحة.

مثال على استخدام AJAX لإضافة بيانات إلى قاعدة البيانات بدون تحديث الصفحة:

جافا سكريبت (script.js)

javascript
CopyEdit
jQuery(document).ready(function($){
    $('#my-plugin-form').on('submit', function(e){
        e.preventDefault();

        var name = $('#name').val();
        var email = $('#email').val();

        $.ajax({
            url: my_plugin_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'my_plugin_save_data',
                name: name,
                email: email,
                security: my_plugin_ajax_object.nonce
            },
            success: function(response) {
                alert(response.data);
            }
        });
    });
});

PHP (my-plugin.php)

php
CopyEdit
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-plugin-script', plugin_dir_url(__FILE__) . 'assets/js/script.js', array('jquery'), null, true);

    wp_localize_script('my-plugin-script', 'my_plugin_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('my_plugin_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_scripts');

function my_plugin_save_data_callback() {
    check_ajax_referer('my_plugin_nonce', 'security');

    if (!current_user_can('manage_options')) {
        wp_send_json_error('لا تملك صلاحيات.');
    }

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);

    if (empty($name) || empty($email)) {
        wp_send_json_error('جميع الحقول مطلوبة.');
    }

    my_plugin_insert_data($name, $email);

    wp_send_json_success('تم حفظ البيانات بنجاح.');
}
add_action('wp_ajax_my_plugin_save_data', 'my_plugin_save_data_callback');

10. دعم الترجمة واللغات

من أفضل ممارسات برمجة الإضافات دعم الترجمة ليتمكن المستخدمون من استخدام الإضافة بلغتهم. يتم ذلك باستخدام دوال __() و_e() مع ملفات لغة بصيغة .po و.mo.

مثال:

php
CopyEdit
_e('إعدادات الإضافة', 'my-plugin-textdomain');

وبإنشاء ملفات الترجمة ووضعها في مجلد languages الخاص بالإضافة.

11. تحسين الإضافة لتوافق محركات البحث SEO

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

مثلًا:

• تحسين عناوين الصفحات والعناوين الفرعية.

• استخدام الوسوم الدلالية HTML الصحيحة.

• توفير خصائص alt للصور.

• تقليل تحميل السكربتات الغير ضرورية لتحسين سرعة الموقع.

12. اختبار الإضافة وتصحيح الأخطاء

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

تستطيع استخدام:

• WP_DEBUG لتشغيل وضع التصحيح في ووردبريس.

• أدوات تصحيح PHP مثل Xdebug.

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

13. تحديث الإضافة وصيانتها

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

جدول يوضح الفرق بين أنواع الـ Hooks في ووردبريس

الخاتمة

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

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