Как создать пользовательский виджет в WordPress

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. Дайте нам знать, какие виджеты вы создаете, оставив комментарий ниже.

(Пока оценок нет)

Загрузка...