Полное руководство по созданию плагина WordPress

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

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

Тот факт, что плагин находится в репозитории, не означает, что он не повлияет на его производительность или не поставит под угрозу его безопасность.

Так что ты можешь сделать? Ну, вы можете построить свой собственный.

Создание отличного плагина WordPress начинается с тщательного планирования.

Независимо от того, создаете ли вы его с нуля или на основе шаблона, абсолютно необходимо следовать хорошо задокументированным рекомендациям.

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

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

Начните с плана.

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

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

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

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

Экран настроек

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

Сохранение содержимого

• Если пользователь вошел в систему, сохраните содержимое в настраиваемое поле пользователя
• Если пользователь не вошел в систему, сохранить содержимое в файлы cookie

Сообщения

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

• «Сохранить элемент».
• «Отменить сохранение элемента».
• «Сохранено. Посмотреть сохраненные элементы».
• «У вас нет сохраненных элементов».

Сохраненный экран

Здесь посетители просматривают список сообщений, которые они сохранили.

• Показать список сохраненных элементов
• Создать сохраненную страницу при активации плагина
• Удалить сохраненную страницу при деактивации плагина

Короткий номер

С помощью шорткода сохраненная страница может отображаться везде, где она добавлена.

Используйте шаблон.

Это лучший шаблон, который я нашел. Он хорошо структурирован, объектно-ориентирован и эффективен. Он следует каждой лучшей практике. И это быстро и легко.

Вы можете использовать эту страницу для создания базы кода плагина на основе этого шаблона плагина WordPress:

Вы должны получить файл .zip .

Извлеките его и поместите в папку установки WordPress: wp-content/plugins/ .

Если вы откроете панель инструментов WordPress и перейдете к плагинам, вы увидите, что ваш плагин указан там. Пока не активируйте его.

Управление активацией и деактивацией.

Для нашего плагина важно правильно обрабатывать активацию и деактивацию.

Когда наш плагин активируется, мы создадим страницу с именем «Сохраненные», на которой будут храниться сохраненные пользователем элементы.

При создании этой страницы мы добавим шорткод для наших сохраненных элементов в содержимое этой страницы.

В конце мы сохраним страницу; получить его ID; и сохранить его в базе данных, чтобы мы могли получить к нему доступ позже при деактивации плагина.

Когда наш плагин деактивирован, мы получим идентификатор «Сохраненной» страницы из базы данных, а затем удалим «Сохраненную» страницу, удалив все следы самого плагина.

Мы можем сделать все это в файлах include/class-toptal-save-activator.php и include/class-toptal-save-deactivator.php .

Начнем с процесса активации:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

Функция activate() вызывается при активации плагина.

Он создает новую страницу с помощью функции wp_insert_post() и сохраняет идентификатор страницы в базе данных с помощью add_option() .

Теперь приступим к деактивации плагина.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

Функция deactivate() , которая вызывается при деактивации плагина, извлекает страницу с помощью функции get_option() , удаляет соответствующую страницу из базы данных с помощью wp_delete_post() и удаляет сохраненный идентификатор из таблицы параметров с помощью delete_option() .

Если мы активируем наш плагин и перейдем к страницам, мы должны увидеть страницу под названием «Сохранено» с шорткодом на ней.

Если бы мы деактивировали плагин, эта страница была бы удалена.

Поскольку мы использовали true в качестве аргумента в нашем wp_delete_post() , эта страница не попадет в корзину, а будет полностью удалена.

Создайте страницу настроек плагина.

Мы можем создать нашу страницу настроек внутри файла admin/class-toptal-save-admin.php , и первое, что нам нужно сделать в этом файле, это удалить или закомментировать вызов wp_enqueue_style() внутри функции enqueue_styles() и вызов wp_enqueue_script() внутри функции enqueue_scripts() , если мы не будем добавлять какие-либо CSS/JS на экран администратора.

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

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Если вам интересно, откуда я взял эту часть 'tools_page_toptal-save' .

Ну, вот в чем дело, я знаю, что я собираюсь создать страницу настроек с слагом toptal-save, и я также знаю, что я добавлю его на экран инструментов ( tools.php ). Итак, объединив эти два значения, мы можем сказать, что значением переменной $hook будет 'tools_page_toptal-save' — конкатенация двух значений.

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

Поскольку я не буду добавлять какие-либо пользовательские стили на свой экран администратора — потому что я хочу, чтобы мой экран плагина выглядел как собственный экран WordPress — я не буду добавлять этот код.

Теперь мы можем приступить к созданию нашей страницы настроек.

Мы собираемся начать с добавления простого метода в класс Toptal_Save_Admin , который будет вызывать add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Это довольно много аргументов, которые мы передаем функции add_submenu_page() . Вот что означает каждый из них.

• Родительский ярлык: имя ярлыка для родительского меню (или имя файла стандартной страницы администратора WordPress). Вы можете увидеть полный список родительских слагов здесь.

• Заголовок страницы: текст, который будет отображаться в тегах заголовка страницы при выборе меню.

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

• Возможности: возможности, необходимые пользователю для отображения этого меню. Мы использовали «manage_options», который позволяет получить доступ к параметрам панели администратора. Подробнее о ролях и возможностях можно прочитать здесь.

• Слизняк меню: Имя слизняка для ссылки на это меню.

• Вызываемая функция: функция, которая будет вызываться для вывода содержимого этой страницы. Поскольку мы определили имя нашей вызываемой функции, нам нужно ее создать, но прежде чем мы это сделаем, мы использовали $this для ссылки на экземпляр класса изнутри него самого. Вот что об этом говорит документация PHP:

Псевдопеременная $this доступна, когда метод вызывается из контекста объекта. $this — это ссылка на вызывающий объект (обычно объект, которому принадлежит метод, но, возможно, и другой объект, если метод вызывается статически из контекста вторичного объекта).

Далее мы добавим в класс еще один метод:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Эта вызываемая функция включает наш шаблон, который будет отображать нашу страницу настроек. Вы можете видеть, что мы ссылаемся на файл, расположенный в admin/partials , который называется toptal-save-admin-display.php .

Теперь, если вы перейдете в «Инструменты», вы не увидите этот экран. Почему? Потому что мы не привязали наш метод register_admin_page() к admin_menu .

Мы можем сделать это, открыв наш файл include/class-toptal-save.php и добавив этот фрагмент кода в метод define_admin_hooks() , прямо под тем местом, где $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); часть есть.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Не беспокойтесь о вызовах add_action() , так как это то, что мы рассмотрим позже.

А пока просто откройте страницу «Инструменты», и вы сможете увидеть страницу сохранения Toptal. Если мы его откроем, он работает, но мы видим пустой экран, так как на нем ничего нет.

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

Мы собираемся начать создавать поля, и это то, что мы собираемся сделать с помощью API настроек WordPress.

Если вы не знакомы с ним, это позволяет нам создавать поля формы, которые мы можем использовать для сохранения наших данных.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

Внутри функции register_settings() мы можем добавить и настроить все поля. Вы можете найти полную реализацию функции здесь. Мы использовали следующее в функции, показанной выше:

• register_setting() : регистрирует настройку и обратный вызов ее очистки.
• add_settings_section() : добавляет новый раздел на страницу настроек.
• add_settings_field() : добавляет новое поле в раздел страницы настроек.

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

Кроме того, мы передали в эти обратные вызовы массив данных, таких как label_for, description или default по мере необходимости.

Теперь мы можем создать эти обратные вызовы для очистки. Вы можете найти код для этих обратных вызовов здесь.

Это все хорошо, однако нам нужно зацепить поля в хук admin_init , а затем показать их.

Мы будем использовать add_action , который представляет собой хук, который ядро ​​WordPress запускает в определенные моменты во время выполнения или когда происходит определенное событие. admin_init запускается перед любым другим хуком, когда пользователь получает доступ к области администратора.

Во-первых, нам нужно добавить действие в файл include/class-toptal-save.php .

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Затем в admin/partials/topal-save-admin-display.php нам нужно предоставить представление для области администрирования нашего плагина:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

Функция settings_fields() используется для вывода полей nonce, action и option_page для страницы настроек.

За ним следует do_settings_sections() , которая выводит все разделы настроек, добавленные на определенную страницу настроек.

Наконец, кнопка отправки добавляется с использованием предоставленного текста и соответствующего класса(ов) с помощью функции submit_button() .

Теперь, если мы посмотрим на нашу страницу, она будет выглядеть так:

Это все, что нам нужно сделать в нашей админке. Давайте начнем работать над публичной частью нашего плагина.

Создайте функциональность плагина.

А вот и самое интересное. Нам нужно создать несколько функций, чтобы разделить нашу функциональность:

• Функция, которая будет отображать кнопку «Сохранить элемент». Это должно проверить, сохранил ли текущий пользователь этот элемент или нет, в зависимости от этого мы будем показывать другой текст, а также цвет.
• Функция, которая сохранит/отменит сохранение элемента (AJAX).
• Функция, которая покажет все сохраненные элементы.
• Функция, которая будет генерировать наши шорткоды.

Итак, давайте начнем с показа кнопки. Мы будем делать все это в файле public/class-toptal-save-public.php .

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

• Создание уникального имени файла cookie для веб-сайта
• Создание файла cookie
• Получение значения cookie
• Получение статуса членства из настроек

Код этих вспомогательных функций можно найти здесь.

Функция get_unique_cookie_name() поможет нам сгенерировать уникальное имя файла cookie из URL-адреса веб-сайта, имени веб-сайта и нашего пользовательского суффикса. Это делается для того, чтобы сгенерированное имя файла cookie не конфликтовало при использовании на нескольких сайтах WordPress в одном домене.

Функции toptal_set_cookie() и toptal_get_cookie() будут создавать и получать значения наших файлов cookie соответственно.

Функция get_user_status() получит статус флажка нашего членства в настройках (возвращает 1 при установленном флажке, 0 в противном случае).

Теперь самое интересное — создание функции, которая будет отвечать за отображение кнопки сохранения. Реализацию нашей show_save_button() можно найти здесь. Здесь мы использовали некоторые новые функции из WordPress API:

• get_queried_object_id() : получает идентификатор текущего запрошенного объекта.
• is_user_logged_in() : Проверяет, является ли текущий посетитель авторизованным пользователем.
• get_user_meta() : извлекает поле метаданных пользователя для пользователя.
• wp_create_nonce() : создает криптографический токен, привязанный к определенному действию, пользователю, пользовательскому сеансу и временному окну.

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

1. Убедитесь, что кнопка отображается только на типах сообщений, которые выбраны в настройках.
2. Убедитесь, что установлен флажок для добавления кнопки.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Теперь нам нужно привязать эту функцию к the_content .

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

При этом мы можем добавить нашу кнопку сохранения в любом месте содержимого. Мы можем сделать это в include/class-toptal-save.php в define_public_hooks() , например:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

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

Отсюда мы должны продолжить и стилизовать эту кнопку.

Мы можем сделать это в public/css/toptal-save-public.css . Найдите обновленный файл CSS здесь.

Теперь давайте создадим функцию, которая действительно сохранит элемент.

Мы собираемся сделать это в нашем общедоступном классе, и мы собираемся сделать это с помощью AJAX. Код здесь.

Давайте подключим эту функцию к WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Подробнее об AJAX в плагинах можно прочитать здесь.

Прежде чем мы закончим эту часть, нам нужно сделать еще две вещи.

1. Локализуйте скрипт.
2. Создайте наш вызов AJAX в public/js/toptal-save-public.js.

Локализация скрипта будет выполняться с помощью функции wp_localize_script() внутри нашего файла public/class-toptal-save-public.php .

Кроме того, пока мы этим занимаемся, мы также обязательно реализуем отображение файлов CSS и JS в зависимости от состояния нашего флажка «использовать наш стиль».

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Теперь мы можем продолжить наш вызов AJAX.

Наш интерфейсный скрипт будет искать элементы с классом «toptal-save-button».

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

Вы можете найти код здесь и необходимый CSS здесь.

Я также добавил функцию, которая будет обрабатывать уведомление при добавлении элемента.

Вот как это все работает.

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

Мы можем сделать это в public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

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

В include/class-toptal-save.php добавьте этот код после той строки, где мы добавили нашу кнопку.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

Теперь это не сработает, потому что мы еще не загрузили метод add_shortcode() внутри нашего класса загрузчика.

Вот полный код файла include/class-toptal-save-loader.php .

Я добавил новую защищенную переменную с именем shortcodes , а затем в методе конструктора класса превратил ее в массив.

В строке 104 я добавил функцию, которая будет отвечать за создание наших шорткодов; вы можете видеть, что это почти то же самое, что и функция над ней ( add_filter() ), за исключением того, что я заменил «фильтр» на «шорткод» и «фильтры» на «шорткоды».

Кроме того, в методе run() я добавил еще один foreach , который будет проходить через наш массив шорткодов и регистрировать их в WordPress.

Это было легко.

Помните, вначале мы использовали [toptal-saved] , поэтому давайте создадим метод, который будет показывать все наши сохраненные элементы.

Полный код этого метода можно найти здесь.

Теперь, как всегда, нам нужно зарегистрировать шорткод в include/class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

У нас есть еще две вещи, чтобы сделать здесь.

1. Стиль нашей страницы сохраненных элементов.
2. Убедитесь, что когда пользователь удаляет сохраненный элемент, он исчезает со страницы сохраненных элементов.

Для первой задачи вы можете найти необходимый код CSS здесь.

Для второго это включает в себя немного внешнего сценария.

Полный код JavaScript для этого можно найти здесь.

Как вы увидите в строке 52, я искал элемент div с классом «toptal-saved-item».

Затем в строках 70-75 мы проверяем, есть ли у родительского div класс toptal-saved-item.

Если это так, мы скрываем наш элемент с помощью fadeOut, а затем, после окончания анимации, полностью удаляем элемент с экрана.

Теперь давайте перейдем к более сложной части — сделать его модульным.

Сделайте плагин модульным.

Основное определение модульного плагина:

Расширяемый или модульный код — это код, который можно модифицировать, с которым можно взаимодействовать, добавлять или которым можно манипулировать — и все это без изменения основной кодовой базы.

Теперь, когда дело доходит до этого плагина, я хотел бы убедиться, что пользователи могут изменять HTML внутри сохраненного элемента на странице сохраненных элементов.

Итак, нам нужно внести несколько изменений в наш метод register_saved_shortcode() :

• Измените html_to_return на inner_html_to_return везде, где мы хотим, чтобы пользователи могли изменять HTML. Убедитесь, что в первом объявлении нашей переменной inner_html_to_return стоит знак «=» без точки перед ним.
• Используйте метод apply_filters() для регистрации нашего фильтра.

С этими двумя изменениями вы должны получить что-то вроде этого.

Теперь, если пользователи хотят взаимодействовать с нашим кодом, они могут добавить что-то вроде этого в свой файл functions.php :

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Создание файлов перевода.

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

При этом давайте углубимся в некоторые технические детали того, как WordPress обрабатывает переводы.

WordPress использует для перевода платформу локализации GNU gettext . В этой структуре есть три типа файлов:

• Шаблон переносимых объектов (POT)
• Переносной объект (PO)
• Машинный объект (МО)

Каждый из этих файлов представляет собой шаг в процессе перевода.

Чтобы создать файл POT, нам нужна программа, которая будет искать код WordPress и получать весь текст, передаваемый нашим функциям перевода, таким как __e() и _e() . Подробнее о функциях перевода можно прочитать здесь.

Здесь мы переводим текст из файла POT, сохраняя как английский, так и наш перевод в файле PO, и конвертируем файл PO в файл MO.

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

После того, как вы установите и активируете его, перейдите в Loco Translate > Плагины > Toptal Save.

Оттуда нажмите «Редактировать шаблон», затем «Синхронизировать и сохранить». Это отредактирует наш toptal-save.pot в папке языков.

Теперь плагин доступен для перевода.

Создайте свой плагин WordPress прямо сейчас.

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

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

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