♛ FORTRESS-DESIGN

Вордпресс редактирует (чистит) код. Что делать?

Кодирование в Вордпресс

Julia Tim / Shutterstock.com

Как удалить тег «p» в WordPress

WordPress автоматически форматирует параграфы тегами , используя фильтр wpautop.

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

Плагин wpautop control

Так вот, чтобы облегчить жизнь таким пользователям, bigsmoke, написал специальный плагин wpautop control (WordPress Auto Paragraph, наверное он так расшифровывается).

После установки плагина, в настройках плагина (Параметры→wpautop control options) простым нажатием флажка можно отключить все теги p.

Normally, WordPress filters your posts’ content using the wpautop filter. Roughly, what this filter does is that it replaces newlines and empty lines with <br /> or <p>. The setting below lets you turn this filter on or off. (You can later override it on a post-by-post basis by setting the wpautop custom field to ‘true’ or ‘false’.)

wpautop filter on by default?

Но этот плагин тоже не всегда помогает.

Редактирование файла functions.php

Если не хотите устанавливать плагин, то можно добавить в файл functions.php вашей темы одну строчку (можно в конце файла).

remove_filter('the_content', 'wpautop');

Но я столкнулся с другой проблемой.

Как избежать от автоматического форматирования текста в WordPress

Сейчас я объясню с чего всё началось. Мне нужно было на сайте клиента отформатировать страницу с наградами и их описанием. Сайт работает под управлением ВордПресс.

Чтобы отформатировать (сделать отступы) с помощью перевода строк, да и еще на 3-х языках, у меня ушел целый час времени! Почему? Потому что Вордпресс сам редактирует код. Для решения данной проблемы, добавлять стили к картинке я не хотел, потому что клиент не сможет его применить с помощью стандартного визуального редактора.

Из-за того что текста мало, дипломы наползали друг на друга. И приходилось добавлять &nbsp;. Но они жили не так долго: при переключении из визуального режима в HTML, Вордпресс их склеивал и оставлял ровно столько, сколько хотел. В результате чего бесследно уничтожая всю проделанную работу.

То есть форматирование отступами с помощью перевода строк не помогало. На выходе все было отформатировано: перевод строк сокращен до одного. Я читал, что некоторые даже пытались отключить визуальный редактор (полезно прочесть ветвь обсуждение «WordPress чистит код. Как бороться» на форуме русский ВордПресс), но это тоже было бесполезно — значит Вордпрес пропускает текст через специальный фильтр.

С этим мириться никак было нельзя и пришлось искать в нете возможные пути решения данной проблемы.

В первую очередь пришла мысль воспользоваться одним из двух вариантов:

  1. Добавить текст, чтобы он автоматически заполнял свободное пространство.
  2. Обрамлять каждый блок (текст + картинка) отдельным дивом, который не будут наползать друг на друга.

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

Верстать с помощью клавиши «Enter» в Вордпрессе не только неправильно, но и гемморойно

Ну, хорошо, я прописал тегу h3 свойство clear, с параметром both, чтобы исключить обтекание с правого и левого края.

.cont h3
 clear: both;
}

Но как задать отступ снизу у картинки сертификата? Ведь в Вордпрессе верстка делится на шаблон для рубрик и шаблон одной записи. То есть изменние коснется всего сайта. И у всех картинок появится отступ.

Нужно каким-то образом уникализировать эти картинки, например поместить их, да и не только их, а лучше сразу весь контент страницы «Награды» в отдельный див awards, через который можно легко обратиться к картинкам. А в CSS прописать им отступы вот так:

div.awards img {
 margin-bottom: 50px;
 padding-left: 2em;
}

Вот это и сработало!

Но это еще не все. Я нашел супер мега-плагин TinyMCE Advanced. У него в настройках можно поставить флажок, чтобы Вордпресс не удалял теги p и br, когда сохряняет и отображает их в HTML-редакторе.

Я его установил на свой блог. Но, к сожалению, он тоже не без недостатков. Этот плагин не позволит отобразить тег так каким мы его видим в HTML. То есть, он убивает угловые скобки, которые шифруются кодами &lt; и &gt;, левая и правая соответственно. Но, за то в режиме кода, вы можете видеть родной HTML со всеми тегами!

Кстати очень странно, но у меня этот плагин стал полезным лишь, когла я убрал флажок (как отмечено желтым маркером).

В WordPress в настройках можно отключить функцию автоматического исправления некорректного XHTML-кода.

Настройки → Написание → «WordPress должен исправлять некорректный XHTML-код автоматически»

Скриншот сделан в 4.8 версии Вордпресс

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


Перейти к верхней панели