+۱۰ نکته که باید درباره پلاگین نویسی وردپرس بدانید!

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

آبراهام لینکلن جمله زیبایی دارد:

 اگر به من ۶ ساعت وقت بدهید که درختی را قطع کنم، چهار ساعت اول آن را صرف تیز کردن تبرم می‌کنم.

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

به همین دلیل در این پست آموزشی می خواهیم سرنخ ها را به شما معرفی کنیم تا بدانید که برای هر کاری به دنبال چه چیزی باشید، فعلا با ۱۰ نکته کار را شروع می کنیم:

۱- ایجاد افزونه (Create Plugin)

اولین کاری که در فرآیند توسعه پلاگین باید انجام دهید ایجاد یک دایرکتوری در داخل wp-content/plugins/ است، دایرکتوری plugins مکانی است که کلیه پلاگین های نصب شده وردپرس در آنجا نگهداری و مدیریت می شود. بهتر است در نامگذاری فولدر و فایل اصلی افزونه کلمات مستقل را با hyphens (-) از یکدیگر جدا کنید، این شیوه نامگذاری اجباری نیست اما به عنوان روشی مناسب(Best Practice) در بین توسعه دهندگان پلاگین پذیرفته شده است.

  • مثال: دایرکتوری wp-dream-gallery و فایل اصلی wp-dream-gallery.php

به عنوان یک نمونه واقعی افزونه wp-rollback هم از این شیوه نامگذاری استفاده کرده است.

شیوه نامگذاری ساختار افزونه وردپرس

حالا برای اینکه افزونه شما توسط وردپرس قابل شناسایی باشد باید نام، نویسنده، نسخه، توضیحات افزونه را به صورت کامنت در بالای فایل اصلی مشخص کنید، به این اطلاعات اصطلاحا Plugin Header Comment می گویند.

<?php 
/* 
   Plugin Name: WordPress Dream Gallery
   Plugin URI: https://startuptuts.com
   Description: Share your dream photos in the internet world 
   Version: 1.0 
   Author URI: https://startuptuts.com
   Author: Saeid Yavarnia 
   License: GPLv2 
*/

 

پس از ذخیره تغییرات می توانید افزونه را از قسمت افزونه های نصب شده در پنل مدیریتی وردپرس مشاهده کنید.

مدیریت افزونه ها در وردپرس

حالا برای تامین امنیت افزونه شرط زیر را در فایل اصلی قرار دهید.

if ( !defined( 'ABSPATH' ) ) {
    die( 'You can\'t access this file!' );
}

 

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

۲- قلاب های پایه (Basic Hooks)

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

پلاگین  وردپرس هم از این قاعده مستثنی نیست و برای سه اکشن فعال، غیرفعال و پاک کردن افزونه هوک های لازم را در اختیارتان قرار می دهد.

۱-۲- فعال سازی افزونه (Plugin Activation Hook)

یک افزونه با کلیک بر روی لینک “فعال کردن” در لیست افزونه ها عملیاتی می شود، پلاگین های ساده معمولا از این اکشن استفاده ای نمی کنند، اما افزونه های پیچیده و حرفه ای کارهایی مثل ایجاد جداول، مقداردهی اولیه تنظیمات افزونه و اعتبارسنجی های لازم را انجام می دهند.

وردپرس برای هندل کردن این موضوع تابع register_activation_hook را فراهم کرده است، کافی است یک تابع سفارشی ایجاد کرده و به این هوک معرفی کنید. در مثال زیر می خواهیم پس از فعال سازی افزونه یک “پست تایپ” جدید با نام gallery به وردپرس اضافه کنیم.

function wp_dream_gallery_post_type() {
    register_post_type( 'gallery', array(
        'public' => true,
        'labels' => array(
            'name' => 'گالری تصاویر',
            'add_new' => 'افزودن گالری',
        ),
        'menu_icon' => 'dashicons-images-alt2'
    ));
}
add_action( 'init', 'wp_dream_gallery_post_type' );
 
function wp_dream_gallery_activation() {
    wp_dream_gallery_post_type();
    flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'wp_dream_gallery_activation' );

 

معمولا پس از ایجاد یک Post Type باید پیوندهای یکتا(Permalinks) را از قسمت تنظیمات وردپرس بروزرسانی یا ذخیره مجدد کنید، اما کاربری که افزونه ما را نصب می کند از این موضوع بی اطلاع بوده و با خطای ۴۰۴ مواجه خواهد شد، به همین دلیل از تابع flush_rewrite_rules در فرآیند فعال سازی افزونه استفاده شده است.

مقدار __FILE__ هم به فایل اصلی پلاگین اشاره می کند، بهتر است عملیات فعال سازی افزونه را در فایل اصلی انجام دهید، در نهایت خروجی کار بدین صورت خواهد بود.

هوک فعال سازی افزونه در وردپرس

۲-۲- غیرفعال کردن افزونه (Plugin Deactivation Hook)

برای غیرفعال سازی افزونه می توانید از تابع register_deactivation_hook استفاده کنید، توضیحات این قسمت مشابه هوک فعال سازی است. به عنوان مثال در کد زیر می خواهیم “پست تایپ” گالری را غیرفعال کنیم.

function wp_dream_gallery_deactivation() {
    unregister_post_type( 'gallery' );
    flush_rewrite_rules();
}
register_deactivation_hook( __FILE__, 'wp_dream_gallery_deactivation' );

 

در هوک غیرفعال سازی به هیچ عنوان اطلاعات جداول و تنظیمات افزونه را حذف نکنید، چرا که ممکن است کاربر مجددا افزونه را فعال کرده و از آن استفاده کند.

۳-۲- پاک کردن افزونه (Plugin Uninstall Hook)

در این مرحله می توانید کلیه اطلاعات افزونه(جداول، تنظیمات و…) را با خیال راحت پاک سازی کنید، معمولا توسعه دهندگان کم تجربه این عملیات را در هوک غیرفعال سازی انجام می دهند که کاملا اشتباه است. برای این منظور تابع register_uninstall_hook را به صورت زیر فراخوانی نمائید.

function wp_dream_gallery_uninstall_hook() {
  // Remove plugin tables and configurations ...
}
register_uninstall_hook( __FILE__, 'wp_dream_gallery_uninstall_hook' );

۳- ایجاد جداول سفارشی (Create Custom Tables)

ساختار جداول پایگاه داده وردپرس بسیار انعطاف پذیر است و شما می توانید بسیاری از ویژگی های سفارشی خود را با همین جداول موجود پیاده سازی کنید. اما گاهی اوقات افزونه شما آنقدر کامل و پیچیده است که بهتر است برای آن جداول اختصاصی در نظر بگیرید، به عنوان مثال افزونه هایی مثل Yoast SEO و WooCommerce از این قابلیت استفاده می کنند.

پس در ابتدا نیازمندی های افزونه را بررسی کرده و تا آنجایی که امکان دارد از جدول wp_options و جداول متا برای ذخیره اطلاعات خاص پروژه استفاده کنید، اگر احساس کردید که جداول فوق جوابگوی نیازتان نیست آنگاه از روش زیر استفاده کنید.

function wp_dream_gallery_create_table() {
    
    global $wpdb;
    $table_name = $wpdb->prefix . 'gallery_base';
    $sql = "CREATE TABLE $table_name (
      id int(9) NOT NULL AUTO_INCREMENT,
      title varchar(255) NOT NULL,
      description text NOT NULL,
      status boolean DEFAULT FALSE NOT NULL,
      PRIMARY KEY  (id))";
    
    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta( $sql );
}
register_activation_hook( __FILE__, 'wp_dream_gallery_create_table' );

 

همانطور که می دانید عنوان جداول وردپرس به صورت پیش فرض با “_wp” شروع می شود، اما این مقدار در فرآیند نصب وردپرس یا از طریق فایل کانفیگ وردپرس قابل تغییر است، بنابراین در ابتدای کار به کمک wpdb->prefix$ مقدار فوق را بدست آوردیم که می تواند به ازای هر نصب متفاوت باشد. لازم است بدانید که wpdb شامل مجموعه ای از توابع می باشد که به منظور برقراری ارتباط با پایگاه داده وردپرس استفاده می شود.

پس از آن ساختار جدول را با دستورات SQL تعریف می کنیم. برای اینکه تابع dbDelta قابل استفاده باشد فایل upgrade.php را فراخوانی کردیم. تابع dbDelta ابتدا وجود جدول را در بانک اطلاعاتی بررسی می کند، اگر موجود باشد تغییرات جدید را اعمال کرده در غیر این صورت آن را ایجاد می کند.

ایجاد جدول در وردپرس با کلاس wpdb

۴- فراخوانی فایل های JS و CSS

اگر می خواهید در افزونه خود از جاوا اسکریپت و CSS استفاده کنید بهتر است به صورت اصولی اینکار را انجام دهید، برای این منظور ابتدا در دایرکتوری افزونه یک فولدر به نام assets ایجاد نمائید، سپس در داخل assets دو فولدر به نام های js و css ایجاد کرده و فایل های مربوطه را در آنها قرار دهید.

حالا اکشن wp_enqueue_scripts را بدین صورت فراخوانی می کنیم.

function wp_dream_gallery_scripts(){
    wp_enqueue_script( 'wp_dream_script', plugin_dir_url(__FILE__) . 'assets/js/scripts.js',
                       array('jquery'), '1.0.0', true );
    
    wp_enqueue_style( 'wp_dream_style', plugin_dir_url(__FILE__) . 'assets/css/styles.css',
                       array(), '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'wp_dream_gallery_scripts' );

 

رعایت چند نکته در این بخش الزامی است:

  1. اگر می خواهید از فایل های JS و CSS در بخش ادمین وردپرس(Backend) استفاده کنید به جای wp_enqueue_scripts اکشن admin_enqueue_scripts را فراخوانی کنید، کد بالا در بخش کاربری سایت(Frontend) بارگذاری خواهد شد.
  2. فایل های جاوااسکریپت در تابع wp_enqueue_script و CSS در wp_enqueue_style معرفی شوند.
  3. در صورتی که اسکریپت های افزونه به کتابخانه jquery وابستگی دارند، در آرگومان چهارم تابع wp_enqueue_script این موضوع را مشخص کنید.
  4. آرگومان آخر تابع wp_enqueue_script را true قرار دادیم تا کدهای js در فوتر سایت لود شوند.

و در نهایت پیشنهاد می کنیم حتما مطلب آموزشی روش صحیح استفاده از jQuery در وردپرس را مطالعه فرمائید.

۵- کدهای کوتاه (Shortcodes)

تامین امنیت وب سایت یکی از چالش هایی است که برای وردپرس از اهمیت ویژه ای برخوردار است، به همین دلیل نمی توانید کدهای PHP را مستقیما در داخل محتوا فراخوانی کنید، اما وردپرس به جای اینکه صورت مسئله را پاک کند راه حل مناسبی ارائه می دهد و آن هم استفاده از شورت کد است.

به عبارت دیگر Shortcode اسکریپت های PHP هستند که شما به عنوان یک توسعه دهنده در داخل افزونه یا قالب وب سایت تعریف می کنید، سپس کاربر نهایی بدون اینکه درگیر پیچیدگی های برنامه نویسی شود قادر خواهد بود از این امکانات و قابلیت ها در هر جایی که نیاز دارد استفاده کند.

برای پیاده سازی این ویژگی ارزشمند تابع add_shortcode را در داخل اکشن init به صورت زیر فراخوانی نمائید.

function wp_dream_gallery_shortcode( $atts = [], $content = null ) {
    extract( shortcode_atts( array(
        'link' => 'link'
    ), $atts ) );
    return '<a href="' . esc_attr($link) . '" 
                       class="btn btn-danger text-white" target="_blank">' . $content . '</a>';
}

function wp_dream_gallery_shortcodes_init() {
    add_shortcode( 'dream-link', 'wp_dream_gallery_shortcode' );
}

add_action( 'init', 'wp_dream_gallery_shortcodes_init' );

 

در این مثال کاربر نهایی به کمک شورت کد dream-link می تواند لینک و متن موردنظر خود را به افزونه ارسال کند، آرایه atts$ پارامتری است که این مقادیر را دریافت می کند، پارامتر content$ هم محتوایی است که در بین شورت کد قرار می گیرد.

شیوه فراخوانی dream-link نیز بدین صورت می باشد.

ایجاد شورت کد در وردپرس

روش های مختلفی برای تعریف شورت کد وجود دارد که سعی می کنیم در مطلبی جداگانه به آن بپردازیم.

۶- فیلتر محتوا (Filtering Content)

در ابتدای این آموزش مفهوم Hook یا قلاب را بررسی کردیم، حالا باید بدانید وردپرس از دو نوع هوک استفاده می کند، Action و Filter. اکشن ها بیشتر جنبه عملیاتی دارند، مثل اضافه و حذف کردن اطلاعات از جداول وردپرس، لود فایل های JS، CSS و … این نوع هوک به کمک تابع add_action به چرخه پردازشی وردپرس اضافه می شود.

نوع دیگر هوک فیلترها هستند که در نقش یک صافی عمل می کنند، اطلاعات را دریافت کرده، تغییر داده و بر میگردانند، برای افزودن فیلتر باید از تابع add_filter استفاده کنید.

function wp_dream_last_updated_post($content)
{
    $last_date = '';
    $u_time = get_the_time('U');
    $u_modified_time = get_the_modified_time('U');
    if ($u_modified_time >= $u_time + 86400) {
        $last_date = "<p class='last-updated'>آخرین بروزرسانی : ";
        $last_date .= get_the_modified_time('l, j F , Y');
        $last_date .= "</p> ";
    }
    return $last_date . $content;
}

add_filter( 'the_content', 'wp_dream_last_updated_post' );

 

در قطعه کد بالا زمانی که صفحه یا نوشته ای مشاهده می شود فیلتر the_content محتوا را به wp_dream_last_updated_post ارسال می کند، این تابع آخرین تاریخ بروزرسانی مطلب را به ابتدای محتوا اضافه کرده و برگشت می دهد. نمونه دیگری از پیاده سازی فیلتر را می توانید در مطلب چگونه اکانت اینستاگرام و لینکدین را به پروفایل وردپرس اضافه کنیم؟ و مقابله با اسپم در وردپرس: حذف فیلد وبسایت از فرم ارسال نظر مشاهده کنید.

۷- استفاده از نانس (Using Nonce)

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

اگر افزونه شما به کاربرانتان اجازه می دهد داده های خود را به Backend وردپرس ارسال کنند در این وضعیت حتما و حتما باید نانس را در افزونه خود پیاده سازی کنید. در پست آموزشی امنیت وردپرس: نانس(Nonce) دیواری محکم در مقابل حملات CSRF به تفصیل در این باره صحبت کردیم و هر آنچه اینجا بنویسیم تکرار مکررات است.

۸- کار با ایجکس (Working with Ajax)

بی شک جاوا اسکریپت نقش بسیار مهم و تاثیرگذاری در توسعه پلاگین های وردپرس دارد، اما کار با جاوا اسکریپت آن هم به صورت Pure کاری بسیار سخت و پیچیده است. خوشبختانه این امکان وجود دارد که به راحتی از کتابخانه قدرتمند JQuery و مخصوصا فراخوانی های Ajax آن در وردپرس استفاده کنید.

برای درک بهتر موضوع در قالب یک مثال می خواهیم تعداد پست های منتشر شده(Publish) وب سایت را به صورت ایجکسی از وردپرس دریافت کرده و در کنسول مرورگر نمایش دهیم، مراحل اینکار را در چندین گام بررسی می کنیم:

گام ۱- بدست آوردن تعداد پست ها

function wp_dream_ajax_post_count()
{
    $count_posts = wp_count_posts();
    if ( $count_posts ) {
        $published_posts = $count_posts->publish;
    }
    echo $published_posts;
    wp_die();
}

add_action( 'wp_ajax_wp_dream_ajax_post_count', 'wp_dream_ajax_post_count' );

 

ابتدا توسط تابع wp_count_posts تعداد پست های منتشر شده را بدست می آوریم، سپس به ابتدای نام wp_dream_ajax_post_count رشته “_wp_ajax” را اضافه کرده و به عنوان آرگومان اول تابع add_action ارسال می کنیم. توجه داشته باشید که وردپرس برای فراخوانی های Ajax به صورت زیر عمل می کند، به جای * نام تابع سفارشی خود را قرار دهید:

  1. *_wp_ajax : برای کاربرانی که به وب سایت لاگین کردند(Logged-In).
  2. *_wp_ajax_nopriv : برای کاربرانی که لاگین نکردند(Logged-Out).

گام ۲- ایجاد فایل ajax-post-count.js در مسیر assets/js مربوط به پلاگین.

(function ($) {

    var data = {
        'action': ajax_object.ajax_action
    };

    $.ajax({
        url: ajax_object.ajax_url,
        data: data,
        type: 'post',
        success: function ( response ) {
            console.log( 'Publish Post Count : ' + response );
        }
    });
    
})(jQuery);

 

مقادیر ajax_action و ajax_url در گام سوم تنظیم خواهد شد، نام تابع wp_dream_ajax_post_count که در گام اول ایجاد کردیم در متغیر ajax_action و مقدار admin-ajax.php که مربوط به هسته وردپرس است در متغیر ajax_url قرار می گیرد.

گام ۳- ذخیره متغیرها و بارگذاری فایل جاوا اسکریپت مربوط به گام دوم.

function wp_dream_ajax_enqueue() {
    wp_enqueue_script( 'ajax-script', plugin_dir_url(__FILE__) . '/assets/js/ajax-post-count.js',
                       array('jquery') );
    wp_localize_script( 'ajax-script', 'ajax_object',
        array( 'ajax_url' => admin_url('admin-ajax.php'),
            'ajax_action' => 'wp_dream_ajax_post_count',
            'ajax_nonce' => wp_create_nonce('ajax-none')) );
}

add_action( 'admin_enqueue_scripts', 'wp_dream_ajax_enqueue' );

 

در این مرحله برای اینکه بتوانیم از طریق جاوا اسکریپت به متغیرهای وردپرس دسترسی داشته باشیم توسط تابع wp_localize_script مقادیرشان را در سورس صفحه وب ذخیره کردیم. برای بررسی این موضوع کافی است از گزینه View Page Source مرورگر وب استفاده کنید، خروجی چیزی شبیه به این خواهد بود.

گام ۴- کار تمام است، Developer Tools مرورگر(F12) را باز کرده و خروجی نهایی را چک کنید.

۹- کوئری های SQL

روشهای متعددی برای کار با پایگاه داده وردپرس وجود دارد که مهمترین آنها کلاس WP_Query و توابعی مثل wp_insert_post، update_post_meta و get_posts می باشد. اما گاهی اوقات توابع فوق نیاز ما را برطرف نمی کنند و باید خودمان دست به کار شویم. خوشبختانه وردپرس برای هر چیزی راه حلی دارد و آن هم استفاده از کلاس wpdb است، به کمک wpdb می توانید هر گونه پرس و جویی را مستقیما بر روی بانک اطلاعاتی اجرا نمائید.

در مثال زیر یک کوئری ساده را با استفاه از wpdb پیاده سازی کردیم.

global $wpdb;
$result = $wpdb->get_results( 'SELECT * FROM ' . $wpdb->prefix . 'posts WHERE post_type = "post" LIMIT 5' );

 

در مثال زیر نیز نمونه ای از Insert را مشاهده می کنید.

global $wpdb;
$post_id = sanitize_text_field( $_POST['post_id'] );
$meta_key = sanitize_text_field( $_POST['meta_key'] );
$meta_value = sanitize_text_field( $_POST['meta_value'] );
$wpdb->query( $wpdb->prepare(" INSERT INTO $wpdb->postmeta ( post_id, meta_key, meta_value )
                               VALUES ( %d, %s, %s )",
                               $post_id, $meta_key, $meta_value) );

۱۰- فیلدهای سفارشی (Custom Fields)

وردپرس در فرم ایجاد پست یا صفحه فیلدهایی مثل عنوان نوشته، خلاصه، تصویر شاخص و … را در اختیارمان قرار می دهد، اما گاهی اوقات لازم است تا اطلاعات بیشتری از کاربر دریافت کنیم، مثلا عنوان کتاب، تعداد صفحات کتاب، قیمت و …. در این مواقع تنها راهکاری که می توانید پیاده سازی کنید فیلدهای سفارشی هستند.

برای اطلاعات بیشتر پیشنهاد می کنیم مطلب آموزشی چگونه از زمینه های دلخواه(Custom Fields) استفاده کنیم؟ را مطالعه فرمائید.

جمع بندی

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

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *