Как изменить разметку html в контенте WordPress?

Хочу оформить контентную часть страницы вот таким образом Разметка

            <ul class="about-list">
              <li>
                <h5 class="mb-2"><i class="icofont icofont-check-circled"></i>Что-то</h5>
                <p>Тут есть текст</p>
              </li>

              <li>
                <h5 class="mb-2"><i class="icofont icofont-check-circled"> </i>Крутой текст</h5>
                <p>Крутой текст</p>
              </li>

              <li>
                <h5 class="mb-2"><i class="icofont icofont-check-circled"> </i>Я есть люблю</h5>
                <p>Какая то информация на сайте есть лишь бы текста было много</p>
              </li>
              <li>
                <h5 class="mb-2"><i class="icofont icofont-check-circled"> </i>Я есть люблю</h5>
                <p>Какая то информация на сайте есть лишь бы текста было много</p>
              </li>
            </ul>

Что я хочу

Делаю в вордпрессе страницу через блоки Gutenberg и если присвоить просто класс icofont icofont-check-circled, то он оборачивает весь h5 в этот класс и стили самого тайтла сбиваются в следствии чего получается так вот так получается

как можно через function.php поменять разметку через фильтры у тайтла h5 и в него добавить в него тег i


Ответы (1 шт):

Автор решения: Xva1er

Решение, к которому пришел я:

    function add_icon_to_h5_on_page_21($content) {
     if (is_page(21)) {
      $content = preg_replace('/<h5(.*?)>(.*?)<\/h5>/', '<h5$1><i class="icofont 
      icofont-check-circled"></i>$2</h5>', $content);
     }
     return $content;
    }
    add_filter('the_content', 'add_icon_to_h5_on_page_21');
→ Ссылка