Вставка рекламы в статьях после нужного абзаца на jQuery
Как вставить рекламу после определённого абзаца на сайте в тело статьи используя только jQuery? Такая задача может возникнуть, если у Вас обычный сайт, без CMS.

Если Ваш сайт работает на какой-либо CMS и Вам не хочется устанавливать очередной плагин, то этот способ Вам также подходит!
Самое важное что нам нужно, это то, чтобы статьи на всех страницах сайта находились в одном и том же контейнере. Например с классом «.content» так-как jQuery скрипт будет собирать все абзацы, только в том контейнере в котором размещена сама статья.
Подготовка рекламного блока
Создадим div контейнер с классом «.ads_add». Сам контейнер можно разместить в любом месте сайта. Это не столь важно, так как мы его скроем.
<div class="ads_add">
тут код вашей рекламы или любая другая информация..
</div>
И сразу скроем этот контейнер в css
display: none;
Важно учесть то, что все последующие скрипты должны вставляться в самом низу сайта, а сам «.ads_add» находился где-то выше.
Вставка рекламы после первого абзаца.
Начнём с реализации простого примера и вставим содержимое «.ads_add» после первого абзаца.
// Получим содержимое блока рекламы
var adsContent = $('.ads_add').html();
// Скроем исходный .ads_add
$('.ads_add').css('display', 'none');
// Вставим содержимое .ads_add после первого абзаца
$('#content p:first').after('<div class="ads">' + adsContent + '</div>');
Сначала этот код получает содержимое блока .ads_add и делает его скрытым. Затем он вставляет содержимое .ads_add непосредственно после первого абзаца внутри элемента с ID content в котором находится текст статьи.
Вот так просто, содержимое .ads_add появилось после первого абзаца, а сам исходный контейнер стал скрытым.
Как вставить рекламу после второго абзаца
Немного изменим предыдущий код и попробуем вставить рекламу после второго абзаца или любого другого.
// Получим содержимое блока рекламы
var adsContent = $('.ads_add').html();
// Скроем исходный .ads_add
$('.ads_add').css('display', 'none');
// Вставим содержимое .ads_add после второго абзаца
$('#pages_post_content p').eq(1).after($('<div class="ads">').html(adsContent));
Теперь Вы можете вставлять рекламу в любом месте статьи изменяя значение в eq(1). Но учтите то, что отсчет идёт с нуля. В данном примере содержимое «.ads_add» появится после второго абзаца.
Вставка рекламы после определенных абзацев
Например, нужно вставить рекламу после определённых абзацев. Чтобы она появилась несколько раз в теле статьи.
// Получим содержимое блока рекламы
var adsContent = $('.ads_add').html();
// Скроем исходный .ads_add
$('.ads_add').css('display', 'none');
// Определим позиции, где вставить содержимое
var positions = [1, 4, 6]; // Отсчёт начинается с нуля
// Вставим содержимое .ads_add после каждого указанного абзаца, если они есть
positions.forEach(function(index) {
var paragraph = $('#content p').eq(index);
if (paragraph.length) {
paragraph.after($('<div class="ads">').html(adsContent));
}
});
Укажите в массиве «positions» номера тех абзацев после которых Вы хотите показывать рекламу. Тут также не забываем, что отсчёт начинается с нуля.
Добовляем больше возможностей
Предлагаю сделать небольшой JQuery плагин для вставки рекламы в свои посты и попутно расширить функционал.
Основное, что необходимо учесть — это индексацию абзацев. Ранее отсчет начинался с «0» и если указать скрипту «1» то реклама появится после второго абзаца. Это нужно исправить, так как это очень неудобно.
JQuery плагин для вставки рекламы в статьи
Приведённый ниже код можно также оставить в подвале сайта. Или, для удобства, вынести в отдельный файл и подключить к сайту все в том же подвале.
(function ( $ ) {
$.fn.insertContentAds = function(options) {
// Получить содержимое контейнера рекламы
let adsContent = $(options.adsContainer).show().html();
// Если рекламы нет, не выполняем остальной код
if (!adsContent.length) {
console.warn('Ads container not found');
return this;
}
// Скрываем исходный блок рекламы
$(options.adsContainer).hide();
// Получим все абзацы, которые не находятся в запрещённых контейнерах
let paragraphs = this.find('p').filter(function() {
let parent = $(this).parent();
for(let i = 0; i < options.excludeContainers.length; i++) {
if(parent.hasClass(options.excludeContainers[i])) {
return false;
}
}
return true;
});
// Вставка рекламы после каждого указанного абзаца
options.insertPositions.forEach((index) => {
paragraphs.eq(index-1).after($('<div>').html(adsContent)); // -1 теперь вычитается из каждого индекса
});
// Вставка рекламы в конце поста, если в настройках указано true
if(options.insertEnd){
this.append($('<div>').html(adsContent));
}
return this;
};
}( jQuery ));
Теперь отсчет индексов начинается с 1, а не с 0. То есть, если в insertPositions указано [1, 3, 5], реклама будет вставлена после 1-го, 3-го и 5-го абзацев. По мимо этого появились ещё некоторые параметры.
- adsContainer: Тут указывается контейнер, содержащий рекламное объявление, которое вы хотите вставить в вашей статье.
- insertPositions: это массив чисел, каждое из которых представляет собой номер параграфа, после которого вы хотите вставить рекламу.
- insertEnd: эта опция определяет, следует ли вставлять еще одну рекламу в конец вашего контента. Если это значение true, то еще одна реклама будет добавлена в конец.
- excludeContainers: Это массив строк, каждая из которых представляет собой имя класса контейнера, в котором не следует выводить рекламу.
Более подробно остановлюсь на «excludeContainers» Например в вашей статье есть контейнер, в котором выводится важная информация (Блок внимания). Обычно такие контейнеры имеют фон, иконку и текст, акцентирующий внимание на чем-то важном.

Это пример такого блока. Соответственно в таких блоках показывать рекламу не уместно.
Для этого и предназначен параметр «excludeContainers» В нём вы можете перечислить все классы тех контейнеров, в которых показывать рекламу не нужно.
Как использовать плагина на сайте
После подключение выше указанного кода просто инициализируем скрипт и указываем нужные настройки. Сделать это можно следующим образом.
$('#content').insertContentAds({
adsContainer: '.ads_add', // Класс контейнера с рекламой
insertPositions: [5, 10], // После каких абзацев выводить рекламу
insertEnd: true, // Показывать рекламу в конце поста или нет
excludeContainers: ['warning', 'good'] // Название классов в каких блоках не показывать рекламу
});
Не забываем о том, что «#content» это контейнер, в котором находится сама статья.
Комментарии