آموزش طراحی و ساخت افزونه وردپرس

مراحل ساخت افزونه در وردپرس

برای طراحی پلاگین سفارشی ابتدا باید یک نیاز مشخص را شناسایی کنید که پلاگین بتواند آن را برطرف کند. این نیاز می‌تواند یک ویژگی خاص باشد که در پلاگین‌های موجود پیدا نمی‌شود یا بهبود کارایی یک افزونه دیگر باشد. در ادامه در ۶ گام نحوه طراحی پلاگین سفارشی وردپرس را آموزش می دهیم:

• گام اول: تحقیق برای پیدا کردن ایده کاربردی

در حال حاضر بیش از ۵۵ هزار افزونه در مخزن وردپرس وجود دارد و اولین کاری که باید انجام دهید این است که کمی تحقیق کنید تا ببینید آیا ایده شما از قبل وجود دارد یا خیر. در صورتی که ایده شما وجود دارد باید امکانات بیشتری اضافه کنید و نسخه کامل تری ایجاد کنید.

همچنین می‌توانید وضعیت افزونه های موجود را بررسی کنید، اگر افزونه‌ای مدتی به روز نشده یا با آخرین نسخه وردپرس سازگار نیست، فرصتی برای ارائه محصول جدید وجود دارد. یک راه دیگر برای پیدا کردن ایده برای طراحی افزونه این است که تعداد نصب‌های افزونه‌های فعال نگاه کنید و به دنبال افزونه‌هایی باشید که بازار بهتری دارند، به عنوان مثال دسته افزونه‌های فروشگاهی یا امنیتی طرفداران زیادی دارد و می‌توانید به دنبال ایده هایی برای طراحی افزونه در این دسته باشید.

• گام دوم: فعال کردن یک محیط تست

مرحله بعدی برای ساخت افزونه وردپرس راه اندازی یک محیط تست است. اگر در ابتدای مسیر یادگیری طراحی افزونه هستید، نیازی به خرید هاست و دامنه ندارید، یک محیط لوکال بر روی سیستمی که دارید راه اندازی کنید. برای اینکار نیاز به نصب وردپرس، Xaamp و یک برنامه محیط توسعه مانند VScode دارید تا کدنویسی، نصب و تست افزونه‌ها را در سیستم تان انجام دهید، این برنامه ها رایگان هستند و نیازی به پرداخت هزینه این برنامه‌ها را نصب کنید.

• گام سوم : ایجاد پوشه و فایل‌های افزونه

در این مرحله از طراحی پلاگین وردپرس، یک پوشه برای افزونه خود در مسیر /wp-content/plugins/ ایجاد کنید. نام این پوشه باید به گونه‌ای باشد که به‌طور واضح نشان دهد افزونه شما چه کاربردی دارد. سپس در داخل این پوشه، یک فایل PHP ایجاد کنید که نقطه شروع کدنویسی افزونه شما باشد.

/wp-content/plugins/post-like-dislike/

همچنین یک فایل PHP به فرمت زیر ایجاد کنید:

post-like-dislike.php

• گام چهارم ساخت افزونه در وردپرس: افزودن اطلاعات هدر افزونه

داخل فایل PHP افزونه، باید اطلاعات پایه افزونه را قرار دهید تا وردپرس آن را شناسایی کند. این اطلاعات شامل نام افزونه، نویسنده و نسخه است که به صورت کامنت نوشته می شود.

مثال:

<?php
/**
 * Plugin Name: Post Like Dislike
 * Plugin URI: https://example.com/post-like-dislike
 * Description: A simple plugin to add like and dislike buttons to WordPress posts.
 * Version: 1.0
 * Author: Your Name
 * Author URI: https://example.com
 * License: GPL2
 */
*/

به صورت خلاصه اطلاعات این بخش به صورت زیر کامل می شود:

• Plugin Name: (اجباری) نام افزونه است که در داشبورد مدیریت وردپرس نمایش داده می‌شود.

• Plugin URI: (اختیاری) آدرس اینترنتی که کاربران می‌توانند اطلاعات بیشتری درباره افزونه پیدا کنند.

• Description: (اختیاری) توضیحات کوتاهی درباره عملکرد افزونه ارائه می‌دهد که در داشبورد مدیریت وردپرس نمایش داده می‌شود.

• Version: (اختیاری) نسخه فعلی افزونه. این فیلد به کاربران نشان می‌دهد که از چه نسخه‌ای استفاده می‌کنند.

• Author: (اختیاری) نام نویسنده یا تیم توسعه‌دهنده افزونه.

• Author URI: (اختیاری) آدرس اینترنتی مربوط به نویسنده یا توسعه‌دهنده.

• License: (اختیاری) نوع مجوز افزونه. وردپرس افزونه‌ها را با استفاده از مجوزهای متن‌باز مانند GPL2 قبول می‌کند.

• گام پنجم: نوشتن کد نویسی و دستورات مورد نیاز افزونه

حالا می‌توانید عملکرد افزونه را با کدنویسی php اضافه کنید. به عنوان مثال، یک تابع ساده که یک پیام به کاربران نمایش می‌دهد:

// Register scripts
function pld_register_scripts() {
    wp_enqueue_script(
        'pld-js',
        plugin_dir_url(__FILE__) . 'pld.js',
        array('jquery'),
        null,
        true
    );
    wp_localize_script(
        'pld-js',
        'pld_ajax',
        array(
            'ajax_url' => admin_url('admin-ajax.php')
        )
    );
}
add_action('wp_enqueue_scripts', 'pld_register_scripts');


// Add Like and Dislike buttons to post
function pld_add_buttons($content) {
    if (is_single()) {
        global $post;
        $post_id  = $post->ID;
        $likes    = get_post_meta($post_id, '_pld_likes', true) ?: 0;
        $dislikes = get_post_meta($post_id, '_pld_dislikes', true) ?: 0;
        $buttons = '
        <div class="pld-buttons">
            <button class="pld-like" data-id="' . esc_attr($post_id) . '">
                Like (' . intval($likes) . ')
            </button>
            <button class="pld-dislike" data-id="' . esc_attr($post_id) . '">
                Dislike (' . intval($dislikes) . ')
            </button>
        </div>';
        return $content . $buttons;
    }
    return $content;
}
add_filter('the_content', 'pld_add_buttons');


// Handle AJAX for Like and Dislike
function pld_handle_like_dislike() {
    if (!isset($_POST['post_id'], $_POST['action_type'])) {
        wp_send_json_error();
    }
    $post_id = intval($_POST['post_id']);
    $type    = sanitize_text_field($_POST['action_type']);
    if ($type === 'like') {
        $likes = get_post_meta($post_id, '_pld_likes', true) ?: 0;
        $likes++;
        update_post_meta($post_id, '_pld_likes', $likes);
        wp_send_json_success($likes);
    } elseif ($type === 'dislike') {
        $dislikes = get_post_meta($post_id, '_pld_dislikes', true) ?: 0;
        $dislikes++;
        update_post_meta($post_id, '_pld_dislikes', $dislikes);
        wp_send_json_success($dislikes);
    }
    wp_send_json_error();
}
add_action('wp_ajax_pld_like_dislike', 'pld_handle_like_dislike');
add_action('wp_ajax_nopriv_pld_like_dislike', 'pld_handle_like_dislike');

اگر بخواهیم به صورت خلاصه توابع استفاده شده را توضیح دهیم کاربرد هر تابع به صورت زیر است:

۱. pld_register_scripts:

این تابع برای ثبت و بارگذاری فایل‌های JavaScript در صفحات وردپرس استفاده می‌شود.

• wp_enqueue_script: این تابع فایل pld.js را در سایت بارگذاری می‌کند.

• wp_localize_script: این تابع یک آرایه PHP را به فایل جاوااسکریپت ارسال می‌کند، در اینجا URL مربوط به admin-ajax.php که برای AJAX ضروری است، ارسال می‌شود.

۲. pld_add_buttons:

این تابع دکمه‌های لایک و دیس‌لایک را به محتوای پست اضافه می‌کند.

• is_single(): بررسی می‌کند که آیا صفحه، پست تکی است یا خیر. این ویژگی به ما کمک می‌کند که دکمه‌ها تنها در صفحات پست‌ها نمایش داده شوند.

• get_post_meta: برای دریافت تعداد لایک‌ها و دیس‌لایک‌ها از متادیتای پست استفاده می‌شود.

• update_post_meta: این تابع تعداد لایک‌ها و دیس‌لایک‌ها را در متادیتای پست ذخیره می‌کند.

• return $content: در نهایت، محتوای پست با دکمه‌های لایک و دیس‌لایک بازگردانده می‌شود.

۳. pld_handle_like_dislike:

این تابع وظیفه مدیریت درخواست‌های لایک و دیس‌لایک از طریق AJAX را بر عهده دارد.

• $_POST[‘post_id’] و $_POST[‘action_type’]: از طریق AJAX، شناسه پست و نوع عمل (لایک یا دیس‌لایک) دریافت می‌شود.

• get_post_meta: تعداد فعلی لایک یا دیس‌لایک را از متادیتای پست دریافت می‌کند.

• update_post_meta: تعداد لایک یا دیس‌لایک را با یک واحد افزایش می‌دهد.

• wp_die(): برای پایان دادن به درخواست AJAX استفاده می‌شود تا اطلاعات به‌درستی به کاربر برگردد.

• گام ششم: ایجاد فایل JavaScript (AJAX)

برای ساخت افزونه در وردپرس، در همان پوشه اصلی افزونه، یک فایل با نام pld.js بسازید و کد زیر را در آن قرار دهید:

jQuery(document).ready(function($) {
    $('.pld-like, .pld-dislike').on('click', function() {
        var post_id = $(this).data('id');
        var action_type = $(this).hasClass('pld-like') ? 'like' : 'dislike';
        var button = $(this);
        $.ajax({
            type: 'POST',
            url: pld_ajax.ajax_url,
            data: {
                action: 'pld_like_dislike',
                post_id: post_id,
                action_type: action_type
            },
            success: function(response) {
                button.html(action_type.charAt(0).toUpperCase() + action_type.slice(1) + ' (' + response + ')');
            }
        });
    });
});

این فایل جاوا اسکریپت مسئول ارسال درخواست AJAX برای به‌روزرسانی تعداد لایک و دیس‌لایک است و کدهایی که استفاده شده را در ادامه توضیح می دهیم:

• $(‘.pld-like, .pld-dislike’).on(‘click’, function() {…}): این قسمت از کد به دکمه‌های لایک و دیس‌لایک متصل شده و هنگام کلیک روی دکمه‌ها، یک درخواست AJAX ارسال می‌کند.

• $.ajax(): این تابع برای ارسال درخواست به وردپرس و انجام عملیات لایک یا دیس‌لایک استفاده می‌شود.

• action: نوع عمل (لایک یا دیس‌لایک) و شناسه پست را به سرور ارسال می‌کند.

• success: در صورت موفقیت، تعداد لایک یا دیس‌لایک به‌روزرسانی می‌شود و در دکمه نمایش داده می‌شود.

گام هفتم: نصب و تست افزونه

برای فعال‌سازی افزونه، به داشبورد وردپرس بروید، به بخش افزونه‌ها بروید و افزونه خود را پیدا کنید. سپس روی فعال‌سازی کلیک کنید.

برای استفاده از افزونه Like و Dislike که در این مقاله آموزش داده شد، کافی است مراحل زیر را دنبال کنید:

ابتدا فایل PHP افزونه را با نامی مانند post-like-dislike.php ایجاد کنید و آن را داخل پوشه‌ای با همین نام در مسیر /wp-content/plugins/ با نام post-like-dislike قرار دهید. سپس وارد داشبورد وردپرس شوید، به بخش افزونه‌ها بروید و افزونه را فعال کنید.

ایجاد پوشه افزونه:

ایجاد فایل های افزونه:

در مرحله بعد، یک فایل جاوااسکریپت به نام pld.js در همان پوشه افزونه بسازید و کد مربوط به مدیریت کلیک دکمه‌ها و ارسال درخواست AJAX را داخل آن قرار دهید. این فایل به کمک تابع wp_enqueue_script که در افزونه تعریف شده، به سایت شما اضافه می‌شود.

پس از فعال‌سازی افزونه و اضافه کردن فایل JS، دکمه‌های Like و Dislike به صورت خودکار در پایان هر پست نمایش داده می‌شوند و کاربران می‌توانند با کلیک روی آن‌ها امتیازدهی کنند. تعداد لایک‌ها و دیس‌لایک‌ها به صورت زنده به‌روزرسانی شده و نمایش داده می‌شوند.

با استفاده از این روش می‌توانید تعامل کاربران با محتواهای سایت خود را افزایش دهید و بازخوردهای بیشتری از مطالب دریافت کنید.

گام هشتم: بهینه‌سازی و اصلاح افزونه

پس از اتمام کدنویسی افزونه، باید آن را تست کنید و مطمئن شوید که به درستی کار می‌کند. حتما افزونه را از لحاظ امنیتی و سازگاری با وردپرس بررسی کنید

پیش‌نیازها برای ساخت افزونه وردپرس

برای ساخت افزونه در وردپرس نیاز است تا مهارت های زیر را تسلط داشته باشید:

۱. زبان PHP؛

• تسلط بر PHP: زبان PHP اصلی‌ترین زبان برنامه‌نویسی وردپرس است. شما باید به خوبی با ساختارهای کنترل، توابع، کلاس‌ها، و متغیرها در PHP آشنا باشید تا بتوانید منطق افزونه خود را به درستی پیاده‌سازی کنید.

• آشنایی با توابع و هوک‌های وردپرس: وردپرس از تعداد زیادی توابع و هوک (Hooks) استفاده می‌کند و به شما امکان می‌دهند تا به صورت پویا و بدون تغییر در هسته وردپرس، ویژگی‌های جدید اضافه کنید.

۲. HTML ،CSS و جاوااسکریپت

• HTML و CSS: باید با HTML و CSS برای ساخت فرم‌ها، صفحات تنظیمات و نمایش عناصر بصری آشنا باشید.

• جاوااسکریپت و jQuery: برای ایجاد تعاملات پویا و افزایش عملکرد افزونه (مانند بارگذاری اییجکس)، باید با جاوااسکریپت و فریم‌ورک‌هایی مانند jQuery آشنایی داشته باشید.

۳. وردپرس API و معماری وردپرس

• آشنایی با API وردپرس: وردپرس دارای چندین API مختلف است که به شما کمک می‌کند افزونه‌های خود را توسعه دهید.

• ساختار فایل‌ها و توابع وردپرس: شناخت ساختار فایل‌های وردپرس، مانند فایل functions.php، و نحوه کارکرد حلقه وردپرس (WordPress Loop) به شما کمک می‌کند افزونه‌های سازگار و کارآمدی بسازید.

۴. پایگاه داده (MySQL)

کار با پایگاه داده: وردپرس از MySQL برای ذخیره‌سازی داده‌ها استفاده می‌کند. شما باید توانایی کار با پایگاه داده‌ها، انوشتن کوئری‌های SQL و آشنایی با توابع دیتابیسی وردپرس (مانند wpdb) را داشته باشید.

۵. امنیت در وردپرس

آشنایی با مسائل امنیتی: یکی از الزمات در ساخت افزونه های وردپرس این است که افزونه‌های شما باید از نظر امنیتی قوی باشند. برای این کار، باید با روش‌های جلوگیری از حملات XSS، CSRF، و SQL Injection آشنا باشید و افزونه تان را از نظر آسیب‌ها و باگ‌های امنیتی شناسایی کنید.

شروع آموزش افزونه نویسی نمایش و مدیریت تبلیغات در بالای سایت