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

Используем визуальный редактор для создания виджетов в WordPress

Опубликовано: ADv Дата 07.11.2013 в рубрике Плагины WP Комментировать

Виджеты WordPress упрощают жизнь новичкам. Ранее мы рассказывали вам как создать собственный виджет в WordPress. Также мы показывали как добавить виджеты на страницу/запись. Однако на начальном уровне пользования этой CMS для пользователя, который не написал в жизни ни строки кода и не сталкивался с HTML разметкой возможно будет сложно добавить изображения или ссылки в обыкновенный текстовый виджет. В этой статье мы покажем вам как использовать визуальный редактор для создания виджетов в WordPress.

В WordPress есть встроенные текстовые виджеты, которые могут использоваться для добавления текста или HTML. У этого виджета есть только текстовое поле, и если вы хотите добавить изображения, ссылки или списки, то вам придется написать HTML код. Проблема состоит в том, что большинство новичков не умеют этого делать. Задача состоит в том. чтобы найти решение, позволяющее пользователям создавать виджеты в визуальном редакторе WYSIWYG (what you see is what you get), что переводится как «что видишь, то и получишь».

Прежде всего вам необходимо установить и активировать плагин WYSIWYG Widgets. После активации плагин добавит новое меню под названием Widget Blocks в сайдбар вашей административной панели WordPress. Переходим в Widget Blocks » Add New для создания нового блока виджетов.

Widget blocks — это пользовательский тип записи, поэтому при добавлении нового блока виджетов он будет использовать тот же визуальный редактор, что вы используете при создании страниц и записей. Теперь можно воспользоваться всеми преимуществами визуального формирования контента страницы, будь то добавление ссылок, изображений, маркированных списков и всего другого из панельки форматирования. После того, как вы закончите с разметкой. опубликуйте свой блок виджета.

Теперь переходим во Внешний вид » Виджеты

и перетягиваем WYSIWYG Widget в ваш сайдбар. Под Widget Block кликните на выпадающее меню и выберите Widget Block, созданный вами ранее. Сохраните изменения и просмотрите изменения на вашем сайте.

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

Rating: 0.0/5 (0 votes cast)

wordpressвиджетыклиентплагинредактор

Теги: wordpress виджеты клиент плагин редактор

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b

Предыдущая статья: Как добавить виджеты WordPress на страницу/запись

Следующая статья: Делаем текстовые виджеты цветными в WordPress

Меню и виджеты в WordPress.

Создание и настройка

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

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

Скачать тему WordPress бесплатно >>

Как создать и настроить меню в WordPress

Создать и настроить меню можно через админку WordPress двумя способами.

I) Через раздел “Внешний вид” – “Меню”. Вам откроется страница для создания и редактирования элементов.

II) Через раздел “Внешний вид” – “Настроить”. Здесь для перехода на страницу создания меню нужно нажать на вкладку с одноимённым названием “Меню”.

Затем нажмите на кнопку “Создать новое меню”.

Дальнейшие действия будут практически одинаковы. Я буду действовать из страницы с визуальной настройкой.

Создание меню в WordPress. Пошаговая инструкция

Весь процесс создания меню состоит из четырёх шагов.

Шаг 1. Введите название меню, выберите область, в которой оно будет располагаться и нажмите на кнопку “Далее”. Я выбрала все три области, которая предлагает мне тема, для того, чтобы показать вам где каждый из этих элементов расположен.

Шаг 2. Нажмите на кнопку “Добавить элементы”.

Шаг 3. Выберите элементы, которые вы хотите добавить в меню. Поскольку по умолчанию у нас пока создана лишь одна страница, мы добавим её и главную страницу, нажав на “+” рядом с нужным элементом.

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

Шаг 4. Нажмите на кнопку “Опубликовать”, чтобы созданное меню появилось у вас на сайте.

Теперь можете открыть вкладку браузера с адресом вашего сайта и посмотреть, что у вас получилось. В моей теме это 3 области: вверху страницы, а также 2 меню в подвале.

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

Теперь переходим к созданию и настройке виджетов.

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

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

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

I) Через раздел “Внешний вид” – “Виджеты”. Здесь вы сразу можете наглядно увидеть доступные в вашей теме виджеты и области, в которые их можно разместить. Просто выбирайте мышкой то, что вам доступно, и перетаскивайте в нужные места.

II) Через раздел “Внешний вид” – “Настроить”. Здесь работа будет происходить в визуальном редакторе, где вы можете сразу видеть, где и как виджеты будут размещены на вашем сайте. Здесь мы и продолжим дальнейшую работу, перейдя в раздел “Виджеты”.

Создание виджетов в WordPress. Пошаговая инструкция

Процесс создания и размещения виджетов для сайта на WordPress можно условно разделить на четыре шага.

Шаг 1. Выберите область для размещения виджета. Сейчас я буду работать с сайтбаром (правой боковой колонкой сайта), поэтому я выбираю эту область.

Шаг 2. Нажмите на кнопку “Добавить виджет”.

Шаг 3. Выберите из появившегося списка виджеты, которые вы хотите добавить. Я для примера размещу в боковой колонке свежие записи и календарь.

Шаг 4. Для любого виджета можно указать заголовок, а также поработать со свойствами, которые к нему прилагаются. Например, для виджета “Свежие записи” можно изменить количество выводимых записей, показывать дату публикации и т.д. После всех действий нажмите на кнопку “Опубликовать”.

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

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

А в следующем уроке мы займёмся настройкой внешнего вида и придадим вашему сайту законченный, красивый и гармоничный вид.

Шаг 9. Настройка внешнего вида >>

11 простых шагов для создания пользовательского виджета WordPress

Программное обеспечение WordPress идеально подходит для тех, кто хочет создавать контент для Интернета.

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

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

Почему стоит создать собственный виджет WordPress

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

• Баннеры
• Формы регистрации
• Меню
• Календари
• Панель поиска
• Списки

Виджеты

Списки

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

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

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

Инвестиции, необходимые для создания пользовательских виджетов WordPress

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

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

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

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

Создание вашего первого пользовательского виджета

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

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

11 шагов по созданию пользовательского виджета WordPress

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

#1 – Сделайте несколько предварительных шагов

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

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

#2 — Выберите текстовый редактор

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

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

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

• Atom
• Блокнот (входит в состав Windows)
• Notepad++
• TextEdit (входит в состав Mac OS)

Четыре основных метода понимания #3. Создание виджета

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

WordPress использует встроенный класс WP_Widget для развертывания этих методов. WP_Widget — это часть WordPress, которая запускает виджеты.

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

• __construct()
• widget()
• form()
• update()

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

#4 — Создайте заголовок

Откройте текстовый редактор, который вы собираетесь использовать. В начальном разделе редактора вы добавите текст:

class [имя вашего виджета] extends WP_widget {

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

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

#5 – Добавьте метод __construct()

Использование метода __construct() в текстовом редакторе позволяет настроить параметры для вашего пользовательского виджета WordPress. Этот метод указывает идентификатор виджета, заголовок (или имя) и описание. Введите метод __construct() следующим образом:

public function __construct() {

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

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

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

С помощью команды ID вы добавите в этот раздел имя, которое указывает, как WordPress будет отображать имя виджета в программном обеспечении.

После ввода всей информации, которая является частью раздела __construct(), добавьте закрывающую скобку.

#6 – Добавьте метод widget()

Используйте раздел метода widget() для добавления и определения вывода, который будет генерировать виджет. Метод widget() отображает HTML-код в виджете на передней панели вашего сайта WordPress.

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

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

Введите метод widget() следующим образом:

public function widget() {

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

#7 – Добавьте метод form()

Далее вы добавите метод form() в свой текстовый редактор. В этом разделе вы будете настраивать поля формы, которые создают параметры для бэкенда виджета. Он управляет тем, как виджет будет выглядеть на бэкенде.

Введите метод form() следующим образом:

public function form() {

Не забудьте добавить закрывающую скобку после ввода информации в методе form(). Для очень простого виджета вы можете добавить сюда только немного информации.

#8 – Добавьте метод update()

Четвертый метод создания базового настраиваемого виджета в WordPress включает добавление метода update().

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

Элементы, которые можно добавить с помощью метода update(), включают:

• Поле для заголовка виджета
• Область для текстового сообщения
• Поле для URL-адреса, по которому посетители могут щелкнуть
• Поле выбора, чтобы определить, будет ли щелчок по URL-адресу открывать новую вкладку браузера

Введение метод update() выглядит следующим образом:

public function update() {

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

#9 — Регистрация пользовательского виджета

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

function [имя вашего виджета] () {

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

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

Код add_action должен включать:

add-action ()

Используйте точку с запятой после закрывающей скобки в коде add_action.

Добавьте код, необходимый для регистрации виджета, в конец файла текстового редактора. Однако в некоторых старых версиях WordPress вам может потребоваться добавить текст для регистрации виджета вверху файла перед всем остальным текстом.

#10 — Добавление кода

После того, как вы закончите создание кода в текстовом редакторе, вы будете готовы протестировать его. Вам нужно будет добавить его в файл functions.php.

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

#11 — Использование пользовательского виджета

В окне WordPress щелкните меню «Внешний вид», а затем «Виджеты». Вы должны увидеть имя вашего виджета в списке.

Нажмите и перетащите имя виджета в раздел боковой панели (указанный справа от страницы), чтобы выбрать положение виджета на странице. Щелкните Сохранить.

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

Добавление и настройка готового виджета

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

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

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

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

Удаление виджетов

Чтобы удалить виджет со страницы, снова откройте окно виджетов. Просмотрите список виджетов, уже находящихся на странице, в правой части окна. Нажмите на название виджета, который хотите удалить. Затем нажмите Удалить.

Следующие шаги

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

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

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

Как написать свой собственный виджет WordPress (шаг за шагом)

Вы когда-нибудь хотели создать собственный виджет для своего веб-сайта WordPress? В то время как WordPress включает встроенный текстовый виджет, который вы можете использовать для отображения HTML вместе со встроенными CSS и JavaScript, если вы хотите сделать что-то большее, текстовый виджет просто не урежет его.

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

Итак, следуйте этому руководству, и вы узнаете, как создать два разных виджета:

• Простой виджет, который отображает заголовок виджета, название сайта и слоган сайта.
• Чуть более сложный виджет, отображающий список всех категорий, отсортированный по алфавиту и разделенный на две колонки.

Готовы изучить основы создания пользовательских виджетов WordPress? Давайте приступим:

• Основы создания виджетов
• API виджетов WordPress
• Пример №1: Отображение заголовка виджета, названия сайта и слогана
• Пример #2: Категории отображаются в двух столбцах
• Создание собственного виджета

Основы создания виджетов

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

• Среда разработки WordPress
• Базовые навыки программирования на PHP
• Базовый опыт разработки WordPress

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

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

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

Если вы никогда не писали ни строчки кода на PHP или базового плагина WordPress, то это руководство может быть вам немного не по силам. Тем не менее, хорошая новость заключается в том, что вы можете узнать все, что вам нужно знать, изучив нашу серию «Разработка WordPress для начинающих» или просмотрев этот список, который мы составили из 6 курсов, которые превращают пользователей WordPress в разработчиков.

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

Дополнительную информацию об API виджетов можно найти в Кодексе WordPress.

Вы создаете новый виджет WordPress, добавляя код в одно из двух мест:

• Пользовательский плагин, который следует использовать, если вы хотите использовать виджет с более чем одной темой или более чем на одном веб-сайте.
• Файл functions.php активной темы — это должна быть либо дочерняя тема, либо полностью настраиваемая тема.

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

Виджеты WordPress создаются с помощью объектно-ориентированного программирования. Класс WP_Widget расширен для создания каждого виджета. Класс WP_Widget включает около 20 различных методов. Однако для основных виджетов вам действительно нужно использовать только четыре из них:

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

В дополнение к этим четырем методам, 9Функция 0311 add_action используется для привязки пользовательской функции виджета к хуку widgets_init .

Пример #1: Отображение заголовка виджета, названия сайта и слогана функция виджета

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

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

Начнем процесс написания метода с метода __construct() .

WP_Widget::__construct()

Метод __construct() используется для присвоения идентификатора, заголовка, имени класса и описания виджету. Вот как выглядит функция-конструктор для создания нашего первого примера виджета:

Загрузка gist 9d87de61356585feb6664814babd6995

Чтобы понять эту функцию, начните со строки, начинающейся с parent::__construct() . Что происходит, так это то, что эта строка создает новый виджет с идентификатором 'example-widget' , именем 'Example Widget' и двумя параметрами виджета: именем класса и кратким описанием.

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

WP_Widget::widget()

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

Что делает widget() , так это содержит код, который генерирует фактический контент, отображаемый вашим виджетом. Содержимое widget() может быть любым, но, как правило, включает немного PHP. В противном случае вы бы просто использовали текстовый виджет, встроенный в WordPress.

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

Loading gist cdce8f0d9f85f24a6585d5965a6e8b89

В этой функции происходит несколько вещей, на понимание которых вам нужно потратить время:

• $args1[] : 903 эта переменная загружает массив аргументов, которые можно использовать при построении вывода виджета. Значения, содержащиеся в $args , устанавливаются активной темой при регистрации области боковой панели.
• $instance[] : эта переменная загружает значения, связанные с текущим экземпляром виджета. Если вы дважды добавили виджет на боковую панель, каждый экземпляр $instance будет содержать значения, характерные для каждого экземпляра виджета.
• фильтр widget_title : возвращает заголовок текущего экземпляра виджета.
• get_bloginfo() : функция, которую можно использовать для возврата всех видов метаданных о веб-сайте WordPress, включая имя сайта и слоган.

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

$args , заголовка, названия сайта и слогана.

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

Весь метод widget() должен быть вложен внутри jpen_Example_Widget .

WP_Widget::form()

Метод form() используется для добавления полей настроек в виджет, который будет отображаться в админке WordPress.

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

Загрузка gist e4f10b6e30c6f2e3f70a25f521f61d90

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

Затем элементы label и input, вложенные в теги абзаца, создают поле ввода с меткой, чтобы пользователь мог добавить новый заголовок.

С этим битом кода, добавленным к jpen_Example_Widget , настройки виджета будут выглядеть так:

WP_Widget::update()

Следующим шагом будет обновление информации в базе данных WordPress с помощью метода update() .

Этот метод принимает два параметра: $new_instance

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

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

Загрузка сути d2ec67ed152a8f448c099f7b91afdfdd

В случае нашего примера виджета все, что мы делаем, это обновляем заголовок. Итак, все, что нам нужно сделать, это:

1. 1. Получите титул из нового экземпляра,
   2. Удалите все теги HTML или PHP, которые могли быть добавлены к заголовку виджета,
   3. Назначьте это название экземпляру и
   4. Вернуть обновленный экземпляр.

Регистрация виджета

Последним шагом в процессе является регистрация виджета с использованием функции add_action и хука widget_init . Вот как это сделать:

Loading gist 471f590a1f8f5d3e4cbfcbb9a999d184

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

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

С этим последним фрагментом кода мы можем добавить наш виджет на боковую панель, настроить его по своему вкусу и отобразить заголовок нашего сайта и слоган на боковой панели, например:

Пример №2: Отображение категорий в двух столбцах

Некоторое время назад я написал руководство, объясняющее, как превратить любой шаблон HTML5 в тему WordPress. Однако чего я не сделал в этом руководстве, так это воссоздания каких-либо виджетов боковой панели, включенных в шаблон. Таким образом, нашим вторым примером виджета будет виджет боковой панели со списком категорий из HTML5-шаблона Blog Post от Start Bootstrap.

Вот как виджет боковой панели выглядит в исходном шаблоне HTML5:

Для воссоздания этого виджета требуется немного больше кода, чем для нашего простого примера виджета, но на самом деле он не очень сложный. На самом деле функции _construct() , form() и update() практически не изменились. Единственная реальная разница между этим виджетом и нашим предыдущим примером заключается в том, что метод вывода widget() включает немного больше кода.

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

Для начала я создал Widget () Функция:

Загрузка GIST 4E7EE87646BD6DC5927F2E00BB870591

NEXT, I создал несколько переменных:

GIST 4517AAAL74AI7 Они содержат заголовок виджета и список всех категорий.

Переменная $cat_count будет использоваться для отслеживания общего количества категорий, чтобы мы могли отсортировать их в два списка. Две переменные столбца, $cat_col_one и $cat_col_two будут использоваться для разделения категорий на два столбца.

Далее идет функция, которая перебирает все категории и разбивает их на два столбца.

Загрузка gist 1f9042c4f40a91805efc6db84324fbbb

Для каждой категории выполняется итерация переменной $cat_count и создается $category_link . Затем на основе текущего $cat_count — четного или нечетного — $category_variable добавляется либо к первой, либо ко второй переменной столбца.

Кроме того, этот код также вкладывает каждую категорию в элемент списка с классом "list-unstyled" , чтобы соответствовать классам и HTML, используемым в исходном шаблоне.

Наконец, нам нужно распечатать $cat_col_one и $cat_col_two для отображения списка категорий: в див. Классы и структура HTML, назначенные виджету, отражают классы и структуру, включенные в исходный шаблон, чтобы обеспечить правильное применение стилей, включенных в ресурсы CSS исходного шаблона, к новому виджету.

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

Если вы хотите увидеть полный код, который создает этот виджет боковой панели, найдите экземпляр jpen_Category_List_Widget класса WP_Widget в файле functions.php темы Simple Blog Theme на GitHub.

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

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

1. 1. 1. Используйте __construct() для определения основной информации виджета.