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

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

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

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

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

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

// Creating the widget 

class andreyex_widget extends WP_Widget {



function __construct() {

parent::__construct(

// Основной ID вашего виджета

'andreyex_widget', 



// Название виджета будет отображаться в пользовательском интерфейсе

__('AndreyEx Widget', 'andreyex_widget_domain'), 



// Widget description

array( 'description' => __( 'Пример виджета на основе учебника AndreyEx', 'andreyex_widget_domain' ), ) 

);

}



// Создание интерфейсных виджетов

// когда действие происходит

public function widget( $args, $instance ) {

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

// до и после виджета аргументы определяет в теме

echo $args['before_widget'];

if ( ! empty( $title ) )

echo $args['before_title'] . $title . $args['after_title'];



// Это где вы запустите код и отображается результат

echo __( 'Hello, World!', 'andreyex_widget_domain' );

echo $args['after_widget'];

}

		

// Widget Backend 

public function form( $instance ) {

if ( isset( $instance[ 'title' ] ) ) {

$title = $instance[ 'title' ];

}

else {

$title = __( 'Новый заголовок', 'andreyex_widget_domain' );

}

// Widget admin form

?>

<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;

}

} // Class andreyex_widget заканчивается здесь



// Регистрация и загрузка widget

function wpb_load_widget() {

	register_widget( 'andreyex_widget' );

}

add_action( 'widgets_init', 'andreyex_load_widget' );

Теперь переходим к меню Внешний вид »Виджеты, перетащите AndreyEx Widget на боковую панель, чтобы увидеть этот пользовательский виджет в действии.

Просто не так ли? Во-первых, мы создали свой собственный виджет. Тогда мы определили, что этот виджет делает и как отображать виджет фоновым. Тогда мы определили, как обрабатывать изменения, внесенные в виджете. И наконец, мы зарегистрировали и загрузили виджет.

В настоящее время существует несколько вещей , которые вы можете спросить. Например, что wpb_text_domain делает? WordPress использует Gettext для обработки переводов и локализации. Вот wpb_text_domain и  __e рассказывает GetText, что это строка для перевода. Посмотрите , как вы можете найти перевод слов в готовой теме WordPress.

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