Виджеты wordpress

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

Виджеты

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

Мы собрали более 30 наших любимых БЕСПЛАТНЫХ WordPress плагинов для добавления виджетов. Давайте же рассмотрим каждых из них.

Плагины пользовательских сайдбаров

Обо всём по порядку. Чтобы использовать виджеты, вам нужно место, где их разместить. Во многих темах предусмотрено наличие виджетов в боковых панелях и/или подвалах. Но что если вы хотите иметь разные виджеты на разных страницах?

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

Custom Sidebars

Custom Sidebars

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

WooSidebars

WooSidebars

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

Simple Page Sidebars

Simple Page Sidebars

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

Социальные плагины WordPress

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

Social Icons Widget by WPZoom

Social Icons Widget by WPZoom

Этот удобный плагин добавляет виджет для ваших ссылок на профили в социальных сетях. С поддержкой более 80 социальных сетей, а также более 400 иконок для выбора, плагин является отличным способом добавления простых квадратных, скруглённых, простых или проименованных социальных иконок в ваши сайдбары.

Meks Smart Social Widget

Meks Smart Social Widget

ПлагинMeks Smart Social Widget включает простые настройки для 40 социальных иконок, для каждой из них предусмотрен выбор 3 разных стилей (квадратные, круглые или скруглённые). Просто вставьте виджет, затем добавьте  немного вводного текста, выберите форму иконки и размер в пикселях, а после этого добавьте свои ссылки. Легко!

Плагин AccessPress Social Icons

AccessPress Social Icons Plugin

Если вы ищете виджет-плагин с “изюминкой”, то AccessPress может вам подойти. Этот плагин включает в себя 12 уникальных встроенных тем иконок (включая гексагоны, контурные иконки и даже бумажные самолёты), выбор горизонтального или вертикального отображения, подсказки, эффекты при наведении и многое другое.

Плагины ленты Instagram

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

Instagram Feed
Instagram Feed

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

WP Instagram Widget

WP Instagram Widget

Хотите упрощённый плагин Instagram? WP Instagram Widget является быстрым, простым и толковый. Просто установите плагин, добавьте виджет Instagram в сайдбар или подвал и введите выбранные вами настройки (имя пользователя, количество фотографий, текст ссылки и проч.)

Instagram Slider Widget

Instagram Slider Widget

Хотите добавить простую сетку ленты или даже слайдер? Попробуйте плагин Instagram Slider Widget. Он выводит самые свежие фотографии из аккаунта пользователя или хэштег с заданными настройками порядка (по дате, случайно и т.д.), навигации слайдера, анимации слайдов и проч.

Новостная рассылка

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

WP SubscribeWP Subscribe

Плагин WP Subscribe работает с aWeber, MailChimp и Feedburner, так что вы можете добавить блок подписки на новостную рассылку в любую область с готовым виджетом. В нём простые настройки для добавления подписи к блоку подписки, сообщения об успешном выполнении, сообщения об ошибки, а персональные настройки могут быть добавлены с помощью CSS.

MailChimp for WordPressMailChimp for WordPress

Если вы используете MailChimp, то плагин MailChimp for WordPress — превосходный выбор. Плагин добавляет настройки для создания простого выбора подписки в вашем сайдбаре или футере, наряду с подпиской на новостную рассылку есть настройки для комментариев, BuddyPress регистрации, плагина bbPress и оформления и оплаты заказа в EDD или WooCommerce.

MailPoset Newsletters

MailPoset Newsletters

Если вы хотите отправлять новостные рассылки сами, без использования услуг сторонних организаций, тогда взгляните на плагин MailPoet Newsletters. Этот плагин использует ваш почтовый домен, веб-сервер или даже Amazon для отправки новостных рассылок, которые вы можете создавать напрямую через админку WordPress. И он идёт в комплекте с простым виджетом подписки, который можно вставить в любой сайдбар.

Виджеты Свежих и Популярных Записей

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

Recent Posts Widget Extended

Recent Posts Widget Extended

Плагин Recent Posts Widget Extended упрощает вывод ваших последних записей с миниатюрами, отрывками, таксономией и проч. в любой области с виджетом. В нём тонна настроек, так что вы можете ограничить вывод данных по рубрикам, меткам или даже статусу записи.

WordPress Popular Posts

WordPress Popular Posts

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

Popular Posts Tabbed Widget for Jetpack

Popular Posts Tabbed Widget for Jetpack

Для того, чтобы выглядеть более оригинально, можно добавить виджет записей с вкладками. Плагин  Popular Posts Tabbed Widget использует Jetpack для того, чтобы найти ваши свежие записи, самые популярные записи и самые комментируемые записи. Плюсом являются простые настройки количества записей, размера миниатюры и первой вкладки.

Голосования и опросы

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

WP Polls

WP Polls

Плагин WP-Polls — это простое голосование на Ajax, которое вы можете добавить в любую запись, страницу или сайдбар. Настройте ваши голосования с помощью шаблонов и CSS сразу после создания, а затем вставьте их в любую область для виджетов, выбрав последнее или какое-то конкретное голосование.

Poll, Survey, Quiz & Form by OpinionStagePoll, Survey, Quiz & Form by OpinionStage

OpinionStage предлагает более богатый функционалом вариант — плагин Poll, Survey, Quiz & Form. Это отличный способ увеличить вовлечённость читателей чрез просьбу о читательском взносе (или даже использовать голосование для викторины). К тому же он простой. Достаточно создать голосование и добавить в свой виджет.

Quiz & Survey Master

Quiz & Survey Master

Плагин Quiz & Survey Master включает настройки для создания простых тестов и опросов с помощью “правда/ложь”, многовариантности, открытых вопросов, флажков, заполнения пропусков и пронумерованных вопросов. Помимо этого он использует простой шорткод, поэтому всё, что нужно будет сделать, это вставить шорткод в текстовый блок, запись или страницу — куда захотите.

Виджеты форм обратной связи

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

Contact Form 7

Contact Form 7

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

WPForms Lite

WPForms Lite

Плагин WPForms Lite является drag’n’drop конструктором форм для WordPress, который вы можете использовать, чтобы создать пользовательские формы за пару минут. К тому же предустановленные шаблоны помогают сэкономить время, так же как и простые настройки для добавления ваших форм в любой виджет, запись или страницу.

Contact Widgets

Contact Widgets

Если вы просто хотите выводить свою контактную информацию (а не форму обратной связи), тогда обратите внимание на бесплатный плагин Contact Widgets. Этот простой плагин добавляет два новых виджета в ваш WordPress сайт: один для вашей личной контактной информации или контактной информации вашей компании (email, телефон, факс и адрес с картой Google), а второй для ваших профилей в социальных сетях.

Плагины Календарей

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

The Events Calendar

 

The Events Calendar

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

Archives Calendar Widget

Archives Calendar Widget

Если вы постоянно добавляете мероприятия в свой блог или просто хотите выводить свои записи по дате, плагин Archives Calendar Widget является отличным выбором. Этот плагин добавляет виджет с календарём, у которого помимо настроек по умолчанию есть ещё множество других. Используйте настройки для создания ежедневного или ежемесячного календаря с подсчётом записей, который вы можете с лёгкостью стилизовать с помощью CSS для того, чтобы добавить пользовательские цвета и формы.

Tockify Events Calendar

Tockify Events Calendar

Добавление мероприятий с помощью плагина Tockify Calendar становится проще с мощным редактором, различными макетами календарей (месяц, органайзер, доска для объявлений), настраиваемым внешним видом, синхронизацией с Google Calendar и многим другим. Плюс ко всему встроенный виджет с мини-календарём упрощает вывод предстоящих событий в календаре с помощью списка мероприятий под выбранным днём.

Виджеты для рекламных баннеров

Монетизация критична для большинства блогов и веб-сайтов. Без хотя бы малейших денежных поступлений может быть достаточно тяжело сохранять сайт в рабочем состоянии. Обратите внимание на эти виджеты рекламных баннеров для получения небольшой прибыли из вашего сайдбара или футера.

Ads Widget Easy

Ads Widget Easy

Плагин Ads Widgets Easy облегчает процесс добавления рекламных баннеров в любую область для виждетов. Плагин включает в себя наипростейшие опции — заголовок рекламы, ссылка и изображение. Таким способом вы можете быстро и без труда добавить баннеры, и вам не придётся самим печатать код в текстовом виджете.

Meks Easy Ads Widget

Meks Easy Ads Widget

Нужно больше настроек? Тогда взгляните на плагин Meks Easy Ads Widget. Этот плагин делает возможным создание неограниченного количества рекламных баннеров в одном виджете, используя заданные или пользовательские размеры рекламных объявлений, случайный порядок, анимацию слайдов или карусели и многое другое. Он идеально подходит для создания альтернативного баннера или даже сетки маленьких рекламных объявлений размером 125 x 125.

Google AdSEnse by BestWebSoft

Если вы хотите добавить рекламу Google Adsense в свои сайдбары или футеры, то плагин Google AdSense by BestWebSoft будет быстрым и лёгким решением. С помощью этого плагина вы можете использовать ваш код Adsense , чтобы автоматически добавить рекламу в виджеты (так же, как и на главную страницу, страницы, записи, результаты поиска и проч.).

Больше полезных виджетов

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

Google Maps Widget

Google Maps Widget

Добавление карты в ваш сайдбар или футер — отличный способ дать знать вашим посетителям/покупателям, где именно находится ваша компания. Плагин Google Maps Widget позволит вам быстро и с лёгкостью добавить карты в ваши области с виджетами. В отличие от стандартных встроенных кодов, плагин Google Maps Widget выводит на новый уровень добавление карт, позволяя вам с лёгкостью создавать интерактивные карты с поддержкой лайтбокса. Они также предлагают версию PRO с добавлением более 50 функций и опций, таких как оформление, клонирование виджетов, поддержка множества отметок, интеграция Google Analytics и, конечно же, премиум поддержка.

SiteOrigin Widget Bundle

Виджеты wordpress

Плагин SiteOrigin Widgets Bundle предоставляет большой выбор всего лишь в одном плагине. Он включает в себя виджеты для карт Google, кнопок, изображений, призывов к действию, таблиц с ценами, карусели записей, видео, заголовков и социальных ссылок. Плюс все они совместимы с конструктором страниц SiteOrigin.

Ultimate Widget Light

SiteOrigin Widget Bundle

Плагин Ultimate Widgets Light так же предлагает большой выбор виджетов. Этот плагин включает в себя виджеты “обо мне”, контактная информация, трансляции Flickr, Instagram, подписку на новостную рассылку MailChimp, пользовательское меню, текстовые и видео виджеты.

Gabfire Widget Pack

Gabfire Widget Pack

Плагин Gabfire Widget Pack так же является впечатляющим с ещё несколькими уникальными настройками, которые стоит рассмотреть. Этот плагин добавляет виджеты для видео, рекламных баннеров, свежих твитов, усовершенствованного поиска по архиву, новостной ленты Flickr, социальных иконок, вкладок записей на Ajax, карточки и биографии автора, подписки Feedburner, похожих записей, Text+ (с добавленными настройками для иконок и кнопок) и виджет “Поделиться”.

Widget Importer/Exporter

Widget Importer/Exporter

Последний плагин, которым нам хотелось бы поделиться с вами является, наверное, одним из самых нужных — это плагин Widget Importer and Exporter (Импорт и Экспорт Виджетов). С его помощью вы сможете копировать виджеты, которые размещены на одном сайте и использовать их в том же самом порядке и расположении на новом сайте.

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

В заключение

Мы знаем, что существуют тысячи виджетов и плагинов для виджетов, но надеемся мы смогли помочь вам найти несколько тех, которые вам нужны. И все рассмотренные нами варианты абсолютно бесплатные и могут быть найдены на сайте WordPress.org (так что вы можете установить их прямо из своей консоли).

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

oiplug.com

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

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

Главный файл плагина

WordPress автоматически распознает плагины расположенные в папке wp-content/plugins. Для создания нового плагина, нужно создать новую папку в этой директории. Имя этой подпапки может быть каким угодно, но лучше назвать папку именем вашего плагина. Старайтесь избегать распространенных слов, например: «textwidget» или «shoppingcart», т.к. эти имена уже могут быть заняты и могут вызвать проблемы, если вы соберетесь выложить ваш плагин в общий доступ (подробнее об именовании в статье Создание плагина для WordPress). Для нашего примера создадим папку php_examplewidget.

WordPress распознает доступный плагин по комментарию, расположенному в главном PHP файле плагина. Этот комментарий должен содержать основную информацию о вашем плагине: назначение плагина, имя автора, информацию о лицензии и т.п. Эта информация помогает системе идентифицировать плагин. Создадим в папке php_examplewidget файл widget_init.php со следующим содержанием:

  <?php  /*  Plugin Name: Simple TextWidget Plugin  Plugin URI: http://www.example.com/textwidget  Description: An example plugin to demonstrate widgets API in WordPress  Version: 0.1  Author: Author Name  Author URI: http://www.example.com  License: GPL2      Copyright 2011 Author Name     This program is free software; you can redistribute it and/or   modify it under the terms of the GNU General Public License,   version 2, as published by the Free Software Foundation.      This program is distributed in the hope that it will be useful,   but WITHOUT ANY WARRANTY; without even the implied warranty of   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the   GNU General Public License for more details.  */  

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

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

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

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

Виджеты в WordPress

В WordPress есть класс WP_Widget, который предоставляет доступ к API виджетов. Когда вы наследуете этот класс, ваш виджет будет доступен для любого сайдбара, который поддерживает ваша тема. В комплекте WordPress уже есть некоторые виджеты, например «Свежие записи» или «Архив», они тоже наследуют класс WP_Widget.

Класс WP_Widget содержит четыре метода, которые должны быть перегружены:

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

Конструктор

Конструктор ничем не отличается от тех, что вы обычно пишете. Главное, что нужно сделать — это вызвать родительский конструктор, который принимает три аргумента: идентификатор виджета, название виджета (это имя будет показано на странице виджетов) и массив с другими деталями виджета (нужно только «description»):

  <?php  class TextWidget extends WP_Widget  {   public function __construct() {   parent::__construct("text_widget", "Simple Text Widget",   array("description" => "A simple widget to show how WP Plugins work"));   }  }  

Теперь нужно зарегистрировать виджет. Для этого используется функция register_widget(), которая в качестве аргумента принимает имя класса вашего виджета. Эта функция должна быть вызвана в определенное время, поэтому нам нужно использовать систему хуков в WordPress. Нужный нам хук называется «widgets_init». Для связи регистрации виджета с хуком будем использовать функцию add_action(), у которой два аргумента: первый — имя хука, второй — имя функции, которую надо выполнить (вторым аргументом может быть строка или замыкание). Этот код должен быть расположен после комментария в файле widget_init.php:

  add_action("widgets_init", function () {   register_widget("TextWidget");  });  

Теперь, когда ваш плагин зарегистрирован и инициализирован, вы можете увидеть его на странице виджетов.

Метод form()

Виджет, который мы делаем должен давать возможность вводить заголовок и немного текста для отображения на страницах сайта. Исходя из этого нам надо создать форму для ввода этих значений. Метод form() используется для отображения настроек виджета на странице виджетов. У метода один аргумент — $instance — массив переменных, связанных с виджетом. Когда форма отправится на сервер, будет вызван метод update() и мы сможем обновить переменные в массиве $instance. После, метод widget() будет использовать этот массив для отображения виджета.

  public function form($instance) {   $title = "";   $text = "";   // если instance не пустой, достанем значения   if (!empty($instance)) {   $title = $instance["title"];   $text = $instance["text"];   }     $tableId = $this->get_field_id("title");   $tableName = $this->get_field_name("title");   echo '<label for="' . $tableId . '">Title</label><br>';   echo '<input id="' . $tableId . '" type="text" name="' .   $tableName . '" value="' . $title . '"><br>';     $textId = $this->get_field_id("text");   $textName = $this->get_field_name("text");   echo '<label for="' . $textId . '">Text</label><br>';   echo '<textarea id="' . $textId . '" name="' . $textName .   '">' . $text . '</textarea>';  }  

Методы get_field_id() и get_field_name() класса WP_Widget используются для генерации уникальных имен и идентификаторов для полей вашего плагина. Использование этих методов позволяет избежать конфликтов.

Внешний вид формы виджета на странице виджетов:

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

Родительский элемент <form>, кнопки «удалить», «закрыть» и «Сохранить» WrodPress генерирует автоматически, что сильно упрощает нам жизнь. Эта форма отправит введенные значения на сервер и вызовет метод update(), что бы мы смогли сохранить их.

Метод update()

Этот метод дает вам возможность проверить и обработать переданные значения перед использованием. Также у нас есть возможность принимать решения исходя из старых значений. Метод update() должен возвращать массив, содержащий переменные, которые вы собираетесь использовать для отображения виджета на сайте. WordPress передает два аргумента: массив новых значений и массив оригинальных значений.

  public function update($newInstance, $oldInstance) {   $values = array();   $values["title"] = htmlentities($newInstance["title"]);   $values["text"] = htmlentities($newInstance["text"]);   return $values;  }  

WordPress сохранит эти значения самостоятельно, об этом можно не беспокоиться.

easy-code.ru

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Доступ к панели управления WordPress
  • Любой текстовый редактор

Немного о WordPress виджетах

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

Перед началом руководства

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

Как работают пользовательские виджеты WordPress: Widgets API

WordPress позволяет вам создавать свои виджеты, предоставляя вам доступ к Widgets API. Чтобы создать пользовательский виджет, вы должны использовать стандартные классы WP_Widget из API. Эти базовые классы предлагают более 20 функций, которые вы можете свободно использовать и комбинировать. Из всех этих функций, 4 являются минимальным требованием для работы любого виджета. Вот список этих функций:

  • __construct() – функция конструктора
  • widget() – содержит вывод виджета
  • form() –  определяет настройки виджета в панели управления WordPress
  • update() – обновляет настройки виджета

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

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

ВАЖНО! Мы настоятельно рекомендуем создать полную резервную копию вашего сайта, перед началом данного руководства. В дополнение, вы можете использовать дочернюю тему WordPress.

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

Еще один нюанс, мы пишет этот код в файле functions.php текущей темы, но вы можете делать это в любом пользовательском плагине.

Теперь откройте любой текстовый редактор на вашем компьютере и создайте новый класс, который расширит базовый класс WP_Widget , вот так:

class hstngr_widget extends WP_Widget {  //Вставляйте функции сюда  }

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

function __construct() { parent::__construct( // widget ID 'hstngr_widget', // widget name __('Тестовый Виджет Hostinger', ' hstngr_widget_domain'), // widget description array( 'description' => __( 'Как создать виджеты для WordPress', 'hstngr_widget_domain' ), ) ); }

Далее мы идем к внешнему виду виджета, то есть как будет выглядеть фронт-энд виджета. Это будет сделано с помощью функции widget():

public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; //if title is present if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title']; //output echo __( 'Привет мир, от Hostinger.ru', 'hstngr_widget_domain' ); echo $args['after_widget']; }

Здесь мы настроили вывод виджета так, чтобы он отобразил ‘Привет мир, от Hostinger.ru’, и название виджета указанного пользователем.

Теперь нам необходимо написать бек-энд виджета с помощью метода form():

public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) $title = $instance[ 'title' ]; else $title = __( 'Стандартный Заголовок', 'hstngr_widget_domain' ); ?> <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 }

Здесь вы можете увидеть как был настроен пользовательский виджет. Если пользователь предоставил заголовок, то тогда он будет добавлен в созданную HTML форму. В противном случае, будет добавлено название Стандартный Заголовок в качестве заголовка. Этот код отвечает за то, как отображается виджет в панели управления WordPress.

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

public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; }

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

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

function hstngr_register_widget() { register_widget( 'hstngr_widget' ); } add_action( 'widgets_init', 'hstngr_register_widget' );

Обратите внимание, что этот код должен быть помещен вне функции hstngr_widget.

Мы определили новую функцию под названием hstngr_register_widget(), которая регистрирует наш виджет с помощью ID виджета, указанного в функции __construct(). Затем мы связали эту функцию при помощи widgets_init, которая загружает этот виджет в WordPress через встроенный метод add_action(). В финальном варианте ваш WordPress виджет должен выглядеть примерно вот так:

function hstngr_register_widget() { register_widget( 'hstngr_widget' ); }  add_action( 'widgets_init', 'hstngr_register_widget' );  class hstngr_widget extends WP_Widget {  function __construct() { parent::__construct( // widget ID 'hstngr_widget', // widget name __('Тестовый Виджет Hostinger', ' hstngr_widget_domain'), // widget description array( 'description' => __( 'Как создать виджеты для WordPress', 'hstngr_widget_domain' ), ) ); } public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; //if title is present if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title']; //output echo __( 'Привет мир, от Hostinger.ru', 'hstngr_widget_domain' ); echo $args['after_widget']; } public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) $title = $instance[ 'title' ]; else $title = __( 'Стандартный Заголовок', 'hstngr_widget_domain' ); ?> <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 } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; }  }

Вы можете использовать Файловый Менеджер, FTP-клиент или Редактор WordPress для добавления этого кода в файл functions.php вашей темы. Добавьте код в файл function.php активной темы и нажмите Обновить файл для сохранения изменений.

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

Теперь зайдите в панель управления WordPress и перейдите во вкладку Внешний вид →  Виджеты. Далее вы должны найти виджет под названием Тестовый Виджет Hostinger в списке виджетов.

Виджеты WordPress

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

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

 

Виджеты WordPress 2

Заключение

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

 

www.hostinger.ru

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.