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

В WordPress для создания и редактирования статей используется текстовый редактор и визуальный редактор TinyMCE (код визуального редактора находится в папке  wp-includes/js/tinymce). При работе в визуальном редакторе нужно учитывать его особенности, можно использовать Горячие клавиши и автозамены форматирования и не только. 

Полезные быстрые (горячие) клавиши

На панелях инструментов редактора находятся кнопки для добавления наиболее востребованного форматирования, ссылок, тега Далее (more) и др.. Горячие клавиши (комбинации клавиш клавиатуры) позволяют делать (почти все) то же самое без мыши.

Alt+Shift+ буква

*** В визуальном редакторе нажать одновременно служебные клавиши
Alt и Shift и клавишу с латинской буквой

(Чтобы отменить вставку, нажать Ctrl + Z )

T --  вставить тег <!-- more-->
P --  вставить тег <!-- nextpage -->
A / S --  вставить / удалить ссылку
M -- вставить рисунок (добавить медиафайл)

D -- перечеркивание

Ctrl + буква

(Чтобы отменить - нажать еще раз)

b -- полужирный
u -- подчёркнутый
i -- курсив

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

Имейте в виду, что переключение в визуальный режим автоматически удаляет некоторое форматирование, включая теги <br> и <p>.

Если поместить в текст статьи код на языках CSS, PHP или javascripts, он не будет работать как код. По умолчанию WordPress преобразует непонятно для него используемые символы < и > в соответствующие HTML-сущности &lt; и &gt;, которые будут отображаться на веб-странице в браузере как < и >.

Теги, введенные в текст статьи в HTML-режиме редактора (режим Текст),  интерпретируются как HTML-код. Тег <code> задает только форматирование и совсем не указывает WordPress, что последующий текст нужно обрабатывать особым образом.

HTML-сущности и некоторые интересные символы

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

&nbsp; неразрывный пробел
&raquo; » двойная правая угловая кавычка
&laquo; « двойная левая угловая кавычка
&lt; < левая угловая скобка
&gt; > правая угловая скобка
&bull; • маркер
♥ или &hearts; ? сердечко
♦ или &diams; ? ромб или бубны
♣ или &clubs; ? крести
♠ or &spades; ? пики
∞ ? символ бесконечности
&mdash; — длинное тире
&ndash; – тире

♞ - Шахматная фигура черный конь
HTML-код: &#9822;

см. Фонетические и другие знаки в таблице символов Unicode

также см.  codex.wordpress.org/Fun_Character_Entities
ru.wikipedia.org/wiki/Мнемоники_в_HTML

Кавычки

В русском языке: парные кавычки &laquo; («) и &raquo; (») и &bdquo; („) и &ldquo; (“).
В английском языке: парные кавычки &ldquo; (“) и &rdquo; (”) и одинарные &lsquo; (‘) и &rsquo; (’).

Скобки: амперсанд (&), решетка (#), номер и точка с запятой (;)

Скобки редактор не изменяет, но вдруг пригодится - номера для скобок:

91   [ - квадратная открывающая скобка --- &#91;
93   ]  - квадратная закрывающая скобка
123   { - фигурная открывающая скобка
125    }  - фигурная закрывающая скобка

символы для скобок

символы для скобок

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

При желании пользователь может визуальный редактор отключить, чтобы использовать только HTML-редактор (режим Текст)

Пользователи -- Ваш профиль --
Персональные настройки -- Редактор -- Отключить визуальный редактор

Автозамены

Автоматическое форматирование (автозамена) позволяет быстро создать заголовок (с помощью символов ##), цитату (с помощью символа >) или список, вставить тег <hr /> (горизонтальная линия).

*** Чтобы отменить автозамену, нажмите Esc или Ctrl + Z

Списки

Введите указанные символы с новой строки, затем пробел 

1.  или 1)     Нумерованный список
- или *     Маркированный список

Заголовки и др. после нажатия Enter

>    Цитата
##    Заголовок 2
###    Заголовок 3 и т.д..
---    Горизонтальная линия (тег <hr />)

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

8 thoughts on “Встроенный визуальный редактор WordPress”

  1. Валентина

    Здравствуйте!
    Помогите, пожалуйста, проблему встроенного редактора. Для статьи открывается простыня строк, и с таким длинным документом тяжко работать.
    В Параметры-Написание настройка "Размер текстового поля" вообще отсутствует! Что мне сделать, чтобы настроить размер текстового поля на 10 строк по умолчанию?

    Reply ↓
    1. Admin Post author

      Какая у Вас версия WordPress? В связи с чем изменились настройки редактора?

      Reply ↓
  2. Ербол

    Здравствуйте! У меня работает только визуальный редактор. А во вкладку "текст" ("html") я почему-то не могу перейти. Нажимаю - не переходит, также не могу вставить медиафайлы. В чем проблема, не подскажите??

    Reply ↓
  3. Антон

    Здравствуйте. Подскажите пожалуйста у меня вот такая проблема, не отображается редактор в записях. Как его вернуть обратно!) Уже все форумы перелазил.

    Reply ↓
    1. Admin Post author

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

      Reply ↓
  4. Kedra

    Не работает неразрывный пробел в редакторе WP. Ставлю на вкладке текст, при переходе на вкладку визуально тег удаляется.
    Что неверно? Как поставить неразрывный пробел.

    Reply ↓
  5. Nikolay

    Хочется изменить шрифт внутри редактора wordpress (чтобы он был таким же, как на сайте) а так же — уменьшить ширину редатора до 620px

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *