Создаем собственный виджет в WordPress

Виджеты WordPress облегчают пользователям жизнь тем, что можно простым перетаскиванием элементов добавлять разделы на сайт. Существует огромное количество тем WordPress и плагинов, которые использую виджеты для вывода различного рода информации. Существуют даже плагины, которые значительно расширяют функционал виджетов. В этой статье мы покажем вам как создать свой собственный виджет в WordPress.

Что такое виджет в WordPress?

Виджеты WordPress изначально были созданы для упрощения создания дизайна и контроля структуры темы ВП для пользователя. Самая приятная вещь в них это то, что их можно просто перетянуть драг-н-дропом в ваш сайдбар или любое другое место для виджетов на вашем сайте. Это дает огромное пространство для маневра для разработчиков плагинов и тем. Они могут добавлять функционал в свои продуты и позволять пользователям решать, где и когда использовать этот функционал без необходимости лезть в код. Также в качестве пользователя вы тоже можете создавать свои собственные виджеты для тех же целей.

Создаем виджет в WordPress

Прежде чем мы начнем, стоит заметить, что лучше всего, если вы создадите плагин для сайта WordPress, куда и будете вставлять код виджета. Также можно его добавить в файл functions.php темы, но плагин для сайта лучше подойдет для этого.

В этой статье мы создадим простой виджет, который приветствует пользователей. Взгляните на код ниже и вставьте его в плагин для вашего сайта, чтобы увидеть в действии.

// Создаем виджет
class devise_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Основной ID вашего виджета
'devise_widget', 

// Название виджета, которое будет отображаться в админке
__('Devise Widget', 'devise_widget_domain'), 

// Описание виждета
array( 'description' => __( 'Простой виджет на основе статьи от Devise Group', 'devise_widget_domain' ), ) 
);
}

// Создаем фронт-энд виджета
// Здесь происходят действия
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// параметры виджета before и after определены темой
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// Здесь испольняется код и выводится результат
echo __( 'Привет, Devise!', 'devise_widget_domain' );
echo $args['after_widget'];
}
		
// Бек-энд виждета
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'Новый заголовок', 'devise_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;
}
} // Класс devise_widget здесь заканчивается

// Регистрируем и подгружаем виджет
function devise_load_widget() {
	register_widget( 'devise_widget' );
}
add_action( 'widgets_init', 'devise_load_widget' );

Теперь переходим в Внешний вид » Виджеты, перетягиваем Devise Widget в ваш сайдбар для тестирования его на сайте.

Просто, не правда ли? Первым делом мы создаем собственный виджет. Затем мы определяем, что делает виджет и как выводится на сайте. Затем определяем обработку изменений виджета. И, наконец, мы регистрируем его и загружаем.

Теперь несколько вещей, которые могут вызывать вопросы. Например, каково назначение devise_text_domain? WordPress использует gettext для обработки перевода и локализации. Эти devise_text_domain и __e сообщают gettext сделать строку доступной для перевода.

Надеемся, что статья помогла вам научиться создавать собственные виджеты в WordPress. Делитесь в комментариях, какие вы уже создали.