Фиксируем рекламный блок в сайдбаре 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 подобным способом, то вероятнее всего в сайдбаре вашего сайта уже есть блоки с динамической загрузкой содержимого. В этом случае для устранения возникшей проблемы нужно данные динамические блоки убрать.

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

С уважением, Владимир Денисов!

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

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