Россия есть игра природы, а не ума (Ф.М. Достоевский).

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

3 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...
14 ноября 2016
Как создать пользовательский виджет в 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. Дайте нам знать, какие виджеты вы создаете, оставив комментарий ниже.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 159

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close