Как создать собственный виджет WordPress

/

Вы хотите создать свои собственные виджеты в WordPress? Виджеты позволяют добавлять элементы, не относящиеся к контенту, на боковую панель или в любую готовую для виджетов область вашего веб-сайта.

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

В этой статье мы покажем вам, как создать собственный виджет WordPress, шаг за шагом.

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

Примечание. Это руководство предназначено для пользователей WordPress, которые изучают разработку и программирование WordPress.

Что такое виджет WordPress?

Виджеты WordPress содержат фрагменты кода, которые вы можете добавить на боковые панели вашего веб-сайта или в области, готовые к работе с виджетами.

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

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

Добавление виджетов в WordPress

WordPress также позволяет разработчикам создавать свои собственные виджеты.

Многие премиальные темы и плагины WordPress поставляются со своими собственными пользовательскими виджетами, которые вы можете добавить на свои боковые панели.

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

Сказав это, давайте посмотрим, как легко создавать собственные пользовательские виджеты в WordPress.

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

Если вы изучаете программирование WordPress, вам понадобится локальная среда разработки. Вы можете установить WordPress на свой компьютер (Mac или Windows).

Есть несколько способов добавить собственный код виджета в WordPress.

В идеале вы можете создать плагин для конкретного сайта и вставить туда свой код виджета.

Вы также можете вставить код в файл functions.php вашей темы. Однако он будет доступен только тогда, когда эта конкретная тема активна.

Еще один инструмент, который вы можете использовать, - это плагин Code Snippets, который позволяет легко добавлять собственный код на ваш сайт WordPress.

В этом уроке мы создадим простой виджет, который просто приветствует посетителей. Наша цель - познакомиться с классом виджетов WordPress.

Давайте начнем.

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

WordPress поставляется со встроенным классом виджетов WordPress. Каждый новый виджет WordPress расширяет класс виджета WordPress.

В руководстве разработчика WordPress упоминается 18 методов, которые можно использовать с классом WP Widget.

Однако в рамках этого руководства мы сосредоточимся на следующих методах.

  • __construct (): это часть, в которой мы создаем идентификатор, заголовок и описание виджета.
  • виджет: здесь мы определяем вывод, генерируемый виджетом.
  • форма: в этой части кода мы создаем форму с параметрами виджета для бэкэнда.
  • update: это та часть, где мы сохраняем параметры виджета в базе данных.

Давайте изучим следующий код, в котором мы использовали эти четыре метода внутри класса WP_Widget.

<?php
// Creating the widget
class wpb_widget extends WP_Widget {

    // The construct part 
    function __construct() {

    }

    // Creating widget front-end
    public function widget( $args, $instance ) {

    }

    // Creating widget Backend
    public function form( $instance ) {

    }

    // Updating widget replacing old instances with new
    public function update( $new_instance, $old_instance ) {

    }

    // Class wpb_widget ends here
}

В последней части кода мы фактически зарегистрируем виджет и загрузим его в WordPress.

<?php
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Теперь давайте соберем все это вместе, чтобы создать базовый виджет WordPress.

Вы можете скопировать и вставить следующий код в файл functions.php своего плагина или темы.

<?php
// Creating the widget
class wpb_widget extends WP_Widget {

    function __construct() {
        parent::__construct(

            // Base ID of your widget
            'wpb_widget',

            // Widget name will appear in UI
            __('WP Widget', 'wpb_widget_domain'),

            // Widget description
            array( 'description' => __( 'Sample widget based on WP Tutorial', 'wpb_widget_domain' ), )
        );
    }

    // Creating widget front-end

    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );

        // before and after widget arguments are defined by themes
        echo $args['before_widget'];
        if ( ! empty( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];

        // This is where you run the code and display the output
        echo __( 'Hello, World!', 'wpb_widget_domain' );
        echo $args['after_widget'];
    }

    // Widget Backend
    public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) ) {
            $title = $instance[ 'title' ];
        }
        else {
            $title = __( 'New title', 'wpb_widget_domain' );
        }
        // Widget admin form
        ?>
        <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
    }

    // Updating widget replacing old instances with new
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }
    // Class wpb_widget ends here
}


// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

После добавления кода вам нужно перейти на страницу Внешний вид »Виджеты. Вы заметите новый виджет в списке доступных виджетов. Вам нужно перетащить этот виджет на боковую панель.

Демо-виджет

У этого виджета есть только одно поле формы для заполнения, вы можете добавить свой текст и нажать кнопку «Сохранить», чтобы сохранить изменения.

Теперь вы можете посетить свой веб-сайт, чтобы увидеть его в действии.

Предварительный просмотр вашего пользовательского виджета

А теперь давайте снова изучим код.

Сначала мы зарегистрировали «wpb_widget» и загрузили наш собственный виджет. После этого мы определили, что делает этот виджет и как отображать внутреннюю часть виджета.

Наконец, мы определили, как обрабатывать изменения, внесенные в виджет.

Теперь есть несколько вещей, которые вы можете спросить. Например, для чего нужен wpb_text_domain?

WordPress использует gettext для обработки перевода и локализации. Этот wpb_text_domain и __eсообщает gettext сделать строку доступной для перевода. Посмотрите, как найти готовые к переводу темы WordPress.

Если вы создаете собственный виджет для своей темы, вы можете заменить wpb_text_domain на текстовый домен вашей темы.

Мы надеемся, что эта статья помогла вам узнать, как легко создать собственный виджет WordPress. Вы также можете увидеть наш список самых полезных виджетов WordPress для вашего сайта.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как отобразить все ваши сообщения WordPress на одной странице

Вы хотите отображать все свои сообщения WordPress на одной странице? Недавно один из наших читателей захотел создать страницу архивов и отображать

Как отключить JSON REST API в WordPress

WordPress 4.4 добавил долгожданный JSON REST API. Он отлично подходит для разработчиков плагинов, но многие владельцы сайтов могут вообще не счесть его полезным.

Как легко отображать код на вашем сайте WordPress

Вы хотите, чтобы код отображался в сообщениях блога WordPress? Если вы попытались добавить код в виде обычного текста, WordPress не отобразит его правильно. WordPress

Как очистить кеш DNS (Mac, Windows, Chrome)

Вас даже просили очистить кеш DNS? Это совет по устранению неполадок, который поможет вам получить последнюю версию веб-сайта, особенно после изменений