Как сделать собственный виджет WordPress.

Гибкость как платформы системы управления контентом (CMS) привела к тому, что миллионы людей сделали ее предпочтительным выбором для создания веб-сайтов любого типа. Платформа веб-сайтов номер один в мире помогла отдельным лицам, владельцам бизнеса и организациям удобно и эффективно обеспечить присутствие в Интернете.

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

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

Важность кастомных виджетов

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

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

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

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

Инициализация: эта первая часть определяет идентификатор, имя и описание виджета. Он использует функцию _construct() для установки исходной информации и параметров виджета. Также в этой части делается ссылка на CSS или Javascript.

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

Внутренний дисплей: эта часть – определенная в form () – обрабатывает функцию формы виджета, в частности интерфейс редактирования в консоли Admin Widgets.

Обновление настроек: раздел функции update () обрабатывает и проверяет записи настроек виджета из серверной части.

Регистрация: наконец, этот раздел – init () – регистрирует виджет для использования в . Этот шаг важен для того, чтобы убедиться, что настраиваемый виджет отображается в списке доступных виджетов для боковых панелей.

Пошаговое руководство по созданию пользовательских виджетов

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

1. Создайте расширенный класс WP_Widget.

Начните с этого примера кода:
<? Php
class Mycustom_Widget extends WP_Widget {
}
?>

2. Добавьте данные в функцию _construct.

публичная функция __construct () {

parent :: construct (
‘thisisanewwidget’,
_ (‘My Custom Widget’, ‘thisisanewblock’),
array (
‘classname’ => ‘thisisanew_widget’,
‘description’ => (‘Введите собственное описание для вашего нового виджета’, ‘mycustomdomain’)
)
);

loadplugintextdomain (‘thisisanewblock’, false, basename (dirname (__FILE)). ‘/ languages’);

}

3. Определите визуальные элементы виджета для интерфейса редактирования / администрирования с помощью form ().

форма публичной функции ($ instance) {

$ title = esc_attr ($ instance [‘title’]);
$ параграф = esc_attr ($ instance [‘параграф’]);
?>

<label for = " get_field_id (‘title’); ?> “>


<input type = "text" value = " “Name =” get_field_name (‘title’); ?> “Id =” get_field_id (‘title’); ?> “/>

<label for =" get_field_id (‘параграф’); ?> “>


<textarea rows = "10 ″ cols =" 16 ″ name = " get_field_name (‘параграф’); ?> “Id =” get_field_id (‘параграф’); ?> “>

<? php
}

4. Добавьте функцию widget (), чтобы определить, как виджет выглядит на боковой панели веб-сайта.

виджет публичной функции ($ args, $ instance) {

извлечение ($ args);

$ title = apply_filters (‘widget_title’, $ instance [‘title’]);
$ paragraph = $ instance [‘абзац’];

echo $ before_widget;
if ($ title) {echo $ before_title. $ title. $ after_title;}
if ($ paragraph) {echo $ before_paragraph. $ параграф. $ after_paragraph;}
эхо $ after_widget;

}

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

обновление публичной функции ($ new_instance, $ old_instance) {

$ instance = $ old_instance;

$ instance [‘title’] = strip_tags ($ new_instance [‘title’]);
$ instance [‘параграф’] = strip_tags ($ new_instance [‘параграф’]);

return $ instance;

}

6. Зарегистрируйте пользовательский виджет в .

add_action (‘widgets_init’, function () {
register_widget (‘Mycustom_Widget’);
});

7. Свяжите свой виджет с functions.php

Создайте файл PHP (в нашем случае mywidget.php), содержащий коды пользовательских виджетов. Загрузите файл в папку темы вашего сайта и добавьте его в functions.php:

require («виджеты / mywidget.php»);

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

Преимущества настраиваемых виджетов

Если у вас нет желания создавать собственный виджет , вот список преимуществ, которые вы потенциально можете получить:

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

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

Нижняя линия

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

Создание пользовательских виджетов на вашем сайте с помощью TemplateToaster

Источник записи:

• статьи о wordpress, web