Телевизор 

Расширенный визуальный редактор WordPress TinyMCE Advanced и плагин AddQuicktag для добавления кнопок панели форматирования. Инструменты текстового редактора на движке 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.

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

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

*Подключить визуальный редактор можно в разделе консоли «Плагины».

Плагин TinyMCE Advanced добавляет к стандартному редактору дополнительные кнопки для форматирования текста. Вот некоторые из них:

  • Размер шрифта
  • Тип шрифта
  • Цвет фона
  • Функция поиска и замены текста на странице

Также можно отключить автоматическое удаление пустых строк.

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

Настройки редактора находятся в разделе консоли «Настройки» — «TinyMCE Advanced».

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

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

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

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

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

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

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

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

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

Так же есть функция «просмотра блоков»:

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

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

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

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

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

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

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

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

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

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

Кнопка вставки смайликов:

Забавная кнопка, которая позволяет оценить, как будет выглядеть смайлик в опубликованной записи, так как в визуальном редакторе смайлики все равно будут выводиться в текстовом виде. Не забудьте только зайти в «Настройки\Написание» и поставить галку на опции «Преобразовывать смайлики наподобие 🙂 и 😛 в картинки».

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

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

Опция «Link (replaces the Insert/Edit Link dialog) » касается диалога вставки ссылок. По умолчанию этот диалог выглядит так:

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

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

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

Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu — данная функция на Prihod.ru не поддерживается.

Stop removing the

And
tags when saving and show them in the Text editor — Самая последняя настройка плагина заставляет редактор показывать теги абзаца и переноса строк на вкладке «Текст». То есть при редактировании записи все будет по-прежнему, а вот на вкладке «Текст» вы увидите полную html-разметку. Впрочем, редактор по-прежнему будет чудить со своим авто-форматированием. Например, вот такой код:

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

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

Но при включении этой настройки WordPress перестает «съедать» пустые строки, которые вы ставите кнопкой Enter в режиме визуального редактирования. Редактор на месте пустой строки вставляет код
и не удаляет его при сохранении, даже если таких строк на странице много.

Статья взята отсюда и немного дополнена 🙂

Просмотрено (4251) раз

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


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

Навигация по статье:

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

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

Плагин дополнение к редактору TinyMCE Advanced существует очень давно и наверное у 90% пользователей платформы WordPress он установлен и ежедневно используется.

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

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

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

Видео обзор TinyMCE Advanced, его установка и настройка

В данном видео вы увидите преимущества доступные при установке и работе с TinyMCE Advanced.

Чем TinyMCE Advanced лучше стандартного

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

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

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

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

Что даст нам TinyMCE Advanced

Итак, использование расширенного редактора TinyMCE Advanced позволит нам добавить и использовать следующие возможности:

  1. Легкое и удобное создание таблиц непосредственно при написании статьи. Редактирование и наполнение которых не вызовет у вас неудобств.
  2. Расширенное и удобное форматирование структуры страницы. Возможность создания и регулирования размещения слоев (
    блоки).
  3. Вам так же станет доступно ставить верхние и нижние индексы.
  4. Менять цвет фона текста с TinyMCE Advanced можно очень легко без использования CSS.
  5. Внедрять видео файлы станет гораздо удобнее с редактором TinyMCE Advanced.
  6. Изменять размер шрифта.
  7. Широкий выбор семейства шрифтов.
  8. Набор горячих клавиш добавит вам скорости написания и форматирования ваших текстов.
  9. Станет доступна очистить одной клавишей всего форматирования.

Эти и другие возможности пригодятся вам в формировании ваших творений с WordPress.

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

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

Возможные проблемы с TinyMCE Advanced и методы их решения

Плагин TinyMCE Advanced написан на PHP, так же как и любая программа она может по тем или иным причинам не работать. Ниже описаны проблемы, с которыми чаще всего сталкиваются пользователи. Чем же болеет редактор для WordPress.

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

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

  1. Проверить работоспособность других плагинов которыми вы управляете с админки, если их кнопки настроек работают тогда переходим к следующему пункту. В случае возникновения проблем и с другими дополнениями нужно искать причины внутренних настроек, а не в самом плагине.
  2. Обновите WordPress до последней версии.
  3. Полностью удалите плагин и скачайте TinyMCE Advanced с официального сайта.
  4. После установки активируте его и проверьте работоспособность.

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

На странице администрирования: не сортируются кнопки TinyMCE, они не двигаются, панель инструментов пустая, другие ошибки на странице

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

Если это не помогло, попробуйте некоторые общие устранения неисправностей Javascript: очистить кэш, попробуйте другой браузер, попробуйте другой компьютер, если это возможно, удалить и заново загрузить все файлы плагина, и, наконец, установить Firefox с Firebug или Opera, обратите внимание на первый JS вызывающий ошибки (важно) и разместите его ниже или поищите в Интернете, чтобы узнать то, что вызывает его.

Организовал кнопки и сохранил их, но ничего не меняется в визуальном редакторе на странице записей

Нажмите на кнопку «Удалить» (рядом с кнопкой Сохранить), а затем на «Продолжить». Затем выключить и активировать плагин снова. Это сбросить все настройки, которые хранятся в базе данных.

Некоторые кнопки отсутствуют в меню TinyMCE, либо некоторые инструменты не появляются вообще, или TinyMCE ведет себя странно после установки плагина

Почти все эти проблемы вызваны кэш браузера, или сетевой кэш. Очистите кэш браузера, закройте браузер, а затем запустить его и попробуйте еще раз. Если проблема не устраняется, попробуйте перезагрузить страницу, удерживая Ctrl (в IE) или Shift (в Firefox), чтобы указать браузеру что нужна перезагрузка страницы с сервера. Это также может быть вызвано сетевым кэш где-то между вами и вашим веб-хостинга. Просто подождите несколько часов для того, чтобы проблема исчезнет.

Я не вижу каких-либо стилей импортируемых в «style» в раскрывающемся меню

Эти стили (только классы) импортируются из редактора в файл style.css вашей текущей темы. Однако некоторые темы не включать этот файл. В этом случае следуйте инструкциям на странице настроек TinyMCE Avdanced, чтобы добавить свой собственный файл style.css редактор к вашей теме. При определении стилей имейте в виду, что TinyMCE будет импортировать имена только класса:

My_class{}

My_other_class {}

Я только что установил плагин TinyMCE Avdanced, но ничего не произошло

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

Когда я добавляю «смайлики», они не показывают в редакторе

Кнопка «Смайлики» в TinyMCE добавляет коды смайлов. Фактические изображения добавляет WordPress при просмотре записи / страницы. Убедитесь, что флажок «Преобразовывать смайлики наподобие:-) и:-P в картинки» в меню «Настройки»/»Написание» установлен.

Плагин не добавляет никаких кнопок, «Визуально» и «HTML текст» вкладки отсутствуют

Убедитесь, что «Отключить визуальный редактор» флажок в разделе «Пользователи»/»Ваш профиль» снят.

Когда-то я рассматривал интересный проект — визуальный редактор для создания 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), то этот софт пригодится.