Визуальный редактор wordpress


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

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

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

  • Как добавить свои стили в WordPress редакторе TinyMCE
  • Как изменить ширину колонки в визуальном редакторе записей WordPress
  • Улучшаем вид редактора кода WordPress с помощью CodeMirror
  • Создаем свои кнопки для редактора записей WordPress
  • Настраиваем шаблон оформления в редакторе WordPress
  • Используем шрифты Google Fonts в текстовом редакторе WordPress

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

1. Добейтесь большего со стандартным визуальным редактором

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

Визуальный редактор VS. Текстовый редактор

WordPress оснащён как визуальным, так и текстовым редактором. Текстовый редактор показывает вам исходный текст с разметкой HTML и позволяет вам настроить текст полностью:

Визуальный редактор wordpress» />

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


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

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

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

Визуальный редактор wordpress» />

Кнопки Визуального Редактора

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


Визуальный редактор wordpress

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

Цитата

Визуальный редактор wordpress» />

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

Визуальный редактор wordpress» />

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

Вставить тег Читать далее


Визуальный редактор wordpress» />

Эта кнопка вставляет горизонтальную линию для разрыва текста, как на изображении ниже:

Визуальный редактор wordpress» />

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

Вставить как текст

Визуальный редактор wordpress» />


Кнопка Paste as Text используется для того, чтобы очистить текст, который вы скопировали из другого источника, от форматирования. Если вы просто скопируете и вставите, то текст может отобразиться в совершенно отличном от нужного формата виде. Кнопка Paste as Text убирает всё форматирование и тэги HTML.

Очистить форматирование

Визуальный редактор wordpress» />

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

Визуальный редактор wordpress» />

Специальные символы


Визуальный редактор wordpress» />

Кнопка Special Character позволяет вставить символы, которых обычно не найти на клавиатуре, но при нажатии на кнопку появится всплывающее окно:

Визуальный редактор wordpress» />

Сочетание клавиш

Визуальный редактор wordpress» />

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


Визуальный редактор wordpress» />

Сочетания клавиш могут предложить некоторые дополнительные функции, отсутствующие в панели инструментов, к примеру, «копировать», «вставить» и «код». «Код» используют для выделения блоков кода в тексте:

Визуальный редактор wordpress» />

Полноэкранный режим

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


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

Визуальный редактор wordpress» />

2. Плагины для визуального редактора

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


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

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

TinyMCE Advanced

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

В наличии есть дополнительные кнопки Font Family, Font Sizes, Insert Date/Time, Page Break и многие другие. TinyMCE Advanced также упрощает создание и настройку таблиц. Плагин позволяет вам включить меню редактора, которое предлагает ещё больше параметров для создания и редактирования контента.

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

Визуальный редактор wordpress» />

Основные характеристики:


  • Кнопки drag-and-drop для настройки вашей панели инструментов
  • Создание и редактирование таблиц
  • Дополнительные параметры для вставки списков
  • Поиск и замена функций
  • Выравнивание текста
  • Возможность вставить разрыв страницы
  • Возможность добавить смайлики

Цена: Бесплатно

WP Edit

Визуальный редактор wordpress» />

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? Поделитесь ими с нами в комментариях!

hostenko.com

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

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

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

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

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

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

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

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

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

  1. В админке блога: «Параметры» -> «TinyMCE Advanced». Открылись настройки плагина.
  2. Названия кнопок сейчас на английском, но не переживайте, при редактировании статьи визуальный редактор отобразится  полностью на русском.
  3. Четыре строки сверху показывают строки визуального редактора, которые можно наполнять функциональными элементами. Ниже расположен перечень имеющихся кнопок. Перетаскивая левой кнопкой мыши значки, вы сможете расположить их в нужном порядке. Аналогично можно избавиться от ненужных инструментов: перетащите их мышью вниз.
    настройка визуального редактора
  4. Обратите внимание, что чем больше инструментов вы добавите на панель редактора, тем медленнее он будет работать. Поэтому добавляйте только те кнопки, которыми вы пользуетесь.

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

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

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

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

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

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

pro-wordpress.ru

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

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

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

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

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

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

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

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

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

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

Плагин tinymce advanced и его настройка

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

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

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

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

  1. Легкое и удобное создание таблиц непосредственно при написании статьи. Редактирование и наполнение которых не вызовет у вас неудобств.
  2. Расширенное и удобное форматирование структуры страницы. Возможность создания и регулирования размещения слоев (<div> блоки).
  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 в картинки» в меню «Настройки»/»Написание» установлен.

yrokiwp.ru

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

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

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

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

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

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

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

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

Настройки 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).

fairheart.ru

Визуальный редактор страниц Page Builder Sandwich

К достоинствам плагина относится упрощенное добавление текста. Выбираете нужную область, и просто начинаете набирать текст. Также действует технология перемещения (drag and drop) – это бесценная функция, позволяющая перемещать выделенные объекты относительно рабочей области с помощью мышки. Вам не придется размещать формы через код, подбирая их координаты «методом тыка». Это существенно сокращает время работы.

У плагина есть возможность отмены действий. Если вы сделали что-то не так, то просто воспользуйтесь комбинацией клавиш ctrl+z, и вы будете возвращены на один шаг назад.

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

Работа с плагином Page Builder Sandwich

После установки и активации плагина, перейдите в пункт «Пользователи», в подпункт «Ваш профиль» в консоли WordPress, и поставьте галочку напротив чекбокса «Show Toolbar when viewing site». После этого при посещении любой страницы на вашем сайте через front-end вы заметите кнопку визуального редактора справа наверху. Она большая и синяя, так что вы не промахнетесь. При нажатии на кнопку, откроется редактор, позволяющий налету редактировать все, что вам вздумается.

Еще одним достоинством данного дополнение является возможность немедленного наблюдения результата.

Слева расположена панель инструментов. В бесплатной версии количество инструментов ограничено. В платной оно тоже ограничено, но их значительно больше. На официальном сайте WordPress можно найти обучающий материал по работе с плагином.

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

Вы можете узнать о другом редакторе для WordPress в этой статье.

wpuroki.ru

Текстовый редактор WordPress: как добавить пользовательский функционал?

От автора: текстовый редактор является ключевым элементом WordPress. С его помощью в визуальном текстовом редакторе (WYSIWYG) можно создавать и управлять как текстом, так и изображениями и видеоматериалами.

В визуальном редакторе есть текстовый режим, с помощью которого можно вставлять или редактировать HTML код. Визуальный редактор в WordPress работает на WYSIWYG редакторе TinyMCE, он хорошо справляется, как и с отображением самого контента, так и с отображением кнопок своего интерфейса, как на картинке ниже:

Визуальный редактор wordpress

Спасибо TinyMCE API и WordPress за то, что мы можем добавить свой собственный функционал во встроенный визуальный редактор. На самом деле мы научимся создавать и регистрировать собственные TinyMCE плагины, которые для работы с текстом будут использовать отдельный CSS класс.

Создание плагина TinyMCE

Создайте папку wp-content/plugins/tinymce-custom-class на сайте. Здесь будут храниться файлы нашего плагина. В этой папке создайте файл tinymce-custom-class.php и добавьте в него следующий код:

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

WordPress TinyMCE фильтры

В TinyMCE есть два ключевых фильтра, с помощью которых можно зарегистрировать элемент в панели инструментов визуального редактора:

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

Теперь сделаем еще пару проверок, добавим функцию setup_tinymce_plugin:

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

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

Если мы прошли все проверки, то будут зарегистрированы два фильтра mce_external_plugins и mce_buttons. Первый предназначен для регистрации в TinyMCE файлов JS, которые будут взаимодействовать с визуальным редактором. Давайте вызовем этот фильтр внутри нашего класса:

Мы зарегистрировали файл JavaScript в массиве $plugin_array, в котором содержатся все JavaScript плагины для TinyMCE. Второй фильтр предназначен для регистрации кнопок. Точно так же добавим вызов фильтра:

Мы зарегистрировали программное имя для нашей кнопки (custom_class).

Создаем плагин JavaScript

При вызове фильтра mce_external_plugins мы ссылаемся на JS файл. Т.е. необходимо создать этот самый файл и написать его код. В коде будет указано, как отображать нашу кастомную кнопку, и что делать по клику на нее. В папке плагина создайте новый файл tinymce-custom-class.js со следующим кодом:

Данная функция выполняет следующие действия:

В папку плагина нужно добавить иконку кнопки icon.png:

Визуальный редактор wordpress

Сохраните код и активируйте плагин в панели плагинов в WordPress. Затем создайте или отредактируйте существующие пост или страницу, и вы заметите вашу новую кнопку:

Визуальный редактор wordpress

По клику на нее всплывет сообщение «Button clicked!»:

Визуальный редактор wordpress

Задаем команду для запуска

Заменим alert на prompt, спросим у администратора, какой CSS класс необходимо добавить к выбранному тексту:

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

Если проверки пройдены, запускается функция execCommand, которая оборачивает выделенный текст в тег span с введенным именем класса.

Если все прошло гладко, переключитесь в текстовый режим. Теперь наш текст обернут тегом span:

Визуальный редактор wordpress

webformyself.com

Плагин TinyMCE Advanced для WordPress — настройки и использование

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

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

Затем в разделе «Настройки» — «TinyMCE Advanced» найдете два блока (вверху действующий набор кнопок, который будет установлен по умолчанию, а внизу «запасной» арсенал):

«>

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

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

«>

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

«>

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

«>

Также в дефолтном наборе нет опции «Исходный код». Ее находим в разделе «Инструменты», щелкнув по соответствующей строчке:

«>

Для чего вообще это нужно? Дело в том, что если вы работаете в визуальном редакторе и переходите в область HTML редактора WordPress, то текст там отразится без некоторых тегов форматирования, а иногда это необходимо. Ну, к примеру, мы форматируем заголовок какого-нибудь подраздела статьи:

«>

Если теперь перейти со вкладки «Визуально» в «Текст», то картина будет следующей:

«>

После использования кнопки «Исходный код» тот же фрагмент после перехода во вкладку текстового редактора обретет недостающие теги:

«>

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

Достаточно сказать, что TinyMCE Advanced позволяет:

  • выделять текст жирным, курсивом, подчеркиванием;
  • помещать цитаты;
  • размещать маркированные и нумерованные списки;
  • выравнивать текст по левому, правому краю и по центру;
  • вставлять и удалять ссылки;
  • осуществлять возврат на несколько шагов назад и вперед (отменять либо повторять ранее произведенные действия);
  • выбирать шрифт, его размеры, цвет;
  • увеличивать-уменьшать отступ;
  • отменять форматирование;
  • вставлять тег «more» («читать далее»).

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

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

«>

В случае необходимости поместить какой-либо спецсимвол HTML жмете соответствующую кнопку «Произвольный символ»:

«>

Из появившегося диалогового окна выбираете нужный знак, который будет вставлен в окно редактора TinyMCE Advanced:

«>

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

«>

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

Дополнительные настройки TinyMCE Advanced

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

Поэтому разберем немного и этот аспект. Итак, пониже основных опций идут три блока, первым из которых является «Параметры»:

«>

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

Я лишь попробовал активировать второй сверху пункт, но родное контекстное меню того же Хрома мне понравилось больше.

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

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

Вторым идет блок «Дополнительные параметры»:

«>

Тоже не вполне бесполезные настройки. Например, активированная опция «Создание меню классов CSS» дает возможность загрузить стили CSS, которые содержатся в файле editor-style.css и служат для отображения элементов, расположенных на странице редактора.

«Сохранять тэги параграфов». Обычно при переходе из текстового редактора в визуальный и обратно теги абзацев p и тег переноса </br> не сохраняются. Это опция сохраняет полностью код гипертекстовой разметки. Но при включении этой функции нужно быть внимательными и вначале протестировать корректность ее работы.

«Включить вставку исходного кода изображения» — эту опцию я даже не тестировал, поскольку она годится только для самых мелких картинок и к тому же не работает в моем любимом Google Chrome (здесь читайте об установке и настройках этого браузера).

Ну и третий блок — «Управление», где можно осуществить импорт и экспорт настроек, отметить галочками усовершенствования для редактора (которые, впрочем, включены уже по умолчанию), а также в любой момент восстановить дефолтные настройки:

«>

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

goldbusinessnet.com

Интерфейс визуального режима

Как только вы установите WordPress, редактор будет выглядеть очень бедным и не функциональным:

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

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

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

Здесь есть всё необходимое для базового форматирования:

  • Полужирное, курсивное и зачёркнутое выделение текста
  • Маркированный и нумерованный списки
  • Выделение текста как цитаты с оформлением
  • Горизонтальная разделительная линия
  • Выравнивание текста слева, по центру и справа
  • Вставка и удаление ссылки
  • Кнопка «Разрыв страницы»
  • Кнопка активации дополнительных возможностей
  • Кнопка перехода в полноэкранный режим

Работают данные кнопки в двух режимах, рассмотрим оба.

Пример 1

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

Любой текст, который будет введён в этом режиме, автоматически получит тот вариант оформления, который активен в панели инструментов.

Взгляните:

Пример выделения текста
Пример выделения текста

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

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

Таким же образом работают и все остальные варианты оформления.

Пример 2

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

Тот же самый текст я мог сначала просто написать:

Сначала набираем текст без оформления
Сначала набираем текст без оформления

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

Выделяем абзац, к которому необходимо применить оформление
Выделяем абзац, к которому необходимо применить оформление

После этого наш абзац станет полужирным. Отжимать кнопку [B] для этого не понадобится — оформление применится ко всему выделенному тексту автоматически.

Пример 3

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

Например, если бы во втором примере этой инструкции мы не нажали кнопку [B] на панели инструментов, а воспользовались комбинацией «Ctrl» и «B» (пишется как Ctrl+B, кнопка «B» — английская, от слова «Bold»), то полужирное выделение сразу бы применилось на наш абзац.

О клавиатурных сочетаниях будет материал в конце этой инструкции.

Активация дополнительных кнопок

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

Находим вот эту кнопку:

Активация дополнительной панели инструментов
Активация дополнительной панели инструментов

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

Второй ряд кнопок панели инструментов
Второй ряд кнопок панели инструментов

Здесь мы с вами уже можем наблюдать дополнительные варианты для оформления текста, пробежимся по ним слева-направо:

  • Создание заголовков любого из шести доступных уровней
  • Подчёркивание текста
  • Выравнивание текста по ширине страницы
  • Задание цвета текста
  • Активация режима вставки текста из буфера обмена без форматирования
  • Очистка форматирования у выделенного фрагмента текста
  • Вставка специальных символов
  • Удаление и добавление отступов слева у абзацев
  • Отмена или повтор предыдущего действия
  • Справка по работе с редактором

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

Многие могут возразить — «Где же таблицы?» — и будут совершенно правы. WordPress во встроенное редакторе не даёт возможности создания таблиц.

Для этого надо устанавливать дополнительные плагины, которые расширяют функциональность редактора. Один из них мы рассмотрим в статье Плагин TinyMCE Advanced в конце нашего курса.

wordpress1.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.