Логичное и лёгкое добавление на сайт рекламных блоков Google AdSense или Яндекс

Сегодня я хочу рассказать, как запросто добавить рекламу на свой сайт.

 

На мой взгляд, предложенных в статье способов достаточно для полноценной работы с контекстной рекламой, не мудрствуя лукаво и не путаясь в дальнейшем с разбросанным по статьям рекламным скриптом…

 

 

 

 

 

 

 

 

 

 

 

 

Как добавить на сайт код рекламы Google AdSense и Яндекс

 

 

 

 

Во-первых, не стоит слишком заморачиваться всевозможными способами размещения рекламного кода, иначе в будущем неразбериха и волокита с перередактированием множества статей будет обеспечена. Как правило, через какое-то время понимаешь, что, как ни старался, но всё же сделал неудобное расположение вывода рекламы как для себя, так и для посетителей сайта…

 

 

Во-вторых, стоит определиться, каким способом будете реализовать вывод рекламы, скажем, Гугл Адсенс – при помощи множества плагинов или путём вставки кода рекламы непосредственно в скрипт сайта. ?? Я выбрал второе.

 

 

…и если вам этот способ подходит (ниже дам ещё пару оч-полезных примеров)) – давайте приступим к работе.

 

 

 

 

как добавить на сайт код контекстной рекламы Google

 

 

 

 

Первое что вам будет нужно, это получить сам рекламный код от Гугл. Ну, а если он у вас есть, то всё просто.

 

 

Немного поясню: для начала расставим код рекламы классически, то есть в сайдбарах (если это нужно), вверху и внизу перед/после всеми записями на главной странице, и вверху/внизу в категориях соответственно. Далее расставим рекламный код объявлений непосредственно в статье. Думаю, что и в статях нужно размещать контекстную рекламу недалеко отходя от классики, то есть вверху статьи и где-то снизу.

 

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

 

 

Значит, открываете поочерёдно документы вашей темы: index.php, category.php, у кого-то может быть post-page.php и single.php … и путём подбора наиболее правильного, на ваш взгляд, места в скриптах этих документов, вживляем полученный в Google AdSense код контекстной рекламы.

 

 

Я коротенько поясню на примере index.php, и перейдём к более симпатичному и полезному решению.

 

 

Открываем index.php и прописываем наш рекламный код так, как на картинке (если вас что-то не устроит, в смысле расположения ОБЪЯВЛЕНИЯ на сайте выше/ниже, то это вы всё поправите сами опытным путём, переставляя рекламный код в самом документе «индекс» и т.п.).

 

 

Так: код рекламы в нашем случае будет расположен вверху главной страницы сайта.

 

 

Кликните по фотке…

 

 

 

 

 

 

Обратите внимание: зелёным подчёркнут div класс, свойства которого по необходимости можно будет обозначить в файле style.css, на тот случай если вам потребуется задать рекламному блоку уникальные CSS стили.

 

 

Код рекламы:

 

 

<div id="adsens"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- михалика -->
                <ins class="adsbygoogle"
                style="display:inline-block;width:320px;height:100px"
                data-ad-client="ca-pub-6936094744444444"
                data-ad-slot="4444444444"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
 

 

 

Ниже даю лёгенький рабочий код css, который просто добавите куда-нить в финал файла style.css

 

 

 

#adsens {
margin:10px 0 10px 0; /* ОТСТУПЫ ДРУГИХ ДЕТАЛЕЙ САЙТА ОТ БЛОКА ГУГЛ */
/*box-shadow: 1px 1px 7px #4A4A4A; обозначение блока, если нужно*/
}

 

 

Всё! Смотрите, как у вас получилось..?

 

 

Потом всю эту прописку кода Гугл рекламы точно так же повторяйте и в других файлах вашей темы — category.php (категорий) и т.п.

 

 

Ну и переходим к следующему шагу:

 

 

 

 

добавляем рекламу Google после тега more

 

 

 

 

В этом случае поступим несколько иначе: откроем файл functions.php и в самом его финале пропишем следующую кодовую сборку для вывода контекстной рекламы Google AdSense после тега «more»:

 

 

<?php
// после тега more
function adsgoolge_ssd($content) {
    $google_ads='<div id="adsens"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- WEB -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-69360944444444"
     data-ad-slot="444444444"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
    ';
    $content=preg_replace('#<span.*?id="more-(.*?)".*?></span>#','<span id="more-\1"></span></p>'.$google_ads.'<BR><p style="text-align: justify;">',$content);
    return $content;
    }
    add_filter('the_content', 'adsgoolge_ssd');

 

 

 

Всё это сохраняем… и проверяем на сайте…

 

 

Да, кстати, не забудьте что и этот рекламный код контекстной рекламы так же подчиняется нашим свойствам CSS, прописанным в файл стилей, ибо тоже «ЗАВЁРНУТ» в ДИВ.

 

 

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

 

 

 

 

как запретить вывод блока рекламы в определённых статьях – после more

 

 

 

 

 

Вот второй вариант: этим способом можно задавать статьи, в которых будет показываться реклама… То есть – запретить отображение блоков кроме исключительных статей.

 

 

…впрочем, вот код:

 

 

// новая реклама CUT
add_filter('the_content', 'adsense_added_at_more_tag');
function adsense_added_at_more_tag($text) {
if( is_single() ) :
$ads_text = '
<div class="reclamy"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- МИХАЛИКА2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-6936094744444444"
data-ad-slot="7222704444"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
';
$pos1 = strpos($text, '<span id="more-');
$pos2 = strpos($text, '</span>', $pos1);
$text1 = substr($text, 0, $pos2+7);
$text2 = substr($text, $pos2+7);
$text = $text1 . $ads_text . $text2;
endif;
return $text;
}
// ФИН новая реклама CUT

 

 

 

 

 

 

Ну а вот приблизительный селектор css – его разовьёте самостоятельно.

 

.reclamy{margin:10px;text-align:center}

 

 

 

 

 

как добавить рекламу с помощью шорткодов

 

 

 

 

…это способ запросто справится с задачей тех блогеров, которые пишут ёмкие статьи, и им приходится дополнительно «разбавлять» свои ПОСТы рекламой.

 

 

Важно! …я бы мог предложить такой код, который автоматически вставляет рекламу после назначенных тегов, например, H2, H3 или H4… но он меня не особо прикалывает, ибо трудно выучится писать статьи в строго отведённых рамках, прописывая в чёткой последовательности подзаголовки статей (теги), после которых планируется реклама. Муторно это, подумал я! …и изыскал более удобный вариант, а именно, выводить рекламный код там, где вздумается админу, лёгким движением руки, с помощью широко известных шорткодов. Тем более у меня для вас есть вкусное решения вывода этих самых шорткодов, но об этом ниже.

 

 

Итак: вновь открываем наш functions.php и после установленного нами выше кода, прописываем (не забываем, перед тегом «?>») новую функцию, в которую и поместим рекламный код Google AdSense …

 

 

 

//шорткод
function mihalica_context() 
{
return '<div id="adsens">ВАШ 
           РЕКЛАМНЫЙ 
 
        КОД</div>';
}    
add_shortcode ('adsense', 'mihalica_context');

 

 

 

И как только пропишете, сохраните… этот код тут же заработает, а вам останется только в нужном месте статьи вставить тег шорткода…

 

 

Теперь ещё секундочку внимания… Знаете, прописывать в каждой статье эти шорткоды, мне тоже показалось муторно… и я вздумал-с найти способ решения и этой задачи. Нашёл! …и спешу поделиться с вами. Взгляните на фото текстового редактора WordPress TinyMCE.

 

 

 

 

 

 

Зелёным подчёркнуты кнопочки, кликнув по которым запросто вызываются и автоматом вставляются теги шорткодов: «приветствие» «подписаться по…» «подсветка текста»…

 

 

Красным же, кнопочки для быстрой вставки шорткода рекламы. «G» — это понятно. Я» — это реклама Яндекс Директ, о которой будет в следующих статьях.

 

 

Как эти кнопочки реализуются в редакторе WordPress, у меня подробно описано в статье Добавляем свои кнопки в визуальный редактор WordPress TinyMCE прочитав которую, вы запросто научитесь добавлять нужные вам инструменты к себе в редактор.

 

 

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

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

Упреждаю резонный ваш вопрос: «а если мне когда-то потребуется убрать рекламу? …что, товарисч, придётся лазить по всем статьям и зачищать остатки этих самых шорткодов??»

 

 

Отвечаю, нет, друзья! Любой ненужный тег шорткода запросто убирается пропиской одной строки кода в файл functions.php. После чего весь «мусор» тегов убираются и можно снова реализовывать новый регламент вывода рекламы. Но об этих полезных мелочах в рубрике и метке Хаки ВидеоХаки, а ИМЕННО в статье Хак — Как избавиться от отработанных тегов шорткода

 

 

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

 

 

А вот и обзорное видео: