Расширенный визуальный редактор wordpress. Текстовый редактор WordPress и плагины Post Editor Buttons и AddQuicktag

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

HTML редактор позволяет использовать не все известные теги а только основные. Вот кстати, список тех тегов, которые редактор WordPress понимает: address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

Если вы попытаетесь вписать какой-то другой тег не входящий в этот список, то редактор WordPress просто его удалит из записи. Также в html редакторе нельзя использовать код PHP и JavaScript. Если вы все же хотите засунуть код JavaScript в стать, то вам придется в отдельном файле вставлять этот код, потом закачивать его на блог и прописать в html редакторе путь к открытию этого файла.

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

Редактор называется TinyMCE Advanced, который делает навороченный плагин CKEditor . Я не просто так это сказал, так как в него впихнули целых 15 плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras.

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

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

Маленький человек может сделать многое.

Здравствуйте, коллеги!

Существует два способа:

1. Установка плагина
2. Установка кода в файл functions.php .

Если вы не сильны в познании кодов php, html и стилей css, то лучше использовать готовый плагин для расширения возможности редактора wordpress.

Расширяем возможности редактора WordPress плагином

Плагин Ultimate TinyMCE

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

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

Плагин удобен в настройках и не требует больших знаний. Надеюсь вы знаете как установить новый плагин из панели управления wordpress.

Настройка плагина Ultimate TinyMCE

После активации плагина, в левой части консоли найдите вкладу «Настройки» и нажмите на «Ultimate TinyMCE».

Откроется длинная страница с различными кнопками, с помощью которых расширяем возможности редактора WordPress. На скриншоте только часть страницы.

Добавьте в визуальный встроенный редактор WordPress нужные вам функции и не забудьте сохранить изменения.

Я не стал показывать всю страницу, посмотрите сами. Главное правильно сделать настройку. В столбце «Enable» поставьте галочку напротив нужной опции, а в столбце «Row Seleciton» укажите строку редактора. Визуальный редактор WordPress может иметь только четыре строки.

Поэкспериментируйте и подберите удобный для вас вариант расположения добавленных возможностей WordPress.

Если встроенный редактор по умолчанию выглядит так:

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

Плагин Tiny MCE Advanced

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

Установить его можно из админпанели сайта во вкладке «Плагины» ==>«Добавить новый».

Активируйте установленный плагин и в вкладке «Настройки» ==> «TinyMCE Advanced» перейдите к настройке редактора WordPress.

(Нажмите на изображения, чтобы увеличить.)

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

С Вами был, Николай Иванов.

ВОПРОСЫ ПИШИТЕ В КОММЕНТАРИЯХ

Дорогие читатели, сегодня мы поговорим об удобстве написания и оформления статей для блога. А именно, о плагине для WordPress TinyMCE Advanced.

Зачем нужен нормальный визуальный редактор WordPress

Возможно, вы уже воспользовались советом из статьи и пишете ваши записи через нее. А может она вам не понравилась. Да и разные ситуации, когда воспользоваться ей не предоставляется возможным и нужно писать статью через админку блога с использованием визуального редактора (WYSIWYG — “Что видишь, то и получаешь”).

В WordPress встроен стандартный визуальный редактор, который не достаточно функционален и удобен в использовании. Выглядит он так:
Роль визуального редактора в жизни блогера огромна: каждому необходимо оформлять статьи красиво, аккуратно и удобно для зрительного восприятия. Кроме того работа с блогом должна доставлять удовольствие, а значит редактор должен быть удобен и просто в использовании, а его функционал – интуитивно понятен.

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

Не работает визуальный редактор WordPress?

Если по какой-то причине у вас вообще не работает стандартный визуальный редактор, не стоит переживать, он вам не нужен. Сразу переходите к установке плагина TinyMCE Advanced, который обеспечит вам расширенный полноценный визуальный редактор в вордпресс.

Установка плагина TinyMCE Advanced для WordPress

Установка стандартная. Удобнее всего скопировать название плагина «TinyMCE Advanced » в поиск плагинов и установить. Можете так же скачать плагин TinyMCE Advanced с официального сайта вордпресс. Если вы не знаете, как его установить, учитесь .

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

Как отключить визуальный редактор WordPress

Если вдруг вы хорошо владеете html и редактор только мешает вам своими ошибками и глюками, возможно вы захотите его выключить. В WordPress это делается так: зайдите в раздел «Пользователи» , выберите своего пользователя и вы увидите, что самым первым пунктом настроек является чекбокс «Отключить визуальный редактор» . Поставьте галочку и редактор перестанет отображаться.

Функционал и преимущества редактора TinyMCE Advanced

После того, как вы закончили настраивать редактор, откройте любую статью и возрадуйтесь! Теперь это уже похоже на серьезный редактор типа MS Word. Визуальный редактор для вордпресс TinyMCE Advanced обладает множеством свойств, которые помогут вам оформлять статьи, как пожелаете. Перечислю основные из них:

• Форматирование текста в один клик: выделение жирным, курсивом, подчеркнутым и т.д. Не забудьте сначала выделить участок текста, который хотите отформатировать.
• Выравнивание текста по левому, правому краю, центру и ширине.
• Добавление маркированных и нумерованных списков
• Стили для абзацев и заголовков
• Цитаты и аббревиатуры
• Добавление и редактирование медиафайлов
• Выбор цвета, размера и типа шрифта
• Выбор фона для текста
• Работа с таблицами

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

На сайт необходимо изучить текстовый редактор для WordPress.

Шрифт

Кнопки, на которых изображены латинские буквы B, I, U, ABC.

• При нажатии на «B» выделенный текст становится жирным.
• При нажатии на «I» — станет курсивом.
• С помощью «U» — станет подчеркнутым.
• При нажатии на «ABC» — станет зачеркнутым.

Вставка текста

Чтобы вставить текст без форматирования, нажмите на кнопку, на которой изображен значок с буквой «Т».

Если Вы захотите снять форматирование текста, выделите фрагмент и нажмите кнопку «ластик».

Для отмены действий нажмите на кнопку, на которой изображена стрелочка влево, а чтобы вернуть действие — вправо.

Выделение заголовков

Чтобы читателю было легче ориентироваться в тексте, нужно использовать заголовки. Заголовки есть различных уровней: первый, второй, третий, …, шестой.

Отличаются заголовки по размеру.

Заголовок 1 используется для названия статьи. А остальные заголовки используются уже непосредственно в тексте статьи.

Я использую заголовки только второго и третьего уровня, а остальные мне совсем не нужны

Изменение цвета текста

Чтобы поменять цвет текста нажмите на кнопку «А», перед этим не забудьте выделить фрагмент. Появится палитра всевозможных цветов. Выберите то, что вам нужно.

Выравнивание текста

Кнопки для выравнивания текста позволяют расположить текст:

• по левому краю;
• по центру;
• по правому краю;
• по ширине.

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

Для того, чтобы разделить текст можно воспользоваться горизонтальной линией. Лично я этой линией никогда не пользовался. Но вам, возможно, она пригодится.

Использование списков

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

Списки бывают:

• маркированными, т.е при перечислении добавляется маркер, чаще всего изображенный в виде кружочков.
• нумерованными, когда идет нумерация от 1 до бесконечности.

Цитирование

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

Добавление произвольных символов

Для добавления различных символов нажмите на кнопку в виде перевернутой подковы.

Вставка медиафайлов

Для добавления медиафайлов нажмите на кнопку «Добавить медиафайл», на которой изображены ноты и пиктограмма фотокамеры. Вы можете прикрепить картинку.

При добавлении картинки нужно указать её размер, положение и при желании заголовок, описание, alt-текст.

Создание и удаление ссылок

Имеются две кнопки для создания и удаления ссылок. Что нужно сделать для создания ссылки:

Другие инструменты

Тег «Далее»

Справка

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

Режим ввода текста

В редакторе есть два режима ввода текста:

1. Визуально
2. Текст

В визуальном режиме сразу видно, как примерно будет выглядеть ваш текст в статье, а в «текстовом» режиме видны все html теги, которые как раз создают это оформление.

Я практически всегда пользуюсь только «визуальным режимом». В режиме «текст» я иногда оформляю и вставляю видео из ютуба — это всё.

Плагин TinyMCE Advanced

Существует множество плагинов текстовых редакторов для WordPress.

Один из таких популярных — TinyMCE Advanced. Установка плагина стандартная.

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

Хотелось рассказать непосредственно о возможностях TinyMCE Advanced.

На панели редактора отображаются те кнопочки, которые Вы сами выберите в настройках.

Добавление, удаление функционала

Инструкция:

1. Перейдите в «Настройки редактора»
2. Установите флажок в поле «Включить меню редактора»
3. И просто на основную панель удержанием мыши перенести те кнопки, которые Вам нужны
4. Можете добавить дополнительные вкладки

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

• «Файл» — имеет функции в контекстном меню: создание нового документа и печать;
• «Изменить» — имеет функции в контекстном меню: отменить, повторить, вырезать, копировать, вставить, найти и заменить;
• «Вставить» имеет функции в контекстном меню: Insert link (ссылка), вставить видеофайл, произвольный символ, горизонтальная линия, Add media, вставить тег Далее, разрыв страницы, дата и время, якорь, неразрывный пробел;
• «Просмотр» чаще всего включает в себя: показать невидимые символы, показать блоки, визуальные подсказки, на весь экран, полноэкранный режим;
• «Таблицы» имеет функции контекстного меню: вставить, свойства таблицы, удалить таблицу, вставить ячейку, строку, столбец;
• «Инструменты» предусматривает возможность вставки исходного кода.

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

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

Подытожим, в чем же преимущество данной утилиты:

1. Вы можете настроить панель для редактирования самостоятельно
2. Функционал богаче, чем у стандартного редактора WordPress
3. Вы можете добавить только необходимые вам элементы
4. Работа с таблицами

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

Пока, пока, до новых встреч!

С уважением! Абдуллин Руслан

(Последнее обновление: 20.01.2019)

Доброго времени суток! Начиная с этой недели я собираюсь по возможности сконцентрироваться на теме - самые полезные и нужные плагины для WordPress. Обязательные которые должны быть установлены сразу после создания сайта/блога, Вы можете о некоторых из них прочитать в этом блоге. Сегодня я сфокусирую ваше внимание на плагине для WordPress TinyMCE Advanced . Данный модуль относится к категории - установка по возможности, то есть по вашему желанию или по другому рекомендуемый. Хотя его можно отнести к - должен установлен для хорошего оформления статей. Вот как то так.

Классический редактор WordPress

Сначала, дамы и господа, прежде чем мы приступим к основной теме статьи - установка и настройка редактора TinyMCE Advanced для wordpress, нужно выполнить дополнительные действие. Зачем? В WordPress 5, вместо классического редактора, внедрён новый блочный редактор Gutenberg. Новый редактор Gutenberg конечно крутой, но на его освоение и привыкание надо время. Поэтому, нам надо первым делом вернуть классический редактор, то есть, старый редактор вордпресс к которому мы так все привыкли. Хотя это не обязательно.

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

Обратите внимание, что плагин TinyMCE Advanced работает и с классикой, и с новыми блоками Гутенберг.

Предпочитаете остаться со старым, добрым классическим редактором? Без проблем! Не удивительно, что старый редактор установили уже более 1 млн. пользователей. Поддержка плагина Classic Editor останется в WordPress до 2021 года включительно.

Плагин Classic Editor

Плагин Classic Editor

Classic Editor - официальный плагин от команды разработки WordPress, который восстанавливает старый классический вариант редактора и экрана редактирования записей. Для его установки зайдите Плагины - Добавить новый - Ввести название плагина. На странице модулей нажмите на кнопку "Установить" рядом с Classic Editor.

Установка классического редактора

После установки нажмите "Активировать". После этого, перейдите Настройки - пункт Написание. Здесь, установите Редактор по умолчанию - Классический редактор, а в - Разрешить пользователям переключение редакторов - Да (вы сможете переключиться на редактор блоков и на оборот):

Настройка публикации в WordPress

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

TinyMCE Advanced плагин

TinyMCE Advanced представляет блок Классический абзац и Гибридный режим для нового редактора блоков (Гутенберг)

TinyMCE продвинутый - редактор для WordPress. Версия 5.0 является основным обновлением TinyMCE Advanced. В нем представлены дополнительные кнопки и настройки для панелей инструментов «Rich Text» в редакторе блоков. Подобно панелям инструментов Классического редактора, большинство кнопок могут быть добавлены, удалены или переставлены.

Описание плагина

Plugin представляет блок "Классический абзац" и Гибридный режим для нового редактора блоков Gutenberg. Если вы не совсем готовы переключиться на Редактор блоков лучше использовать блок Классический абзац и Гибридный режим. Он позволяет вам продолжать использовать знакомый редактор TinyMCE для большинства задач и в то же время дает вам полный доступ ко всем блокам и новым функциям в редакторе блоков.

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

Некоторые функции

• Гибридный режим, который позволяет вам использовать лучшее из обоих редакторов.
• Включает блок «Классический абзац», который можно использовать вместо или вместе с блоком абзаца по умолчанию.
• Поддерживает преобразование большинства блоков по умолчанию в «классические» абзацы и из классических абзацев обратно в блоки по умолчанию.
• Поддержка создания и редактирования таблиц в Классических блоках и Классическом редакторе.
• Дополнительные параметры при вставке списков в классические блоки и классический редактор.
• Поиск и замена в классических блоках и классическом редакторе.
• Возможность установить семейство шрифтов и размеры шрифтов в классических блоках и в классическом редакторе.
• И много других.

И так, добавляем функциональность редактора WordPress.

Установка и настройка плагина TinyMCE Advanced

Установка плагина стандартная, через админку вордпресс. Плагины - Добавить новый и в поле для поиска вводим название TinyMCE Advanced:

Установка и активация плагина

После успешной установки и активации продвинутого TinyMCE, у вас в разделе "Настройки" появится подраздел с аналогичным названием модуля - TinyMCE Advanced, нажимаем. И мы попадаем на страницу настроек, чтобы добавить кнопки на панель редактора и различных функций к вашему классическому редактору и редактору блоков (Гутенберг). Вкладка Классический редактор TinyMCE:

Настройки редактора WordPress

Процесс настроек визуального классического редактора совсем не сложный. Всё полностью на русском языке. Как видите у вас есть четыре поля и Неиспользуемые кнопки. Простым нажатием мышки поместите/перетащите кнопки на панель или перетаскивайте их для изменения порядка расположения их.

Чуть ниже на странице, настройте Параметры, Дополнительные параметры и Управление.

Настройка нового редактор Gutenberg

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

И кнопка Якорь (навигация в статье) пригодится - многие блогеры используют на всю катушку. Кнопка статьи- тоже полезная штука. Вот пожалуй и всё на сегодня. Работать с новым и старым редактором теперь будет классно. У вас получатся с новыми функциями красиво оформленные статьи.

А я прощаюсь с вами. До новых встреч. Всем пока и удачи.