Учебники

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

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

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

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

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

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

<?php /* Plugin Name: Name Of The Plugin Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates Description: A brief description of the Plugin. Version: The Plugin's Version Number, e.g.: 1.0 Author: Name Of The Plugin Author Author URI: http://URI_Of_The_Plugin_Author License: A "Slug" license name e.g. GPL2 */

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

<?php /* Plugin Name: My Widget Plugin Plugin URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/ Description: This plugin adds a custom widget. Version: 1.0 Author: AJ Clarke Author URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/ License: GPL2 */

Сохраните ваш файл. Только добавив код в наш файл 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 всю информацию, необходимую системе для использования виджета:

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

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

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

// Main constructor public function __construct() { parent::__construct( 'my_custom_widget', __( 'My Custom Widget', 'text_domain' ), array( 'customize_selective_refresh' => true,) ); }

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

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

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

// The widget form (for the backend) public function form( $instance) { // Set widget defaults $defaults = array( 'title' => '', 'text' => '', 'textarea' => '', 'checkbox' => '', 'select' => '', ); // Parse current settings with defaults extract( wp_parse_args( (array) $instance, $defaults) ); ?> <?php // Widget Title ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'title') ); ?>"><?php _e( 'Widget Title', 'text_domain' ); ?></label> <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title') ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title') ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> </p> <?php // Text Field ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'text') ); ?>"><?php _e( 'Text:', 'text_domain' ); ?></label> <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text') ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text') ); ?>" type="text" value="<?php echo esc_attr( $text ); ?>" /> </p> <?php // Textarea Field ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'textarea') ); ?>"><?php _e( 'Textarea:', 'text_domain' ); ?></label> <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'textarea') ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'textarea') ); ?>"><?php echo wp_kses_post( $textarea ); ?></textarea> </p> <?php // Checkbox ?> <p> <input id="<?php echo esc_attr( $this->get_field_id( 'checkbox') ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'checkbox') ); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?> /> <label for="<?php echo esc_attr( $this->get_field_id( 'checkbox') ); ?>"><?php _e( 'Checkbox', 'text_domain' ); ?></label> </p> <?php // Dropdown ?> <p> <label for="<?php echo $this->get_field_id( 'select' ); ?>"><?php _e( 'Select', 'text_domain' ); ?></label> <select name="<?php echo $this->get_field_name( 'select' ); ?>" id="<?php echo $this->get_field_id( 'select' ); ?>" class="widefat"> <?php // Your options array $options = array( '' => __( 'Select', 'text_domain' ), 'option_1' => __( 'Option 1', 'text_domain' ), 'option_2' => __( 'Option 2', 'text_domain' ), 'option_3' => __( 'Option 3', 'text_domain' ), ); // Loop through options and add each one to the select dropdown foreach ($options as $key => $name) { echo '<option value="'. esc_attr( $key ). '" id="'. esc_attr( $key ). '" '. selected( $select, $key, false ). '>'. $name. '</option>'; } ?> </select> </p> <?php }

Этот код просто добавляет в виджет 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 и определенных тегов, которые идеально подходят для отображения вашей темы. Вот код (обратите внимание, что этот код можно легко изменить в соответствии с вашими потребностями):

// Display the widget public function widget( $args, $instance) { extract( $args ); // Check the widget options $title = isset( $instance['title'] )? apply_filters( 'widget_title', $instance['title'] ): ''; $text = isset( $instance['text'] )? $instance['text']: ''; $textarea = isset( $instance['textarea']) ?$instance['textarea']: ''; $select = isset( $instance['select'] )? $instance['select']: ''; $checkbox =! empty( $instance['checkbox'] )? $instance['checkbox']: false; // WordPress core before_widget hook (always include) echo $before_widget; // Display the widget echo '<div class="widget-text wp_widget_plugin_box">'; // Display widget title if defined if ($title) { echo $before_title. $title. $after_title; } // Display text field if ($text) { echo '<p>'. $text. '</p>'; } // Display textarea field if ($textarea) { echo '<p>'. $textarea. '</p>'; } // Display select field if ($select) { echo '<p>'. $select. '</p>'; } // Display something if checkbox is true if ($checkbox) { echo '<p>Something awesome</p>'; } echo '</div>'; // WordPress core after_widget hook (always include) echo $after_widget; }

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

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

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

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

Заключение

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

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

Похожие сообщения
Учебники

Как получить отличный поиск для вашего блога WordPress

Учебники

Как начать успешный блог о еде с WordPress

Учебники

Как вручную загрузить шрифты Google в WordPress

Учебники

Пошаговое руководство по переустановке WordPress