• Главная
>
• 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-го абзацев. По мимо этого появились ещё некоторые параметры. 

1. adsContainer: Тут указывается контейнер, содержащий рекламное объявление, которое вы хотите вставить в вашей статье.
2. insertPositions: это массив чисел, каждое из которых представляет собой номер параграфа, после которого вы хотите вставить рекламу.
3. insertEnd: эта опция определяет, следует ли вставлять еще одну рекламу в конец вашего контента. Если это значение true, то еще одна реклама будет добавлена в конец.
4. excludeContainers: Это массив строк, каждая из которых представляет собой имя класса контейнера, в котором не следует выводить рекламу.

Более подробно остановлюсь на «excludeContainers» Например в вашей статье есть контейнер, в котором выводится важная информация (Блок внимания). Обычно такие контейнеры имеют фон, иконку и текст, акцентирующий внимание на чем-то важном.

Это пример такого блока. Соответственно в таких блоках показывать рекламу не уместно.

Для этого и предназначен параметр «excludeContainers» В нём вы можете перечислить все классы тех контейнеров, в которых показывать рекламу не нужно. 

Как использовать плагина на сайте

После подключение выше указанного кода просто инициализируем скрипт и указываем нужные настройки. Сделать это можно следующим образом.

$('#content').insertContentAds({
    adsContainer: '.ads_add', // Класс контейнера с рекламой
    insertPositions: [5, 10], // После каких абзацев выводить рекламу
    insertEnd: true, // Показывать рекламу в конце поста или нет
    excludeContainers: ['warning', 'good'] // Название классов в каких блоках не показывать рекламу
});

Не забываем о том, что «#content» это контейнер, в котором находится сама статья.