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

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

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

Чисто технически, виджет 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Виджеты отлично дополняют любую тему WordPress , располагаясь обычно в боковой панели. Виджеты легко добавить, настроить или удалить, используя их drag-and-drop свойства.

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

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

Место и порядок размещения виджетов устанавливаются в файле functions.php любой темы WordPress .

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

Ресурсы

• Установленный WordPress ;
• Общее представление о виджетах в WordPress;
• Знание основ WordPress API

1 Создание класса и функций

Виджеты в WordPress – это классы, которые легко модифицировать. Класс предоставляет разработчику готовую функциональность « из коробки ». Базовый класс виджета содержит функции, которые разработчик должен дополнить нужным содержимым. Для начала создадим класс виджета.

Создайте новый файл ads_widget.php в каталоге, в котором установлен WordPress . Затем поместите туда приведённый ниже код.

Обратите внимание на комментарий над именем класса. Этот комментарий содержит информацию о плагине: его название, имя автора и другие сведения:

2 Код инициализации виджета

Поместите этот код в функцию Ads_Widgets() . Это код инициализирует виджет и будет использоваться для обращения к его текущей инстанции:

3 Функция создания формы

Теперь создадим код, который отобразит форму для сохранения настроек в панели администрирования сайта. Его место – функция form() :

4 Функция сохранения параметров

Функция update() считывает параметры из формы и сохраняет их в базе данных WordPress :

5 Функция отображения виджета

Эта функция отобразит содержимое виджета на главной странице сайта. Код принимает некоторые аргументы от темы: заголовок, описание и другие параметры. Скопируйте этот код в функцию widget() :

6 Добавление обработчика событий

Наконец, загрузите виджет функцией widget_init() , передав её в событие action . Это также зарегистрирует имя виджета, чтобы он мог функционировать как в пользовательской, так и в административной частях сайта. Поместите следующий код ниже объявления класса:

7 Активация виджета

Теперь, когда наш виджет готов, активируйте его.

Для этого из панели администрирования перейдите в панель плагинов и кликните на ссылке “ Activate ” (« Активировать ») напротив нашего плагина:

Теперь произведите соответствующие настройки, чтобы показывать баннеры:

А теперь зайдите в пользовательскую часть сайта и убедитесь, что плагин работает:

Заключение

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

Если вы хотите получить ту же функциональность без необходимости писать код, возможно, вам следует попробовать встроенные плагины, например, rtWidgets .

Надеюсь, вы получили пользу от этой статьи. Можете использовать код, приведенный в ней, как сочтёте нужным.

Как обычно, приглашаю вас поделиться своими мыслями в комментариях.

Редакция Перевод статьи « How to Create WordPress Widgets »

Источник

Виджеты в WordPress

Хотите больше практики? Рекомендую тогда посмотреть мой видеоурок по виджетам.

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

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

Как добавить или удалить виджеты (для начинающих)

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

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

В более поздних версиях WordPress есть и другой способ добавления виджета — вам достаточно кликнуть по его заголовку и из выпадающего списка выбрать сайдбар, в который вы хотите его добавить:

Когда виджет будет добавлен, мы увидим его настройки. В виджете «Календарь» это заголовок:

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

Для того, чтобы удалить виджет, нажимаем ссылку «Удалить» (её видно на предыдущем скриншоте). Если же вы хотите лишь временно отключить виджет, сохранив его настройки, перетаскиваем его в блок «Неактивные виджеты», который находится под блоком «Доступные виджеты».

Отключение стандартных виджетов WordPress

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

Для отключения виджетов можете воспользоваться готовым кодом ниже:

1. Вставьте код в файл functions.php текущей темы.
2. Удалите или закомментируйте строки с теми виджетами, которые удалять не нужно.
3. И только потом можете сохранить файл.

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

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

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

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

А сейчас мы будем создавать виджет популярных постов — выведем отсортированные по количеству комментариев записи через WP_Query.

По своей структуре наш виджет будет похож на стандартный виджет WordPress «Свежие записи», т е он будет иметь похожие параметры (заголовок и количество отображаемых постов) и похожий HTML-шаблон для вывода постов (заголовки записей со ссылками в виде

-списка).

Вставляем этот код в functions.php :

Я перетащил этот код «как есть» (естественно удалив первую строчку ) в файл functions.php стандартной темы TwentyTwelve, в итоге в списке виджетов на странице Внешний вид > Виджеты мы видим наш виджет:

Давайте перетащим его в какой-нибудь сайдбар справа:

Вот и всё, указываем заголовок виджета (если нужно), количество постов, которое мы хотим вывести и нажимаем «Сохранить» — после этого виджет появится на сайте.

Список плагинов с полезными виджетами

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

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

Подробно описывать каждый плагин я не буду — описание почти каждого из них тянет на новый пост. Устанавливайте, смотрите, тестируйте (на момент публикации этого поста каждый из плагинов был протестирован мною лично и всё работало отлично).

• Beautiful Yahoo Weather — виджет прогноза погоды, довольно неплохой и красивый по сравнению с аналогами. Но для этих целей наверное лучше использовать текстовый виджет WordPress в связке с информерами от Gismeteo, Яндекса и т.д.
• NextGEN Gallery — плагин для создания и управления галереями изображений в WordPress, одна из функций которого — виджет галереи.
• Search by Google — форма поиска по сайту от Google (Google Custom Search).
• Slick Contact Forms — виджет формы обратной связи.
• Tabbed Login Widget — виджет авторизации, сделан в виде трех вкладок — «Вход», «Регистрация», «Забыли пароль», весьма удобный.
• WP Currency Converter — конвертер валют.
• WP Editor Widget — используйте редактор WordPress для заполнения этого виджета.
• WP-Cumulus — добавляет флэш-облако тегов и/или категорий.
• WP-Polls — удобный плагин для создания опросов на сайте.
• Yet Another Related Posts Plugin (YARPP) — мощный плагин для вывода похожих записей.
• Youtube Channel Gallery — виджет со свежими видео с канала на YouTube. Виджет выглядит очень красиво, хорошо и легко настраивается.

Со временем список будет пополняться.

Я не стану рассматривать все остальные виджеты социальных сетей (Facebook, Вконтакте, Twitter и т.д.) — в принципе официальные виджеты вполне удобные — просто копируем код, который нам дают и вставляем его в вордпрессовский виджет «Текст».

Посты по теме:

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник