Как Создать Виджеты Для WordPress. Как создать свой собственный виджет в WordPress

12.07.2019

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

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

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

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

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

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

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

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

Виджеты в WordPress

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

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

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

Конструктор

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

"A simple widget to show how WP Plugins work")); } }

Теперь нужно зарегистрировать виджет. Для этого используется функция register_widget() , которая в качестве аргумента принимает имя класса вашего виджета. Эта функция должна быть вызвана в определенное время, поэтому нам нужно использовать систему . Нужный нам хук называется «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 "
"; echo "
"; $textId = $this->get_field_id("text"); $textName = $this->get_field_name("text"); echo "
"; echo ""; }

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

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

Родительский элемент

, кнопки «удалить», «закрыть» и «Сохранить» 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 сохранит эти значения самостоятельно, об этом можно не беспокоиться.

Метод widget()

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

Public function widget($args, $instance) { $title = $instance["title"]; $text = $instance["text"]; echo "

$title

"; echo ""; }

В итоге мы получим окончательный вид виджета:

Готово! Этот очень простой плагин позволяет отображать простой текст на вашем сайте с помощью виджетов.

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

О сколько виджетов нам разных…

Если обратиться к словарю, выяснится, что виджет (widget) – небольшое графическое приложение, встраиваемое в пользовательский интерфейс браузера или сайта, и показывающее какую-либо информацию из какого-нибудь места. Именно поэтому они могут быть очень разнообразны. Когда речь заходит о создании виджета для сайта, обычно под этим подразумевается одно из трех графических приложений:

Что ж, разберемся, как создать каждый из этих виджетов – и зачем он вам вообще нужен.

Создание виджета для Визуальных закладок (для движков Wordpress и других)

Сервис Визуальных закладок от «Яндекс» в последнее время становится всё более популярным. Он удобен, красив и функционален. Визуальные закладки встраиваются в браузеры на движке Chromium из соответствующего магазина, а также входят в Яндекс.Браузер прямо «из коробки».

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

Чтобы сделать его более привлекательным для пользователей, стоит совсем немного потрудиться. А именно – «поколдовать» с API Табло.

Но сначала требуется создать логотип сайта. Картинка должна соответствовать следующим правилам:

  • Формат.PNG;
  • Размер 150х60 пикселей;
  • Прозрачный фон.

Сам виджет пишется на XML. В блокноте набирается следующий код:

“version”: “1.0”,

“api_version”: 1.

“logo”: “http://домен_вашего_сайта/адрес_файла_с_логотипом/название_файла_с_лого.png”,

“color”: “#номер_желаемого_цвета_в_HEX”,

Следующий этап – немного поколдовать с PHP. Ну, или HTML – в зависимости от того, на каком языке написан движок сайта. Если хедер находится в header.php, то изменения вносятся в этот файл. А если в каком-нибудь другом месте – нижеследующую строчку нужно вписать, соответственно, туда.

А вот код для включения:

Этот код нужно вписать в хедер – то есть между открывающим и закрывающим HTML-тегами .

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

Виджет сайта для главной страницы Яндекс

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

Создать виджет для сайта несложно. Не нужно даже HTML изучать! Для такого виджета требуется, чтобы у сайта была RSS-лента. У движка Wordpress она имеется по умолчанию и располагается по следующему адресу:

http://домен/feed

А вот для других движков потребуется создавать её самостоятельно.

Итак, виджет для Яндекса делается в два простых шага:

  1. Зайти на http://wdgt.yandex.ru/widgets и ткнуть на кнопку «Создать виджет»;
  2. Заполнить панели с названием виджета, описанием, картинкой и адресом RSS-ленты.

А ещё этот виджет можно разместить на вашем сайте – на боковой панели, например, или в «вылетающем окошке» pop-up.

Виджет Facebook

плотно вошли в повседневную жизнь современного человека. Правда, в «наших широтах» наиболее распространены «ВК» и «Одноклассники». Однако Facebook – лучшее место для продвижения сайта, особенного предлагающего какие-либо товары или услуги.

Почему? Причина тут проста. Именно в Facebook проще всего организовать вирусное продвижение контента среди «интеллектуальной элиты». Различные профессионалы в самых разных областях предпочитают пользоваться именно этой социальной сетью, а значит – тут проще всего создать лояльную, «думающую» аудиторию, от которой даже можно подчерпнуть какую-нибудь новую информацию.

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

Итак, вот она, пошаговая инструкция о том, как создать виджет для сайта . Только предполагается, что у вашего сайта – или компании – уже есть соответствующая страница на Facebook, созданная человеком, у которого также есть аккаунт в Facebook:

  1. Нужно зайти от имени этого человека (авторизоваться через его логин и пароль) и нажать кнопку «Редактировать профиль» на главной странице профиля;
  2. Пролистать страницу до конца и открыть «Разработчикам»;
  3. На открывшейся странице отыскать кнопку Sharing, сопровождающуюся знаком Like, и смело в неё ткнуть;
  4. Затем требуется выбрать «Социальные плагины»;
  5. Найти Like Box;
  6. Откроется страница настройки виджета, где можно установить его размеры, цветовую схему, контент и визуальную составляющую;
  7. Затем нажатием кнопки Get Code можно получить код, выбрав язык разметки, максимально совместимый с движком сайта.

Виджет для Wordpress

Теперь осталась пара мелочей – разместить виджет на сайте. Для самого популярного движка – Wordpress – для этого придется добавить код в два различных места. Первое – футер. Туда добавляется JAVA-скрипт, определяющий функциональность виджета.

Второе – место непосредственного размещения виджета, например, сайдбар. Туда требуется скопировать CSS-код с div-блоком, в котором расположена ссылка на скрипт.

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

Copyright © 2016 "Design ONE"

Доброго времени суток всем читателям блога сайт! Не так давно один мой знакомый попросил меня разобраться с содержанием виджетов Яндекса, в том числе и с виджетом визуальных закладок в Яндекс Браузере. А именно – он хотел поменять стандартный виджет в визуальных закладках на свой, благо, возможности для этого предоставлены API Табло от Яндекса. Мне эта мысль показалась интересной, и я взялся за работу.

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

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

Для тех, кто еще не понял, о чем речь, покажу стандартную картинку визуальных закладок Яндекс Браузера:

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

Именно эту картинку я и поставил вчера вместо стандартной по просьбе клиента. Сразу понятно, о чем речь, да и логотип что-то напоминает, не правда ли? Качество СССР – вот что хотел я сказать этим логотипом. Теперь такую картинку будут видеть все, кто захочет оставить этот сайт в визуальных закладках. Думаю, вам будет интересно, как можно добиться такого результата. Это совсем несложно (по моим меркам), и я как можно подробнее опишу все действия.

Как поменять виджет на свой

Итак, как я уже говорил, пользователи с браузерами, имеющими в функционале визуальные закладки, смогут увидеть ваш новый виджет. Это Мозилла, Яндекс Браузер, Google Chrome, Internet Explorer, конечно (да, в нем тоже можно установить визуальные закладки, хотя опционально их и нет), и еще несколько малоизвестных браузеров. Делается это при помощи API Табло, и инструкцию от Яндекса вы можете , а я постараюсь объяснить все своими словами.

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

  1. Можно изменить фон виджета для сайта на любой.
  2. Можно вставить свой логотип – он должен быть обязательно в формате PNG, иметь размер 150х60 px и обязательно быть с прозрачным фоном.
  3. Также вы можете сделать вывод значков для разных уведомлений, но я не стал этого делать. Точнее, я попробовал, но все получается слишком мелким, неприятным на вид и расплывчатым в общей массе.

Чтобы сделать свой виджет, вам нужно будет создать новый файл с именем manifest и с расширением json. То есть – файл manifest.json. Его необходимо будет положить в корень сайта – это там, где лежит ваш robots.txt, и заполнить его таким кодом:

{ "version": "1.0", "api_version": 1, "layout": { "logo": "http://вашсайт.ru/wp-content/themes/тема/images/logo.png", "color": "#сссссс", "show_title": false } }

А подключается к вашему сайту этот файл очень просто – в файле header.php вашего шаблона темы, между тэгами и нужно вставить такую строчку:

Теперь о том, что содержит код файла manifest.json:

  1. version - версия виджета. Здесь вы можете указать любую цифру или число, хоть год своего рождения. Это будет всего лишь означать версию виджета.
  2. api_version - номер версии API Табло. На сегодняшний день есть только версия 1.
  3. logo - абсолютный (то есть, полный) адрес, где лежит ваша картинка. Требования к логотипу я уже обрисовал выше.
  4. color - цвет фона виджета, поскольку логотип делается обязательно с прозрачным фоном.
  5. show_title - вывод заголовка сайта. Можно указать либо false - не показывать, либо true - показывать. Если заголовок слишком длинный (как в моем примере), то лучше его не выводить – будет смотреться коряво. Поэтому заголовок я сразу нарисовал в логотипе.

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

Будем считать, что через 12 часов – я вечером сделал виджет, а утром он уже был в закладках Мозиллы. В Яндекс Браузере он тоже обновился только утром. Но, чтобы убедиться в работоспособности вашего нового виджета, совсем не обязательно ждать столько времени. Есть быстрый способ.

Просто вбейте в адресную строку в Яндекс Браузере (в других браузерах эта фишка не сработает — пробовал) адрес chrome://tableau-widget и скопируйте в открывшееся адресное поле адрес вашего нового файла manifest.json, после чего нажмите кнопку «Проверить»:

Если в файле все правильно, то вы увидите подпись «Манифест виджета верен». Можете также сразу попробовать добавить сайт в визуальные закладки – если его там раньше не было, то новый виджет появится сразу, а если он уже присутствовал в закладках – попробуйте несколько раз кэш почистить, возможно, виджет сразу обновится. Но мне пришлось ждать несколько часов.

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

Сегодня мы разберемся в том, как создать на Android устройство свой собственный виджет (Widget). Виджет - это всем знакомый элемент рабочего стола, с помощью которого можно получать доступ к некоторым функциям какого - нибудь приложения: просматривать новости в окне виджета, прогноз погоды, обновление новостей на разных сервисах, управлять разными функциями аппарата (блокировать экран, включать радио, Интернет и многое многое другое). На этот раз мы не будем создавать чего то грандиозного и очень полезного, типа там фонарика :), а сделаем простенький виджет, который будет реализован в виде кнопки, при нажатии на которую мы, с помощью стандартного браузера, попадаем на всеми любимый сайт Конечно, вы сможете настроить любой желаемый вами сайт.

Создаем новые проект, выбираем Blank Activity, минимальная версия Android 2.2+. При создании виджета, первое дело - создать объект AppWidgetProviderInfo , в котором мы укажем xml файл, из которого будет заполняться вид самого виджета. Для этого, создадим в проекте папку res/xml и в ней создаем новый xml файл по имени widget.xml со следующим содержимым:

< appwidget- provider xmlns: android= android: minWidth= "146dp" android: updatePeriodMillis= "0" android: minHeight= "146dp" android: initialLayout= "@layout/activity_main" > < / appwidget- provider>

Теперь перейдем в файл activity_main.xml и создадим интерфейс нашего виджета, он будет состоять из кнопки Button :

< LinearLayout xmlns: android= "http://schemas.android.com/apk/res/android" xmlns: tools= "http://schemas.android.com/tools" android: layout_width= "match_parent" android: layout_height= "match_parent" android: gravity= "top" tools: context= ".MainActivity" > < Button android: id= "@+id/button" android: layout_width= "wrap_content" android: layout_height= "wrap_content" android: layout_marginLeft= "5dp" android: text= "@string/app_name" / > < / LinearLayout >

Как видите, мы создали обычную кнопочку, вот она и будет нашим виджетом:

То есть, можете потом сделать вместо этой кнопочки все, что вам угодно.

Перейдем к работе с кодом в файле MainActivity.java . Он должен наследоваться от класса AppWidgetProvider , для которого существует его основной метод onUpdate () . В этом методе нам нужно обязательно определить два объекта: PendingIntent и RemoteViews . В конце их использования нужно вызвать метод updateAppWidget() . Код файла MainActivity.java :

import android.net.Uri ; import android.app.PendingIntent ; import android.appwidget.AppWidgetManager ; import android.appwidget.AppWidgetProvider ; import android.content.Context ; import android.content.Intent ; import android.widget.RemoteViews ; import android.widget.Toast ; import com.example.widget.R ; public class MainActivity extends AppWidgetProvider{ @Override public void onUpdate (Context context , AppWidgetManager appWidgetManager , int appWidgetIds ) { for (int i= 0 ; i< appWidgetIds. length; i++ ){ int currentWidgetId = appWidgetIds[i]; //Делаем простой http запрос на указанную ссылку и выполняем по ней переход: String url = "http://сайт" ; Intent intent = new Intent (Intent . ACTION_VIEW ); intent. addFlags(Intent . FLAG_ACTIVITY_NEW_TASK ); intent. setData(Uri . parse(url)); //Определяем два обязательных объекта класса PendingIntent и RemoteViews: PendingIntent pending = PendingIntent . getActivity(context, 0 ,intent, 0 ); RemoteViews views = new RemoteViews (context. getPackageName(),R . layout. activity_main); //Настраиваем обработку клика по добавлению виджета: views. setOnClickPendingIntent(R . id. button, pending); appWidgetManager. updateAppWidget(currentWidgetId,views); Toast . makeText(context, "Виджет добавлен" , Toast . LENGTH_SHORT ). show(); } } }

Чтобы наш виджет успешно заработал, нужно немного магии в файле манифеста AnroidManifest.xml . Он должен выглядеть вот так:

< manifest xmlns: android= "http://schemas.android.com/apk/res/android" package ="com.example.widget" android: versionCode= "1" android: versionName= "1.0" > < uses- permission android: name= "android.permission.INTERNET" / > < application android: allowBackup= "true" android: icon= "@drawable/ic_launcher" android: label= "@string/app_name" android: theme= "@style/AppTheme" > < receiver android: name= "home.study.MainActivity" > < intent- filter> < action android: name= "android.appwidget.action.APPWIDGET_UPDATE" / > < / intent- filter> < meta- data android: name= "android.appwidget.provider" android: resource= "@xml/widget" / > < / receiver> < / application> < / manifest>

Как вы догадались, виджет определяется в теге <receiver > .

Единственное, что осталось подправить - отредактировать файл strings.xml , добавив туда используемые нами строчки:

< ? xml version= "1.0" encoding= "utf-8" ? > < resources> < string name= "app_name" > LEARN . ANDROID < string name= "action_settings" > Settings < string name= "hello_world" > Hello world! < / string> < / resources>

Внимание! Android Studio может заругаться на вас при запуске программы, требую указать default activity. Выберите строчку "Не запускать activity" (Do not launch Activity):

Теперь устанавливаем приложение на эмулятор либо устройство, добавляем виджет на рабочий стол:

И жмем по нему:


Как видите, все отлично работает.

Итак, в этом уроке мы создали простенький Android Widget, состоящий из кнопки Button, при нажатии на наш виджет мы создаем простой http запрос и переход по заданной URL ссылке. Можете поупражняться с какими-нибудь другими элементами, а не кнопкой, и придумать им интересный функционал. Удачи!

Похожие статьи