Фиксируем рекламный блок в сайдбаре 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 для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.

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

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

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