Удалить теги 'p' вокруг шорткодов и 'img'.

Удалить теги ‘p’ вокруг шорткодов и ‘img’.

На чтение 4 мин Опубликовано 07.01.2025

Содержание

Вопрос или проблема
Ответ или решение
Фон проблемы
Причина проблемы
Решение проблемы
Заключение

Вопрос или проблема

У меня возникли проблемы с удалением тегов параграфа вокруг шорткодов.

Я попробовал это решение безуспешно. Как сделать так, чтобы HTML-редактор не добавлял теги к шорткодам, изображениям и т.д.
и это – исправление шорткода пустого параграфа в WordPress.

Мои шорткоды созданы так, чтобы быть открытыми и закрытыми [div]—[end-div]. Не уверен, важно ли это. См. пример кода ниже.

add_shortcode('div', 'be_div_shortcode');
function be_div_shortcode($atts) {
    extract(shortcode_atts(array('class' => '', 'id' => '' ), $atts));
    $return = '<div';
    if (!empty($class)) $return .= ' class="'.$class.'"';
    if (!empty($id)) $return .= ' id="'.$id.'"';
    $return .= '>';
    return $return;
}
/* Close Div */
add_shortcode('end-div', 'be_end_div_shortcode');
function be_end_div_shortcode($atts) {
    return '</div>';
}

Посмотрите на скриншот HTML: http://catalpha.com/images/code.png
Посмотрите на скриншот редактора страницы: http://catalpha.com/images/builder.png

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

Кроме того, p берется из содержимого. Вы должны использовать [div]....[/div] и тогда вы получите содержимое в качестве второго параметра для функции шорткода, и вы можете форматировать его как угодно. Так работает первый шорткод в вашем примере.

Ответ или решение

Уважаемый пользователь,

Вы столкнулись с распространенной проблемой с шорткодами в WordPress, когда вокруг них и изображений добавляются теги абзаца . Давайте рассмотрим, как этого избежать и оптимизировать код для лучшего взаимодействия.

Фон проблемы

Ваша задача — устранить автоматическое добавление тегов  вокруг шорткодов и изображений. Это может быть особенно актуально, когда ваш код представляется в HTML-редакторе. Разберем возможное решение проблемы.

Причина проблемы

WordPress по умолчанию обрабатывает контент с применением функции wpautop, которая автоматически добавляет теги  для форматирования текста. Это удобно для обычного текста, но в случае шорткодов может вызвать нежелательные эффекты.

Решение проблемы

Использование фильтра remove_filter: Вам нужно отключить автоматическую обработку функции wpautop для шорткодов. Вот пример кода, который поможет убрать эти теги:

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'custom_wpautop', 99);
add_filter('the_content', 'shortcode_unautop', 100);

function custom_wpautop($content) {
   // возвращаем обработанный контент с исключением шорткодов и изображений
   return wpautop($content, false);
}

function shortcode_unautop($content) {
   $content = do_shortcode( shortcode_unautop($content) );
   return $content;
}

Шорткод с контентом: Как упомянуто, использование структуры [div]...[/div] позволяет вашему шорткоду обрабатывать контент внутри. Например:

add_shortcode('div', 'be_div_shortcode');
function be_div_shortcode($atts, $content = null) {
   extract(shortcode_atts(array(
       'class' => '', 
       'id' => ''
   ), $atts));

   $return = '<div';
   if (!empty($class)) $return .= ' class="'.$class.'"';
   if (!empty($id)) $return .= ' id="'.$id.'"';
   $return .= '>';

   $return .= do_shortcode($content);
   $return .= '</div>';
   return $return;
}

Заключение

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

Если вы хотите расширить свои знания, советую обратить внимание на документацию WordPress касательно работы с фильтрами и шорткодами. Это позволит вам более эффективно решать подобные задачи в будущем. Выдвигаясь за рамки традиционного использования шорткодов, убедитесь, что ваш подход согласуется с архитектурой системы, что приведет к более устойчивая и производительная среда работы.

С уважением,

[Ваше имя]
IT-эксперт