مقدمة لتطوير البرنامج المساعد WordPress: قم ببناء المكون الإضافي الأول الخاص بك

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

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

جدول المحتويات

إنشاء بيئة تنمية محلية

قبل كتابة سطر واحد من التعليمات البرمجية ، تحتاج إلى بيئة محلية WordPress. WordPress Studio هي أسرع طريقة للبدء. الاستوديو مفتوح المصدر ، يحتفظ به بواسطة Automattic ، ومصمم لتطوير WordPress سلس.

اتبع هذه الخطوات:

الخطوة 1: تنزيل وتثبيت الاستوديو

يزور Developer.wordpress.com/studio وقم بتنزيل المثبت لـ MacOS أو Windows.

الخطوة 2: إنشاء أول موقع محلي لك

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

الخطوة 3: افتح موقع WordPress الخاص بك وقسم المسؤول الخاص به

انقر على رابط “فتح الموقع” لفتح موقعك في المتصفح. يمكنك أيضًا النقر فوق الزر “WP Admin” في Studio للوصول إلى لوحة معلومات موقعك AT /WP-ADMIN. سيتم تسجيل الدخول تلقائيًا كمسؤول. هذا هو المكان الذي ستدير فيه الإضافات ووظائف الاختبار وتكوين الإعدادات.

الخطوة 4: افتح الرمز في IDE الخاص بك

يوفر الاستوديو أزرار مريحة “Open in …” التي تكتشف محرر الرمز المثبت (مثل الكود المرئي أو المؤشر) ويتيح لك فتح مشروعك في المحرر المفضل لديك. يمكنك تكوين محرر الرمز الافتراضي في إعدادات الاستوديو. بمجرد فتحها في محرر الرمز الخاص بك ، سيكون لديك وصول كامل إلى Browse ، وتحرير ، وتصحيح ملفات تثبيت WordPress.

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

wp-content/
  └── plugins/

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

إنشاء البرنامج المساعد الأول الخاص بك

يبدأ كل مكون إضافي كمجلد مع ملف PHP واحد على الأقل. دعنا نبني مكونًا إضافيًا “Hello World” الحد الأدنى لإزالة الغموض عن هذه العملية.

1. في wp-content/plugins/، قم بإنشاء مجلد يسمى quick-reading-time.
2. داخل هذا المجلد ، قم بإنشاء ملف مسمى quick-reading-time.php.

يجب أن تبدو بنية الملف الخاصة بك هكذا:

wp-content/
  └── plugins/
    └── quick-reading-time/
      └── quick-reading-time.php

أضف الرمز التالي إلى quick-reading-time.php:

<?php
/*
Plugin Name: Quick Reading Time
Description: Displays an estimated reading-time badge beneath post titles.
Version:     1.0
Author:      Your Name
License:     GPL-2.0+
Text Domain: quick-reading-time
*/

هذا الرأس عبارة المكونات الإضافية → الإضافات المثبتة. قم بتفعيله – لا يحدث شيء حتى الآن (هذا جيد ؛ لا شيء مكسور).

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

فهم السنانير: الإجراءات والمرشحات

تتفاعل WordPress Plugins مع الأحداث الأساسية باستخدام السنانير. هناك نوعان:

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

دعنا نضيف شارة وقت القراءة باستخدام ال the_content فلتر:

function qrt_add_reading_time( $content ) 
    // Only on single posts in the main loop
    if ( ! is_singular( 'post' ) 
add_filter( 'the_content', 'qrt_add_reading_time' );

يضيف هذا المقتطف شارة وقت القراءة لنشر المحتوى باستخدام the_content فلتر. يتحقق من السياق مع is_singular()و in_the_loop()، و is_main_query() لضمان ظهور الشارة فقط على منشورات واحدة في الحلقة الرئيسية.

رمز شرائط HTML و shortcodes باستخدام wp_strip_all_tags() و strip_shortcodes()، يحسب الكلمات ، ويقدر وقت القراءة. الإخراج مترجمة مع esc_attr__() و _n(). الوظيفة مسجلة مع add_filter().

مع تنشيط هذا البرنامج المساعد ، ستعرض كل منشور الآن أيضًا وقت القراءة:

تحميل الأصول طريقة WordPress

لتصميم شارتك ، enqueue ورقة الأنماط باستخدام wp_enqueue_scripts فعل:

function qrt_enqueue_assets() 
    wp_enqueue_style(
        'qrt-style',
        plugin_dir_url( __FILE__ ) . 'style.css',
        array(),
        '1.0'
    );

add_action( 'wp_enqueue_scripts', 'qrt_enqueue_assets' );

إنشاء style.css ملف في نفس المجلد:

.qrt-badge span 
    margin: 0 0 1rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    background: #f5f5f5;
    color: #555;
    font-size: 0.85em;
    border-radius: 4px;

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

مع هذا التغيير ، يجب أن تبدو معلومات وقت القراءة في كل منشور مثل هذا:

اختياري: إضافة شاشة إعدادات

لجعل متوسط سرعة القراءة قابلاً للتكوين ، دعنا نضيف صفحة إعدادات وتوصيلها بمنطقنا الإضافي. سنقوم بتخزين قيمة الكلمات المفضلة للمستخدم لكل دقيقة (WPM) في جدول خيارات WordPress واستخدامها في حساب وقت القراءة لدينا.

الخطوة 1: تسجيل الإعداد

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

// Register the setting during admin_init.
function qrt_register_settings() 
    register_setting( 'qrt_settings_group', 'qrt_wpm', array(
        'type' => 'integer',
        'sanitize_callback' => 'qrt_sanitize_wpm',
        'default' => 200,
    ) );

add_action( 'admin_init', 'qrt_register_settings' );

// Sanitize the WPM value.
function qrt_sanitize_wpm( $value ) 
    $value = absint( $value );
    return ( $value > 0 ) ? $value : 200;

يسجل هذا الرمز خيار إضافي (qRT_WPM) للكلمات لكل دقيقة ، باستخدام register_setting() على admin_init خطاف. تم تطهير القيمة مع رد اتصال مخصص باستخدام absint() للتأكد من أنها عدد صحيح إيجابي.

الخطوة 2: أضف صفحة الإعدادات

أضف صفحة جديدة ضمن الإعدادات في مسؤول WordPress:

function qrt_register_settings_page() 
    add_options_page(
        'Quick Reading Time',
        'Quick Reading Time',
        'manage_options',
        'qrt-settings',
        'qrt_render_settings_page'
    );

add_action( 'admin_menu', 'qrt_register_settings_page' );

يضيف هذا الرمز صفحة إعدادات للمكون الإضافي الخاص بك ضمن قائمة “إعدادات” WordPress. يستخدم add_options_page() لتسجيل الصفحة ، وربط الوظيفة إلى admin_menu لذلك يظهر في لوحة القيادة. رد الاتصال (qrt_render_settings_page) سوف يخرج محتوى الصفحة.

الخطوة 3: تقديم صفحة الإعدادات

عرض نموذجًا لقيمة WPM وحفظه باستخدام API Settings:

function qrt_render_settings_page() 
    if ( ! current_user_can( 'manage_options' ) ) 
        return;
    
    ?>
    <div class="wrap">
        <h1><?php esc_html_e( 'Quick Reading Time Settings', 'quick-reading-time' ); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields( 'qrt_settings_group' );
            do_settings_sections( 'qrt_settings_group' );
            $wpm = get_option( 'qrt_wpm', 200 );
            ?>
            <table class="form-table" role="presentation">
                <tr>
                    <th scope="row">
                        <label for="qrt_wpm"><?php esc_html_e( 'Words Per Minute', 'quick-reading-time' ); ?></label>
                    </th>
                    <td>
                        <input name="qrt_wpm" type="number" id="qrt_wpm" value="<?php echo esc_attr( $wpm ); ?>" class="small-text" min="1" />
                        <p class="description"><?php esc_html_e( 'Average reading speed for your audience.', 'quick-reading-time' ); ?></p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php

تقوم هذه الوظيفة بإعداد صفحة إعدادات البرنامج المساعد ، مما يعرض نموذجًا لتحديث قيمة WPM. يتحقق من أذونات المستخدم مع current_user_can()، يخرج النموذج باستخدام settings_fields()و do_settings_sections()ويسترجع القيمة المحفوظة مع get_option(). ينشر النموذج إلى نظام خيارات WordPress للحفظ الآمن.

الخطوة 4: استخدم الإعداد في منطق البرنامج المساعد الخاص بك

قم بتحديث حساب وقت القراءة لاستخدام قيمة WPM المحفوظة:

function qrt_add_reading_time( $content ) 
    if ( ! is_singular( 'post' ) 

تضيف هذه الوظيفة شارة وقت القراءة لنشر المحتوى. يتحقق من السياق مع is_singular()و in_the_loop()، و is_main_query() لضمان تشغيله فقط على منشورات واحدة في الحلقة الرئيسية. يقوم بتشغيل HTML و Shortcodes باستخدام wp_strip_all_tags() و strip_shortcodes()) ، يحسب الكلمات ، ويسترجع قيمة WPM مع get_option(). الشارة هي الناتج مع الهروب المناسب والتوطين باستخدام esc_attr__()و esc_html()، و _n()).

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

رمز البرنامج المساعد الكامل

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

في هذه المرحلة ، يجب أن يكون لديك مجلد اسمه quick-reading-time داخل الخاص بك wp-content/plugins/ الدليل وملف يسمى quick-reading-time.php مع المحتوى التالي:

<?php
/*
Plugin Name: Quick Reading Time
Description: Displays an estimated reading-time badge beneath post titles.
Version:     1.0
Author:      Your Name
License:     GPL-2.0+
Text Domain: quick-reading-time
*/

// Register the WPM setting during admin_init.
function qrt_register_settings() 
    register_setting( 'qrt_settings_group', 'qrt_wpm', array(
        'type' => 'integer',
        'sanitize_callback' => 'qrt_sanitize_wpm',
        'default' => 200,
    ) );

add_action( 'admin_init', 'qrt_register_settings' );

// Sanitize the WPM value.
function qrt_sanitize_wpm( $value ) 
    $value = absint( $value );
    return ( $value > 0 ) ? $value : 200;


// Add a settings page under Settings.
function qrt_register_settings_page() 
    add_options_page(
        'Quick Reading Time',
        'Quick Reading Time',
        'manage_options',
        'qrt-settings',
        'qrt_render_settings_page'
    );

add_action( 'admin_menu', 'qrt_register_settings_page' );

// Render the settings page.
function qrt_render_settings_page() 
    if ( ! current_user_can( 'manage_options' ) ) 
        return;
    
    ?>
    <div class="wrap">
        <h1><?php esc_html_e( 'Quick Reading Time Settings', 'quick-reading-time' ); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields( 'qrt_settings_group' );
            do_settings_sections( 'qrt_settings_group' );
            $wpm = get_option( 'qrt_wpm', 200 );
            ?>
            <table class="form-table" role="presentation">
                <tr>
                    <th scope="row">
                        <label for="qrt_wpm"><?php esc_html_e( 'Words Per Minute', 'quick-reading-time' ); ?></label>
                    </th>
                    <td>
                        <input name="qrt_wpm" type="number" id="qrt_wpm" value="<?php echo esc_attr( $wpm ); ?>" class="small-text" min="1" />
                        <p class="description"><?php esc_html_e( 'Average reading speed for your audience.', 'quick-reading-time' ); ?></p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php


// Add the reading time badge to post content.
function qrt_add_reading_time( $content ) 
    if ( ! is_singular( 'post' ) 
add_filter( 'the_content', 'qrt_add_reading_time' );

// Enqueue the plugin stylesheet.
function qrt_enqueue_assets() 
    wp_enqueue_style(
        'qrt-style',
        plugin_dir_url( __FILE__ ) . 'style.css',
        array(),
        '1.0'
    );

add_action( 'wp_enqueue_scripts', 'qrt_enqueue_assets' );

يجب أن يكون لديك أيضًا ملف style.css ملف في نفس المجلد مع المحتوى التالي لتصميم الشارة:

.qrt-badge span 
    margin: 0 0 1rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    background: #f5f5f5;
    color: #555;
    font-size: 0.85em;
    border-radius: 4px;

يوضح هذا البرنامج المساعد العديد من المفاهيم الأساسية في تطوير WordPress:

• رأس البرنامج المساعد: يسجل Block Block في Top Plugin الخاص بك مع WordPress ، مما يجعله قابلاً للاكتشاف وقابل للإدارة من لوحة معلومات المشرف.
• السنانير: يستخدم البرنامج المساعد كلا الإجراءين (admin_initو admin_menuو wp_enqueue_scripts) ومرشح (the_content) للتكامل مع WordPress في اللحظات الصحيحة.
• الإعدادات API: من خلال تسجيل خيار مخصص وتقديم صفحة إعدادات ، يتيح المكون الإضافي لمسؤولي الموقع تكوين متوسط سرعة القراءة ، مما يجعل الميزة مرنة وسهلة الاستخدام.
• تطهير والأمن: يتم تطهير جميع مدخلات المستخدم ، ويتم هروب الإخراج ، واتباع أفضل الممارسات لمنع ثغرات الأمن.
• تحميل الأصول: يتم تحميل الأنماط باستخدام نظام Enqueue الخاص بـ WordPress ، مما يضمن التوافق والأداء.
• تدويل: يتم لف جميع السلاسل التي تواجه المستخدم في وظائف الترجمة ، مما يجعل المكون الإضافي جاهزًا للتوطين.

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

أفضل الممارسات لتطوير البرنامج المساعد

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

دعنا نستكشف المبادئ الأساسية التي تميزت عن تطوير البرنامج المساعد الاحترافي لـ WordPress.

• بادئة كل شيء (على سبيل المثال ، QRT_) لتجنب تصادم الاسم. WordPress هي مساحة اسم عالمية ، لذا فإن البادئات الفريدة للوظائف والفئات وحتى أسماء الخيارات تساعد في منع التعارض مع الإضافات الأخرى أو الموضوعات.
• الهروب والتطهير جميع الإخراج والمدخلات لمنع XSS ومشكلات الأمان. تحقق دائمًا من صحة البيانات وتنظيفها قبل حفظها في قاعدة البيانات أو عرضها في المتصفح. استخدام وظائف مثل esc_html()و esc_attr()، و sanitize_text_field() للحفاظ على آمن البرنامج المساعد الخاص بك.
• ترجمة السلاسل استخدام __()، و _n() للتوطين. يضمن التدويل (I18N) أن المكون الإضافي الخاص بك في متناول المستخدمين في جميع أنحاء العالم. لف جميع النص الذي يواجه المستخدم في وظائف الترجمة وقم بتوفير مجال نص.
• استخدم التحكم في الإصدار ((غيت) ومساعدون WP-Cli (wp scaffold pluginو wp i18n make-pot). التحكم في الإصدار هو شبكة الأمان الخاصة بك ، مما يتيح لك تتبع التغييرات والتعاون وتراجع الأخطاء. يمكن لأدوات WP-Cli أتمتة المهام المتكررة وفرض الاتساق.
• سفينة أ readme.txt لدليل البرنامج المساعد و changelog. يساعد ReadMe المكتوبة جيدًا للمستخدمين على فهم ميزات المكون الإضافي ، وخطوات التثبيت ، وتحديث السجل. هذا مطلوب أيضًا للتوزيع على WordPress.org.
• تصحيح الأخطاء: يُمكَِن WP_DEBUG واستخدام أدوات مثل شاشة الاستعلام لاستكشاف الأخطاء وإصلاحها. يسقط تصحيح الأخطاء الاستباقية مشكلات في وقت مبكر ، مما يسهل إصلاح وتحسين موثوقية المكون الإضافي الخاص بك.
• اتبع كتيب مطور البرنامج المساعد و معايير ترميز WordPress. هذه الموارد هي المعيار الذهبي لتطوير WordPress ، حيث تقدم إرشادات حول كل شيء من نمط الكود إلى الأمان.

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

الخطوات والموارد التالية

لديك الآن مكون إضافي يعمل يوضح السنانير الثلاثة “الذهبية”:

إلى أين تذهب بعد ذلك ، فإن حاجة إلى إضافة أنواع النشر المخصصة ((init) ، REST API endpoints ((rest_api_init) ، الأحداث المجدولة، أو كتل غوتنبرغ ((register_block_type). النموذج العقلي هو نفسه: ابحث عن الخطاف ، اكتب رد اتصال ، دع WordPress يقوم بتشغيله.

تبدأ رحلة البرنامج المساعد هنا

يبدأ كل مكون إضافي – سواء كان 40 كيلو بايت أو 40 ميجابايت – مع مجلد ورأس وخطاف. يتقن هذا الأساس ، وبقية النظام البيئي WordPress يفتح على نطاق واسع. التجربة محليا ، والحفاظ على الكود الخاص بك قابلة للقراءة وآمنة ، وتكرار في خطوات صغيرة. مع الممارسة ، تصبح القفزة من “أتمنى أن يكون WordPress …” إلى “WordPress” الطبيعة الثانية.

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