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

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

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

Что такое виджеты WordPress и зачем вам это знать?

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

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

Многие люди, которые имеют дело с WordPress, планируют создавать свои собственные темы в какой-то момент времени. Логической эволюцией этого является предложение функций через виджеты. Как правило, гораздо лучше предоставлять дополнительные функции через плагины и виджеты, так как тогда эти функции можно будет использовать после изменения темы. Это сделано с целью удобства использования, что обязательно будет вознаграждено вашими посетителями.

Разработка виджетов WordPress — начало работы

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

Дальнейшая информация:

Разработка виджетов WordPress — основы

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

1 — Инициализация — функция __construct(). Здесь определяются идентификатор, имя и описание виджета. Кроме того, мы также можем установить параметры по умолчанию в этой области. Кроме того, когда необходимо сослаться на JavaScript или таблицы стилей, необходимая функция также берется из этой области.

2 — Frontend-Design — функция widget(). Это область, в которую помещена функция выдачи кода. Таким образом, это фактическая функциональная область виджета.

3 — Backend-Design — функция form(). Необходимые функции вместе с HTML для области управления виджетом в области администрирования WordPress входят в эту область.

4 — Обновление настроек — функция update(). Как уже понятно из названия, сохраняется функция проверки и обновления настроек виджета.

5 — Регистрация — функция init(). Виджет зарегистрирован в WordPress, поэтому его можно активировать как плагин.

Эти пять областей составляют основную структуру виджета, как показано на следующем снимке экрана.

Один клик открывает GitHub Gist
Die vier Grundbereiche eines Widgets

Самый важный шаг — заголовок плагина

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

Плагины для WordPress

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

Die Dr. Web Plugins in der Übersicht

Два примера плагинов, включая загрузку

Часто примеры — лучший способ чему-то научиться. Таким образом, я выбрал два виджета в качестве примеров и переписал их. Уровень сложности подходит для начинающих, виджет «Обо мне» остается простым, виджет «Twitter Timeline» немного сложнее, так как при использовании он добавляет файл JavaScript в нижний колонтитул. Однако виджет Twitter также следует рассматривать как виджет для начинающих.

Виджет «Обо мне»

Этот небольшой плагин создает простой виджет «Обо мне», который может отображать как текст о вас, так и Gravatar. Размер вашего Gravatar можно настроить, как и страницу, на которую ссылается виджет.

Один клик открывает полный файл на GitHub.
Дас

Настройки виджета

О Widget EinstellungenОкончательный результат на сайте

Das Endergebnis des Обо мне Виджеты

Виджет временной шкалы Twitter

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

Один клик открывает полный файл на GitHub.
Код виджетов временной шкалы Twitter

Настройки виджета

Виджеты TwitterОкончательный результат на сайте

дас-твиттер-виджет

Последние штрихи в виджете

После того, как эти виджеты WordPress были закодированы и протестированы в локальной среде разработки, их можно установить. Для этого создайте папку с именами плагинов (в нижнем регистре), например, »noupe-о-виджет«. Файл плагина находится там. Впоследствии вы можете загрузить папку в индекс плагина (wp-контент/плагины) через (S)FTP и активируйте его так же, как и с плагином. После этого виджет появится в списке доступных виджетов и его можно будет использовать.

Заключение

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

Загрузите примеры виджетов

(дпе)