Встроенный визуальный редактор 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 />)

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

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

  1. Валентина

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

  2. Ербол

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

  3. Антон

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

    1. Admin Автор записи

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

  4. Kedra

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

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