Как в редакторе обернуть каждый абзац в div wordpress?

1 ответ

Вопрос такой, в редакторе классическом есть статья, так вот нужно чтоб каждый абзац оборачивался в div с классом pagging

На js такое получилось реализовать, но сильно подрагивает экран при подгрузке, получается сначала грузится без оберток редактор, а потом уже добавляет div обертки.

Может как то можно сделать через php чтоб не было этих поддергиваний?

На js это выглядит как то так
spoiler

var $ = jQuery.noConflict(); (function ($) {      var template_next =         {             content_selector: '.article__content',              run: function () {                 var this_class = this;                  if (false === $("body").hasClass('no-content-change')) {                     this_class.normalize_content(this_class.content_selector);                 }               },              wrap: function (type, i) {                 if (type === 'padding') {                     return "&lt;div class='article__text wrap__padding  article__text_column article__holder row-" + i + "'&gt;&lt;/div&gt;"                 }                 return "&lt;div class='wrap__full wrap__common row-" + i + "'&gt;&lt;/div&gt;"             },             normalize_content: function (sel) {                 var this_class = this;                  $(sel).children('*').not("style,.fotorama--hidden").each(function (i) {                      if ($(this).hasClass('gallery__template')) {                          if ($(this).find('.block__gallery-slider').hasClass('no-full-width')) {                             $(this).wrap(this_class.wrap('padding', i));                         } else {                             $(this).wrap(this_class.wrap('full', i));                         }                      } else if (                         $(this).hasClass('width-full') ||                         $(this).hasClass('full-image') ||                         $(this).hasClass('full__width') ||                         $(this).hasClass('full-width') ||                         $(this).get(0).tagName === "FIGURE"                     ) {                          if ($(this).get(0).tagName === "FIGURE") {                             $(this).removeAttr('style');                         }                          $(this).wrap(this_class.wrap('full', i))                      } else {                          if ($(this).get(0).tagName === 'P' &amp;&amp; $(this).text().length === 1) {                             $(this).addClass('paragraph__space');                         }                          $(this).wrap(this_class.wrap('padding', i));                     }                  });                  $(sel).removeClass('padding');                 $(window).trigger('tempalte_singular_normalize_content');             }  ,         };       $(document).ready(function () {         template_next.run();     });   })(jQuery);

Дополнительно:

Напишите ваш запрос в ChatGPT, он вам сходу даст рабочую регулярку. НО регулярки довольно прожорливые, я бы подумал над другим решением вашей задачи

Если на сайте используется Gutenberg, то обертку можно добавить в фильтре render_block

Скорее всего снова ошибка молотка. 99,9% что этого ненужно. а достаточно изучить наследование и каскадирование css.

Артем Золин, Нет, работает на classic editor

Ответы:

Как вариант:
- разбить post_content по переносам строк на массив
- массив перебрать и обернуть получившиеся строки в нужный div
- собираем обратно в стоку

Не факт, что по переносам строк будет работать, классику давно не юзал.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Игорь NetOps Ответ

Да, это лучше делать на PHP при выводе контента, а не через JS после загрузки. Подёргивание появляется потому, что браузер сначала рисует обычные абзацы, а затем JavaScript меняет DOM. В WordPress можно повеситься на фильтр the_content и обернуть абзацы до отправки HTML в браузер.

Самый безопасный вариант — использовать DOMDocument, а не регулярки по HTML. Пример для обычных p внутри контента:

add_filter('the_content', function ($content) {
    if (is_admin() || !is_singular('post')) {
        return $content;
    }
 
    libxml_use_internal_errors(true);
 
    $dom = new DOMDocument();
    $dom-&gt;loadHTML('&lt;div id="wrap-root"&gt;' . mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8') . '&lt;/div&gt;');
 
    $xpath = new DOMXPath($dom);
    $paragraphs = $xpath-&gt;query('//div[@id="wrap-root"]/p');
 
    foreach ($paragraphs as $i =&gt; $p) {
        $wrapper = $dom-&gt;createElement('div');
        $wrapper-&gt;setAttribute('class', 'pagging row-' . ($i + 1));
        $p-&gt;parentNode-&gt;replaceChild($wrapper, $p);
        $wrapper-&gt;appendChild($p);
    }
 
    $root = $dom-&gt;getElementById('wrap-root');
    $html = '';
    foreach ($root-&gt;childNodes as $node) {
        $html .= $dom-&gt;saveHTML($node);
    }
 
    return $html;
}, 20);

add_filter('the_content', function ($content) { if (is_admin() || !is_singular('post')) { return $content; } libxml_use_internal_errors(true); $dom = new DOMDocument(); $dom->loadHTML('<div id="wrap-root">' . mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8') . '</div>'); $xpath = new DOMXPath($dom); $paragraphs = $xpath->query('//div[@id="wrap-root"]/p'); foreach ($paragraphs as $i => $p) { $wrapper = $dom->createElement('div'); $wrapper->setAttribute('class', 'pagging row-' . ($i + 1)); $p->parentNode->replaceChild($wrapper, $p); $wrapper->appendChild($p); } $root = $dom->getElementById('wrap-root'); $html = ''; foreach ($root->childNodes as $node) { $html .= $dom->saveHTML($node); } return $html; }, 20);

Но подумайте, действительно ли нужно оборачивать каждый абзац. Иногда достаточно CSS:

.article__content p {
    padding-left: 20px;
}

.article__content p { padding-left: 20px; }

Если обёртки нужны для сложной сетки, следите, чтобы не оборачивать абзацы внутри цитат, таблиц, списков, блоков Gutenberg и шорткодов. Иначе можно сломать разметку. Поэтому условие в XPath лучше постепенно уточнять под вашу структуру.

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

Перед внедрением обязательно проверьте записи с картинками, галереями, цитатами, таблицами и шорткодами. Фильтр the_content применяется почти везде: в single, RSS, блоках похожих записей, иногда в конструкторах. Поэтому ограничение is_singular() и конкретного post type здесь не формальность, а защита от неожиданных поломок.

Если сайт на Gutenberg, часть контента приходит не как простые абзацы, а как блоки с комментариями . В этом случае иногда лучше работать через parse_blocks() и render_block, а не через весь HTML после рендера. Для классического редактора вариант с DOMDocument обычно достаточен, но для блочного редактора тестируйте особенно внимательно.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Как в редакторе обернуть каждый абзац в div wordpress?

Дополнительно:

Ответы:

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

Вам также может быть интересно

Ежедневно, круглосуточно