Adsense в динамической боковой панели WordPress

Блок контекстной рекламы Adsense у меня довольно давно находится в боковой панели. Не так давно до меня дошло, что панель имеет динамический размер (22% от тела страницы) и в зависимости от расширения экрана (и размера окна браузера) блок рекламы 250х250 px немного портит внешний вид страницы.

Закономерно нарисовалась задачка: Как отображать рекламные блоки Adsense разной ширины в зависимости от расширения экрана посетителя?

К сожалению с помощью php нельзя определить расширение экрана, поскольку php выполняется на сервере и ни один параметр запроса не передает ширину экрана клиента. Поэтому подход с functions.php отпадает.

В свою очередь javascript выполняется на стороне клиента и с помощью его можно определить какой же ширины конечное изображение у клиента.

Разбор рекламного кода я проводил в первой статье

Нас интересует серединка этого всего, а именно class="adsbygoogle", так как для каждого блока он будет разный.

Дальше переходим в свою учетную запись AdSense и включаем рекламные блоки нужных размеров. В моем случае это:

• 125х125
• 180х150
• 200х200
• 250х250
• 300х250

И на основе секции, в которой описано class="adsbygoogle" создаем нужный скрипт:

<script>
width = window.innerWidth;
window_percentage = (window.innerWidth/100)*95;
sidebar_percentage = Math.round((window_percentage/100)*22);

if ((sidebar_percentage > 125)&&(sidebar_percentage <= 180)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:125px;height:125px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 180)&&(sidebar_percentage <= 202)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:180px;height:150px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 202)&&(sidebar_percentage <= 250)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:200px;height:200px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 251)&&(sidebar_percentage <= 301)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:250px;height:250px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 301)&&(sidebar_percentage <= 402)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:300px;height:250px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
}
</script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</center>

В моем случае размер основного тела занимает 95% от ширины страницы:

window_percentage = (window.innerWidth/100)*95

От него 22% - ширина боковой панели:

sidebar_percentage = Math.round((window_percentage/100)*22)

Дальше идет простой перебор условий и отображение необходимого блока, в зависимости от ширины экрана.

Теперь блок рекламы в сайдбаре не портит внешний вид страниц. Провозился пол дня, зато какой эффект.

Этот подход применим и другим рекламным и не рекламным блокам.