Убираем теги <p> из текста и изображений в WordPress

Когда мы набираем текст, добавляем изображение или вставляем код в визуальном редакторе TinyMCE, WordPress по умолчанию вставляет теги <p></p> после каждого переноса строки. Это очень удобная функция, она облегчает написание статьи, автоматически разделяя текст на абзацы. Но иногда автодобавление тегов искажает отображение кода, текста или изображений. Как бы вы не редактировали свою статью, WordPress все-равно будет обрамлять содержимое в тег <p>, но это ограничение можно обойти.

Убираем теги <p> с помощью редактора TinyMCE

Разверните окно выбора типа шрифта в визуальном редакторе и нажмите строку «Отформатированный». Это самый простой способ, но в основном, он подходит для вставки кода в статью, так как оборачивает содержимое в тег <pre>.

Отключаем автоформатирование в визуальном редакторе WordPress

Если вы решили полностью отключить автоформатирование в визуальном редакторе TinyMCE и решили добавлять теги вручную, то добавьте в файл functions.php следующий PHP-код:

Отключаем автоматическое добавление тега <p> в статье.

/* Disable auto-add tags in the post */ 
remove_filter( 'the_content', 'wpautop' );

Отключаем автоматическое добавление тега <p> в анонсе.

/* Disable auto-tagging in the announcement */
remove_filter( 'the_excerpt', 'wpautop' );

Полностью отключать автоформатирование лучше в самом начале создания сайта, иначе все ваши предыдущие статьи лишатся тегов.

Убираем теги <p> из изображений

WordPress автоматически обрамляет в теги <p> не только текст, но и изображения. Если вам понадобится задать своим изображениям определенный стиль, а теги <p> мешают этому, то разместите в файле functions.php следующий PHP-код:

/* Remove the <p> tag from images */
function img_unautop($pee) {
    $pee = preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<figure>$1</figure>', $pee);
    return $pee;
}
add_filter( 'the_content', 'img_unautop', 30 );

При добавлении этого кода, все изображения будут расположены внутри тега <figure>. Его можно заменить на <div class="figure">$1</div> если вы не используете HTML5. Также данный код убирает теги <p> в ссылках, которые вставлены отдельной строкой после переноса .

Плагин для частичного отключения автоматического форматирования

Плагин Raw HTML позволяет отключить автоматическое создание абзацев и кавычек в визуальном редакторе WordPress с помощью тега raw. После установки плагина, переключитесь в текстовый редактор HTML и оберните тегами [raw]...[/raw] или <!--raw-->...<!--/raw--> ту часть содержимого, где вам необходимо отключить автоформатирование (при копировании уберите все пробелы и точки). Последний способ вставки тега не будет виден посетителям если вы решите деактивировать Raw HTML. Плагин отлично подойдет тем, кто не хочет полностью отключать автоформатирование.

Частичное отключение автоформатирования без плагина

Плагин Raw HTML очень удобно использовать, но можно обойтись и без него, если воспользоваться функцией отключения автоформатирования. Вставьте этот код в файл functions.php.

/**
 * Disable autotop in content and create the shortcode.
 */
function my_formatter($content) {
       $new_content = '';
       $pattern_full = '{(\[raw\].*?\[/raw\])}is';
       $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
       $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

       foreach ($pieces as $piece) {
               if (preg_match($pattern_contents, $piece, $matches)) {
                       $new_content .= $matches[1];
               } else {
                       $new_content .= wptexturize(wpautop($piece));
               }
       }

       return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);

Теперь переключитесь в текстовый редактор HTML и оберните тегами [ raw]…[/raw] необходимый участок контента (при копировании тега raw уберите пробелы и точки).

Как добавить элементы в теги img, a, span, meta и т.д.

Если стоит задача добавить различные элементы в HTML теги в классическом редакторе TinyMCE, например, для микроразметки Schema, то воспользуйтесь этой функцией.

//Разрешаем добавлять элементы в теги img, a, span, figure
function edit_elements_editor($init) {
    if(current_user_can('unfiltered_html')) {
        $init['extended_valid_elements'] = 'img[*],a[*],span[*],figure[*],meta[*]';
    }
    return $init;
}
add_filter('tiny_mce_before_init', 'edit_elements_editor', 20);

Чтобы заменить или добавить нужные теги, просто отредактируйте эту строку

$init['extended_valid_elements'] = 'img[*],a[*],span[*],figure[*],meta[*]';

Или скачайте плагин, который автоматически добавит элементы микроразметки Schema во все HTML теги статьи.

Отрывок кода из плагина:

'li' => array(
	'itemprop' => true,
	'content' => true,
	'datetime' => true,
),
'link' => array(
	'itemprop' => true,
	'href' => true,
	'datetime' => true,
	'content' => true,
),
'meta' => array(
	'itemprop' => true,
	'datetime' => true,
	'content' => true,
),
'p' => array(
	'itemprop' => true,
	'datetime' => true,
	'content' => true,
),
'span' => array(
	'itemprop' => true,
	'datetime' => true,
	'content' => true,
),

Таким образом можно вставить любые элементы.

Используйте Gutenberg

Благодаря новому редактору Gutenberg статью можно разделить на блоки с различным содержимым, в том числе создать блок с произвольным HTML в котором не будут автоматически добавляться открывающие и закрывающие теги <p>.

При создании блока нужно выбрать «Добавить произвольный HTML» или любой блок «Редактировать как HTML», а после редактирования сохранить как блок HTML.

Нужно учесть, что поддержка Classic Editor в WordPress продлится до 2022 года, поэтому лучше уже сейчас перейти на Гутенберг. Это действительно удобно.

Как удалить теги <p></p> из блочного виджета

Как и в текстовом виджете TinyMCE, так и в блочном виджете Гутенберг осталась проблема автоматического добавления тегов <p></p> вокруг шорткода. Таким образом WP пытается компенсировать недопустимую разметку html. Выглядит это так:

<p>[testimonial]</p>

Чтобы это исправить, вставьте шорткод в виджет «Произвольный HTML» и оберните его в div.

<div>[testimonial]</div>

Теперь проблема решена.

⚠️ Так как WordPress и его плагины могут изменяться, тестируйте любой кастомный код на промежуточном веб-сайте перед переходом в рабочую среду.