Как выводить HTML или шорткоды как есть, и три способа сделать, чтобы визуальный редактор WordPress не менял HTML

Как отображать HTML и шорткоды как есть

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

<strong> текст </strong>

как есть в виде текста, необходимо написать его в HTML-редакторе в таком виде:

&lt;strong&gt; текст &lt;/strong&gt;

где &lt; – заменяет открывающую скобку: <, а &gt; – заменяет закрывающую скобку: >. Это все, что нужно сделать! Полную таблицу таких HTML-кодов можно найти здесь: таблица HTML-кодов для символов и букв.

Как сделать так, чтобы визуальный редактор не менял HTML-код?

Часто бывает, что визуальный редактор WordPress играет с нами злую шутку и при переключении из текстового редактора в визуальный и обратно он удаляет или меняет весь созданный нами HTML-код. У меня была подобная проблема, когда я писал статью про плагин TablePress и хотел вставить шорткод:

table id=1 /

как есть в текст поста и вписывал такой HTML-код в текстовом редакторе:

&#91;table id=1 / &#93;

Но после того, как я переключался из текстового редактора в визуальный редактор и обратно, то WordPress менял &#91; и &#93; на [ и ], а плагин TablePress вставлял в статью таблицу, хотя ее там не должно было быть, и я просто хотел вывести код шорткода.

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

Есть три решения. Первое самое простое, но оно мне не нравится, так как надо просто отключить визуальный редактор. Идем в Пользователи > Ваш профиль и ставим галочку “Отключить визуальный редактор”. Но я привык все писать в нем, в текстовом редакторе писать неудобно!

Второе решение – это установить плагин, который запрещает визуальному редактору менять HTML. Но все плагины, которые я нашел, не обновлялись много лет. К тому же я боялся забыть со временем и просто удалить этот плагин. В общем, это решение мне тоже не подошло.

Я использовал такое решение, но для этого нужно немножко понимать CSS. Я добавил такой вот CSS в таблицу стилей:

span.bracket:before { content: ‘[‘ }
span.bracket:after { content: ‘]’ }

а затем вставил такой код в свой пост:

<span class=”bracket”>table id=1 /</span>

И это сработало!

Какой способ запрета изменения HTML визуальным редактором лучше всего?

Честно сказать, мне не нравится ни один из перечисленных выше, но ничего лучше я не нашел. После таких глюков начинаешь сомневаться, а правильно ли сделал, что выбрал WordPress. Почему нельзя сделать так, чтобы HTML-код, созданный пользователем, имел высокий приоритет и не менялся? Если вы знаете какие-то решения лучше, чем мои способы или знаете очень хороший плагин, то поделитесь, пожалуйста, своими мыслями в комментариях. Спасибо! Хорошего вам настроения! 🙂

Как выводить шорткоды WordPress “как есть”: еще один способ

Уже после того, как я написал эту статью, я случайно наткнулся на еще один способ выводить шорткоды “как есть”, для этого необходимо добавить вторые квадратные скобки: [[table id=1 /]], и тогда шорткод будет выводиться “как есть”: [table id=1 /]. При этом при переключении из визуального редактора в текстовый и обратно никаких замен не происходит.