WordPress

Как Создать Виджеты Для WordPress

Как Создать Виджеты для WordPress

Введение

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

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Доступ к панели управления WordPress
  • Любой текстовый редактор

Немного о WordPress виджетах

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

Перед началом руководства

Перед тем, как создать виджеты для WordPress, вам необходимо подумать о нескольких вещах. Первое, вы можете создать виджет в качестве пользовательского плагина. Это позволит использовать его на любом сайте, который использует этот плагин. Или, вы можете просто добавить виджет в файл functions.php или определенную тему, что сделает его совместимым лишь для этой темы. Второе, у вас есть возможность добавить виджет на запущенный и работающий сайт или в локальную среду. В соответствии с рекомендациями по разработке, мы советуем для начала добавить плагин в локальную среду (ознакомьтесь с нашим руководством о запуске WordPress на Docker). После того, как вы убедитесь в отсутствии ошибок и его правильной работе, вы сможете легко портировать его на ваш сайт.

Как работают пользовательские виджеты WordPress: Widgets API

WordPress позволяет вам создавать свои виджеты, предоставляя вам доступ к Widgets API. Чтобы создать пользовательский виджет, вы должны использовать стандартные классы WP_Widget из API. Эти базовые классы предлагают более 20 функций, которые вы можете свободно использовать и комбинировать. Из всех этих функций, 4 являются минимальным требованием для работы любого виджета. Вот список этих функций:

  • __construct() – функция конструктора
  • widget() – содержит вывод виджета
  • form() –  определяет настройки виджета в панели управления WordPress
  • update() – обновляет настройки виджета

Конечно, существует и множество других методов, которые предоставляют дополнительный функционал. Чтобы узнать больше о классах WP_Widget, посетите данную страницу.

Как создать виджеты для WordPress

ВАЖНО! Мы настоятельно рекомендуем создать полную резервную копию вашего сайта, перед началом данного руководства. В дополнение, вы можете использовать дочернюю тему WordPress.

Теперь, когда мы составили концепт нашей задачи, давайте приступим к ее реализации. Для этого урока мы создадим простой пользовательский виджет Привет мир, чтобы вы могли узнать об азах создания виджета в WordPress. Конечно, вы можете перейти к созданию более сложных виджетов по своему усмотрению.

Еще один нюанс, мы пишет этот код в файле functions.php текущей темы, но вы можете делать это в любом пользовательском плагине.

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

class hstngr_widget extends WP_Widget {

//Вставляйте функции сюда

}

Теперь мы начнем добавление 4 ранее упомянутых функций, одну за другой. Первой в списке идет метод конструктора, которую мы используем для указания ID, названия виджета и описания:

function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('Тестовый Виджет Hostinger', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'Как создать виджеты для WordPress', 'hstngr_widget_domain' ), )
);
}

Далее мы идем к внешнему виду виджета, то есть как будет выглядеть фронт-энд виджета. Это будет сделано с помощью функции widget():

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Привет мир, от Hostinger.ru', 'hstngr_widget_domain' );
echo $args['after_widget'];
}

Здесь мы настроили вывод виджета так, чтобы он отобразил ‘Привет мир, от Hostinger.ru’, и название виджета указанного пользователем.

Теперь нам необходимо написать бек-энд виджета с помощью метода form():

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Стандартный Заголовок', 'hstngr_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
}

Здесь вы можете увидеть как был настроен пользовательский виджет. Если пользователь предоставил заголовок, то тогда он будет добавлен в созданную HTML форму. В противном случае, будет добавлено название Стандартный Заголовок в качестве заголовка. Этот код отвечает за то, как отображается виджет в панели управления WordPress.

И наконец последнее, но не по значению, мы добавим функцию обновления, чтобы обновлять виджет при каждом изменении его настроек.

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

Этот код принимает текущий заголовок вновь созданного экземпляра, удаляет любые теги HTML/PHP, передает заголовок экземпляру и возвращает его.

Осталась еще одна вещь, которую вам необходимо сделать, вам  нужно использовать дополнительную функцию, чтобы зарегистрировать виджет в WordPress:

function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}
add_action( 'widgets_init', 'hstngr_register_widget' );

Обратите внимание, что этот код должен быть помещен вне функции hstngr_widget.

Мы определили новую функцию под названием hstngr_register_widget(), которая регистрирует наш виджет с помощью ID виджета, указанного в функции __construct(). Затем мы связали эту функцию при помощи widgets_init, которая загружает этот виджет в WordPress через встроенный метод add_action(). В финальном варианте ваш WordPress виджет должен выглядеть примерно вот так:

function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}

add_action( 'widgets_init', 'hstngr_register_widget' );

class hstngr_widget extends WP_Widget {

function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('Тестовый Виджет Hostinger', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'Как создать виджеты для WordPress', 'hstngr_widget_domain' ), )
);
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Привет мир, от Hostinger.ru', 'hstngr_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Стандартный Заголовок', 'hstngr_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;
}

}

Вы можете использовать Файловый Менеджер, FTP-клиент или Редактор WordPress для добавления этого кода в файл functions.php вашей темы. Добавьте код в файл function.php активной темы и нажмите Обновить файл для сохранения изменений.

WordPress Как создать виджеты для WordPress

Теперь зайдите в панель управления WordPress и перейдите во вкладку Внешний вид →  Виджеты. Далее вы должны найти виджет под названием Тестовый Виджет Hostinger в списке виджетов.

Виджеты WordPress

Перетащите виджет в область для виджетов в правой части страницы. Теперь вы сможете выставить заголовок для виджета. Сохраните его и посетите вашу страницу. Вы увидите ваш виджет с выбранным заголовком и текстом Привет мир, от Hostinger.ru внутри.

Поздравляем, вы успешно узнали, как создать виджеты для WordPress. Теперь вы можете посмотреть как выглядит ваш виджет.

 

Виджеты WordPress 2

Заключение

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

 

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

Нажмите здесь, чтобы оставить комментарий

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

42
00
грн/мес