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

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

Дивіться також:

• Як додати свої стилі у WordPress редакторі TinyMCE
• Як змінити ширину колонки у візуальному редакторі записів WordPress
• Покращуємо вигляд редактора коду WordPress за допомогою CodeMirror
• Створюємо свої кнопки для редактора записів WordPress
• Налаштовуємо шаблон оформлення у редакторі WordPress
• Використовуємо шрифти Google Fonts у текстовому редакторі WordPress

У цій статті ми покажемо, як вичавити з візуального редактора WordPress максимум, і розповімо про деякі плагіни і налаштування CSS, які допоможуть покращити ваш досвід користувача.

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

Почнемо з бази. Якщо ви вивчили візуальний редактор вздовж і впоперек, ви можете пропустити цей пункт і приступити до наступного.

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

WordPress оснащений як візуальним, і текстовим редактором. Текстовий редактор показує вихідний текст із розміткою HTML і дозволяє вам налаштувати текст повністю:

Всередині текстового редактора ви можете безпосередньо маніпулювати зображеннями та іншими медіа файлами замість того, щоб використовувати кнопку Add Media.

Візуальний редактор використовує принцип WYSIWYG. Це дає вам набагато краще уявлення про те, як ваш контент буде виглядати після публікації, у редакторі ви бачитимете відформатований текст і всі зображення. Однак, він не покаже, як сторінка або запис впишуться у вашу тему, також немає ширини запису, стилю тексту та кольору гіперпосилання.

Пам'ятайте, що в текстовому або візуальному редакторі ви завжди редагуєте один і той же блок контенту, але з різних боків. Зміни, які ви робите у візуальному редакторі, змінять HTML розмітку вашого запису, ви просто не бачите ці теги у візуальному редакторі, як у текстовому редакторі.

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

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

За умовчанням візуальний редактор відображає один ряд кнопок. Для того, щоб відображати другий рядок, ви можете натиснути на значок панелі інструментів, часто цю кнопку називають Kitchen Sink. Кожна кнопка на панелі показує значок, але ви можете відкрити підказку, навівши курсор на кнопку:

Більшість значків очевидні, але є менш зрозумілі. Погляньмо на них ближче.

Цитата

Кнопка цитати використовується для відображення тексту, що цитується. Спосіб відображення залежить від вашої теми. Наприклад, ось так виглядають цитати у фронт-енді Divi:

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

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

Ця кнопка вставляє горизонтальну лінію для розриву тексту, як на зображенні нижче:

Лінія Read More не відображається у фронтенді сайту, коли ви публікуєте пост. Лінія просто контролює довжину уривка тексту, який відображатиметься у вашій стрічці записів. Текст обірветься там, де ви розташуєте лінію.

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

Кнопка Paste as Text використовується для того, щоб очистити текст, який ви скопіювали з іншого джерела від форматування. Якщо ви просто скопіюєте та вставите, то текст може відобразитися у відмінному від потрібного формату вигляді. Кнопка Paste as Text видаляє все форматування та теги HTML.

Очистити форматування

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

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

Кнопка Special Character дозволяє вставити символи, які зазвичай не знайти на клавіатурі, але при натисканні на кнопку з'явиться спливаюче вікно:

Швидкий доступ

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

Поєднання клавіш можуть запропонувати деякі додаткові функції, відсутні в панелі інструментів, наприклад, копіювати, вставити і код. "Код" використовують для виділення блоків коду в тексті:

Повноекранний режим

Деяких людей відволікає оточення редактора. Якщо ви віддаєте перевагу чистому робочому простору, то натисніть на цю кнопку і позбавтеся від бічних панелей і сконцентруйтеся на контенті.

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

Стандартний візуальний редактор має всі основні функції, необхідні для створення та форматування вашого контенту. Однак, є багато інших способів, які можна використовувати для форматування. Ви можете це зробити в текстовому редакторі, розмітивши текст за допомогою відповідних HTML-тегів. Звичайно, багато людей не знайомі з кодом, в той час як інші просто вважають за краще робити це у візуальному редакторі.

На щастя, зараз можна швидко і просто додати функціональні можливості візуального редактора за допомогою плагінів. У цьому розділі ми подивимося на два відмінні плагіни для покращення вашого візуального редактора.

Не забувайте, що деякі функції працюють лише з конкретним плагіном. Якщо ви використовуєте функції, які працюють завдяки шорткоду або плагіну, вони можуть перестати працювати після відключення плагіна. Тобто після видалення плагіна вам потрібно буде провести невелике форматування.

TinyMCE Advanced

З більш ніж мільйоном установок, TinyMCE Advanced має величезний успіх у користувачів WordPress. Це легкий у використанні плагін, який дозволяє додавати, змінювати та видаляти кнопки з панелі інструментів візуального редактора WordPress. Він також дозволяє налаштувати до чотирьох рядів кнопок, які задовольнять ваші потреби.

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

Зверніть увагу, що додаткові кнопки не з'являться автоматично після встановлення, так що вам потрібно перейти до розділу плагіна Settings та налаштувати нову панель інструментів. Після встановлення екран вашого редактора буде виглядати так:

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

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

Ціна: Безкоштовно

WP Edit

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

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

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

• Проста вставка медіа файлів, наприклад, зображень, відео та ілюстрацій
• Створення та редагування таблиць
• Простий доступ до шорткодів
• Вставлення колонок у поле контенту за допомогою шорткодів
• Дозволені шорткоди в полях віджетів

Ціна: Базовий плагін безкоштовний, а ціна преміум-версії починається від $17.50.

3. Налаштування відображення контенту в редакторі

Візуальний редактор WordPress має одне величезне обмеження, яке не вирішується перерахованими вище плагінами. Хоча візуальний редактор і дає вам уявлення про те, як ваш контент буде виглядати, але, як і раніше, існують відмінності між тим, що ви бачите в редакторі і як ваш контент виглядає у фронтенді сайту. Використання кнопки попереднього перегляду може здатися незручним.

Звичайно, було б чудово, якби у візуальному редакторі можна було побачити, як контент виглядатиме після публікації. На щастя, ви можете налаштувати візуальний редактор так, щоб він краще підходив до вашої теми.

Також можна використовувати фронтенд редактор, як у Дива 3.0. Цей інтуїтивно зрозумілий редактор дозволяє редагувати сторінки або записи прямо у фронтенді вашого веб-сайту без використання коду.

Висновки

Хоча візуальний редактор WordPress – це корисний інструмент, але має свої обмеження. Застосовуючи поради, викладені у цій статті, ви можете посилити візуальний редактор та покращити процес створення контенту. Давайте згадаємо:

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

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

Джерело: elegantthemes.com