3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Смотрите также:

  • Как добавить ваши стили в WordPress редакторе TinyMCE
  • Как настроить ширину колонки в визуальном редакторе записей WordPress
  • Улучшаем вид редактора кода WordPress при помощи CodeMirror
  • Создаем кнопки для редактора записей WordPress
  • Настраиваем шаблон оформления в редакторе WordPress
  • Используем шрифты Google Fonts в текстовом редакторе WordPress

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

1. Добейтесь большего со стандартным визуальным редактором

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

Визуальный редактор VS. Текстовый редактор

WordPress оснащён как визуальным, так и текстовым редактором. Текстовый редактор показывает вам исходный текст с разметкой HTML и может вам изменить текст в полном объеме:

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

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

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

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

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Кнопки Визуального Редактора

По умолчанию, визуальный редактор выводит один ряд кнопок. Для того, чтобы выводить второй ряд, вы можете легко нажать на значок панели инструментов, часто эту кнопку называют Kitchen Sink. Каждая кнопка в панели показывает значок, но вы можете без проблем открыть подсказку, наведя курсор на кнопку:

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

Цитата

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Кнопка цитаты используется для выведения цитируемого текста. Метод выведения зависит от темы. Например, вот так выглядят цитаты в фронт-энде Divi:

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

Вставить тег Читать далее

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Линия Read More не выводится в фронтэнде веб-сайта, когда вы публикуете пост. Линия просто контролирует длину отрывка текста, который будет выводиться в ленте записей. Текст оборвётся там, где вы расположите линию.

Вставить как текст

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Кнопка Paste as Text используется для того, чтобы очистить текст, который вы скопировали из иного источника, от форматирования. Если вы просто скопируете и вставите, то текст может отобразиться в совершенно отличном от нужного формата виде. Кнопка Paste as Text убирает всё форматирование и тэги HTML.

Очистить форматирование

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Вы можете использовать эту кнопку, чтобы удалить всё форматирование(включая полужирное начертание, курсив, подчеркивание и цвет) из выделенного фрагмента текста:

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Специальные символы

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Кнопка Special Character может вставить символы, которых обычно не найти на клавиатуре, но при нажатии на кнопку появится всплывающее окно:

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Сочетание клавиш

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Нажав кнопку Keyboard Shortcuts, вы увидите всплывающее окно, которое покажет встроенные в редактор клавиши быстрого доступа. Вы можете использовать их для ускорения процесса выполнения определённых задач:

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

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

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Полноэкранный режим

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Некоторых людей отвлекает окружение редактора. Если вы предпочитаете чистое рабочее пространство, то нажмите на эту кнопку и избавьтесь от боковых панелей и сконцентрируйтесь на содержимом.

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

2. Плагины для визуального редактора

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

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

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

TinyMCE Advanced

С более чем миллионом установок, TinyMCE Advanced пользуется огромным успехом у посетителей WordPress. Это лёгкий в использовании плагин, который может добавлять, изменять и удалять кнопки с панели инструментов визуального редактора WordPress. Он также может вам изменить до четырех рядов кнопок, которые удовлетворят нужды.

В наличии есть дополнительные кнопки Font Family, Font Sizes, Insert Date/Time, Page Break и многие иные. TinyMCE Advanced также упрощает создание и настройку таблиц. Плагин может вам включить меню редактора, которое предоставляет ещё больше настроек для создания и редактирования контента.

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

3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

Основные характеристики:

  • Кнопки drag-and-drop для параметра панели инструментов
  • Создание и редактирование таблиц
  • Дополнительные настройки для вставки списков
  • Поиск и замена возможностей
  • Выравнивание текста
  • Функция вставить разрыв страницы
  • Функция добавить смайлики

Цена: Бесплатно

WP Edit


3 полезных совета для максимальной отдачи от Визуального Редактора WordPress

WP Edit не такой популярный, как TinyMCE Advanced — 100,000 активных установок, но он также предоставляет целый ряд возможностей. Бесплатная версия добавляет визуальному редактору много возможностей и имеет в себя варианты макета, которые могут использовать и записи, и страницы.

Премиум версия WP Edit Pro содержит два дополнительных ряда кнопок и дополнительных возможностей, к примеру, 80 готовых стилей, интеграция с Dropbox и Google Fonts. Вы также можете использовать пользовательские шрифты и создавать пользовательские стили редактора.

Основные характеристики:

  • Простая вставка медиа файлов, к примеру, картинок, видео и иллюстраций
  • Создание и редактирование таблиц
  • Простой доступ к шорткодам
  • Вставка колонок в поле ввода контента при помощи шорткодов
  • Разрешённые шорткоды в полях ввода виджетов

Цена: Базовый плагин бесплатный, а цена премиум версии начинается от $17.50.

3. Параметр выведения содержимого в редакторе

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

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

Также можно без труда использовать фронтэнд редактор, как в Divi 3.0. Этот интуитивно понятный редактор может редактировать страницы или записи напрямую во фронтэнде сайта, не используя программный код.

Выводы

Хотя визуальный редактор WordPress – это полезный инструмент, но он имеет в себя ограничения. Применяя советы, изложенные в данной статье, вы можете без труда усилить визуальный редактор и улучшить процесс создания контента. Давайте вспомним:

  • Максимально используйте стандартный визуальный редактор: Стандартный визуальный редактор имеет в себя несколько возможностей, особенно если вы знакомы с интерфейсом.
  • Добавьте пользовательский функционал: Плагины типа TinyMCE Advanced и WP Edit могут расширить функции визуального редактора WordPress.
  • Настройте выведения содержимого в редакторе: Если вы чувствуете себя уверенно с кодом, то дальнейшая параметр достаточно проста.

А у вас есть секреты параметра визуального редактора WordPress? Поделитесь ими с нами в комментариях!

Источник: elegantthemes.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *