Рекламный Ad в теле поста
На одном сайте, работающем на WordPress, понадобилось вставить рекламу от Гугля прямо в тело поста. Баннер AdSense изначально располагался после заголовка поста, перед его началом и был обёрнут div с классом .ad_single. Надо было засунуть его именно после 3-го абзаца <p>.
Решение выглядит так:
<script type=”text/javascript” src=”http://site.ru/jquery-1.4.2.min.js”></script>
<?php if(is_single()) { ?>
<script type=”text/javascript”>
$(document).ready(function(){
$T=$(’.title’).eq(0);
$P=$(’.entry p’);
$P1=$P.eq(0);
$P2=$P.eq(1);
$P3=$P.eq(2);
$T.after($P1);
$P1.after($P2);
$P2.after($P3);
$(’.ad_single’).show();
})
</script>
<?php } ?>
Объяснение: первая строка подключает JavaScript-библиотеку JQuery, которая удобна для всяких таких фокусов. Кто-то воротит нос от готовых библиотек (к примеру, Леонид Каганов), но JQuery - это фактически уже индустриальный стандарт. Её используют даже в Twitter, так что не вижу проблем с тем, чтобы использовать её в менее крутых проектах.
Вторая строка и последняя - вставки на PHP, имеют смысл для WordPress. Они нужны, чтобы магический скрипт срабатывал только на отдельных страницах. В принципе, не обязательно.
Смысл основного кода - берём заголовок с датой и рубриками (всё упаковано в класс .title), берём первые три абзаца в теле поста (.entry p), а затем пристыковываем их один за другим после заголовка и даты. Элемент с рекламой Гугля, таким образом, как бы остаётся на месте, но для пользователя появляется после третьего абзаца.
Реклама от Гугля по дефолту была скрыта через CSS (display:none). Последняя строчка в магическом скрипте отменяет его невидимость и показывает рекламу. В противном случае пользователь увидит, как реклама прыгает туда-сюда.
Как это выглядит, можно посмотреть в посте про самый крутой iPad.
Примечания:
1. добавление существующего элемента эквивалентно его перемещению в документе
2. Скрипт мог бы выглядеть проще: берём третий абзац $P3=$(’entry p’).eq(2); , а потом добавляем после него блок с рекламой - $P3.after(’.ad_single’);
Всего две строчки. Но я выяснил, что подобный код не работает в Firefox - страница после загрузки просто перестаёт отображаться, хотя в IE и Chrome всё работало отлично. Поэтому я переписал скрипт так, чтобы не трогать элемент с рекламой, а таскать туда-сюда статические куски текста с кодом.
3. вместо классов неплохо бы использовать ID, как более быстрые в плане выборки, но я был привязан к текущей теме WordPress, где элементы обозначались через классы.