Встроенный визуальный редактор 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 строк по умолчанию?

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

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

  2. Ербол

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

  3. Антон

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

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

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

  4. Kedra

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

  5. Nikolay

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

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

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