Построение простого виджета для WordPress
Создание виджета 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() {} // Форма для опций виджета
Шаг 1
Для начала нужно загрузить виджет с помощью функции “widgets_init
“. Это крюк действий и подробное описание вы можете найти в кодексе WordPress.
add_action( 'widgets_init', 'register_my_widget' );
Для инициализации виджета используется функция, в которой наш виджет регистрируется в системе, чтобы к нему открылся доступ в разделе виджетов.
function register_my_widget() { register_widget( 'My_Widget' ); }
Шаг 2
Весь код виджета заключен в класс. Имя класса имеет важное значение. Нужно помнить, что имя класса и имя функции регистрации должны совпадать.
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 ); }
Теперь все необходимые операции по регистрации завершены и можно сконцентрироваться на основных функциях нашего виджета.
Шаг 3
Функция widget()
относится к выводу нашего виджета. Мы будем передавать в нее пару аргументов. Первый аргумент будет получен из темы, в нем передается название и другие параметры. А второй аргумент - экземпляр нашего класса.
function widget( $args, $instance )
Затем мы извлекаем значения из аргумента, потому что они должны быть доступны локально.
Затем мы устанавливаем название и другие значения для нашего виджета, которые можно поменять в меню виджета. Также используются специальные переменные $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;
Шаг 4
Теперь функция 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; }
Обратите внимание что мы обрезаем любой код XHTML в значениях переменных, чтобы исключить его влияние на работу виджета.
Шаг 5
Теперь создадим шаблон формы, которая будет служить для ввода значений. Здесь пользователь будет определять установки и значения. Функция 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, после чего виджет будет доступен для использования через панель администратора (раздел для виджетов).
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BE6yVjmCzcY/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
- 2023-12-28 » ТОП-5 методов юзабилити-исследований. Разбор слабых и сильных сторон
Есть три способа отвечать на вопросы: сказать необходимое, отвечать с приветливостью и – наговорить лишнего Плутарх - (ок. 46 — ок.120) - древнегреческий писатель, историк |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.