[Инфо] Создание виджета на Вордпресс

Тема в разделе "Wordpress", создана пользователем jaky, 31 мар 2014.

Модераторы: Sorcus
  1. jaky

    jaky Создатель

    Регистр.:
    8 сен 2011
    Сообщения:
    44
    Симпатии:
    7
    Назначением виджета будет отображение списка последних зарегистрированных пользователей блога.

    Начинается все с создания производного класса от WP_Widget, который предоставляет функциональные возможности для создания виджетов. Данный класс должен находится в файле functions.php активной темы.

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

    Код: [Выделить]
    class Latest_Registered_Users_Widget extends WP_Widget {

    public function __construct() {
    parent::__construct(
    'Latest_Registered_Users_Widget', // идентификатор виджета
    'Последние зарегистрированные пользователи', // название виджета
    array( 'description' => 'Этот виджет отображает последних зарегистрированных пользователей' ) // Опции
    );
    }

    public function widget( $args, $instance )
    {
    // ...
    }
    public function update( $new_instance, $old_instance )
    {
    // ...
    return $new_instance;
    }
    public function form( $instance )
    {
    // ...
    }
    }

    В приведенном выше коде мы создали класс Latest_Registered_Users_Widget который является производным от WP_Widget, затем определили некоторые функции. Более подробно о функциях ниже, а пока просто укажем пустые реализации для них. В функции __construct() мы вызываем конструктор WP_Widget родительского класса, в который передаем аргументы:

    идентификатор виджета (должен быть уникальным);
    название виджета (будет отображаться на панели виджетов);
    а также массив опций, в который мы помещаем описание виджета.

    Регистрация виджета

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

    Чтобы зарегистрировать виджет WordPress, мы должны добавить следующий код:

    Код: [Выделить]
    add_action( 'widgets_init', create_function( '', 'register_widget( "Latest_Registered_Users_Widget" );' ) );

    Подключаемся к хуку widgets_init затем вызываем функцию register_widget и регистрируем наш виджет.

    Если все сделано правильно то виджет появится в админке:

    [​IMG]

    Параметры виджета

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

    Код для функции form выглядит следующим образом:

    Код: [Выделить]
    public function form( $instance )
    {
    $title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : 'Последние зарегистрированные пользователи';
    $numberofusers = isset( $instance[ 'numberofusers' ] ) ? $instance[ 'numberofusers' ] : '5';
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Заголовок:' ); ?></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>
    <p>
    <label for="<?php echo $this->get_field_id( 'numberofusers' ); ?>"><?php _e( 'Количество отображаемых пользователей:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'numberofusers' ); ?>" name="<?php echo $this->get_field_name( 'numberofusers' ); ?>" type="text" value="<?php echo esc_attr( $numberofusers ); ?>" />
    </p>
    <?php}

    Аргументом этой функции является переменная $instance, которая содержит значения параметров для текущего экземпляра виджета.

    В этой функции мы проверяем, если название и количество пользователей были установлены администратором, значит в переменные для параметров ($title и $numberofusers) будут занесены именно они, иначе значения по умолчанию, которые мы предопределили.

    Далее, мы добавим текстовые поля с метками. С помощью функций get_field_id и get_field_name, сгенерируем значения для атрибутов:

    id у метки (label) и у текстового поля (input);
    name у текстового поля (input).

    Это необходимо для того, чтобы не было путаницы с идентификаторами и именами полей на странице, так как экземпляров нашего виджета может быть несколько. Ну и последнее, «прогнав» переменные ($title и $numberofusers) через функцию esc_attr заполняем эти поля.

    Функция esc_attr преобразует символы < > & « ‘ в HTML сущности, а именно в

    Код: [Выделить]
    &lt; &gt; &amp; &quot; &#039;

    После того, как мы добавили параметры, виджет выглядит так:

    [​IMG]

    Сохранение параметров виджета

    Следующим шагом является, сохранение введенных значений параметров. Для этого изменяем функцию update в нашем классе Latest_Registered_Users_Widget, следующим образом:

    Код: [Выделить]
    public function update( $new_instance, $old_instance )
    {
    $instance = array();
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['numberofusers'] = strip_tags( $new_instance['numberofusers'] );
    return $instance;
    }

    Функция update получает переменные $new_instance (массив с новыми значениями параметров) и $old_instance (массив со старыми значениями) в качестве входных параметров. В итоге создаем новый массив $instance и помещаем в него введенные значения параметров.

    Теперь мы способны обновить параметры виджета:

    [​IMG]

    Отображение виджета

    Последним шагом при создании виджета WordPress, является его отображение на блоге. За это отвечает, последняя не рассмотренная функция — widget:

    Код: [Выделить]
    public function widget( $args, $instance )
    {
    extract( $args );
    $title = apply_filters( 'widget_title', $instance['title'] );

    echo $before_widget;
    if ( ! empty( $title ) )
    echo $before_title . $title . $after_title;

    $args = array(
    'orderby' => 'user_registered',
    'order' => 'DESC',
    'number' => $instance['numberofusers']
    );

    $latest_users = new WP_User_Query( $args );

    if ( !empty( $latest_users->results ) )
    {
    echo '<ul>';
    foreach ( $latest_users->results as $user ) {
    echo '<li>' . $user->display_name. '</li>';
    }
    echo '</ul>';
    }
    echo $after_widget;
    }

    Здесь мы имеем $args и $instance в качестве аргументов функции. Первый аргумент функции будет получен из темы, второй хранит данные параметров виджета. Формируем название и отображать его на странице. Затем с помощью запроса к базе данных WP_User_Query получаем массив с именами последних зарегистрированных пользователей, перебираем его и помещаем имена в элементы списка. Здесь также используются специальные переменные $before_widget и $after_widget, значения которых устанавливается темой.

    Виджет на боковой панели блога:

    [​IMG]

    Тема была взято с сайта Wp-forum
     
    Sorcus нравится это.
  2. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    474
    Симпатии:
    277
    Зачем так многа букаф?
    Чем это не устраивает?
     
  3. midrex

    midrex Создатель

    Регистр.:
    6 мар 2014
    Сообщения:
    35
    Симпатии:
    5
    А не знает ли кто плагина wordpress, наподобие конструктора виджетов. Попадались конструкторы форм обратной связи, ледингов, даже "калькуляторов" всяких, может кто-то использует универсальный инструмент по облегчению создания виджетов? Поделитесь, если не трудно.
     
  4. BigJaggaMonsta

    BigJaggaMonsta Создатель

    Регистр.:
    24 мар 2014
    Сообщения:
    17
    Симпатии:
    3
    Cforms II — конструктор форм
     
  5. 6ayhtu

    6ayhtu Писатель

    Регистр.:
    4 окт 2013
    Сообщения:
    10
    Симпатии:
    0
    Ну как бы виджет создать легко с помощью кода, и подогнать стили и т.д! Ну не знаю я плагинами не пользуюсь!
     
  6. jaky

    jaky Создатель

    Регистр.:
    8 сен 2011
    Сообщения:
    44
    Симпатии:
    7
    plugin page builder
     
  7. midrex

    midrex Создатель

    Регистр.:
    6 мар 2014
    Сообщения:
    35
    Симпатии:
    5
    Да кое что этот бесплатный плагин может, но по облечению конструирования странниц по-моему лучше Visual Composer. Хотя конечно собственные виджеты в нем нельзя создать. Cforms II тоже есть достойная альтернатива - Gravity Forms. Но это все немного не то, спасибо всем кто ответил на просьбу.-