Виджеты являются небольшими программами с графическим интерфейсом и выглядят в виде красиво оформленных блоков, отвечающих за взаимодействие с пользователями сайта. Виджеты обычно располагаются на боковой панели сайта или в его футере. Виджеты сами по себе не расширяют функционал сайта, а служат лишь для отображения дополнительной информации (например, популярные публикации, погодный информер, подписка на новости сайта и пр.)
Чисто технически, виджет WordPress – это, так же как и плагин, набор файлов, которые копируются в определённую папку на сайте. В этих файлах задаются специальные инструкции для “движка”, благодаря которым система распознает сам факт виджета и позволяет его разместить в той или панели виджетов (число панелей и места их расположения зависят от конкретной WordPress-темы).
Система виджетов WordPress
В WordPress присутствуют мощные инструменты, позволяющие гибко управлять виджетами (добавлять на сайт, удалять, изменять их расположение). Для этого существует отдельный админ-раздел – Внешний вид -> Виджеты.
В левой части окна располагаются доступные к отображению виджеты, а в правой – панели виджетов. Добавить виджет на панель довольно просто. Для этого его следует просто перетащить в нужное место.
Как создать виджет в WordPress
“Движок” WordPress поставляется с целым набором различных виджетов. Но часто их функциональности бывает недостаточно для решения тех или иных задач. Поэтому и возникает необходимость создать свой, который будет отвечать всем требованиям.
Создание виджетов в WordPress подразумевает наличие навыков программирования на популярном скриптовом языке PHP, предназначенного для веб-разработки. В этом материале мы не будем детально рассматривать синтаксис языка, так как это уже отдельная тема. Мы лишь коснемся тех его конструкций, которые необходимы для успешного создания виджета.
В системе WordPress создать виджет можно двумя способами. Первый заключается в создании отдельного плагина, после активации которого будет доступен виджет для использования. Мы же воспользуемся более легким способом – добавим код виджета непосредственно в основной конфигурационный файл темы – functions.php.
Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.
Разработка виджета
Для примера создадим самый простой виджет, который будет выводить название и описание сайта.
Для создания виджетов в WordPress применяется объектная модель программирования языка PHP. В “движке” имеются все необходимые инструменты для этого. Так, для виджетов существует специальный класс WP_Widget, использование которого и позволит успешно создать необходимый виджет для сайта WordPress. Он включает около 20 различных методов. Однако нам потребуются лишь четыре из них:
- __construct() – регистрация базовой информации о виджете;
- widget() – вывод виджета в области виджетов на сайте;
- form() – параметры виджета, отображаемые в области администрирования WordPress;
- update() – обновление настроек виджета в админ-панели.
В дополнение к этим четырем методам используется функция add_action(), необходимая для привязки пользовательской функции виджетов к специальному хуку widgets_init.
Рассмотрим поэтапно создание нашего виджета.
Во-первых, необходимо создать свой класс, который будет наследовать вышеуказанные методы основного класса WP_Widget.
class wpschool_example_widget extends WP_Widget { }
В этом коде наш класс имеет название wpschool_example_widget. Директивой extends мы даем понять системе, что он будет наследовать все методы основного класса WP_Widget.
На следующем этапе добавим первый метод – __construct(). Он используется для назначения идентификатора, заголовка, имени класса и описания для виджета.
public function __construct() { $widget_options = array( 'classname' => 'wpschool_widget', 'description' => 'Это наш первый виджет', ); parent::__construct( 'wpschool_widget', 'WPSchool Widget', $widget_options ); }
Чтобы понять эту функцию, следует начать с строки, начинающейся с parent::__ construct(). Эта строка создает новый виджет с идентификатором wpschool_widget, именем WPSchool Widget и двумя параметрами виджетов: имя класса (wpschool_widget) и краткое описание (Это наш первый виджет).
Весь этот код входит в wpschool_example_widget и используется для регистрации виджета в WordPress, а затем отображает заголовок и описание виджета в области администратора.
Следующий метод, который мы добавим, будет widget(). Он позволит вывести виджет в области виджетов на сайте.
public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance[ 'title' ] ); $blog_title = get_bloginfo( 'name' ); $tagline = get_bloginfo( 'description' ); echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title']; ?> <p><strong>Site Name:</strong> <?php echo $blog_title ?></p> <p><strong>Tagline:</strong> <?php echo $tagline ?></p> <?php echo $args['after_widget']; }
Метод widget() содержит код, который генерирует фактический контент, отображаемый виджетом на сайте. В нашем примере мы предоставим пользователям возможность отображать, кроме названия и описания сайта, еще и заголовок самого виджета. Поэтому для этого нужно будет захватить этот заголовок, а затем использовать get_bloginfo(), чтобы отобразить название и описание блога.
Также следует понять еще кое-какие моменты.
Переменная $args[] содержит массив аргументов, которые могут использоваться при построении вывода виджета. Значения, содержащиеся в $args, задаются активной темой при регистрации области боковой панели.
$instance[] – это переменная, в которую загружаются значения, связанные с текущим экземпляром виджета. Если Вы добавили виджет на боковую панель дважды, каждый экземпляр $instance будет содержать значения, специфичные для каждого экземпляра виджета.
Фильтр widget_title возвращает заголовок текущего экземпляра виджета.
get_bloginfo() – функция, которая может использоваться для возврата всех видов метаданных WordPress-сайт, включая его название и описание.
После определения нескольких переменных, используя информацию из приведенного выше списка, код в примере продолжает формировать фактический вывод контента, который состоит из информации из переменной $args, заголовка, названия и описания сайта.
Обратите внимание, что практически каждый виджет должен включать аргументы before_widget, after_widget, before_title и after_title. Они необходимы для обеспечения того, чтобы каждый виджет был вложен в специфичные для темы теги HTML.
На следующем этапе добавим метод form(), позволяющий сохранять параметры виджета, отображаемые в админ-панели WordPress.
public function form( $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /> </p><?php }
Для виджетов, имеющих множество разнообразных настроек, этот метод будет содержать довольного много сложного кода. Тем не менее, в нашем примере нужно лишь позволить пользователям задавать имя виджета, которое будет отображаться на сайте.
В методе form() возвращаются текущие значения конкретного экземпляра виджета, вызывая параметр $instance. Затем происходит проверка текущей информации об экземпляре, чтобы узнать, является ли заголовок пустым. Если это не так, будет выведено текущее название.
Следующий на очереди – метод update(), отвечающий за обновление настроек виджета в админ-панели.
public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] ); return $instance; }
Видно, что метод принимает два параметра: $new_instance и $old_instance. Первый содержит значения, добавленные в форму настроек виджетов. Второй содержит существующие настройки (если таковые существуют).
Метод update() должен соответствующим образом проверять новые параметры, а затем назначать их переменной $instance и возвращать эту обновленную переменную.
Заключительным этапом создания нового виджета будут его регистрация и активация.
function wpschool_register_widget() { register_widget( 'wpschool_example_widget' ); } add_action( 'widgets_init', 'wpschool_register_widget' );
Тут, во-первых, создается функция для регистрации виджета, используя имя объекта виджета для его идентификации. Затем идет привязка функции регистрации к WordPress, используя хук widgets_init.
Отметим, что эта часть кода добавляется за пределы класса wpschool_example_widget. Когда он будет вызван, он подтянет виджет с соответствующим именем и запустит весь код, содержащийся в методах класса.
После добавления всего кода в файл functions.php в админ-разделе Внешний вид -> Виджеты должен появится виджет с названием WPSchool Widget, который теперь доступен для добавления на панель виджетов Вашей темы.
Полный текст нашего виджета:
/* Виджет WPSchool Widget */ class wpschool_example_widget extends WP_Widget { // Установка идентификатора, заголовка, имени класса и описания для виджета. public function __construct() { $widget_options = array( 'classname' => 'wpschool_widget', 'description' => 'Это наш первый виджет', ); parent::__construct( 'wpschool_widget', 'WPSchool Widget', $widget_options ); } // Вывод виджета в области виджетов на сайте. public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance[ 'title' ] ); $blog_title = get_bloginfo( 'name' ); $tagline = get_bloginfo( 'description' ); echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title']; ?> <p><strong>Site Name:</strong> <?php echo $blog_title ?></p> <p><strong>Tagline:</strong> <?php echo $tagline ?></p> <?php echo $args['after_widget']; } // Параметры виджета, отображаемые в области администрирования WordPress. public function form( $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /> </p><?php } // Обновление настроек виджета в админ-панели. public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] ); return $instance; } } // Регистрация и активация виджета. function wpschool_register_widget() { register_widget( 'wpschool_example_widget' ); } add_action( 'widgets_init', 'wpschool_register_widget' );
Также читайте: Как изменить внешний вид меню на сайте WordPress с помощью плагина Макс Мега Меню.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Здравствуйте , можете помочь в вопросе ?) У меня после настроек редактора тем , исчез виджет стандартный он называется меню навигации , в списке его нет то что было закреплено этим виджетом меню навигации исчезло соответственно.. Вот такое дело . Жду ответа )