ساخت ابزارک در وردپرس

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

ابزارک وردپرس چیست؟

ابزارک‌های وردپرس به شما این امکان را می‌دهند که از طریق یک رابط کاربری ساده کشیدن و رها کردن (Drag & Drop)، عملکردهای اضافی را به وب‌سایت خود اضافه کنید. به طور پیش‌فرض، وردپرس دارای چندین ابزارک (ویجت) است. آن‌ها ویژگی‌های اساسی برنامه را در اختیار شما قرار می‌دهند و با هر پوسته وردپرس سازگار هستند.

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

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

هنگام ایجاد ابزارک وردپرس از کجا باید شروع کنیم؟

ابتدا باید انتخاب کنید که می‌خواهید ابزارک (ویجت) را با استفاده از افزونه ایجاد کنید یا از طریق ویرایش فایل functions.php. اگر کدهای ساخت ابزارک را در قالب یک افزونه جدید منتشر کنید، این امکان برای شما فراهم می‌شود تا آن را در هر سایتی نصب کنید. پیشنهاد می‌شود ابتدا ابزارکی را که می‌خواهید طراحی کنید، در محیط لوکال تست گرفته و سپس به سایت مورد نظر خود منتقل کنید.

ابزارک‌های سفارشی وردپرس چگونه کار می‌کنند؟

به منظور ساخت ابزارک در وردپرس، شما می‌بایست از کلاس استاندارد WP Wiget از وب‌سرویس ابزارک‌ها استفاده کنید. این کلاس حدود ۲۰ تابع دارد که چهار مورد آن برای ساخت ابزارک جدید مورد نیاز می‌باشد:

• ()construct__ : تابع سازنده کلاس که پارامترهای ابزارک را می‌توانید در آن تعریف کنید.
• ()widget : این تابع مربوط به خروجی ابزارک می‌باشد.
• ()form : این تابع برای تعریف کردن تنظیمات ابزارک در پیشخوان وردپرس می‌باشد.
• ()update : این تابع تنظیمات ابزارک در پیشخوان وردپرس را ذخیره می‌کند.

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

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

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

گام اوّل: Extend کردن کلاس WP_Widget

اولین کاری که باید انجام داد، باز کردن ویرایشگر و ایجاد کلاسی براساس WP_Widget می‌باشد. 

class tidaweb_widget extends WP_Widget {
//Insert functions here
}

گام دوّم: افزودن تابع سازنده ()construct__

در گام بعدی شما باید توابع استاندارد گفته شده را به طور کامل کدنویسی کنید. اولین تابع، تابع سازنده کلاس ()construct__ می‌باشد. در این تابع باید شناسه، نام و توضیحات ابزارک سفارشی تعریف شود.

function __construct() {
    parent::__construct(
        // widget ID
        'tidaweb_widget',
        // widget name
        __('Tidaweb Sample Widget', 'tidaweb_widget_domain'),
        // widget description
        array ( 'description' => __( 'Tidaweb Widget Tutorial', 'tidaweb_widget_domain' ), )
    );
}

گام سوّم: افزودن تابع ()widget

حال نوبت پیاده‌سازی تابع ()widget می‌باشد. همانطور که گفته شد این تابع نحوه نمایش ابزارک در سایت را مشخص می‌کند.

public function widget( $args, $instance ) {
    
    $title = apply_filters( 'widget_title', $instance['title'] );
    echo $args['before_widget'];
    
    //if title is present
    If ( ! empty ( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];
    
    //output
    echo __( 'Greetings from Tidaweb.com!', 'tidaweb_widget_domain' );
    echo $args['after_widget'];

}

همانطور که مشخص است، کاربر اگر ابزارک را به سایدبار مورد نظر منتقل کرده و عنوان دلخواه خود را وارد کند، ابزارک در سایدبار مورد نظر در سایت نمایش داده خواهد شد. طبق تابع بالا این ابزارک در سایت عبارت “تبریک از تیداوب!” را نمایش خواهد داد.

گام چهارم: افزودن تابع ()form

در این مرحله باید تابع ()form را اضافه نمود. این تابع برای ایجاد فیلدهای مرتبط با تنظیمات ابزارک در پیشخوان وردپرس می‌باشد.

public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) )
        $title = $instance[ 'title' ];
    else
        $title = __( 'Default Title', 'hstngr_widget_domain' );
    ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php
}

گام پنجم: افزودن تابع ()update

تابع ()update برای ذخیره‌سازی فیلدهای فرم مرحله قبلی استفاده می‌شود. 

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
}

گام ششم: ثبت ابزارک سفارشی وردپرس

برای آنکه ابزارک سفارشی ثبت شود، باید از هوک widgets_init استفاده کرد.

function tidaweb_register_widget() {
    register_widget( 'tidaweb_widget' );
}
add_action( 'widgets_init', 'tidaweb_register_widget' );

آموزش استفاده از ابزارک سفارشی در وردپرس

همه کدها در قالب یک کد در زیر قابل استفاده بوده و شما می‌توانید آن را به صورت افزونه یا در فایل functions.php قرار دهید.

function tidaweb_register_widget() {
    register_widget( 'tidaweb_widget' );
}
add_action( 'widgets_init', 'tidaweb_register_widget' );

class tidaweb_widget extends WP_Widget {

    function __construct() {

        parent::__construct(
            // widget ID
            'tidaweb_widget',
            // widget name
            __('Tidaweb Sample Widget', 'tidaweb_widget_domain'),
            // widget description
            array( 'description' => __( 'Tidaweb Widget Tutorial', 'tidaweb_widget_domain' ), )
        );

    }

    public function widget( $args, $instance ) {

        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $args['before_widget'];

        //if title is present
        if ( ! empty( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];
        
        //output
        echo __( 'Greetings from Tidaweb.com!', 'tidaweb_widget_domain' );
        echo $args['after_widget'];

    }

    public function form( $instance ) {

        if ( isset( $instance[ 'title' ] ) )
            $title = $instance[ 'title' ];
        else
            $title = __( 'Default Title', 'tidaweb_widget_domain' );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <?php

    }

    public function update( $new_instance, $old_instance ) {

        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
        
    }
    
}

پس از قراردادن کد، اگر به بخش ابزارک‌ها بروید، ابزارک سفارشی را مشاهده خواهید کرد و می‌توانید در سایدبار مورد نظر خود از آن استفاده کنید.

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

منبع: Hostinger