Новый виджет для WordPress — легко! Как Создать Виджеты Для WordPress
В этой статье мы создадим виджет который будет выводить последние записи из определенной рубрики с миниатюрами. Если развить эту тему, то можно сделать вывод записей с тизером, популярных, наиболее комментированных и тд. Все зависит от вашей фантазии и нужного результата. Что же, давайте потихоньку приступать к написанию виджета. Статья будет не маленькой, немного сложновато, рассчитана в основном на тех, кто уже знаком с WordPress, создавал темы "с нуля" хорошо ориентируется в коде и конечно же владеет версткой. Приступим же.
Забегая на перед хочу показать что получится в итоге. Это один из возможных вариантов, потому как настроек будет несколько в виджете и внешний вид может меняться ы зависимости от Вашего желания.
Для начала, нам нужно создать файл, который и будет отвечать за вывод виджета. Скажу сразу все можно писать сразу в файл пользовательских функций Вордпресс - functions.php . Но я не люблю засорять его лишним кодом, поэтому посоветую подключать отдельный файл. В папке с с темой создайте файл, например widget_gnat_thumb.php . Далее нужно подключить этот файл в functions.php . Для этого открываем functions.php и в его конец, перед закрывающим PHP тегом - ?> , если его нет, то просто в конце, добавляем такую строку:
Include("widget_gnat_thumb.php");
Мы подключили наш файл, теперь нужно наполнить его сами кодом, который и создаст новый виджет. Для этого, сначала нужно добавить первую часть кода.
__("Виджет для вывода записей с маленькими миниатюрами", "text_domain"),)); }Пока не добавим весь код, проверить работу виджета не получится, потому как у Вас будет выбивать ошибку. Так что старайтесь внимательно все читать, следовать инструкциям и ничего не пропустить, дабы потом не ломать голову, если что-то не получится. Метод, 100% рабочий и код взят с работающего виджета.
Здесь есть важные моменты. Во второй строке задаем имя нашему виджету - Gnat_thumb_Widget . В пятой строке мы задаем ID нашего виджета, в данном случаи это - widget_gnat_thumb . Если будите создавать много виджетов, то у каждого должно быть свое, то есть уникальное.
В шестой строке задаем название виджета, оно будет выводится в списке виджетов. В 7 строке задается описание виджета, которое выведется под названием. Пример будет выглядеть так:
Теперь очередь следующей части кода. Это код отвечающий за инициализацию настроек и их добавление. Данный код будет тоже меняться в зависимости от структуры виджета, количества настроек. Так же, если виджетов будете делать несколько, то у каждого из них должна быть настройки с уникальными названиями, дабы не было конфликта.
Public function update($new_instance, $old_instance) { $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags($new_instance["size_thumb"]); return $instance; } public function form($instance) { ?>
Если расписать каждую по отдельности то получается, что во второй строке идет инициализация, а дальше уже сами настройки. Сами настройки будут описаны немного позже, а сейчас рассмотрим их по отдельности и разберем какая из них за что отвечает.
- title_thumb - Название виджета, которое задается при его активации и выведется на странице сайта. Вам больше он знаком как - Заголовок .
- cat_thumb - Это настройка выбора категории из которой будут выводится наши записи. То есть мы будем выбирать рубрику и от этого будет зависеть наш список.
- numper_post_thumb - Данная настройка будет задавать количество записей что будет выводится. Мы сделаем просто текстовое поле, где нужо будет вводить число.
- size_thumb - Это настройка, которая предложит выбрать размер миниатюры (картинки) рядом с названием записи.
Как вы поняли, чтобы добавить настройку, нужно добавить строку и указать название настройки
$instance["название_настройки"] = strip_tags($new_instance["название_ настройки"]);
Теперь приступим к выводу данных настроек. Это то что вы увидите в админке в разделе Виджеты . Пока что у нас есть виджет и его видно в списке других виджетов. У него есть имя и описание. На картинке выше видно как это выглядит.
Первая настройка выведет поле - Заголовок . добавляем дальше следующий кусок кода.
" name="get_field_name("title_thumb"); ?>" type="text" value="" />
Как и писал выше, мы просто добавляем input, в который нужно будет вводить заголовок. Как видите в коде мы 4 раза задаем имя настройки - title_thumb . Используя данный пример, можно не только заголовок задавать, но и что-нибудь еще, как например далее мы таким же способом зададим вывод количества постов. Выглядеть в админке эта настройка будет вот так:
Теперь перейдем к следующей настройке. Это будет выбор рубрики. Тут мы используем выпадающий список select. Это удобно и быстро. Нажали на список и выбрали рубрику. Если Вам не нужно будет выбирать рубрику, а просто выводить последние записи со всего сайта, то данный пункт можно опустить.
Код, который нужно добавить в наш файл виджета, будет следующим:
Как видите здесь так же везде указано название настройки - cat_thumb . Так что если вы ввели в начале свое название, то и тут оно должно быть соответственным. Данный список, автоматически сгенерирует все категории. В админке это будет выгладить так:
Следующей настройкой будет - указание количества выводимых записей. То есть наш виджет будет выводить сколько строк с названиями записей, сколько вы укажите в данное поле. Как и писал Выше. Данная настройка схожа с Заголовком. Это аналогичное поле для ввода, только сюда нужно будет вводить цифру.
Как и в предыдущих настройках, в коде ниже указано везде одно название - numper_post_thumb . Следующий код добавляем к нашему файлу:
" name="get_field_name("numper_post_thumb"); ?>" type="text" value="" />
Далее очередь последней настройки. Она будет задавать размер миниатюры, картинки которая будет рядом с названием записей. Данная настройка мне нравится тем, что можно выбирать размер в зависимости от нужд, размера сайдбара и тд. То есть не обязательно строго задавать размер в стилях. Можно менять хоть каждый день в зависимости от настроения. Как обычно, добавляем код:
Как уже упоминал, тут тоже используется выпадающий список option. Мы задаем несколько пунктов. первый неактивный, а далее задаем строгие размеры. если пожелаете, можете всегда поменять на свои или увеличить количество.
Еще момент. В value , я задал значения size_1,size_2,size_3 и тд. Эти значения в будущем будут классами. То есть каждому классу будут заданы свои стили, что и будут регулировать размер миниатюр. В настройках виджета в админке появится еще один элемент:
С настройками закончили, теперь перейдем к выводимой части. То есть к тому, что будет видно на сайте, как на картинке в самом начале статьи. По сути мы добавим разметку которая выведется в виде HTML кода на сайте. Для этого добавляем дальше еще кусок кода:
-
have_posts()) { $populargb->the_post(); ?>
- ">" title=""> " title="">Смотреть больше
Как видите заглавию, списку и отдельным пунктам заданы свои классы. При желании меняйте на свои, но будьте внимательны. Давайте еще немного разберем данный код, чтобы стало понятнее.
-
Тут мы выводим наше заглавие. Как вы поняли, чтобы вывести настройку в HTML коде, нужно просто добавить вод такой код и внутри указать название настройки.
То что Вы зададите под этим названием выведется при таком вызове.
- Дальше идет ul список, который собственно и выводит название записей с миниатюрами. Для вывода, я использую WP_Query. Подробно останавливаться на том как это работает не буду, если хотите можно прочитать в статье - или . Тут везде применяется WP_Query.
Для WP_Query задаем следующие параметры:
- posts_per_page= - Это количество выводимых записей. Естественно, ему присваиваем нашу настройку numper_post_thumb.
- cat= - Это параметр отвечающий за категорию из которой будет выбирать свои записи цикл. Тут присваиваем cat_thumb.
- Дальше идет уже разметка выводимой записи. По коду видно. что мы выводим Миниатюру, название записи, дату публикации и ссылку - Смотреть больше . Можете менять, добавлять и удалять все в зависимости от потребностей.
- Наша миниатюра завернута в и ему присвоен class="thumb и рядом подключение настройки. То есть присвоено два класса, один постоянный - thumb и второй задается в настройках виджета. Это как раз то о чем я писал выше при описании настроек размера миниатюры. Тоесть в зависимости от того, какой размер миниатюры Вы выберите, такой и класс присваивается. Например, если указать размер 45 на 45, то присваивается класс - size_1 . В HTML коде будет такой вид - class="thumb size_1".
Вот и весь вывод виджета. Если разобраться то сложного абсолютно ничего, просто нужно иметь хоть какой-то опыт. Для новичка, конечно же все это сплошной код Да Винчи:).
Осталось добавить последнюю часть кода. Мы зарегистрируем наш виджет и можно будет проверить его в работе.
В четвертой строке указываем имя виджета, которое указали еще в самом начале - Gnat_thumb_Widget
Теперь весь код целиком:
__("Виджет для вывода записей с маленькими миниатюрами", "text_domain"),)); } public function update($new_instance, $old_instance) { $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags($new_instance["size_thumb"]); return $instance; } public function form($instance) { ?>
" name="get_field_name("title_thumb"); ?>" type="text" value="" />
" name="get_field_name("numper_post_thumb"); ?>" type="text" value="" />
-
have_posts()) { $populargb->the_post(); ?>
- ">Смотреть больше
Чтобы задать стили и отобразить более мение правильно задуманное, то нужно добавить вот такие строки в файл стилей style.css .
Titlebg{background:#eee;line-height:35px;text-align:center;letter-spacing:-0.2px;font-size:16px;margin-bottom:20px;} .widget{margin-bottom:25px;box-sizing:padding-box;padding:0 5px;} .widget ul{font-size:11px;margin:0;padding-right:15px;text-transform:none;line-height:15px;} .widget ul ul{margin-left:15px;} .widget ul li{color:#222;padding:5px 0;border-bottom:1px dotted #ddd;} .widget .comment-author-link{font-weight:bold;} .widget ul li:last-child{border-bottom:none;} .widget a{text-decoration:none;color:#444;font-weight:normal;} .widget a:hover,.widget a:focus,.widget a:active{text-decoration:underline;} .gnat_thumb{padding:5px;} .gnat_thumb a{font-size:11px;line-height:11px;margin-bottom:5px;display:block;} .thumb{float:left;border:1px solid #eee;padding:2;margin:0 10px 10px 0;} a.more_read{font-size:11px;text-align:right;font-weight:bold;} .size_1 img{width:45px;height:auto;} .size_2 img{width:75px;height:auto;} .size_3 img{width:100px;height:auto;} .size_4 img{width:125px;height:auto;}
Данные стили примерны и могут не соответствовать тому что Вам надо или конфликтовать с уже имеющимися на Вашем сайте стилями, поээтому рекомендую использовать лишь последние 4 строки, которые нужны для правильного отображения размеров миниатюр:
Size_1 img{width:45px;height:auto;} .size_2 img{width:75px;height:auto;} .size_3 img{width:100px;height:auto;} .size_4 img{width:125px;height:auto;}
Статья получилась, как и обещал, не маленькой. Старался написать понятнее, так что если что не так извините. Более подробно отвечу в комментариях.
На этом все, спасибо за внимание. 🙂
Виджет представляет собой небольшое приложение, которое может быть установлено на веб-странице. Эта статья-рецензия содержит инструкции, которые помогут вам добавить такое приложение на своем сайте.
Виджет , также называющейся веб-гаджетом, фрагментом, портлетом и т.д., является элементом графического интерфейса пользователя, который предоставляет информацию и позволяет пользователю взаимодействовать с приложением. Например, он может быть использован, чтобы позволить пользователям проигрывать интерактивные игры, а также добавлять и изменять содержимое веб-сайта. Встраивание этих замкнутых кодов на веб-странице, блоге или сайте социальной сети может сделать их более интерактивными, так как личный контент может быть превращен в веб-приложения, которые могут использоваться на любом сайте – не без пользы для Вас и посетителей.
Откуда берутся виджеты для сайтов
Если вы хотите поставить веб-гаджет на свой веб-сайт, блог или на свой профиль на любом социальном медиа сайте, вы сначала должны найти такие приложения. Есть некоторые сайты, которые позволяют пользователям создавать такие приложения основываясь на собственной базе данных. Вы можете просто вставить код и поместить его на своем сайте. Вы можете найти их в каталогах виджетов, таких как 101widgets.com (http://101widgets.com/) или Babywonder.ru (http://widgets.babywonder.ru/) или создать их с помощью Widget editor (специального Интернет сервиса для самостоятельного создания виджетов с индивидуальным подходом).
Как сделать виджет
Помимо готовых виджетов существуют сервисы, реализующие ваш творческий потенциал, предоставляя возможность создать виджет самостоятельно. Например, Вы с лёгкостью сделаете блок слайд-шоу с выбранными картинками или практичный вывод любого ресурса. Как раз, о втором случае и пойдёт речь ниже…
Прежде всего, следует поискать сайты, которые позволяют пользователям сделать веб-гаджет. Посидите в интернете и перейдите к любому из этих сайтов. На странице веб сервиса найдите кнопку «Создать» или «Сделать» (возможно, что Интернет сервис будет англоязычным, поэтому ориентируйтесь по визуальному отображению элементов). Вы должны нажать на эту кнопку. Теперь следующий шаг, следуя подсказкам мастера настройки, который затребует ввести в поле URL RSS потока (адрес RSSленты веб сайта) вставьте заранее скопированный адрес ленты (например, для блогов на WordPress, он выглядит так « »). После этого нажмите на кнопку «Продолжить». Для выбора цвета фона, вы можете использовать селектор цвета. После того, как выбор цвета будет сделан, Вы можете назвать веб гаджет, введя имя в текстовом поле и совместить его. Затем нажмите на «Сохранить виджет», чтобы получить веб приложения.
Если вы когда-нибудь использовали 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 используются для генерации уникальных имен и идентификаторов для полей вашего плагина. Использование этих методов позволяет избежать конфликтов.
Внешний вид формы виджета на странице виджетов:
Родительский элемент