Всем привет!

Сегодня я расскажу вам про плагин 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, тем самым расширив его стандартные возможности! Желаю всем удачи! Пока и до скорых встреч!

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

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

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

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

Когда-то я рассматривал интересный проект — визуальный редактор для создания WordPress шаблона непосредственно из админки. Сегодня расскажу о похожем, но более функциональном и мощном продукте — . Это отдельная версия профессионального десктопного веб-редактора Pinegrow, который используется при создании сайтов с адаптивностью, скриптами, Bootstrap’ом и другими фишками. Так вот Pinegrow WP — это специальное дополнение, позволяющее создавать именно WordPress шаблоны.

Основные функции Pinegrow WP:

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

• Поддержка 175 WordPress тегов — позволяет быстро найти для элементов HTML макета нужные значения (заголовок поста, дата, имя автора).
• Поддержка плагинов и PHP функций — в качестве параметров элементов можно выбирать не только WordPress теги, но и задавать переменные, добавлять PHP функции.
• Просмотр в реальном времени создаваемой WordPress темы позволяет увидеть что получается после ваших настроек.
• Просмотр генерируемого PHP кода для макета.

Кроме этого, вы сможете работать непосредственно с контентом вашего WordPress сайта, импортируя картинки в Pinegrow WP. На выходе получаете чистый код PHP/HTML код, сервис не добавляет никакие лишние элементы в базовый макет.

Вот небольшое видео как работает Pinegrow WP:

Вы можете потестировать данный софт самостоятельно. Для этого скачиваете программку с официального сайта (есть версии для Windows, Mac и Linux). После установки запрашиваете бесплатный временный лицензионный ключ (на 7 дней). Вводите пароль, что приходит на почту и попадаете в систему.

В настройках (значок шестеренки) Framework & Plugin Manager for index.html отмечаете WordPress, после чего загружаете какой-то HTML шаблон. Далее кликаете по определенным элементам макета и выбираете для них соответствующие WordPress функции. Например: для картинки — the_post_thumbnail, для заголовка — the_title, для даты — the_date и т.п. То есть пользователю не нужно знать как именно в WordPress задавать тот или иной элемент, просто ищите его в имеющихся функциях и добавляете в макет. Задав всем блокам на странице соответствующее значение, в итоге получите работающий WordPress шаблон для экспорта. Алгоритм приблизительно такой, хотя с программой Pinegrow WP придется разбираться детальнее (там очень много разных функций и настроек).

В целом, Pinegrow WP — штука очень мощная, но не бесплатная. Персональная лицензия (на 3 компьютера) стоит 99 долларов. Вы можете использовать ее для скольких угодно проектов! Есть лицензии для компаний и команд разработчиков. В принципе, именно для этих целей программа и нужна — если вы или ваша компания профессионально занимается созданием сайтов (в том числе и на WordPress), то этот софт пригодится.

Язык интерфейса: Английский/Русский Тип: Плагин

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

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

Роль пользователей и профили WordPress. WP Smart Editor предлагает уникальные возможности для каждого создателя контента. Вы имеете возможность:

• Создавать несколько профилей пользователей;
• Выбирать набор инструментов редактора для применения к каждому профилю;
• Применять профили к одному или нескольким пользователям или ролям пользователей;
• Экспортировать/импортировать профили пользователей с одного веб-сайта на другой.

Выбор инструментов. WP Smart Editor поставляется с мощным набором инструментов редактора, которые являются полезными и экономят время для редактирования содержимого, в том числе:

• Менеджер столбцов: создавайте и настраивайте макеты столбцов без использования HTML-кода;
• Менеджер кнопки: дизайн, сохранение и повторное использование ваших кнопок с редактора;
• Менеджер списков: создайте свои списки с пиктограммами, сохраните и повторно используйте их на своем веб-сайте;
• Краткое содержание: создать автоматическое содержание со ссылками на основе структуры заголовка контента;
• Диспетчер подсказок: добавьте подсказку AJAX внутри вашего контента.

Файловый менеджер . Управление файлами, такими как файлы PDF или ZIP-файлы с помощью стандартного медиа-менеджера WordPress. WP Smart Editor содержит легкую версию мощного плагина загрузки файлов WP, чтобы вы могли загружать, управлять и обновлять файлы.

Менеджер таблиц . Создание таблицы в редакторе WordPress требует знаний HTML/CSS, и почти невозможно управлять таблицей в редакторах контента. WP Smart Editor содержит облегченную версию мощного плагина WP Table Manager, благодаря чему вы сможете создавать, управлять и настраивать таблицы с вашего редактора так же, будто вы используете Excel.

Специальный стиль HTML для пользователей . WP Smart Editor имеет специальный инструмент для создания собственных стилей CSS и предоставление их пользователям. Как веб-дизайнер, создайте свой собственный стиль в соответствии с темой WordPress, назовите его и позвольте редактору контента использовать его, когда это будет нужно.

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

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

Плагин WP Smart Editor прекрасно интегрируется с:

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