Coding Cheat Sheets

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

function widget()
function update()
function form()

Скелет, на котором строится код, выглядит обычно следующим образом:

add_action( 'widgets_init', 'register_my_widget' ); // Загрузка виджета
 
function register_my_widget() {}            // Функция регистрации виджета
 
class My_Widget extends WP_Widget () {}         //Класс виджета (как пример)
 
function My_Widget() {}                 // Установки виджета
 
function widget() {}                    // Вывод виджета
 
function update() {}                    // Обновление виджета
 
function form() {}                  // Форма для опций виджета
  • Для начала нужно загрузить виджет с помощью функции “widgets_init“. add_action( 'widgets_init', 'register_my_widget' ); Для инициализации виджета используется функция, в которой наш виджет регистрируется в системе, чтобы к нему открылся доступ в разделе виджетов.
function register_my_widget() {
    register_widget( 'My_Widget' );
}
  • Весь код виджета заключен в класс. Имя класса имеет важное значение. Нужно помнить, что имя класса и имя функции регистрации должны совпадать. class My_Widget extends WP_Widget {} Теперь передадим некоторые установочные параметры в данный класс. Например, мы можем передать ширину и высоту. Также можно определить небольшое описание, которое может быть полезно при привязке виджета к коммерческой теме.
function My_Widget() {
    function My_Widget() {
        $widget_ops = array( 'classname' => 'example', 'description' => __('Виджет, который выводит имя автора ', 'example') );
        $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
        $this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
    }
  • Функция widget()относится к выводу нашего виджета. Мы будем передавать в нее пару аргументов. Первый аргумент будет получен из темы, в нем передается название и другие параметры. А второй аргумент - экземпляр нашего класса.
function widget( $args, $instance )
//Затем мы извлекаем значения из аргумента, потому что они должны быть доступны локально.
extract( $args );

Затем мы устанавливаем название и другие значения для нашего виджета, которые можно поменять в меню виджета. Также используются специальные переменные $before_widget и $after_widget, значения которых устанавливается темой.

$title = apply_filters('widget_title', $instance['title'] );
$name = $instance['name'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
 
echo $before_widget;
 
// Выводим название виджета
if ( $title )
    echo $before_title . $title . $after_title;
 
// Выводим имя
if ( $name )
    printf( '<p>' . __('Привет! Меня зовут %1$s.', 'example') . '</p>', $name );
 
if ( $show_info )
    printf( $name );
 
echo $after_widget;
//Теперь функция update(). Данная функция получает установки пользователя и сохраняет их.
function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
 
    //Strip tags from title and name to remove HTML
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['name'] = strip_tags( $new_instance['name'] );
    $instance['show_info'] = $new_instance['show_info'];
 
    return $instance;
}
  • Теперь создадим шаблон формы, которая будет служить для ввода значений. Здесь пользователь будет определять установки и значения. Функция form() будет содержать код для создания полей ввода, чекбоксов и так далее. Прежде, чем приступить к созданию полей ввода информации, нужно определить значения по умолчанию.
//Устанавливаем параметры по умолчанию.
$defaults = array( 'title' => __('Пример', 'example'), 'name' => __('Иван Лбов', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
Теперь создаем поля ввода текста.
// Название виджета
<p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Название:', 'example'); ?></label>
    <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
 
//Поле ввода текста
<p>
    <label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Ваше имя:', 'example'); ?></label>
    <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
 
// Чекбокс
<p>
    <input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" />
    <label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Сделать информацию публичной?', 'example'); ?></label>
</p>

Вот и весь код простого виджета, который выводит имя автора блога. Сохраните код в PHP файле, который надо разместить в папке темы. Затем надо вызвать его в файле functions.php, после чего виджет будет доступен для использования через панель администратора (раздел для виджетов). Источник урока:

Tags: php, WordPress, Widget

Leave a Comment

Fields with * are required.

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.