۱۶
مرداد

جلسه ۲۵ : ساخت ابزارک در وردپرس

دسته‌بندی‌ها :

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

فهرست

مقدمه

یک ابزارک محتوا و ویژگی هایی را به ناحیه ابزارک ها که سایدبار نیز نامیده می‌شود، اضافه می‌کند.
ابزارک ها روشی را فراهم می‌کنند تا کاربران بتوانند سایت خود را سفارشی تر کنند
قالب شما ممکن است دارای یک یا چندین ناحیه ابزارک یا همان سایدبار باشد.

یک ابزارک در واقع یک شئ در زبان PHP است که کدهای HTML را خروجی می‌دهد.

هنگامی که شما یک ابزارک جدید ایجاد می‌کنید، آن ابزارک در صفحه ادمین در Appearance > Widgets نمایش داده می‌شود.
در این قسمت نیز کاربر می‌تواند ابزارک را به سایدبار اضافه کند و تنظیمات ان را تغییر دهد.

ابزارک های پیش‌فرض وردپرس

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

آناتومی یک ابزارک

از نظر دیداری، یک ابزارک را می‌توان به دو بخش تقسیم کرد:

عنوان ابزارک
گزینه های ابزارک

برای مثال، تصویر زیر ابزارک پیش‌فرض Text را در پنل ابزارک ها نمایش می‌دهد:

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

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

کد HTML خروجی این ابزارک به صورت زیر است:

مثال :

<div id="text-7" class="widget widget_text">
<!-- Widget Container -->
    <div class="widget-wrap">
        <h4 class="widgettitle">This is a text widget</h4>
        <!-- Title -->
        <div class="textwidget">
        <!-- Content of Widget -->
            I can put HTML in here. <a href="http://google.com/">Search me!</a>
        </div>
    </div>
</div>

<h4 class="widgettitle">This is a text widget</h4>

I can put HTML in here. <a href="http://google.com/">Search me!</a>

</div>

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

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

ایجاد یک کلاس که از کلاس WP_Widget ارث بری کند.
فعال کردن ابزارک.
اضافه کردن ابزارک به سایدبار. (مطمئن شوید که قالب شما حداقل دارای یک سایدبار است)

کلاس ابزارک

کلاسی که برای ساخت ابزارک ایجاد می‌کنید، باید مانند کد زیر و شامل توابع کلاس WP_Widget باشد:

مثال :

<?php
 
class My_Widget extends WP_Widget {
 
    public function __construct() {
        // actual widget processes
    }
 
    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }
 
    public function form( $instance ) {
        // outputs the options form in the admin
    }
 
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }
}
 
?>

<?php

class My_Widget extends WP_Widget {

public function __construct() {

// actual widget processes

}

public function widget( $args, $instance ) {

// outputs the content of the widget

}

public function form( $instance ) {

// outputs the options form in the admin

}

public function update( $new_instance, $old_instance ) {

// processes widget options to be saved

}

در بخش زیر هر تابع را توضیح می‌دهیم:

construct : در این تابع ابزارک را با نام، توضیحات و عرض نمایش راه اندازی می‌کنید
widget : در این تابع نیز کد HTML خروجی ابزارک را تولید می‌کنید. پارامت args$ کد های HTML که برای نمایش عنوان، کلاس و محتوا ابزارک استفاده می‌شود را فراهم می‌کند.
form : در این تابع نیز فرمی را که با استفاده از آن می‎توانید گزینه های ابزارک را تنظیم کنید، نمایش می‌دهید. (این فرم در پنل ابزارک ها نمایش داده می‌شود)
اگر ابزارک شما دارای هیچ گزینه ای نیست، می‌توانید از این تابع صرف نظر کنید.
update : در این تابع گزینه های ابزارک در دیتابیس ذخیره می‌شوند. (اگر ابزارک شما دارای هیچ گزینه ای نیست، می‌توانید از این تابع صرف نظر کنید)

کد کامل ساخت ابزارک Text که در بالا ان را مثال زدیم، به صورت زیر خواهد بود:

مثال :

<?php
 
class My_Widget extends WP_Widget {
 
    function __construct() {
 
        parent::__construct(
            'my-text',  // Base ID
            'My Text'   // Name
        );
 
        add_action( 'widgets_init', function() {
            register_widget( 'My_Widget' );
        });
 
    }
 
    public $args = array(
        'before_title'  => '<h4 class="widgettitle">',
        'after_title'   => '</h4>',
        'before_widget' => '<div class="widget-wrap">',
        'after_widget'  => '</div></div>'
    );
 
    public function widget( $args, $instance ) {
 
        echo $args['before_widget'];
 
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }
 
        echo '<div class="textwidget">';
 
        echo esc_html__( $instance['text'], 'text_domain' );
 
        echo '</div>';
 
        echo $args['after_widget'];
 
    }
 
    public function form( $instance ) {
 
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'text_domain' );
        $text = ! empty( $instance['text'] ) ? $instance['text'] : esc_html__( '', 'text_domain' );
        ?>
        <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php echo esc_html__( 'Title:', 'text_domain' ); ?></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( 'Text' ) ); ?>"><?php echo esc_html__( 'Text:', 'text_domain' ); ?></label>
            <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" cols="30" rows="10"><?php echo esc_attr( $text ); ?></textarea>
        </p>
        <?php
 
    }
 
    public function update( $new_instance, $old_instance ) {
 
        $instance = array();
 
        $instance['title'] = ( !empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        $instance['text'] = ( !empty( $new_instance['text'] ) ) ? $new_instance['text'] : '';
 
        return $instance;
    }
 
}
$my_widget = new My_Widget();
?>

<?php

class My_Widget extends WP_Widget {

function __construct() {

parent::__construct(

'my-text', // Base ID

'My Text' // Name

);

add_action( 'widgets_init', function() {

register_widget( 'My_Widget' );

});

}

public $args = array(

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

'before_widget' => '<div class="widget-wrap">',

'after_widget' => '</div></div>'

);

public function widget( $args, $instance ) {

echo $args['before_widget'];

if ( ! empty( $instance['title'] ) ) {

echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];

}

echo '<div class="textwidget">';

echo esc_html__( $instance['text'], 'text_domain' );

echo '</div>';

echo $args['after_widget'];

}

public function form( $instance ) {

$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'text_domain' );

$text = ! empty( $instance['text'] ) ? $instance['text'] : esc_html__( '', 'text_domain' );

<p>

<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php echo esc_html__( 'Title:', 'text_domain' ); ?></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( 'Text' ) ); ?>"><?php echo esc_html__( 'Text:', 'text_domain' ); ?></label>

<textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" cols="30" rows="10"><?php echo esc_attr( $text ); ?></textarea>

</p>

<?php

}

public function update( $new_instance, $old_instance ) {

$instance = array();

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

$instance['text'] = ( !empty( $new_instance['text'] ) ) ? $new_instance['text'] : '';

return $instance;

}

$my_widget = new My_Widget();

فعال کردن ابزارک

همانطور که در جلسه قبل نیز گفتیم، برای فعال کردن ابزارک از تابع ()register_widget استفاده می‌کنیم.

مثال :

<?php
add_action( 'widgets_init', 'wpdocs_register_widgets' );
 
function wpdocs_register_widgets() {
    register_widget( 'My_Widget' );
}
?>

<?php

add_action( 'widgets_init', 'wpdocs_register_widgets' );

function wpdocs_register_widgets() {

register_widget( 'My_Widget' );

}

جلسه ساخت ابزارک در وردپرس نیز به پایان رسید.

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

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۵ : ساخت ابزارک در وردپرس

مقدمه

ابزارک های پیش‌فرض وردپرس

آناتومی یک ابزارک

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

کلاس ابزارک

فعال کردن ابزارک

لیست مطالب دوره

مفاهیم پایه

عملکرد قالب

Customizer وردپرس

امنیت

حریم خصوصی

انتشار قالب در سایت Wordpress

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ