Как создать плагин виджетов для WordPress

Учебники

Последнее обновление Сен 22, 2021

Содержание

Шаг 1. Создайте плагин для виджетов

Шаг 2. Создайте виджет

1 – Конструктор

2 – Функция form ()

3 – Функция update ()

4 – Функция widget ()

Полный код плагина виджета

Заключение

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

Шаг 1. Создайте плагин для виджетов

Недавно я создал плагин под названием «Freelancer Widgets Bundle», и некоторые люди спрашивали меня, как создать такой плагин, поэтому я решил написать этот пост. Первый шаг – создание плагина. И, как вы увидите, это не самое сложное. Плагин – это дополнительный код, добавляемый в WordPress после его активации. WordPress создает цикл через папку, чтобы получить все доступные плагины и перечислить их в бэк-офисе. Чтобы создать плагин, вам понадобится редактор, например Coda (Mac) или Dreamweaver (ПК и Mac). Я рекомендую вам создать свой плагин в локальной установке WordPress, размещение его на работающем сервере может вызвать некоторые проблемы, если вы сделаете ошибку. Поэтому, пожалуйста, дождитесь тестирования нашего плагина, прежде чем размещать его на своем хостинге.

Теперь откройте папку wp-content / plugins. Здесь вы собираетесь добавить свой плагин. Создайте новый каталог и назовите его «widget-plugin» (на самом деле это имя может быть любым). Даже если в нашем плагине будет только один файл, всегда лучше использовать папку для каждого плагина. В вашем каталоге создайте новый файл с именем «widget-plugin.php» (это имя тоже можно изменить) и откройте его. Теперь мы собираемся добавить наши первые строки кода. Определение плагина в WordPress следует некоторым правилам, которые вы можете прочитать здесь, в кодексе. Вот как WordPress определяет плагин:

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

Сохраните ваш файл. Только добавив код в наш файл widget-plugin.php, мы создали плагин! Ну, пока плагин ничего не делает, но WordPress его распознает. Чтобы убедиться, что это так, зайдите в администрацию и перейдите в меню «Плагины». Если ваш плагин появляется в списке плагинов, вы в порядке, в противном случае убедитесь, что вы следовали моим инструкциям, и повторите попытку. Теперь вы можете активировать плагин.

Шаг 2. Создайте виджет

Теперь мы собираемся создать сам виджет. Этот виджет будет классом PHP, расширяющим основной класс WordPress WP_Widget. По сути, наш виджет будет определяться так:


// The widget class
class My_Custom_Widget extends WP_Widget {
    // Main constructor
    public function __construct() {
        /* ... */
    }
    // The widget form (for the backend) public function form( $instance) { 
        /* ... */
    }
    // Update widget settings
    public function update( $new_instance, $old_instance) {
        /* ... */
    }
    // Display the widget
    public function widget( $args, $instance) {
        /* ... */
    }
}
// Register the widget
function my_register_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'my_register_custom_widget' );

Этот код предоставляет WordPress всю информацию, необходимую системе для использования виджета:

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

1 – Конструктор

Конструктор – это часть кода, которая определяет имя виджета и основные аргументы, ниже приведен пример того, как он может выглядеть.

Пожалуйста, не используйте () вокруг имени виджета, эта функция используется WordPress для перевода. Я действительно рекомендую вам всегда использовать эти функции, чтобы ваша тема была полностью переводимой. А использование параметра customize_selective_refresh позволяет обновлять виджет в разделе Внешний вид> Настроить при редактировании виджета, поэтому вместо обновления всей страницы при внесении изменений обновляется только виджет.

2 – Функция form ()

Это функция, которая создает настройки формы виджета в административной области WordPress (либо в разделе «Внешний вид»> «Виджеты», либо «Внешний вид»> «Настройка»> «Виджеты». Здесь вы вводите свои данные, которые будут отображаться на веб-сайте. Итак, я объясню, как вы можете добавлять текстовые поля, текстовые области, поля выбора и флажки в настройки формы виджета.

Этот код просто добавляет в виджет 5 полей (заголовок, текст, текстовое поле, выбор и флажок). Итак, сначала вы определяете значения по умолчанию для своего виджета, а затем следующая функция анализирует текущие настройки, определенные / сохраненные для вашего виджета, со значениями по умолчанию (так что любые настройки, которые не существуют, вернутся к значениям по умолчанию, например, когда вы впервые добавляете виджет в ваша боковая панель). И последнее – это html для каждого поля. Обратите внимание на использование esc_attr () при добавлении полей формы, это сделано из соображений безопасности. Каждый раз, когда вы повторяете пользовательскую переменную на своем сайте, вы должны сначала убедиться, что она продезинфицирована.

3 – Функция update ()

Функция update () действительно проста. Поскольку разработчики ядра WordPress добавили действительно мощный API виджетов, нам нужно только добавить этот код для обновления каждого поля:


// Update widget settings
public function update( $new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title']    = isset( $new_instance['title'] )? wp_strip_all_tags( $new_instance['title'] ): '';
    $instance['text']     = isset( $new_instance['text'] )? wp_strip_all_tags( $new_instance['text'] ): '';
    $instance['textarea'] = isset( $new_instance['textarea'] )? wp_kses_post( $new_instance['textarea'] ): '';
    $instance['checkbox'] = isset( $new_instance['checkbox'] )? 1: false;
    $instance['select']   = isset( $new_instance['select'] )? wp_strip_all_tags( $new_instance['select'] ): '';
    return $instance;
}

Как видите, все, что нам нужно сделать, это проверить каждую настройку и, если она не пуста, сохранить ее в базе данных. Обратите внимание на использование функций wp_strip_all_tags () и wp_kses_post (), они используются для очистки данных перед их добавлением в базу данных. Каждый раз, когда вы вставляете ЛЮБОЙ пользовательский контент в базу данных, вам необходимо убедиться, что он не содержит вредоносного кода. Первая функция wp_strip_all_tags удаляет все, кроме основного текста, поэтому вы можете использовать ее для любых полей, где конечным значением является строка, а вторая функция wp_kses_post () – это та же функция, которая используется для содержимого сообщения, и она удаляет все теги, кроме базовых HTML-ссылок., промежутки, блоки, изображения и т. д.

4 – Функция widget ()

Функция widget () – это функция, которая выводит контент на веб-сайт. Это то, что увидят ваши посетители. Эта функция может быть настроена для включения классов CSS и определенных тегов, которые идеально подходят для отображения вашей темы. Вот код (обратите внимание, что этот код можно легко изменить в соответствии с вашими потребностями):

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

Полный код плагина виджета

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

Посмотреть полный код на Github

Заключение

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

Источник записи: https://www.wpexplorer.com