Cách tạo widget trong wordpress

Xin chào các bạn. Hôm nay mình sẽ viết về cách để tự tạo một widget trong WordPress. Như chúng ta đã biết, hiện này WordPress là một CMS rất phổ biến. Với các bạn là coder thì việc sử dụng API của WordPress để phát triển thêm tính năng mình thích.

Các Function

is_active_widget()
the_widget()
register_widget()
unregister_widget()

wp_register_widget_control()
wp_unregister_widget_control()
wp_convert_widget_settings()
wp_get_widget_defaults()
wp_widget_description()

Tạo Widget

Để tạo một widget, bạn chỉ cần kế thừa lại các class WP_Widget tiêu chuẩn và một số chức năng. Đó là Class cơ bản để hoạt đông được Widget. Lớp WP_Widget nằm trong wp-includes/class-wp-widget.php

class My_Widget extends WP_Widget {

	/**
	 * Sets up the widgets name etc
	 */
	public function __construct() {
		$widget_ops = array(
			'classname' => 'my_widget',
			'description' => 'My Widget is awesome',
		);
		parent::__construct( 'my_widget', 'My Widget', $widget_ops );
	}

	/**
	 * Outputs the content of the widget
	 *
	 * @param array $args
	 * @param array $instance
	 */
	public function widget( $args, $instance ) {
		// outputs the content of the widget
	}

	/**
	 * Outputs the options form on admin
	 *
	 * @param array $instance The widget options
	 */
	public function form( $instance ) {
		// outputs the options form on admin
	}

	/**
	 * Processing widget options on save
	 *
	 * @param array $new_instance The new options
	 * @param array $old_instance The previous options
	 */
	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
	}
}

Sau khi tạo base Widget chúng ta phải sử dụng cơ chế Hook của WordPress để đăng ký Widget

PHP 5.3+ only:

add_action( 'widgets_init', function(){
	register_widget( 'My_Widget' );
});

PHP 5.2+:

add_action('widgets_init',
	create_function(', 'return register_widget("My_Widget");')
);

Example

Chúng ta sẽ tạo thử 1 Widget có tên là New_Widget trong Widget có chức năng thay đổi title

/**
 * Adds New_Widget widget.
 */
class New_Widget extends WP_Widget {

	/**
	 * Register widget with WordPress.
	 */
	function __construct() {
		parent::__construct(
			'new_widget', // Base ID
			__( 'Widget Title', 'text_domain' ), // Name
			array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
		);
	}

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	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 __( esc_attr( 'Hello, World!' ), 'text_domain' );
		echo $args['after_widget'];
	}

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form( $instance ) {
		$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
		?>
		<p>
		<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( '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>
		<?php
	}

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ';

		return $instance;
	}

} // class New_Widget

Sau đó chúng ta đăng ký Widget với widget_init hook

// register New_Widget widget
function register_new_widget() {
    register_widget( 'New_Widget' );
}
add_action( 'widgets_init', 'register_new_widget' );

Chú ý: Bạn phải sử dụng hàm get_field_name() và get_field_id() để render ra tên phần tử và id

Hiển thị Widget

Đầu tiên chúng ta hay vào Admin của WordPress sau đó vào Appearance -> Widgets để cấu hình cho Widget vừa tạo. Sau đó chúng ta sẽ sử dụng hàm dynamic_sidebar() để hiển thị Widget ra trang web.

<?php if ( dynamic_sidebar('example_widget_area_name') ) : else : endif; ?>

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>=
    <?php dynamic_sidebar( 'sidebar-1' ); ?>=
<?php endif; ?>

Trên đây là hướng dẫn cơ bản để tạo ra một Widget trong WordPress. Hi vọng với hướng dẫn nhỏ này sẽ giúp các bạn hiểu được cách hoạt động của Widget và có thể tự custom và viết cho mình một Widget.