Как создать плагин WordPress TinyMCE

/

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

Крошечная панель инструментов MCE в визуальном редакторе WordPress

Требования

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

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

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

Создание вашего первого плагина TinyMCE

Мы начнем с создания плагина WordPress для регистрации нашей пользовательской кнопки панели инструментов TinyMCE. При нажатии на эту кнопку пользователь может добавить ссылку с настраиваемым классом CSS.

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

Во-первых, вам нужно создать каталог в папке wp-content / plugins вашей установки WordPress. Назовите эту папку tinymce-custom-link-class.

Отсюда мы начнем добавлять код нашего плагина.

Заголовок плагина

Создайте новый файл в каталоге плагинов, который мы только что создали, и назовите его tinymce-custom-link-class.php. Добавьте этот код в файл и сохраните его.

<?php
/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://example.com
 * Version: 1.0
 * Author: WP
 * Author URI: https://www.example.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */  

Это просто комментарий PHP, который сообщает WordPress имя плагина, а также автора и описание.

В административной области WordPress активируйте новый плагин, выбрав Плагины> Установленные плагины, а затем нажав Активировать рядом с плагином TinyMCE Custom Link Class:

Установленный плагин

Настройка нашего класса плагина

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

<?php
class TinyMCE_Custom_Link_Class {
    /**
    * Constructor. Called when the plugin is initialised.
    */
    function __construct() {

    }    
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;  

Это создает наш класс PHP вместе с конструкцией, которая вызывается, когда мы достигаем строки $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class ;.

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

Начните настройку нашего плагина TinyMCE

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

Добавьте следующий код в функцию __construct () вашего плагина:

<?php
if ( is_admin() ) {
    add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );      
}  

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

Затем добавьте функцию setup_tinymce_plugin:

<?php
/**
 * Check if the current user can edit Posts or Pages, and is using the Visual Editor
 * If so, add some filters so we can register our plugin
 */

function setup_tinymce_plugin() {
    // Check if the logged in WordPress User can edit Posts or Pages
    // If not, don't register our TinyMCE plugin
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return; 
    }
    // Check if the logged in WordPress User has the Visual Editor enabled
    // If not, don't register our TinyMCE plugin
    if ( get_user_option( 'rich_editing' ) !== 'true' ) {
        return; 
    }
    // Setup some filters
    add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
    add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );                 
}  

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

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

Наконец, мы добавляем два фильтра WordPress - mce_external_plugins и mce_buttons, чтобы вызвать наши функции, которые загрузят необходимый файл Javascript для TinyMCE, и добавим кнопку на панель инструментов TinyMCE.

Регистрация файла и кнопки Javascript в визуальном редакторе

Давайте продолжим и добавим функцию add_tinymce_plugin:

<?php
/**
 * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
 *  * @param array $plugin_array Array of registered TinyMCE Plugins
 * @return array Modified array of registered TinyMCE Plugins
 */
function add_tinymce_plugin( $plugin_array ) {
    $plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';  return $plugin_array;        
}        

Эта функция сообщает TinyMCE, что ему необходимо загрузить файлы Javascript, хранящиеся в массиве $ plugin_array. Эти файлы Javascript сообщают TinyMCE, что делать.

Нам также нужно добавить код в функцию add_tinymce_toolbar_button, чтобы сообщить TinyMCE о кнопке, которую мы хотим добавить на панель инструментов:

<?php
/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*  * @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {
    array_push( $buttons, '|', 'custom_link_class' );
    return $buttons;    
}    

Это помещает два элемента в массив кнопок TinyMCE: разделитель (|) и программное имя нашей кнопки (custom_link_class).

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

wordpress-tinymce-plugin-отсутствует-панель инструментов

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

wordpress-tinymce-plugin-js-404

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

Создание подключаемого модуля Javascript

Создайте новый файл в папке wp-content / plugins / tinymce-custom-link-class и назовите его tinymce-custom-link-class.js. Добавьте этот код в свой js файл:

<script>
(function() {
    tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {

    });     
})();  

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

Это принимает два элемента; имя плагина (custom_link_class) и анонимной функции.

Если вы знакомы с концепцией функций в программирования, анонимная функция - это просто функция без имени. Например, function foobar () {...} - это функция, которую мы могли бы вызвать где-нибудь еще в нашем коде с помощью foobar ().

С анонимной функцией мы не можем вызвать эту функцию где-нибудь еще в нашем коде - она ​​вызывается только в момент вызова функции add ().

Сохраните файл Javascript, а затем отредактируйте страницу или сообщение, чтобы просмотреть визуальный редактор. Если все сработало, вы увидите панель инструментов:

WordPress-tinymce-плагин-визуальный редактор-панель инструментов

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

Обновите файл Javascript, заменив существующий код следующим:

(function() {
    tinymce.PluginManager.add(
        'custom_link_class',
        function( editor, url ) {
            // Add Button to Visual Editor Toolbar
            editor.addButton('custom_link_class', {
                title: 'Insert Button Link',
                cmd: 'custom_link_class',           
            });     
        }
    );      
})();  

Обратите внимание, что у нашей анонимной функции два аргумента. Первый - это экземпляр редактора - это визуальный редактор TinyMCE. Таким же образом мы можем вызывать различные функции в PluginManager, мы также можем вызывать различные функции в редакторе. В этом случае мы вызываем функцию addButton, чтобы добавить кнопку на панель инструментов.

Сохраните файл Javascript и вернитесь в визуальный редактор. На первый взгляд кажется, что ничего не изменилось. Однако, если вы наведите курсор мыши на правую часть самого правого значка в верхнем ряду, вы увидите всплывающую подсказку:

Wordpress-tinymce-плагин-кнопка-noicon

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

image: url + '/icon.png',  

url - это URL-адрес нашего плагина. Это удобно, если мы хотим сослаться на файл изображения в нашей папке плагина, так как мы можем добавить имя файла изображения к URL-адресу. В этом случае нам понадобится изображение с именем icon.png в папке нашего плагина. Используйте значок ниже:

икона

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

wordpress-tinymce-плагин-кнопка-значок

Определение команды для запуска

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

В нашем файле Javascript добавьте следующий код под концом раздела editor.addButton:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
    alert('Button clicked!');
}); 

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

wordpress-tinymce-плагин-предупреждение-кнопка нажата

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

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
    //Check we have selected some text that we want to link
    var text = editor.selection.getContent({'format': 'html'});
    if ( text.length === 0 ) {
        alert( 'Please select some text to link.' );
        return;         
    }
    // Ask the user to enter a URL
    var result = prompt('Enter the link');
    if ( !result ) {
        // User cancelled - exit 
        return;     
    } 
    if (result.length === 0) {
        // User didn't enter a URL - exit
        return;         
    }
    // Insert selected text back into editor, wrapping it in an anchor tag
    editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');     
});  

Этот блок кода выполняет несколько действий.

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

Wordpress-tinymce-плагин-предупреждение-выберите текст

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

wordpress-tinymce-plugin-подсказка-URL

Наконец, мы запускаем функцию execCommand в редакторе TinyMCE, в частности, запускаем действие mceReplaceContent. Это заменяет выделенный текст нашим кодом HTML, который состоит из якорной ссылки с class = ”button”, используя текст, выбранный пользователем.

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

Wordpress-tinymce-плагин-ссылка-визуальный

wordpress-tinymce-plugin-link-html

Резюме

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

Мы добавили код, чтобы, когда пользователь нажимает нашу настраиваемую кнопку, ему предлагается выбрать текст в визуальном редакторе, который затем можно связать с URL-адресом по своему выбору. Наконец, наш плагин заменяет выделенный текст связанной версией, которая содержит настраиваемый класс CSS с именем button.

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как исправить ошибку 401 в WordPress (6 решений)

Вы видите ошибку 401 на своем сайте WordPress? Это одна из самых запутанных ошибок WordPress, которая может заблокировать доступ к вашему веб-сайту WordPress. Ошибка

Как исключить определенные категории из RSS-потока WordPress

Вы хотите исключить определенные категории из RSS-канала на своем сайте WordPress? Многие владельцы сайтов используют некоторые категории для содержания,

Как удалить и переустановить WordPress

Недавно один из наших пользователей спросил нас, как они могут удалить и повторно установить все WordPress? Переустановка WordPress может решить проблемы,

Как использовать SMTP-сервер для отправки электронных писем WordPress

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