Редактор текста для wordpress: Текстовый визуальный редактор WordPress — плагин TinyMCE Advanced и CKEditor – Расширенный визуальный редактор WordPress TinyMCE Advanced и плагин AddQuicktag для добавления кнопок панели форматирования | Создание сайтов и заработок в сети

Режимы редактора текста WordPress

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

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

В общем, тема этой заметки — редактор WordPress! 🙂

Если вместо текстового редактора вы видите интерфейс с блоками, то вам необходимо установить плагин Classic Editor через меню «Плагины» — «Добавить новый» и тогда редактор будет таким, какой на картинках в этом уроке.

Давайте покажу его внешний вид на примере набора этого текста, который вы в данный момент читаете:

Внешний вид редактора WordPress

Визуально он похож на тот же Microsoft Word (или любой другой текстовый редактор, например, Writer), но с некоторыми ограничениями.

Используя кнопки на панели инструментов вы можете задавать то или иное оформление для выделенного или набираемого текста:

Панель инструментов редактора WordPress

Всё как и везде: полужирный, курсив, зачёркнутый, маркированные и нумерованные списки, выравнивание текста по сторонам, вставка гиперссылок, указание абзацев. И всё в таком духе — возможностей достаточно для комфортной работы с текстом.

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

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

Режимы редактора текста

Основных режима здесь два: визуальный и текстовый.

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

Чтобы вы понимали, как выглядит текстовый режим, я приложу снимок экрана с правкой текущей страницы:

Текстовый режим редактора WordPress

Не особо-то и понятно, да? Но это на первом этапе, пока вы не освоите вёрстку в формате HTML. Объясню в двух словах: любое форматирование текста в визуальном редакторе можно представите в виде набора так называемых «тегов», встретив которые, браузер формирует тот или иной элемент.

Абсолютно все страницы на сайтах в интернете написаны на языке гипертекстовой разметки — HTML. Но WordPress (и многие другие движки) даёт вам возможность не углубляться в эти особенности, а просто писать текст. Именно для упрощения вашей работы и существует визуальный режим редактора.

Если же вам необходимо сделать какое-то нестандартное оформление, вставить скрипт, каким-то хитрым образом оформить кнопку или что-то ещё (кто знает, что вы только сможете себе придумать), то без знаний основ HTML вам не обойтись.

Уфф… Запутал я вас уже, да? Не пугайтесь, рано ещё! 🙂

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

Как только вы поймёте, что какие-то из элементов неплохо было бы видоизменить, добавить дополнительные отступы, сделать что-то нестандартное — тогда уже можете переключиться на закладку «Текст» в редакторе и попробовать сделать что-то самостоятельно.

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

Как выучить HTML?

Существует великолепный сайт с онлайн-руководством: htmlbook.ru, на нём есть огромное количество материалов для новичков. Потратьте выходные и выучите, попрактикуйтесь.

Если вы нашли ошибку — выделите фрагмент текста и нажмите Ctrl+Enter.

Поделитесь ссылкой на инструкцию с вашими друзьями!

Твитнуть

Поделиться

Плюсануть

Поделиться

Запинить

Текстовый редактор WordPress — обзор панели инструментов

Доброго времени суток! Регулярное и частое обновление Вашего сайта новыми статьями, быстро ускорит популярнсь его в Интернете. Но об этом мы поговорим в другой раз. Сегодня же, я хочу провести небольшой обзор панели в текстовом редакторе WordPress. Разберемся, для чего нужна каждая кнопочка (иконка).

Если у Вас есть опыт работы с программой Microsoft Word, значит в текстовом

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

Текстовый редактор WordPress

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

1. Жирный шрифт. Эта кнопка позволяет сделать шрифт более жирным. Выделите текст, а затем нажмите эту кнопку, или комбинацию клавиш “CTRL“+”B”

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

I» на панали редактора, либо воспользуйтесь клавиатурой “CTRL“+”I“. Регистр клавиатуры переключать не нужно.

3. Перечеркнутый текст. Выделите текст, а потом жмите эту кнопку, чтобы сделать текст зачеркнутым. Можно просто воспользоваться клавиатурой, нажав одновременно “ALT”+”SHIFT”+”D”.

4. Маркированный список — кликнув по этой иконке, можно сделать маркированный список, например:

• шапка-ушанка
• сапоги-скороходы
• ковер-самолет
• корова

Горячие клавиши “CTRL”+”SHIFT”+”U”.

5. Нумерованный список. Эта кнопка выполняет те же действия, что и придыдущая, только вместо маркеров ставит цифры 1, 2, 3, 4, 5… Клавиши “ALT”+”SHIFT”+”O”.

6. Цитата. Кнопка служит для выделения цитат. Выделите текст, а затем нажмите эту кнопку, или клавиши “ALT”+”SHIFT”+”Q”. Наиболее часто цитатами пользуются в комментариях на форумах.

7. Клавиша служит для вставки сплошной горизонтальной линии в текст.

8. 9. 10. Клавиши для выравнивания текста: слева, по центру  или справа. Горячие клавиши: “ALT”+”SHIFT”+L” – по левому краю, “ALT”+”SHIFT”+”C” – по центру,“ALT”+”SHIFT”+”R” – по правому краю.

11. Вставить/Изменить ссылку. С помощью этой иконки Вы можете добавить к тексту ссылку или изменить уже существующую. Для этого нужно выделить слово или несколько слов, а затем нажать на эту кнопку, или клавиши “ALT”+”SHIFT”+”A”. У Вас откроется небольшое окошко, в котором и нужно вписать ссылку.

12. Удалить ссылку. Выделите текст с ссылкой или ссылками, а затемжмите на эту кнопку — все ссылки будут удалены. Можно воспользоваться клавиатурой  “ALT”+”SHIFT”+”S”.

13. Вставить тег. Если посмотреть на главную страницу этого блога, то можно увидеть в конце каждого анонса «Читать далее…». Вот для этого тег и служит. Вы отделяете часть текста, который будет показываться на главной странице, а остальной можно прочитать только после нажатия на

«Читать далее».  Ставьте этот тег после 2-3 абзацев. Поставьте курсор в то место, которое Вы хотели бы отделить и нажмите на эту иконку или «ALT»+»SHIFT»+»T».

14. Показать или скрыть нижнюю панель инструментов.

 

16. Добавить заголовок в статью от h2-h6, форматированный, стиль… Щелкните по этой иконке и сделайте нужный выбор.

17. Подчеркнутый текст. Выделите текст, который хотите сделать подчеркнутым, а затем жмите эту кнопку. Клавиши “CTRL”+”U”.

18. По ширине. Выравнивает текст по ширине страницы, то есть не слева, не справа и не по центру, а равномерно по ширине страницы. Можно воспользоваться клавиатурой, “ALT”+”SHIFT”+”J”.

19. Выделить текст другим цветом. Выделите текст, а затем задайте ему нужный цвет.

 21. С помощью этой кнопки, можно вставлять не форматированный текст из <aclass=»wp-caption» title=»Что такое буфер обмена» href=»https://dvpress.ru/rabota-s-buferom-obmena-chto-takoe-bufer-obmena.html»>буфера обмена.

22. Эта кнопка быстро очищает форматирование текста, но ссылка в тексте не удаляется, если он есть. Эта функция полезна в том случае, если Вы пишите изначально статьи в Microsoft Word, а потом переносите их на свой сайт. Нажав эту кнопку, текст будет добавлен без HTML мусора.

 23. Набор дополнительных символов для текста

 24 и 25. Убрать отступ/Добавить отступ. Добавляет или удаляет отступ вначале текста.

26 и 27. Вернуться на шаг назад / на шаг вперед. Левая иконка отменяет действие, а правая возвращает. Лучше всего пользоваться клавиатурой: “CTRL”+”Z” – отменить, “CTRL”+”Y” – повторить.

 28. Помощь. Справка по движку WordPress.

Кнопка «Добавить медиафайл». Через эту большую кнопку, можно загружать медиафайлы на сайт: фотографии, аудио, видео, архивные… Можно загрузить с компьютера, с сайта, выбрать в галерее или в библиотеке файлов. Загрузить файл больше 2 Мб нельзя.

Кнопки «Визуально» и «Текст» Ввод текста в визуальном режиме или с применением HTML-кодов.

Хотите изучить WordPress быстро и создать свой профессиональный бизнес-блога? Скачайте бесплатно четыре книги, которые Вам в этом помогут!
_____________________________

К уроку 9. Публикация статей wordpress

Текстовый редактор для WordPress WP Edit

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

Редактор для WordPRess, о котором пойдёт речь в этой статье, поможет вам форматировать текст в записях и страницах так, как вы захотите, а также в нём есть множество тонких и интересных настроек.

Редактор для WordPress от WP Edit

Для того, чтобы начать использовать этот редактор, установите и активируйте на своём сайте плагин WP Edit. Найти его можно в официальном хранилище WordPress в консоли сайта.

После активации в консоли появится новый пункт – «WP Edit». Перейдите в него для настройки плагина.  Вы увидите опции, разделённые по вкладкам. Рассмотрим каждую вкладку:

• Buttons. Здесь можно добавлять/удалять кнопки для форматирования текста из редактора. Для операций с кнопками просто перетаскивайте их мышкой. Редактор для WordPress позволяет работать со шрифтом, цветом, формулами, изображениями, таблицами, ссылками и прочим.
• Global. Здесь можно выбрать тему оформления редактора, а также убрать ссылку на настройки плагина из верхнего бара консоли и настроить подсказки, которые появляются при наведении мышки на кнопки редактора.
• General. Здесь плагин позволяет настроить шорткоды, а также определить области, в которых редактор будет появляться.
• Posts/Pages. В данном разделе можно настроить то, сколько ревизий записей и страниц будет храниться в базе данных. Ревизии необходимы для того, чтобы восстанавливать более ранние версии контента. Кроме того, здесь можно скрывать те или иные записи по ID. Есть и другие опции.
• Editor. В данной вкладке можно подключить дополнительные стили для текста, определить единицу измерения шрифтов и подключить поддержку форума BBPress.
• Extras. Здесь дополнительные опции и можно создать текст, который будет появляться в любой записи или страницы с помощью шорткода.
• User Specific. Здесь устанавливаются опции для разных пользователей. Удобно, если у вас многопользовательский сайт. Можно настроить то, как разные пользователи могут настраивать редактор для WordPress.
• Database. Здесь можно импортировать и экспортировать настройки плагина. А также можно сбрасывать настройки к значениям по умолчанию, и настроить удаление данных из базы с удалением плагина.

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

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

Редактор WordPress визуальный и текстовый, как добавить кнопку в редактор

Всем привет! С вами вновь Дмитрий Афонин и мой блог FairHeart.ru. Сегодня мы поговорим о месте, где вы будете проводить огромное количество времени, ведя свой блог. Это место — редактор WordPress! Ведь именно в нем вы будете писать новые посты и публиковать их на своем блоге. WordPress предоставляет две версии редактора — визуальный и текстовый. Рассмотрим особенности каждой из них и научимся добавлять новый функционал.

Визуальный редактор WordPress и плагин Ultimate TinyMCE

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

Устанавливается плагин стандартно — скачайте Ultimate TinyMCE, распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Активируйте и переходите к его настройкам в раздел «Параметры» — «Ultimate TinyMCE».

По умолчанию все кнопки в визуальном редакторе WordPress располагаются в два ряда. Чтобы отобразить второй ряд используется кнопка «Показать/скрыть дополнительную панель». О функционале каждой кнопки, можно догадаться по значку на ней или по подсказке, которая появляется при наведении на нее курсора мыши. Ultimate TinyMCE добавляет еще около 40 новых функций и два дополнительных ряда кнопок.

Фактически, все настройки Ultimate TinyMCE сводятся к тому, чтобы отметить кнопки, функционал которых вам нужен, и выбрать для них ряд. Описание в настройках на английском языке, но после добавления их в редактор, подсказки будут на русском. Хотя в большинстве случаев можно разобраться и вовсе без подсказок.

Рассмотрим только дополнительные опции, которые представлены в самом низу настроек:

Change the color of the Editor — меняет цвет блока с кнопками в визуальном редакторе WordPress.

Enable NextPage (PageBreak) Button — добавляет функцию NextPage для постраничного представления текста статьи.

Add ID Column to page/post admin list — на страницу админке WP со списками всех статей и записей добавляется новая колона, в которой указываются ID каждой записи/страницы блога. Можете прочитать, как узнать ID записи, страницы и рубрики в WordPress.

Allow shortcode usage in widget text areas — позволяет использовать «короткий код» в виджете «Текст». Короткий код (shortcode) предназначен для быстрого добавления кода Contact Form 7, NextGEN Gallery, Syntax Highlighter Evolved и других плагинов в текст страницы.

Use PHP Text Widget — позволяет использовать код php в виджете «Текст». Код интерпретируется и на страницу блога выводится уже результат его работы.

Enable Line Break Shortcode — добавляет в «Короткие коды» тег Break, который предназначен для добавления пустой строки в текст.

Enable Columns Shortcodes — добавляет в «Короткие коды» большое количество тегов, отвечающих за формирование колонок текста.

Enable Advanced Insert/Edit Link Button — добавляет продвинутую возможность вставки/редактирования ссылок.

Enable «Div Clear» Buttons — добавляет кнопки Div Clear both, left и right предназначенные для отмены обтекания элемента, которое задано с помощью свойства float.

Remove p and br tags — отключает автоматическую вставку тегов p (абзац) и br (перевод строки). Если не хотите для каждого параграфа указывать тег p в ручную, то лучше эту опцию не трогать.

Add a Signoff Shortcode — можно задать часто используемую фразу и вставлять ее в статьи с помощью тега Signoff из «Коротких кодов» (Shortcode).

Текстовый редактор WordPress и плагины Post Editor Buttons и AddQuicktag

Многие считают код, создаваемый в визуальном редакторе WordPress, грязным, то есть содержит лишние теги и стили, которые по-хорошему должны быть вынесены в файл стилей, используемой темы WP. Большую власть над кодом дает текстовая версия редактора ВордПресс. Там все теги вставляются в ручную, за исключением разве что тегов абзаца (p) и перевода строки (br), они добавляются автоматически.

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

Скачайте последнюю версию Post Editor Buttons. Устанавливается плагин стандартно. Настройки плагина проживают по адресу «Параменты» — «Post Editor Buttons».

Там все очень просто:

• Caption — название кнопки, которую добавляем;
• Before — открывающий тег;
• After — закрывающий тег;
• Delete — удалить.

К сожалею, на моем блоге Post Editor Buttons не работает. Просто не добавляются созданные в нем кнопки. Прекрасной альтернативой стал плагин AddQuicktag.

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

Основные все те же:

• Button Label — название;
• Start Tag (s) — открывающий тег;
• End Tag (s) — закрывающий тег.

Спасибо за внимание! На этом все. Берегите себя.

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Текстовый редактор для WordPress

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

Самая главная особенность в том, что владея основами HTML, визуальный редактор вам может вообще не понадобиться. Любое оформление можно сделать в текстовом режиме и сделать горааааздо лучше! 🙂

Но! В визуальном режиме текст набирать в разы приятнее и быстрее. В текстовом же приходится постоянно вводить теги HTML для вёрстки текста, а в визуальном за вас это делает WordPress.

Я вижу только несколько причин использовать текстовый режим редактора новичку: добавить какие-то недостающие свойства элементов, которые невозможно сделать через визуальный редактор.

Например:

• Изменить стиль конкретной ссылки, абзаца, слова.
• Вставить скрипт со стороннего сайта.
• Сделать форму подписки (при отсутствии плагина, например).
• Добавить атрибут «nofollow» для ссылок.

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

Переключение в текстовый режим

Осуществляется очень просто — переключением в режим «Текст»:

Переключение редактора в текстовый режим

И всё, что выглядело красиво в визуальном режиме будет выглядеть вот так:

Внешний вид редактора в режиме Текст

Неподготовленный читатель может (и скорее всего) испугаться, но тут не так всё страшно, как кажется на первый взгляд. Выучив основы HTML вы без труда поймёте, что в приведённом скриншоте присутствует тег <ul>, который создаёт маркированный список. 🙂

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

Пример изменения тега в режиме Текст

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

Пример изменённого оформления

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

Панель инструментов

Так же не лишним будет обратить ваше внимание на то, что количество кнопок в панели инструментов заметно уменьшится:

Панель инструментов в текстовом режиме

Тут только самое нужное: выделение текста полужирным и курсивом, задание ссылок, цитаты, вставка изображения, маркированный и нумерованный списки. Ну и ещё, по мелочи. 🙂

Основная идея такова (лично моё мнение): если вы владеете HTML, то кнопки визуального редактора вам не пригодятся, т.к. вы всё то же можете сделать самостоятельно и гораздо быстрее и лучше.

На этом обзор текстового редактора считаю завершённым! 😉

Если вы нашли ошибку — выделите фрагмент текста и нажмите Ctrl+Enter.

Поделитесь ссылкой на инструкцию с вашими друзьями!

Твитнуть

Поделиться

Плюсануть

Поделиться

Запинить

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

Визуальный редактор 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 есть одно огромное ограничение, которое не решается вышеперечисленными плагинами. Хотя визуальный редактор и дает вам представление о том, как ваш контент будет выглядеть, но по-прежнему существуют различия между тем, что вы видите в редакторе и как ваш контент выглядит во фронтэнде сайта. Использование кнопки предварительного просмотра может показаться вам неудобным.

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

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

Выводы

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

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

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

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

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

Визуальные редакторы WordPress | Gold WordPress

Мифы о конструкторах

Тема регулярно поднимается в различных уголках интернета. При этом однозначного ответа о целесообразности создания сайта данным способом нет. Дать его невозможно по причине разности интересов и принципов веб-проектов. К примеру, вы собираетесь создать доску объявлений. Это серьезная задумка, которая потребует создания площадки практически с 0. Будущий сайт должен отвечать запросам современной ЦА, быть адаптированным под конкретную нишу, если это необходимо. Так сайты по продажи автомобилей и жилья кардинально отличаются кодом, дизайном и наполнением. Можно изначально заложить в веб-ресурсе возможность расширения на смежные ниши. В общем, все зависит от фантазии основателя, его финансов и стремлений. Потребуется детальная проработка кода не одним, а целым штатом специалистов разного профиля.

Путь развития блога или интернет-магазина не нуждается в подобных глобальных решениях. Для их создания вполне подойдет конструктор. 90% новичков ищут ответы на популярных форумах, где и делятся своими мыслями о предполагаемом использовании визуальных редакторов. Здесь начинается самое интересное: малоопытные пользователи сталкиваются с тотальной критикой данного решения. Мол необходимы знания HTML и CSS, навыки работы со скриптами, и вообще создание сайта требует от вас уровня мега-мастера программирования. Настроение новичков падает, многие отказываются от затеи. Остается 10-15% тех, кто решает идти до конца. Они спрашивают у «профессионалов» о вариантах решения проблема. Те отвечают, что могли бы помочь, но это стоит денег. Специально для них они готовы сделать скидку. Уже проследили схему? Форумчане и не думали о реальной помощи, а играли на банальной неопытности и наивности оппонента.

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

• вшитая и визуальная реклама. Веб-специалисты уверяют, что получить ресурс с чистой структурой нереально. Обязательно закрадется рекламная ссылка, которая испортит репутацию веб-сайта в глазах поисковой системы. Проблема актуальна для бесплатных версий. Купите минимальный тариф, и реклама пропадет. Стоимость сопоставима с ценой хостинга;
• однотипный внешний вид. Готовые решения визуальных редакторов строятся на базе стандартных шаблонов: якобы никакой индивидуальностью здесь и не пахнет. Абсурдная точка зрения! Конструкторы используют не для поиска готового решения. В них стиль корректируется по индивидуальным критериям. Никто не мешает начать все и с буквально чистого листа;
• не попадают в Топ выдачи. Очередное ошибочное мнение. Индексация зависит от ряда показателей. Ключевыми являются структура, контент и уровень домена. Выяснили, что первая ничем не уступает ресурсам, сделанным вручную. Контент должен быть уникальным, интересным, востребованным – зависит от автора. Бесплатная версия редактора предполагает домен 3 уровня. Он является главной проблемой для продвижения. Решается она покупкой и привязкой нормального домена 2 уровня.

У веб-конструкторов есть главный плюс и основной минус. Первый заключается в простоте освоения и использования. Сервисы построены на базе функции Drag-and-Drop: выбирайте элемент, редактируйте и перетаскивайте его на нужное место. Система автоматически генерирует адекватный код. Многим его хватает на весь период существования проекта. Продвинутые версии предполагают 75-80% открытого кода, который правится вручную. Недостатком является отсутствие возможности переноса ресурса на другой хостинг в дальнейшем. Варианты данного обзора его лишены, ведь сегодня мы говорим не о веб-сервисах, а плагинах.

WPBakery Page Builder

$ 45 на момент написания статьи

Непревзойденный лидер в мире визуальных редакторов страниц в WordPress. Данный плагин прошел тернистый путь от простенького инструмента до комплексного плагина для сайта. В актуальном наборе дополнения содержатся элементы не только для редактирования внешнего вида ресурса, но и внутренних панелей, блока SEO, отдельных частей кода. Название WPBakery расширение получило не так давно. Ранее оно было известно миру как Visual Composer. Первоначальная версия утилиты вышла еще 22 мая 2011 года. Плагин относится к категории «Премиум» и не имеет бесплатной версии. Годовая стоимость составляет 45-250$. На момент написания обзора (07.05.2019), дополнение приобрели 380 000+ пользователей. Средний показатель рейтинга составляет 4,5 звезды из 5.

Разработчики WPBakery достигли оптимального соотношения простоты и многофункциональности. Чтобы вы понимали масштаб, это единственное расширение с обширной электронной энциклопедией. В ней содержится все: от руководства установки до известных вариаций компоновки. Правда, она переведена только на английский язык. Не обходится без регулярных обновлений с глобальными правками. Основным преимуществом WPBakery является возможность многостороннего редактирования без вмешательства в код не только страниц, но и записей, портфолио, отзывов, прайс-листов, галерей и авторского резюме. Это здорово помогает при конструировании блогов, лендингов, корпоративных ресурсов. При этом дополнение легко устанавливается, работает с любыми шаблонами и не конфликтует с прочими расширениями. В последних версиях разработчики вообще добавили функцию, позволяющую создавать плагинные гибриды на основе WPBakery.

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

• основные настройки – активируем адаптивный дизайн и Гугл-кириллицу;
• Role Manager – права доступна администраторов;
• дизайн элементов – цветовая гамма, стиль, размеры и прочее;
• индивидуальные CSS – добавляем свои стили и таблицы. Пригодится веб-мастерам;
• лицензия – автоматические обновления и авторская поддержка;
• Shortcodes – для своих наработок.

Использование WPBakery осуществляется через уникальный композер. Есть две вариации – Backend Editor и Frontend Editor. Первая подразумевает настройку из административной панели, а вторая – полностью визуальный редактор. По ходу предлагаются предустановленные шаблоны. Пользоваться или не обязательно. Необходимые элементы выбираются из меню Add element. Здесь есть ряд, текстовые блоки, делители, информационные сообщения, форма комментариев, слайдеры и многое другое. Также разработчики предлагают фильтры изображений, расширенный инструментарий, аддоны с дополнительными элементами, эффектами и Parallax-фоны. Большим преимуществом является частично русский перевод.

Beaver Builder

Прямой конкурент WPBakery, набирающий популярность. Данное расширение из той же категории «Премиум».  Нужно сказать, оно очень похоже на предыдущего оппонента. Аналогия прослеживается на этапе установки, настройки, работы. Активация занимает несколько минут. В случае с Beaver Builder настройки по умолчанию можно не трогать. Если зашли от имени главного администратора, сразу приступаем к созданию страниц. Имеется две панели для работы: в админке и верхней строке визуального просмотра. Иногда жалуются, что вторая не появляется. Рекомендуем проанализировать список установленных дополнений. Нередко пользователи намеренно блокируют вывод верхней строки специальными инструментами.

Создание страницы начинается с выбора ее типа и стиля. Представлено 3 варианта: домашняя, контентная и ваша собственная, шаблонная. Пользователю доступно 15+ стандартных вариантов страниц, которые правятся по желанию, и чистый бланк. Компактный интерфейс вмещает в себя большое количество функций. Однако за счет простой подачи и пояснений вопросов не возникает. Функционал аналогичен WPBakery, поэтому останавливаться на нем не будем. С Beaver Builder разберется даже новичок без опыта работы с подобными расширениями. Недостатком является отсутствие русского языка.

Простота – это критерий, в котором Beaver Builder ушел вперед. Открытым остается вопрос стоимости. Здесь выгода не очевидна, так как за этот плагин придется заплатить от 99 до 399$. Разница с ценовым предложением конкурента WPBakery колоссальная. Справедливости ради, не понятно, чем она обусловлена. Из-за этого многие принимают решение не в пользу Beaver Builder. Со второго года стоимость пакетов снижается на 40%, что приводит к диапазону от 59 до 239$. Последний вариант пакета выгоднее аналогичного от WPBakery на 11 долларов, но компенсация разницы стартовых цен займет более 13 лет…

Elementor

Бесплатные «строители» для ВП встречаются редко. Ярким представителем безвозмездной категории является это дополнение. Elementor не просто стал хорошей альтернативой для любителей и веб-мастеров, но и взял оливковую ветвь лидерства. Всего на базе расширения созданы и успешно работают 2+ млн. ресурсов. Как и большинство аналогичных продуктов, Elementor имеет премиум-версию. Она предусматривает пакеты для 1, 3 или 999 сайтов. Обходятся тарифы в 49, 99 и 199$ соответственно. В последние годы Pro-версия плагина дышит в спину потомку Visual Composer. Но это не значит, что ее срочно нужно покупать. Многим хватает и бесплатного варианта. На момент 7 мая 2019 года в него входит 83 функции. Повод познакомиться с ним поближе.

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

1. Универсальность. Работает с любыми темами без пейдж-билдеров.
2. Большой каталог инструментов. Слайдеры, карусели, блоки текста и информации, виджеты, формы комментирования и прочее.
3. Детальное редактирование. Выбранный элемент многосторонне правится: цвет, шрифт, размер, анимация, эффекты – это далеко не все из доступного.
4. Расширенная библиотека готовых шаблонов. Намного больше, чем в аналогичных платных дополнениях. Конечно же, все правится по желанию.

Возможности плагина не уступают тем же Beaver Builder, WPBakery. И без того большой набор инструментов регулярно пополняется посредством обновлений. Последние протекают без ущерба созданным формам, что избавляет от ряда неудобств. Из особенностей функционала отметим наличие удобного встроенного внутреннего редактора, возможность использования набора современных виджетов, создания нескольких страниц по единому шаблону и их импорт для других сайтов. Также есть функция работы только с центральной областью, без шапки, сайтбара и подвала. Инструментарий полностью адаптивный, что гарантирует качественное отображение элементов в мобильной версии. Elementor отлично подойдет как для информационных, так и коммерческих ресурсов.

MotoPress

Очередной коммерческий проект, который полюбился миллионам по всему миру. Точная дата появления проекта не известна. В сегодняшний обзор MotoPress попал не просто так. У него тернистая, интересная история развития. Изначально утилита создавалась как альтернатива стандартному визуальному редактору контента WordPress – панели, с которой мы работаем в записях. Ожидаемый успех к разработке не пришел, так как она не имела изюминки. При этом дополнение отлично справлялось с возложенными на нее функциями. Продукт MotoPress Content Editor долгое время не модернизировался создателями. Их внимание поглотил новый проект – MotoPress Slider. Речь идет о расширении для работы со слайдерами в записях. Его главной особенностью являлась функция полноценного редактирования изображения в рабочей области. Это избавляло от покупки дорогостоящих графических программ и просто экономило время.

На данный момент, MotoPress Slider стал бонусом для премиум-пакетов. MotoPress Content Editor занял центральное место в ассортименте продуктов компании. Он подвергся глобальной модернизации, по итогу которой в него добавлен функционал для работы не только с записями, но и страницами. Недостаток в лице невозможности редактирования ранее созданных информационных блоков также устранен. Установка Content Editor аналогична любому дополнению. В левой колонке главного меню появляется одноименная ссылка, ведущая в панель. Последняя представлена двумя зонами: центральной для создания структуры в визуальном режиме и боковой колонкой инструментов в левой части экрана. Целью команды разработчиков было реализовать решения, позволяющие создавать структуры профессионального уровня с применением простейших элементов и функции Drag-and-drop. Результатом стал следующий инструментарий:

• текст;
• изображения;
• сетка элементов;
• кнопки;
• социальные иконки;
• видео и аудио;
• звуковые эффекты;
• вкладки;
• таблицы;
• счетчики статистики;
• карты;
• конструкции HTML;
• виджеты;
• пространственные элементы;
• визуальные эффекты.

От конкурентов продукт отличает ряд особенностей. Во-первых, уникальная и полноценная панель визуального редактирования. Нередко пользователи отмечают, что она удобнее и понятнее аналогов конкурентов. Во-вторых, дополнение подойдет для работы с любыми темами, совместимо со многими сторонними расширениями. В частности, пакеты MotoPress полностью адаптированы под Multisite. В-третьих, имеются вшитые Гугл-шрифты, стили и шаблоны. Продукт совместим с WPML-технологиями. Автоматические обновления проходят регулярно и незаметно для пользователей. MotoPress переведен на несколько языков, но русского среди них нет. Есть демо-версия с сильно урезанным функционалом. Она не подойдет для серьезной работы. Цена премиального пакета зависит от количества ресурсов и необходимости аддонов. 1 сайт обойдется в 29$/год, 5 – 47 долларов, а неограниченное их количество – 139. Стоимость пакетов премиум-инструментария составляет 69$ для одного ресурса и 179$ для «Без ограничений». Unlim-набор брать не выгодно, однако, сгенерировать нечто среднее за разумные деньги не составит труда.

Live Composer

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

Несмотря на ряд недостатков, Live Composer устанавливается и используется миллионами. Его отличает доступность, простота, понятность и удобство. Активация осуществляется в панели администратора. Рабочая зона представлена большим окном редактора и нестандартным меню внизу экрана. В последнем масса разделов, каждый из которых соответствует определенному блоку функций. Рекомендуем заранее позаботиться об установке файлов перевода. Их можно бесплатно скачать на форумах. Рабочий процесс предполагает несколько этапов.

1. Выбор шаблона. Есть предустановленные варианты. Их можно скачать, либо загрузить собственные шаблоны.
2. Поиск элементы. Они находятся в меню модулей (крайняя левая вкладка).
3. Настройка выбранного. Перетаскиваем элемент в рабочую область, правим с помощью микшеров, стрелок и прочего. Все на уровне потяни, разверни, напиши и прочее. Никакого кода и HTML-конструкций.
4. Сохранение результатов. Функция предпросмотра сэкономит время.

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

VelocityPage Drag and Drop Builder

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

VelocityPage попал в обзор не случайно. От аналогов он отличается рядом особенностей. Первая из них – настраиваемая панель. В меню модулей можно переставлять кнопки местами, формировать перечень часто используемого, менять высоту строки. Нельзя изменить только ширину колонки. Дополнительных аддонов для VelocityPage не предусмотрено. Не спешите расстраиваться: функционал плагина близок к набору инструментов в максимальных пакетах Beaver Builder и WPBakery. Модули в утилите представлены блоками. Среди них есть текст, изображения, медиафайлы, чаты, форумы, комментарии и многое другое. Ориентирование в рабочей зоне осуществляется простым перетаскиваем. Параметры элементов по типу формы, цвета, размеров и др. изменяются в 1 клик. 

Проект является коммерческим, и цена порадует далеко не каждого. Завышенную стоимость разработчики компенсируют расширенный функционалом и оперативной поддержкой клиентов. Акцент на последней сделан не случайно. Сегодня пользователь не привык разбираться в нюансах самостоятельно. Намного проще написать в саппорт и получить грамотный ответ. С внятностью и скоростью отклика поддержки нередко возникают проблемы. Обычно первыми в очереди стоят держатели самых дорогих наборов. Компания-разработчик VelocityPage решила проблему, обеспечив одинаково качественную поддержку и любителям, и бизнесменам. Если не устраивает сервис, в течение 30 дней можно подать жалобу и вернуть деньги.

Заключение

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