Взрывать контент внутри конкретного HTML элемента

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

Содержание

Вопрос или проблема
Ответ или решение
Понимание структуры HTML
Изменение функции
Объяснение данного кода
Пример использования функции
Заключение

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

Я пытаюсь вставить код рекламы на сайт после определенного количества элементов. Основной код, который я использую, был получен из тегов

(из: http://www.wpbeginner.com/wp-tutorials/how-to-insert-ads-within-your-post-content-in-wordpress/):

function prefix_insert_after_list_item( $insertion, $paragraph_id, $content ) {
  $closing_p = '</p>';
  $paragraphs = explode( $closing_p, $content );
  var_dump($paragraphs);
  foreach ($paragraphs as $index => $paragraph) {

    if ( trim( $paragraph ) ) {
      $paragraphs[$index] .= $closing_p;
    }

    if ( $paragraph_id == $index + 1 ) {
      $paragraphs[$index] .= $insertion;
    }
  }

  return implode( '', $paragraphs );
}

Вместо абзацев я пытаюсь вставить их между определенными элементами. Вот моя структура HTML:

<div class="listing">
  <div class="list-item">
  </div>
  <div class="list-item">
  </div>
  <div class="list-item">
  </div>
  <div class="list-item">
  </div>
</div>

Я хотел бы вставить рекламу между элементами списка. Замена $closing_p = '</p>'; на $closing_p = '<div class="list-item">'; похоже, не срабатывает. Существует ли способ нацелиться на общий элемент $content в WordPress, а затем нацелиться на ‘s внутри родительского ‘listing’? Или есть другой/лучший способ сделать то, что я пытаюсь сделать?

Вы должны быть в состоянии заставить это работать, изменив на следующее:

$closing_p = '</div>';

Надеюсь, я ничего не упустил

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

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

Понимание структуры HTML

Ваши HTML-элементы имеют следующую структуру:

<div class="listing">
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
</div>

Здесь вы хотите вставить рекламные блоки между элементами с классом list-item. Для этого вам нужно заменить ваше текущее выражение для закрывающего тега с </p> на </div>.

Изменение функции

Ниже представлена ваша модифицированная функция, которая необходима для вставки кода рекламных объявлений между элементами списка:

function prefix_insert_ads_between_list_items( $insertion, $list_item_id, $content ) {
    $closing_div = '</div>'; // Закрывающий тег элемента списка
    $items = explode($closing_div, $content); // Разделяем контент по закрывающим тегам

    foreach ($items as $index => $item) {
        if (trim($item)) {
            // Добавляем закрывающий тег обратно к элементу
            $items[$index] .= $closing_div;

            // Вставляем рекламу после нужного элемента
            if ($list_item_id == $index) {
                $items[$index] .= $insertion; // Вставляем код
            }
        }
    }

    return implode('', $items); // Объединяем элементы обратно в строку
}

Объяснение данного кода

Разделение контента: Мы используем explode, чтобы разделить исходный контент на массив, разбивая его по закрывающему тегу </div>.
Итерация по элементам: Мы перебираем массив и добавляем закрывающий тег обратно к каждому элементу. Это необходимо для правильной структуры HTML.
Вставка рекламного кода: Если текущий индекс соответствует list_item_id, мы добавляем рекламный код сразу после соответствующего элемента. Измените переменную $list_item_id на то, после какого элемента вы хотите вставить рекламу.

Пример использования функции

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

$ad_code = '<div class="ad">Реклама</div>'; // Ваш рекламный код
$content = '<div class="listing"><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div></div>';

$new_content = prefix_insert_ads_between_list_items($ad_code, 1, $content); // Вставка после второго элемента

Заключение

Убедитесь, что вы убедились в правильности вашей HTML-структуры и протестировали код. Приведение функции к правильности структуры является важным для корректного функционирования.

Следуя данному подходу, вы сможете эффективно управлять вставкой контента между определенными элементами HTML в WordPress и улучшить пользовательский опыт на вашем сайте.