Визуальный редактор WordPress — это основной инструмент для создания и редактирования контента. Однако по умолчанию возможности редактора Гутенберг могут не всегда соответствовать нуждам конкретного сайта или пользователя. В этой статье мы подробно рассмотрим, как добавить настройку внешнего визуального редактора WordPress, чтобы улучшить удобство и функциональность работы с контентом.
Почему стоит добавить внешний визуальный редактор в WordPress
Стандартный редактор WordPress (Гутенберг) отлично подходит для большинства задач, но бывают случаи, когда требуется более простой, кастомизированный или расширенный редактор. Например:
- Пользователи не хотят изучать сложный интерфейс Гутенберга и предпочитают классический редактор.
- Необходимы дополнительные функции форматирования, отсутствующие в стандартном редакторе.
- Требуется интеграция с определёнными плагинами или кастомными блоками.
- Нужно улучшить UX для клиентов, не знакомых с WordPress.
Добавление настройки внешнего визуального редактора позволяет решить эти задачи, предоставляя гибкость и удобство.
Популярные плагины для внешнего визуального редактора WordPress
Рассмотрим несколько популярных решений, которые можно использовать для замены или улучшения стандартного редактора.
Classic Editor
Плагин Classic Editor возвращает старый редактор TinyMCE, который многие пользователи знают и любят. Он позволяет отключить Гутенберг и использовать привычный интерфейс.
Установка и активация плагина — самый простой способ переключиться на классический редактор.
Advanced Editor Tools (бывший TinyMCE Advanced)
Этот плагин расширяет классический редактор дополнительными кнопками форматирования, таблицами, стилями и другими полезными инструментами. Идеально подходит для тех, кто хочет больше контроля, но без сложностей Гутенберга.
Ссылка на плагин: Advanced Editor Tools
Elementor
Если нужен визуальный редактор с возможностью создавать сложные макеты страниц, стоит обратить внимание на Elementor. Он заменяет стандартный редактор, предлагая drag-and-drop интерфейс и множество готовых виджетов.
Однако это не просто редактор текста, а полноценный конструктор страниц, поэтому подходит для более продвинутых пользователей.
Как программно добавить настройку выбора визуального редактора в профиле пользователя
Иногда требуется дать пользователям возможность выбирать между стандартным редактором и классическим. Для этого можно добавить опцию в профиль пользователя и переключать редактор динамически.
Добавляем поле выбора редактора в профиль
Используем хук show_user_profile и edit_user_profile для отображения поля в профиле пользователя:
function wplinks_add_editor_preference_field( $user ) {
$selected = get_user_meta( $user->ID, '_wplinks_editor_preference', true );
?>
<h3>Настройка визуального редактора</h3>
<table class="form-table">
<tr>
<th><label for="wplinks_editor_preference">Выберите редактор</label></th>
<td>
<select name="wplinks_editor_preference" id="wplinks_editor_preference">
<option value="default" <?php selected( $selected, 'default' ); ?>>Гутенберг</option>
<option value="classic" <?php selected( $selected, 'classic' ); ?>>Классический редактор</option>
</select>
</td>
</tr>
</table>
<?php
}
add_action( 'show_user_profile', 'wplinks_add_editor_preference_field' );
add_action( 'edit_user_profile', 'wplinks_add_editor_preference_field' );Сохраняем выбор пользователя
Обрабатываем сохранение поля с помощью хука:
function wplinks_save_editor_preference_field( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) {
return false;
}
if ( isset( $_POST['wplinks_editor_preference'] ) ) {
update_user_meta( $user_id, '_wplinks_editor_preference', sanitize_text_field( $_POST['wplinks_editor_preference'] ) );
}
}
add_action( 'personal_options_update', 'wplinks_save_editor_preference_field' );
add_action( 'edit_user_profile_update', 'wplinks_save_editor_preference_field' );Переключаем редактор в зависимости от выбора
Используем фильтр use_block_editor_for_post, чтобы отключить Гутенберг для пользователя, выбравшего классический редактор:
function wplinks_toggle_editor_by_user_preference( $use_block_editor, $post ) {
$user_id = get_current_user_id();
$pref = get_user_meta( $user_id, '_wplinks_editor_preference', true );
if ( $pref === 'classic' ) {
return false; // Отключаем блоковый редактор
}
return $use_block_editor;
}
add_filter( 'use_block_editor_for_post', 'wplinks_toggle_editor_by_user_preference', 10, 2 );Советы по улучшению UX внешнего редактора на сайте
При добавлении внешнего редактора важно учитывать удобство пользователя и совместимость с остальным функционалом сайта:
- Обучение и подсказки: Добавьте подсказки или краткое руководство, чтобы пользователи понимали, как пользоваться новым редактором.
- Совместимость с плагинами: Проверьте работу популярных плагинов SEO, кэширования и безопасности с выбранным редактором.
- Резервное копирование: Перед активацией новых редакторов сделайте резервную копию сайта, чтобы избежать потери данных.
- Тестирование на разных устройствах: Убедитесь, что редактор корректно работает на мобильных и десктопных устройствах.
Интеграция с WP Links для автоматизации ссылок в редакторе
Если вы используете плагин WP Links, можно дополнительно автоматизировать вставку внутренних ссылок прямо в визуальном редакторе. Например, настроить автоподстановку ссылок при вводе ключевых слов.
Для этого в настройках WP Links (https://wpshop.ru/wp-links/?utm_source=wplinks.ru&utm_medium=article&utm_campaign=kak-dobavit-nastrojku-vneshnego-vizualnogo-redaktora-wordpress) есть опция «Автоматическое создание ссылок». Можно настроить так, чтобы ссылки вставлялись при сохранении записи или прямо в редакторе.
Вывод
Добавление настройки внешнего визуального редактора WordPress — практичное решение для сайтов с разными группами пользователей и задачами. Используя плагины и небольшой код, вы можете сделать редактор максимально удобным и функциональным. Это повысит скорость работы с контентом и снизит количество ошибок.