Как Создать Виджеты Для WordPress. Editor widgets - создай свой виджет Как сделать свой виджет для wordpress

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

Что собой представляет WordPress-виджет?

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

Конечно, как пользователь, вы всегда можете создавать свои собственные , которые впоследствии вы сможете использовать в любой теме.

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

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

В данном руководстве мы создадим простой виджет, который просто приветствует посетителей. Скопируйте следующий код и поместите его в плагин или в functions.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 __("WPBeginner Widget", "wpb_widget_domain"), // Widget description array("description" => __("Sample widget based on WPBeginner Tutorial", "wpb_widget_domain"),)); } // Creating widget front-end // This is where the action happens 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 ?>

"> " name="get_field_name("title"); ?>" type="text" value="" />

Теперь перейдите в раздел Внешний вид – Виджеты и перетащите виджет WPBeginner Widget в свой сайдбар, чтобы увидеть его в действии.

Довольно просто, не правда ли? Сначала мы создаем произвольный виджет. Затем мы определяем, что именно виджет делает и как он отображается в бэкенде. После чего мы определяем, как следует обрабатывать изменения, сделанные виджетом. Наконец, мы регистрируем и загружаем виджет.

В этом коде некоторые вещи могут вызвать у вас вопросы. Скажем, к примеру, что делает wpb_text_domain. WordPress использует gettext для обработки трансляции и локализации. Так вот: wpb_text_domain и __e указывают gettext на то, что эти строки доступны для перевода. , смотрите в нашем руководстве.

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

Чисто технически, виджет WordPress – это, так же как и плагин, набор файлов, которые копируются в определённую папку на сайте. В этих файлах задаются специальные инструкции для “движка”, благодаря которым система распознает сам факт виджета и позволяет его разместить в той или панели виджетов (число панелей и места их расположения зависят от конкретной WordPress-темы).

Система виджетов WordPress

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

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

Как создать виджет в WordPress

“Движок” WordPress поставляется с целым набором различных виджетов. Но часто их функциональности бывает недостаточно для решения тех или иных задач. Поэтому и возникает необходимость создать свой, который будет отвечать всем требованиям.

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

В системе WordPress создать виджет можно двумя способами. Первый заключается в создании отдельного плагина, после активации которого будет доступен виджет для использования. Мы же воспользуемся более легким способом – добавим код виджета непосредственно в основной конфигурационный файл темы – functions.php .

Если Вы не знаете, как редактировать functions.php , то в этом случае Вам поможет плагин ProFunctions .

Разработка виджета

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

Для создания виджетов в WordPress применяется объектная модель программирования языка PHP . В “движке” имеются все необходимые инструменты для этого. Так, для виджетов существует специальный класс WP_Widget , использование которого и позволит успешно создать необходимый виджет для сайта WordPress. Он включает около 20 различных методов. Однако нам потребуются лишь четыре из них:

• __construct() – регистрация базовой информации о виджете;
• widget() – вывод виджета в области виджетов на сайте;
• form() – параметры виджета, отображаемые в области администрирования WordPress;
• update() – обновление настроек виджета в админ-панели.

В дополнение к этим четырем методам используется функция add_action() , необходимая для привязки пользовательской функции виджетов к специальному хуку widgets_init .

Рассмотрим поэтапно создание нашего виджета.

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

Class wpschool_example_widget extends WP_Widget { }

В этом коде наш класс имеет название wpschool_example_widget . Директивой extends мы даем понять системе, что он будет наследовать все методы основного класса WP_Widget .

На следующем этапе добавим первый метод – __construct() . Он используется для назначения идентификатора, заголовка, имени класса и описания для виджета.

Public function __construct() { $widget_options = array("classname" => "wpschool_widget", "description" => "Это наш первый виджет",); parent::__construct("wpschool_widget", "WPSchool Widget", $widget_options); }

Чтобы понять эту функцию, следует начать с строки, начинающейся с parent::__ construct() . Эта строка создает новый виджет с идентификатором wpschool_widget , именем WPSchool Widget и двумя параметрами виджетов: имя класса (wpschool_widget ) и краткое описание (Это наш первый виджет ).

Весь этот код входит в wpschool_example_widget и используется для регистрации виджета в WordPress, а затем отображает заголовок и описание виджета в области администратора.

Следующий метод, который мы добавим, будет widget() . Он позволит вывести виджет в области виджетов на сайте.

Public function widget($args, $instance) { $title = apply_filters("widget_title", $instance[ "title" ]); $blog_title = get_bloginfo("name"); $tagline = get_bloginfo("description"); echo $args["before_widget"] . $args["before_title"] . $title . $args["after_title"]; ?>

Site Name:

Tagline:

Метод widget() содержит код, который генерирует фактический контент, отображаемый виджетом на сайте. В нашем примере мы предоставим пользователям возможность отображать, кроме названия и описания сайта, еще и заголовок самого виджета. Поэтому для этого нужно будет захватить этот заголовок, а затем использовать get_bloginfo() , чтобы отобразить название и описание блога.

Также следует понять еще кое-какие моменты.

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

$instance – это переменная, в которую загружаются значения, связанные с текущим экземпляром виджета. Если Вы добавили виджет на боковую панель дважды, каждый экземпляр $instance будет содержать значения, специфичные для каждого экземпляра виджета.

Фильтр widget_title возвращает заголовок текущего экземпляра виджета.

get_bloginfo() – функция, которая может использоваться для возврата всех видов метаданных WordPress-сайт, включая его название и описание.

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

Обратите внимание, что практически каждый виджет должен включать аргументы before_widget , after_widget , before_title и after_title . Они необходимы для обеспечения того, чтобы каждый виджет был вложен в специфичные для темы теги HTML .

На следующем этапе добавим метод form() , позволяющий сохранять параметры виджета, отображаемые в админ-панели WordPress.

Public function form($instance) { $title = ! empty($instance["title"]) ? $instance["title"] : ""; ?>

">Title: " name="get_field_name("title"); ?>" value="" />

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

В методе form() возвращаются текущие значения конкретного экземпляра виджета, вызывая параметр $instance . Затем происходит проверка текущей информации об экземпляре, чтобы узнать, является ли заголовок пустым. Если это не так, будет выведено текущее название.

Следующий на очереди – метод update() , отвечающий за обновление настроек виджета в админ-панели.

Public function update($new_instance, $old_instance) { $instance = $old_instance; $instance[ "title" ] = strip_tags($new_instance[ "title" ]); return $instance; }

Видно, что метод принимает два параметра: $new_instance и $old_instance . Первый содержит значения, добавленные в форму настроек виджетов. Второй содержит существующие настройки (если таковые существуют).

Метод update() должен соответствующим образом проверять новые параметры, а затем назначать их переменной $instance и возвращать эту обновленную переменную.

Заключительным этапом создания нового виджета будут его регистрация и активация.

Function wpschool_register_widget() { register_widget("wpschool_example_widget"); } add_action("widgets_init", "wpschool_register_widget");

Тут, во-первых, создается функция для регистрации виджета, используя имя объекта виджета для его идентификации. Затем идет привязка функции регистрации к WordPress, используя хук widgets_init .

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

После добавления всего кода в файл functions.php в админ-разделе Внешний вид -> Виджеты должен появится виджет с названием WPSchool Widget , который теперь доступен для добавления на панель виджетов Вашей темы.

Полный текст нашего виджета:

/* Виджет WPSchool Widget */ class wpschool_example_widget extends WP_Widget { // Установка идентификатора, заголовка, имени класса и описания для виджета. public function __construct() { $widget_options = array("classname" => "wpschool_widget", "description" => "Это наш первый виджет",); parent::__construct("wpschool_widget", "WPSchool Widget", $widget_options); } // Вывод виджета в области виджетов на сайте. public function widget($args, $instance) { $title = apply_filters("widget_title", $instance[ "title" ]); $blog_title = get_bloginfo("name"); $tagline = get_bloginfo("description"); echo $args["before_widget"] . $args["before_title"] . $title . $args["after_title"]; ?>

Site Name:

Tagline:

">Title: " name="get_field_name("title"); ?>" value="" />

AppWidget, или просто «виджет» - один из самых эффектных и удобных элементов пользовательского интерфейса в операционной системе Android, который можно добавить на рабочий стол для быстрого доступа к тем или иным функциям соответствующего приложения. В данной статье мы разберемся, как собственноручно создать свой виджет.

Что виджет представляет из себя конструктивно? Виджет нужен для отображения той или иной информации, связанной с приложением, к которому он относится, или же для оперативного взаимодействия с данным приложением напрямую через рабочий стол. Самый простой пример – часы на рабочем столе. Естественно, виджеты без труда можно добавлять или удалять с рабочих столов.

Качественно выполненные виджеты заметно оптимизируют взаимодействие с устройством. Более того, очень часто самые удобные виджеты занимают на рабочем столе минимум пространства, и при этом наиболее информативны. Практически любой пользователь будет стараться разместить на рабочих столах своего Android-гаджета максимальное количество информации, и важный момент заключается в том, что пространство ограничено.

Начнем создание виджета мы с дизайна. Благо, компания Google предоставила весьма полезные UI Guidelines для разработчиков программного обеспечения, где подробно описан процесс создания дизайна и основные принципы эргономичности. Есть также и отдельная официальная инструкция для создания виджетов, с которой можно ознакомиться по ссылке: //developer.android.com/guide/practices/ui_guidelines/widget_design.html .

Виджет, занимающий одну «клетку» на рабочем столе, имеет разрешение 80х100 точек, соответственно, для создания продолговатый виджет длиной в 4 клетки и высотой в одну, то нужно, соответственно, 320х100 пикселей. Такой размер мы и возьмем за основу создаваемого нами виджета.

Теперь виджет нужно нарисовать. В принципе, виджет вполне может и не иметь никакой графической части, и отображать только текст или элементы управления, без фона и рамки, но, естественно, красивый и приятный глазу виджет просто обязан иметь качественный дизайн. Поэтому нарисуем фон. За основу возьмем фон из упомянутого выше UI Guideline. Открываем доступную нам заготовку в Photoshop или другом графическом редакторе и делаем всё, что заблагорассудится, после чего сохраняем полученное изображение в формате.png. Нужный нам формат PNG-24, с 8-битным цветом и прозрачным фоном. Вот и готова основа для нашего виджета.

Теперь перейдем к созданию программной части. Виджет может не иметь программной части. Проще говоря, в меню добавления виджетов он будет, но в основном меню приложений – нет. Мы создадим виджет именно такого типа. Создаем новый проект, и называем его для удобства так, чтобы основной класс имел имя widget.java.

Редактируем AndroidManifest . xml . Объявляем наш виджет: