Как можно обернуть каждый абзац в div используя редактор в Wordpress?

Как можно в редакторе классическом каждый абзац обернуть в div с классом "pagging" без подрагивания экрана при загрузке? На данный момент я реализовал это на JavaScript, но возникают проблемы с поддергиванием экрана при загрузке. Можно ли сделать это через PHP без указанных проблем?
  • 18 января 2024 г. 21:38
Ответы на вопрос 2
Чтобы обернуть каждый абзац в `div` с классом "pagging" без каких-либо проблем с подергиванием экрана, лучше всего это сделать на серверной стороне, т.е., используя PHP. Здесь стоит помнить, что любые изменения, внесенные с помощью JavaScript, происходят после того, как страница загружена, что часто и приводит к подергиваниям экрана, т.к. контент модифицируется после рендеринга.

В WordPress вы можете добавить свой обработчик контента, который будет автоматически оборачивать параграфы в `div` элементы с заданным классом. Для этого используйте хук `the_content`. Вот как это можно сделать:

1. Откройте файл `functions.php` вашей темы WordPress.

2. Добавьте в него следующий код:

```php
function wrap_paragraphs_in_div($content) {
    // Разделите содержимое на массив абзацев с помощью регулярного выражения
    $paragraphs = preg_split('/(<p.*?>.*?<\/p>)/i', $content, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);
    if (is_array($paragraphs) && count($paragraphs) > 0) {
        $content = '';
        foreach ($paragraphs as $paragraph) {
            // Если это параграф (<p></p>), оберните его в div
            if (preg_match('/<p.*?>.*?<\/p>/i', $paragraph)) {
                $content .= '<div class="pagging">' . $paragraph . '</div>';
            } else {
                // Если это что-то кроме параграфа, просто добавьте это без изменений
                $content .= $paragraph;
            }
        }
    }
    return $content;
}
add_filter('the_content', 'wrap_paragraphs_in_div');
```

3. Сохраните файл `functions.php`.

После этих изменений все абзацы в содержимом постов WordPress будут автоматически обёрнуты в `div` с классом "pagging" прямо на сервере перед отправкой HTML-кода клиенту. Это избавит вас от проблем с подергиванием экрана.

Обратите внимание, что это изменение повлияет на все посты в вашем WordPress сайте, так что если вы хотите применить это изменение к определённым постам или страницам, вам придётся дополнительно обернуть код в условные проверки, используя соответствующие условные теги WordPress (например, `is_single()` или `is_page()`).
Как вариант: 
- разбить post_content по переносам строк на массив
- массив перебрать и обернуть получившиеся строки в нужный div
- собираем обратно в стоку

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