Хотите создать свои собственные виджеты WordPress? Виджеты позволяют добавлять элементы без содержимого на боковой панели или в любой готовой к виджетам области вашего сайта.
Вы можете использовать виджеты для добавления баннеров, объявлений, форм подписки на рассылку и других элементов на ваш сайт.
В этой статье мы шаг за шагом покажем вам, как создать собственный виджет WordPress.
Примечание: Это руководство предназначено для пользователей WordPress DIY, которые изучают разработку и кодирование WordPress.
Что такое виджет WordPress?
Виджеты WordPress содержат фрагменты кода, которые вы можете добавить на боковые стороны вашего сайта или в области, готовые к виджетам.
Думайте о них как о модулях, которые можно использовать для добавления различных элементов с помощью простого интерфейса перетаскивания.
По умолчанию WordPress поставляется со стандартным набором виджетов, который можно использовать с любой темой WordPress. Ознакомьтесь с нашим руководством для начинающих о том, как добавлять и использовать виджеты в WordPress.
WordPress также позволяет разработчикам создавать свои собственные виджеты.
Многие премиальные темы и плагины WordPress поставляются со своими собственными виджетами, которые вы можете добавить на свои боковые панели.
Например, вы можете добавить контактную форму, пользовательскую форму входа или фотогалерею в боковую панель без ввода кода.
С учетом сказанного давайте посмотрим, как легко создавать свои собственные виджеты WordPress.
Видеоурок
Зарегистрируйтесь в WPBeginner
Если вы предпочитаете письменные инструкции, читайте дальше.
Создать собственный виджет в WordPress
Если вы изучаете кодирование WordPress, вам потребуется локальная среда разработки. Вы можете установить WordPress на свой компьютер (Mac или Windows)
Есть несколько способов добавить свой собственный код виджета WordPress.
В идеале вы можете создать плагин для конкретного сайта и вставить туда код виджета.
Вы также можете вставить код в файл functions.php вашей темы. Однако он доступен только тогда, когда эта конкретная тема активна.
Еще одним инструментом, который вы можете использовать, является плагин Code Snippets, который позволяет легко добавлять пользовательский код на ваш сайт WordPress.
В этом уроке мы создадим простой виджет, который просто приветствует посетителей. Цель здесь – познакомиться с классом виджетов WordPress.
Начнем.
Создать базовый виджет WordPress
WordPress поставляется со встроенным классом виджетов WordPress. Каждый новый виджет WordPress расширяет класс виджетов WordPress.
В руководстве разработчика WordPress упоминается 18 методов, которые можно использовать с классом WP Widget.
Однако для целей данного руководства мы сосредоточимся на следующих методах.
Мы изучим код ниже, где мы используем эти четыре метода в классе WP_Widget.
// Создание виджета
Класс wpb_widget расширяет WP_Widget {
// Строительная часть
__construct () function {
}
// Создаем внешний виджет
виджет публичной функции ($ args, $ instance) {
}
// Создаем внутренний виджет
форма государственной службы ($ instance) {
}
// Обновляем виджет, заменяя старые экземпляры новыми
обновление государственной службы ($ new_instance, $ old_instance) {
}
// Здесь заканчивается класс wpb_widget
}
В последней части кода мы фактически зарегистрируем виджет и загрузим его в WordPress.
Функция Wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);
Теперь давайте соберем все вместе, чтобы создать базовый виджет WordPress.
Вы можете скопировать и вставить следующий код в свой собственный плагин или файл functions.php темы.
// Создание виджета
Класс wpb_widget расширяет WP_Widget {
__construct () function {
parent :: __ construct (
// Базовый идентификатор вашего виджета
‘Wpb_widget’,
// Название виджета появится в пользовательском интерфейсе
__ («WPBeginner widget», «wpb_widget_domain»),
// Описание виджета
массив (‘description’ => __ (‘Пример виджета на основе учебника WPBeginner’, ‘wpb_widget_domain’),)
);
}
// Создаем внешний виджет
виджет публичной функции ($ args, $ instance) {
$ title = apply_filters (‘widget_title’, $ instance (‘title’));
// аргументы виджета до и после определяются темами
echo $ args (‘before_widget’);
if (! empty ($ title))
echo $ args (‘before_title’). $ title. $ args (‘after_title’);
// Здесь вы запускаете код и отображаете вывод
echo __ (‘Hello world!’, ‘wpb_widget_domain’);
echo $ args (‘after_widget’);
}
// внутренний виджет
форма государственной службы ($ instance) {
if (isset ($ instance (‘title’))) {
$ title = $ instance (‘title’);
}
Другой {
$ title = __ (‘New title’, ‘wpb_widget_domain’);
}
// виджет формы администратора
?>
После добавления кода необходимо перейти на Внешний вид »Виджеты стр. Вы увидите новый виджет WPBeginner в списке доступных виджетов. Вы должны перетащить этот виджет на боковой панели.
Этот виджет имеет только одно поле для заполнения, вы можете добавить свой текст и нажать кнопку Сохранить, чтобы сохранить изменения.
Теперь вы можете посетить их веб-сайт, чтобы увидеть его в действии.
Теперь давайте снова изучим код.
Сначала мы регистрируем «wpb_widget» и загружаем наш пользовательский виджет. После этого мы определяем, что делает этот виджет и как отображать его бэкэнд.
Наконец, мы определяем, как обрабатывать изменения, сделанные в виджете.
Теперь есть несколько вещей, которые вы можете спросить. Например, для чего нужен wpb_text_domain?
WordPress использует gettext для обработки перевода и локализации. Этот wpb_text_domain и __e указывает gettext сделать строку доступной для перевода. Посмотрите, как вы можете найти темы WordPress, готовые для перевода.
Если вы создаете собственный виджет для своей темы, вы можете заменить wpb_text_domain текстовым доменом вашей темы.
Мы надеемся, что эта статья помогла вам узнать, как легко создать собственный виджет WordPress. Вы также можете просмотреть наш список самых полезных виджетов WordPress для вашего сайта.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube, чтобы посмотреть обучающие видеоролики WordPress. Вы также можете найти нас на Twitter и Facebook,
