Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Widgets
Code

Создание собственных виджетов с использованием различных API WordPress: Вступление

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

Final product image
What You'll Be Creating

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

Серия будет состоять из следующих руководств:

  1. Вступление
  2. Похожие сообщения Widget
  3. Вход Widget
  4. FAQ Widget
  5. Самые популярные сообщения Widget с интеграцией Google Analytics
  6. Физический адрес Widget с интеграцией с Google Maps
  7. Вывод

В этом уроке я познакомлю вас с API-интерфейсом WordPressWidgets (re), создав простой текстовый виджет. Мы проанализируем и рассмотрим различные функции, виджет составляющие, чтобы понять, как виджеты WordPress работают в целом.

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

Виджеты WordPress

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

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

Изучение класса виджета

Самый простой способ создать виджет WordPress - наследовать класс WP_Widget. Таким образом вы можете использовать встроенные функции для обновления виджета, отображения виджета и создания интерфейса администратора для виджета.

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

Определение нашего виджета



Подробные функции

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

__construct()

Эта функция регистрирует виджет с помощью WordPress

widget()

Эта функция отвечает за внешний вид виджета. Он выводит содержимое виджета

update()

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

  1. $new_instance - значения, отправленные только для сохранения. Эти значения будут поступать из формы, определенной в методе form ()
  2. $old_instance - ранее сохраненные значения из базы данных

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

form()

Метод / функция form () используется для определения формы виджетов внешнего вида, которую вы видите на панели виджетов в информационной панели. Эта форма позволяет пользователю настроить заголовок и другие параметры виджета.

Эта функция принимает следующие параметры:

  • $instance - ранее сохраненные значения из базы данных

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

Чтобы создать наш виджет, мы выполним следующие шаги:

  • Определите, что мы создаем
  • Зарегистрируйте наш виджет в WordPress
  • Создание внутренней формы
  • Сохранение значений в базе данных
  • Определение интерфейсного дисплея
  • Зарегистрировать виджет

Что мы создаем?

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

Конструктор виджета

Конструктор позволяет нам инициализировать наш виджет, перезаписав исходный класс (стандартный класс WP_Widget).



В приведенном выше коде мы вызываем родительскую конструкторскую функцию класса WP_Widget и передаем ей аргументы:

  • Base ID - уникальный идентификатор для виджета. Должно быть в нижнем регистре. Если оставить пустым, будет использоваться часть имени класса виджета.
  • Имя - это имя виджета, отображаемого на странице конфигурации (на панели инструментов).
  • И (необязательный) массив, содержащий имя класса и описание. Описание показано на странице конфигурации (в панели инструментов WordPress).

Создание обратной формы

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

Our widgets back-end configuration form

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



Чтобы перейти от этого к нашему окончательному коду для функции form (), нам нужно будет сделать некоторые из атрибутов выше динамического - а именно, имя, идентификатор и атрибут label для атрибута (который должен соответствовать идентификатору HTML, что есть метка). Мы также заменим значение текстового поля и содержимого поля textarea динамическими значениями из базы данных, если они уже были сохранены.

Вот код, в котором мы заканчиваем:



Приведенный выше код получает доступ и присваивает ранее сохраненные значения из базы данных двум переменным - $title и $message. Затем мы используем esc_attr() для кодирования возвращаемых значений и во избежание нарушения нашего кода. Затем мы возвращаем атрибут $ title в атрибут value текстового поля и echo $ message как содержимое поля textarea.

В приведенном выше коде вы заметите два метода, которые, вероятно, новы для вас: get_field_id () и get_field_name ().

  • get_field_id () - принимает имя поля в качестве аргумента и создает атрибуты id для использования в полях form (). Это гарантирует, что идентификатор возвращаемого поля является уникальным
  • get_field_name () - принимает имя поля в качестве аргумента и строит атрибуты имени для использования в полях form (). Он гарантирует уникальность имени возвращаемого поля.

Атрибут метки for атрибута закодирован так, чтобы отображать значение id элементов, которые они маркируют.

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


Варианты обновления нашего виджета

Чтобы обновить наш виджет, мы напишем соответствующий код в методе обновления. Здесь есть наш код:


Вышеупомянутая функция принимает два параметра: $new_instance и $old_instance

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

Функция update () возвращает массив настроек для сохранения или false для отмены сохранения.

В приведенном выше коде мы присваиваем $old_instance переменной $instance и заменяем ее заголовок и ключи сообщений значениями $new_instance. Возвращая новый и обновленный массив, мы эффективно обновляем наши настройки виджета.

Функция strip_tags () удаляет теги HTML и PHP теги из строки, которая передается ему. Мы включаем эту функцию, чтобы избежать ситуации, когда пользователи вашей темы не могут закрыть теги, введенные через внешнюю форму, в результате чего ваш сайт разбивается (не обрабатывается должным образом).

Определение Front-End

Функция widget () отвечает за внешний вид виджета. Он принимает два параметра: $args и $instance.

$args - это массив, переданный функции register_sidebar () при определении боковой области / виджетной области, в которой размещен виджет. Это можно найти в файле functions.php. Ниже приведен пример объявления register_sidebar ():

Sample register_widget declaration

Массив содержит определения тегов открытия и закрытия самого виджета и заголовка виджета.

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

Мы используем теги, упомянутые выше, в последнем коде виджета:


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

Введем функцию extract (), которую некоторые могут не знать. Эта функция принимает ассоциативный массив и возвращает его ключи как переменные. Это позволяет нам выводить $before_widget вместо $args ['before_widget'], что немного упрощает наш код.

Окончательный результат на фактическом веб-сайте будет выглядеть примерно так:

Our text widget on an actual site

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

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

Итоговый код

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

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

Вот окончательный код:


Заключение

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.