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

2020-10-20

Виджеты отлично дополняют любую тему WordPress, располагаясь обычно в боковой панели. Виджеты легко добавить, настроить или удалить, используя их drag-and-drop свойства.

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

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

Место и порядок размещения виджетов устанавливаются в файле functions.php любой темы WordPress.

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

Ресурсы

Ресурсы

Установленный WordPress;
Общее представление о виджетах в WordPress;
Знание основ WordPress API

1 Создание класса и функций

Виджеты в WordPress – это классы, которые легко модифицировать. Класс предоставляет разработчику готовую функциональность «из коробки». Базовый класс виджета содержит функции, которые разработчик должен дополнить нужным содержимым. Для начала создадим класс виджета.

Создайте новый файл ads_widget.php в каталоге, в котором установлен WordPress. Затем поместите туда приведённый ниже код.

Обратите внимание на комментарий над именем класса. Этот комментарий содержит информацию о плагине: его название, имя автора и другие сведения:

/*
Plugin Name: Advertisement Widget
Plugin URI: 1stwebdesigner.com/
Description: An Advertisement Banner Widget
Author: Sam Norton
*/

<?php
class Ads_Widgets extends WP_Widget
{
 function Ads_Widgets()
  {
        // widget actual processes
  }

   function form($instance)
  {
        // display the options form on admin backend
  }

   function update($new_instance, $old_instance)
  {
        // processes widget options to be saved
  }

  function widget($args, $instance) {
        // display the content of the widget
        }

}
//call register widget
add_action( 'widgets_init', create_function('', 'return register_widget("Ads_Widgets");') );
?>

2 Код инициализации виджета

Поместите этот код в функцию Ads_Widgets(). Это код инициализирует виджет и будет использоваться для обращения к его текущей инстанции:

<?php
function Ads_Widgets()
  {
        $widget_ops = array('classname' => 'Ads_Widgets', 'description' => 'Displays Ads' );
        $this->WP_Widget('Ads_Widgets', 'Advertisement Widget', $widget_ops);
  }
?>

3 Функция создания формы

Теперь создадим код, который отобразит форму для сохранения настроек в панели администрирования сайта. Его место – функция form():

function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
        $title = $instance['title'];
                 $message               = esc_attr($instance['message']);
                 $link          = esc_attr($instance['link']);
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('message'); ?>"><?php _e('Advertisement Banner'); ?></label>
          <textarea rows="4" cols="50" class="widefat"  id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>"><?php echo ($message); ?> </textarea>
                                </p>
                                <label for="<?php echo $this->get_field_id('link'); ?>"><?php _e('Ads Link'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" type="text" value="<?php echo $link; ?>" />
        </p>
  <?php
  } ?>

4 Функция сохранения параметров

Функция update() считывает параметры из формы и сохраняет их в базе данных WordPress:

<?php
function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    $instance['message'] = $new_instance['message'];
    $instance['link'] = $new_instance['link'];
        return $instance;
  }
?>

5 Функция отображения виджета

Эта функция отобразит содержимое виджета на главной странице сайта. Код принимает некоторые аргументы от темы: заголовок, описание и другие параметры. Скопируйте этот код в функцию widget():

function widget($args, $instance) {
        extract( $args );
        $title                                  = apply_filters('widget_title', $instance['title']);
        $message        = $instance['message'];
        $link                   = $instance['link'];
        ?>
              <?php echo $before_widget; ?>
                  <?php if ( $title )
                        echo $before_title . $title . $after_title; ?>
                                                                                                                <ul>
                                                                                                                                <li><?php echo '<a href="'.$link.'" target="_blank"><img src='.$message." '/>"; ?></a></li>
                                                                                                                </ul>
              <?php echo $after_widget; ?>
        <?php
        }

}

6 Добавление обработчика событий

Наконец, загрузите виджет функцией widget_init(), передав её в событие action. Это также зарегистрирует имя виджета, чтобы он мог функционировать как в пользовательской, так и в административной частях сайта. Поместите следующий код ниже объявления класса:

add_action( 'widgets_init', create_function('', 'return register_widget("Ads_Widgets");') );

7 Активация виджета

Теперь, когда наш виджет готов, активируйте его.

Для этого из панели администрирования перейдите в панель плагинов и кликните на ссылке “Activate” («Активировать») напротив нашего плагина:

Теперь произведите соответствующие настройки, чтобы показывать баннеры:

А теперь зайдите в пользовательскую часть сайта и убедитесь, что плагин работает:

Заключение

Поздравляю! Вы только что создали свой первый виджет, который показывает рекламный баннер на вашем сайте.

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

Надеюсь, вы получили пользу от этой статьи. Можете использовать код, приведенный в ней, как сочтёте нужным.

Как обычно, приглашаю вас поделиться своими мыслями в комментариях.