Расширенный редактор. Как поменять визуальный редактор записей в WordPress? Какое будущее у Front-end Editor

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

1 Распаковываем архив.

2 Копируем папку tinymce-advanced в /wp-content/plugins/ .

3 Заходим в админку блога на вкладку "Плагины " и активируем плагин.

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

Меню, кстати, можно отключить первой же настройкой плагина:

Сами кнопки на английском языке, но понять, что они означают несложно:

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

Не стоит добавлять все возможные кнопки на панели инструментов, так как многие кнопки вам никогда не понадобятся. Более того, лучше удалить некоторые кнопки из тех, которые там уже есть. Чем проще редактор – тем удобнее и эффективнее им пользоваться.

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

Пара кликов и таблица готова. Совсем примитивная таблица, но большинству блогеров этого хватит полностью.

Кнопка "Найти и заменить" вызывает вот такой диалог:

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

Возможность выбрать шрифт и его размер:

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

Лично для меня кажется очень полезной функция "просмотра блоков":

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

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

Иногда такое поведение редактора вызывает полный ступор. К примеру, на данном скриншоте видно, что текст, взятый в теги

автоматически оказался еще завернут и в теги абзаца

. При создании нового шаблона или при редактировании стилей уже существующего шаблона это очень важно.

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

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

А при использовании функции "Исходный код" вы увидите:

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

Плагин также расширяет возможности вставки стандартных списков. В редакторе по умолчанию есть лишь один вид списков:

Плагин дает возможность вставить списки различных видов:

Забавная кнопка, которая позволяет оценить, как будет выглядеть смайлик в опубликованной записи, так как в визуальном редакторе смайлики все равно будут выводиться в текстовом виде. Не забудьте только зайти в "Настройки\Написание " и поставить галку на опции "Преобразовывать смайлики наподобие:-) и:-P в картинки ".

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

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

По умолчанию включена лишь опция "List Style Options ", включающая расширенные возможности вставки списков, о которых я писал выше. Опция "Context Menu " включает контекстное меню плагина, вызываемое при нажатии правой кнопки мышки в редакторе:

Это абсолютно бесполезное меню, которое почти целиком состоит из меню вставки таблицы. Зачем оно нужно я так и не понял – родное контекстное меню браузера просто на порядок полезнее. Следующая опция касается диалога вставки ссылок. По умолчанию этот диалог выглядит так:

Плагин может заменить его на такой:

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

Последняя часть настроек плагина это "продвинутые" настройки:

Что такое editor-styles.css и зачем он нужен? В этом файле хранятся стили шаблона, которые должны применяться в визуальном редакторе. Объясню на примере, допустим, что есть запись в редакторе с цитатой:

При публикации эта запись в шаблоне блога будет выглядеть так:

Создадим файл editor-styles.css в папке шаблона с таким кодом:

add_editor_style("editor-style.css");

Обновляем страницу редактирования записи и видим:

Таким образом, в визуальном редакторе можно получить такой же вид записи, как и в опубликованном виде. Опция плагина по импорту файла editor-styles.css служит для загрузки содержимого этого файла, если в шаблоне в functions.php нет прямого вызова этого файла. Но, если уж вы создали этот файл, то и прописать одну строчку в functions.php для вас не составит труда.

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

Самая последняя настройка плагина заставляет редактор показывать теги абзаца и переноса строк на вкладке "Текст". То есть при редактировании записи все будет по-прежнему, а вот на вкладке "Текст" вы увидите полную html-разметку и больше не придется ради этого пользоваться функцией "Исходный код". Впрочем, редактор по-прежнему будет чудить со своим авто-форматированием. Например, вот такой код:

После переключения на "Визуально" и обратно на "Текст" превратится в:

То есть редактор удалил один перенос строки, взяв оставшиеся два переноса в теги абзаца. По сути, результат тот же – 3 строки отступа. Но все равно неприятно – не люблю, когда программа считает себя умней пользователя. Ведь в моем шаблоне у меня могут быть для тегов абзаца прописаны отступы как сверху, так и снизу и в результате визуально будет уже не 3 строки отступа, а все 4. Но да ладно, это я уже придираюсь.

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

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

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

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

Несмотря на то, что визуальный редактор WordPress называется WYSIWYG (что видишь, то и получишь), его содержимое выглядит не так, как на вашем сайте – в рамках вашей темы.

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

Использование визуального редактора Front-end Editor

Устанавливая бесплатный плагин Front-end Editor, вы получаете возможность производить создание и редактирование записей прямо на главной своего сайта. Вам больше не придется переходить к для создания и изменения записей, а потом обратно на сайт, чтобы проверить их вывод на странице.

Создание страницы или статьи

Обычно, нажимая кнопку «Добавить», вы перенаправляетесь к wysiwyg редактору в панель управления WordPress. Плагин Front-end Editor позволяет оставаться на главной сайта, и дает возможность производить создание страницы прямо на ней. Вы просто вводите нужный заголовок туда, где написано «ЗАГОЛОВОК», а содержимое на место надписи «Just write…». Если один раз кликнуть на эту надпись, то появится постоянная ссылка для страницы, которую можно изменить во всплывающем окне.

Создание записей с Front-end Editor происходит аналогичным образом, но с возможностью добавить категорию. Для этого надо нажать на то место, где в вашем шаблоне сделан вывод названия рубрик. После чего, перед вами появится окно, в котором можно отметить нужные категории для постов, а также создать новые и выбрать для них родительские рубрики.

Добавление содержимого

Когда вы нажимаете на любое место поля для ввода содержимого записей, перед вами появляется кнопка «Add Block». Она позволяет разместить блоки, в которых осуществляется вывод различного контента статей. Эти блоки включают:

Если вы не хотите размещать эти блоки, то можете просто начать печатать текст. Чтобы снова вызвать вывод кнопки «Add Block», нужно попросту сделать перенос строки. Кроме того, можно удалить любой из блоков, а также вырезать и вставить его в другое место, если он имеет какое-то содержимое. Обратите внимание, что оставшиеся без содержимого блоки, в итоге будут выглядеть как пустые пространства на главной сайта.

Форматирование текста

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

• Жирный шрифт;
• Курсив;
• Зачеркивание;
• Ссылка;
• Цитата;
• Заголовки H2 и H3.

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

Прикрепление медиа

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

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

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

Благодаря тем возможностям, которые приносит плагин Front-end Editor, большую часть изменений текста постов можно сделать прямо на главной, за исключением настроек SEO, а также некоторых HTML тегов. Но на каком месте веб-сайта вы бы не находились, вы всегда можете зайти в расширенный визуальный редактор, нажав на кнопку «Edit in admin» в меню редактирования записей.

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

Сохранение и публикация

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

Какое будущее у Front-end Editor

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

Вывод

Помимо большого количества плюсов, плагин Front-end Editor имеет и несколько минусов. В основном, они связанны с некоторыми ошибками, которые, впрочем, не мешают ему работать. Например, есть проблемы с сохранением и публикацией постов при активации одного из стандартных шаблонов WordPress, а также незначительные сбои при изменении контента. Как бы то ни было, это замечательный плагин, который может сэкономить огромное количество времени при создании контента, а также дать опыт использования настоящего wysiwyg.

(Последнее обновление: 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

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

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

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

Всем привет!

Сегодня я расскажу вам про плагин Ultimate tinyMCE, позволяющий значительно расширить функции стандартного визуального редактора wordpress.

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

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

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

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

Плагин Ultimate TinyMCE. Совершенствуем визуальный редактор wordpress

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

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

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

Для того чтобы та или иная кнопка отобразилась в рабочей панели визуального редактора, достаточно в столбце «Enable», напротив нужной кнопки установить галочку. Помимо этого плагин предлагает самостоятельно выбрать расположение кнопок, что можно сделать в столбце «Row Selection»:

Как вы, наверное, заметили, все кнопочки в панели редактора располагаются в две строки, но благодаря Ultimate tinyMCE можно увеличить количество строк до четырех, но не больше. Этому способствует значение «ROW», что в переводе означает «Строка».

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

Если из списка выбрать, например значение «ROW 3», кнопка с функцией переместится на третью строку. Я думаю, это понятно! Активировав все дополнительные функции (я насчитал 53) и раскидав их по строкам, у меня получилась вот такая картина:

Впечатляет, не правда ли? И забыл упомянуть, что при добавлении или удалении какой-либо функции, не забывайте в самом низу плагина нажимать кнопку «Update Buttons Options» для сохранения настроек.

Как расширить функционал визуального редактора wordpress с помощью кода

Итак, какие функции можно добавить с помощью кода и как это сделать?

1. Можно добавить «Семейство шрифтов», т.е. вы сможете выбрать из списка нужный вам шрифт и написать им целый пост или небольшой отрывок. Для реализации данной функции, откройте на редактирование файл functions.php (путь до файла: /wp-content/themes/название темы (шаблона)/functions.php).

Внимание: перед редактированием файла functions.php обязательно делайте во избежание неверных действий!

Открыв файл, найдите в самом конце тег: ?> и сразу перед ним вставьте вот этот код:

add_filter("mce_buttons_2" , "add_fontselect_row_2" ) ; function add_fontselect_row_2( $mce_buttons ) { $pastetext = array_search ( "pastetext" , $mce_buttons ) ; $pasteword = array_search ( "pasteword" , $mce_buttons ) ; $removeformat = array_search ( "removeformat" , $mce_buttons ) ; unset ( $mce_buttons [ $pastetext ] ) ; unset ( $mce_buttons [ $pasteword ] ) ; unset ( $mce_buttons [ $removeformat ] ) ; array_splice ( $mce_buttons , $pastetext , 0 , "fontselect" ) ; return $mce_buttons ; } add_filter("tiny_mce_before_init" , "restrict_font_choices" ) ; function restrict_font_choices( $initArray ) { $initArray [ "theme_advanced_fonts" ] = "Andale Mono=andale mono,times;" . "Arial=arial,helvetica,sans-serif;" . "Arial Black=arial black,avant garde;" . "Book Antiqua=book antiqua,palatino;" . "Comic Sans MS=comic sans ms,sans-serif;" . "Courier New=courier new,courier;" . "Georgia=georgia,palatino;" . "Helvetica=helvetica;" . "Impact=impact,chicago;" . "Symbol=symbol;" . "Tahoma=tahoma,arial,helvetica,sans-serif;" . "Terminal=terminal,monaco;" . "Times New Roman=times new roman,times;" . "Trebuchet MS=trebuchet ms,geneva;" . "Verdana=verdana,geneva;" . "Webdings=webdings;" . "Wingdings=wingdings,zapf dingbats" . "" ; return $initArray ; }

Сохраните файл и переместите его обратно в папку с темой вашего блога с заменой старого.

2. Добавляем кнопки горизонтального разделителя, верхнего и нижнего индекса, размер шрифта, изменение стилей и цвет фона. Для этого все в тот же файл functions.php, перед тем же тегом?> добавляем следующий участок кода:

function add_more_buttons($buttons ) { $buttons = "hr" ; $buttons = "del" ; $buttons = "sub" ; $buttons = "sup" ; $buttons = "fontselect" ; $buttons = "fontsizeselect" ; $buttons = "cleanup" ; $buttons = "styleselect" ; $buttons = "backcolor" ; return $buttons ; } add_filter("mce_buttons_3" , "add_more_buttons" ) ;

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

На этом у меня все и теперь вы тоже знаете, как добавлять функциональные кнопки в редактор wordpress, тем самым расширив его стандартные возможности! Желаю всем удачи! Пока и до скорых встреч!

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

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

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

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

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.

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

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