ساخت ابزارک سفارشی در وردپرس؛ آموزش کامل و قدم‌به‌قدم

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

قبل از شروع، حتماً از سایتتون نسخه پشتیبان بگیرید و کد رو اول روی سایت آزمایشی اجرا کنید. برای آشنایی با مدیریت ابزارک‌های آماده هم می‌تونید آموزش مدیریت ابزارک‌ها در وردپرس رو ببینید.

ابزارک سفارشی وردپرس چیه و چه کاربردی داره؟

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

ابزارک با بلوک وردپرس چه فرقی داره؟

بلوک‌ها قطعه‌های محتوایی هستن که داخل ویرایشگر نوشته، برگه یا ویرایشگر سایت قرار می‌گیرن. ابزارک‌ها برای ناحیه‌هایی طراحی شدن که قالب در اختیارشون می‌ذاره؛ مثل سایدبار و فوتر. در قالب‌های جدید، خیلی از ناحیه‌های ابزارک هم با بلوک‌ها مدیریت می‌شن، ولی ابزارک‌های قدیمی هنوز از راه بلوک Legacy Widget قابل استفاده‌ان.

قالب کلاسیک و قالب بلوکی چطور ابزارک‌ها رو مدیریت می‌کنن؟

در قالب کلاسیک معمولاً از مسیر «نمایش > ابزارک‌ها» به ابزارک‌ها دسترسی دارید. در قالب بلوکی، مدیریت بخش‌های مختلف سایت از مسیر «نمایش > ویرایشگر» انجام می‌شه و ناحیه‌هایی مثل سربرگ، فوتر و ستون کناری با بلوک‌ها ویرایش می‌شن. اسم گزینه‌ها ممکنه با توجه به نسخه وردپرس و قالب شما کمی فرق داشته باشه.

قبل از ساخت ابزارک سفارشی چه چیزهایی لازم دارید؟

• از سایتتون پشتیبان بگیرید و برای تست، یک سایت آزمایشی آماده کنید.
• برای قابلیت دائمی، یک افزونه اختصاصی بسازید. قرار دادن کد در فایل functions.php قالب هم ممکنه، ولی با تعویض قالب کدتون غیرفعال می‌شه.
• بررسی کنید قالب شما ابزارک‌های کلاسیک داره یا از ویرایشگر سایت استفاده می‌کنه.

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

برای ساخت ابزارک، یک کلاس بر پایه WP_Widget می‌سازیم. این کلاس سه بخش اصلی داره: متد widget برای خروجی سایت، متد form برای فرم پنل مدیریت و متد update برای ذخیره امن تنظیمات.

ساخت فایل افزونه اختصاصی برای ابزارک

داخل پوشه wp-content/plugins یک پوشه مثل mihanwp-welcome-widget بسازید و داخلش فایلی با نام mihanwp-welcome-widget.php ایجاد کنید. خط معرفی افزونه رو اول فایل قرار بدید تا وردپرس بتونه اون رو در فهرست افزونه‌ها بشناسه.

ساخت کلاس ابزارک با WP_Widget

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

تعریف عنوان و توضیحات ابزارک

عنوانی که در پنل ابزارک می‌بینید با عنوانی که بازدیدکننده در سایت می‌بینه یکی نیست. عنوان پنل رو در سازنده کلاس و عنوان قابل ویرایش رو در آرایه تنظیمات ابزارک قرار بدید.

ساخت خروجی ابزارک با متد widget

در متد widget، ابتدا before_widget و در پایان after_widget رو چاپ کنید تا HTML با ساختار قالب هماهنگ بمونه. عنوان رو هم با before_title و after_title نمایش بدید.

ساخت فرم تنظیمات با متد form

متد form فیلدهایی رو می‌سازه که مدیر سایت از پنل ابزارک‌ها پر می‌کنه. برای شناسه و نام فیلدها از get_field_id و get_field_name استفاده کنید تا چند نمونه از ابزارک بدون تداخل ذخیره بشن.

ذخیره امن تنظیمات با متد update

در متد update مقدار جدید رو دریافت کنید، با تابع مناسب پاک‌سازی کنید و فقط کلیدهایی رو ذخیره کنید که واقعاً بهشون نیاز دارید. برای متن ساده می‌تونید از sanitize_text_field استفاده کنید.

ثبت ابزارک با register_widget

در پایان، نام کلاس رو داخل تابع register_widget قرار بدید و این تابع رو به هوک widgets_init وصل کنید. با این کار وردپرس ابزارک رو در فهرست ابزارک‌ها ثبت می‌کنه.

کد کامل یک ابزارک خوشامدگویی و روش استفاده از اون

کد زیر یک ابزارک ساده می‌سازه که عنوان و متن خوشامدگویی رو از پنل مدیریت می‌گیره. متن داخل کد رو می‌تونید با نیاز سایتتون عوض کنید.

<?php
/**
 * Plugin Name: MihanWP Welcome Widget
 * Description: یک ابزارک ساده برای نمایش پیام خوشامدگویی
 * Version: 1.0.0
 * Author: میهن وردپرس
 * Text Domain: mihanwp-welcome-widget
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

class MihanWP_Welcome_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'mihanwp_welcome_widget',
            'ابزارک خوشامدگویی میهن وردپرس',
            array(
                'description' => 'نمایش پیام خوشامدگویی در ناحیه ابزارک‌ها',
            )
        );
    }

    public function widget( $args, $instance ) {
        $title = ! empty( $instance['title'] )
            ? $instance['title']
            : 'خوش اومدید';

        $message = ! empty( $instance['message'] )
            ? $instance['message']
            : 'از دیدنتون خوشحالیم.';

        echo $args['before_widget'];
        echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
        echo '<p>' . esc_html( $message ) . '</p>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title   = isset( $instance['title'] ) ? $instance['title'] : 'خوش اومدید';
        $message = isset( $instance['message'] ) ? $instance['message'] : 'از دیدنتون خوشحالیم.';
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">عنوان</label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>">پیام</label>
            <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'message' ) ); ?>"><?php echo esc_textarea( $message ); ?></textarea>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        return array(
            'title'   => isset( $new_instance['title'] ) ? sanitize_text_field( $new_instance['title'] ) : '',
            'message' => isset( $new_instance['message'] ) ? sanitize_textarea_field( $new_instance['message'] ) : '',
        );
    }
}

function mihanwp_register_welcome_widget() {
    register_widget( 'MihanWP_Welcome_Widget' );
}
add_action( 'widgets_init', 'mihanwp_register_welcome_widget' );

فایل رو ذخیره کنید، از پنل وردپرس وارد «افزونه‌ها» بشید و افزونه ابزارک رو فعال کنید. بعد از فعال‌سازی، ابزارک جدیدتون در فهرست ابزارک‌ها دیده می‌شه.

کدوم بخش‌های کد رو می‌تونید شخصی‌سازی کنید؟

عنوان افزونه، نام ابزارک، توضیح، فیلدهای فرم و متن خروجی رو می‌تونید تغییر بدید. اگه فیلد جدیدی اضافه کردید، باید همون فیلد رو در هر سه متد widget، form و update مدیریت کنید.

چطور خروجی و ورودی ابزارک رو ایمن نگه دارید؟

مقدارهای متنی رو هنگام نمایش با esc_html و مقدارهای داخل ویژگی HTML رو با esc_attr ایمن کنید. برای فیلد چندخطی از sanitize_textarea_field استفاده کنید و هیچ مقدار ارسال‌شده از فرم رو بدون پاک‌سازی چاپ نکنید.

فعال‌کردن و نمایش ابزارک سفارشی در قالب کلاسیک

قرار دادن ابزارک از مسیر نمایش و ابزارک‌ها

در قالب کلاسیک از پنل مدیریت وارد «نمایش > ابزارک‌ها» بشید. ابزارک سفارشی رو پیدا کنید و اون رو به ناحیه‌ای مثل ستون کناری یا فوتر بکشید. عنوان و پیام رو وارد کنید و روی ذخیره بزنید.

اگر گزینه ابزارک‌ها رو ندیدید چه کار کنید؟

ممکنه قالب شما بلوکی باشه و مدیریت ابزارک‌ها از «نمایش > ویرایشگر» انجام بشه. اگه قالب کلاسیک دارید ولی گزینه ابزارک‌ها دیده نمی‌شه، پشتیبانی قالب، سطح دسترسی کاربری و فعال‌بودن افزونه رو بررسی کنید.

استفاده از ابزارک سفارشی در قالب بلوکی

مدیریت ناحیه‌های بلوکی از ویرایشگر سایت

در قالب بلوکی به «نمایش > ویرایشگر» برید و بخش‌هایی مثل الگوها، سربرگ یا فوتر رو باز کنید. ابزارک شما ممکنه در فهرست بلوک‌های قابل اضافه‌کردن دیده بشه. اون رو در جای دلخواه قرار بدید و تغییرات رو ذخیره کنید.

استفاده از Legacy Widget برای ابزارک‌های کلاسیک

اگه ابزارک سفارشی در فهرست بلوک‌ها دیده نشد، بلوک «Legacy Widget» رو اضافه کنید. بعد ابزارک کلاسیک خودتون رو از فهرست داخل همین بلوک انتخاب کنید و تنظیماتش رو ذخیره کنید.

تفاوت ویرایش ابزارک با ویرایش بلوک

ابزارک کلاسیک فرم تنظیمات خودش رو داره، ولی بلوک‌ها تنظیماتشون رو از نوار کناری ویرایشگر دریافت می‌کنن. بنابراین ممکنه ظاهر تنظیمات ابزارک شما در Legacy Widget با بلوک‌های معمولی فرق داشته باشه.

خطاهای رایج هنگام ساخت ابزارک و راه‌حلشون

نمایش‌ندادن ابزارک در پنل مدیریت

اول فعال‌بودن افزونه و درست‌بودن نام کلاس در register_widget رو بررسی کنید. خطای تایپی در نام کلاس یا اجرا نشدن هوک widgets_init باعث می‌شه ابزارک ثبت نشه.

نمایش‌ندادن ابزارک در سایت

ممکنه ابزارک در ناحیه‌ای قرار گرفته باشه که قالب اون رو نمایش نمی‌ده. یک ناحیه دیگه مثل فوتر رو امتحان کنید و مطمئن بشید قالب از همون ناحیه پشتیبانی می‌کنه.

خطای PHP بعد از فعال‌کردن کد

خطای ویرایشی، آکولاد یا نقطه‌ویرگول جاافتاده می‌تونه باعث خطای PHP بشه. افزونه رو از طریق مدیریت فایل یا FTP غیرفعال کنید، متن خطا رو بررسی کنید و کد رو اول روی سایت آزمایشی تست کنید.

ذخیره‌نشدن عنوان یا تنظیمات ابزارک

نام فیلد در HTML باید با نامی که در متد update می‌خونید یکی باشه. همچنین بررسی کنید برای هر نمونه ابزارک از get_field_name استفاده کرده باشید.

چطور ابزارک سفارشی رو بدون آسیب به سایت توسعه بدید؟

• هر تغییر رو اول در سایت آزمایشی اجرا کنید و بعد به سایت اصلی منتقل کنید.
• برای کلاس‌ها و توابع از پیشوند یکتا استفاده کنید تا با افزونه‌های دیگه تداخل پیش نیاد.
• text domain رو با نام افزونه هماهنگ نگه دارید تا ترجمه‌ها درست کار کنن.
• کد ابزارک رو داخل افزونه اختصاصی قرار بدید تا با تعویض قالب همچنان در دسترس بمونه.

جمع‌بندی: آیا ساخت ابزارک سفارشی برای شما مناسبه؟

اگه یک قابلیت ساده و قابل‌مدیریت برای سایدبار، فوتر یا ناحیه‌های اختصاصی سایتتون می‌خواید، ساخت ابزارک سفارشی انتخاب خوبیه. با کلاس WP_Widget، سه متد اصلی و تابع register_widget می‌تونید یک ابزارک کاربردی بسازید. فقط یادتون نره کد رو ایمن بنویسید، از سایتتون پشتیبان بگیرید و تفاوت قالب کلاسیک با قالب بلوکی رو در نظر بگیرید.

سوالات متداول

تیم تولید محتوا

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