Фиксируем рекламный блок в сайдбаре WordPress

Если вы решили сделать у себя на сайте «прилипший» рекламный блок в боковой колонке, который будет отображаться на фиксированном месте в окне браузера, несмотря на прокрутку страниц сайта, то данная статья для вас.

Для понимания, о чем идет речь, приведу скриншот главной страницы своего сайта (блок с рекламой я закрасил красным):

Фиксированный рекламный блок в сайдбаре Вордпресс

Кто-то спросит, для чего это нужно?

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

Кроме того, вместо рекламы можно аналогичным образом зафиксировать любой другой блок, так что статья будет однозначно полезной для вас!

Фиксированный блок в боковой колонке Вордпресс

Перейдем непосредственно к делу.

Рассматриваемая задача реализуется в три этапа.

На первом этапе нам необходимо добавить в боковую колонку (сайдбар) вашего сайта виджет под названием HTML-код:

Фиксированный рекламный блок в сайдбаре Вордпресс

В содержимое добавленного виджета нужно скопировать и вставить следующий код:

<div id="fixblock">
<!-- тут должен быть ваш код рекламы -->
</div>

В котором вместо < !-- тут должен быть ваш код рекламы -- > нужно разместить скрипт рекламного блока:

Фиксированный рекламный блок в сайдбаре Вордпресс

На третьем этапе подключаем скрипт, фиксирующий рекламный блок. Для этого добавляем код данного скрипта перед закрывающим тегом < /body > в файле footer.php:

<script type="text/javascript">
function getTopOffset(e) { 
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
return y;
}
var block = document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
if ( null != block ) {
var topPos = getTopOffset( block );
window.onscroll = function() {
var newcss = (topPos < window.pageYOffset) ? 
'top:20px; position: fixed;' : 'position:static;';
block.setAttribute( 'style', newcss );
}
}
</script>

Готово! Теперь все должно заработать.

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

Также стоит прочитать:

Как сделать красивую форму подписки Feedburner для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock detector