Знать необходимо не затем, чтоб только знать, но для того, чтоб научиться делать.
Максим Горький

Как мы уже выясняли в статье про подготовку блога к сапе, страницы 2-го уровня это наш основной доход, и чем их больше, тем плотнее будем кушать. Некоторые рецепты там уже даны, поэтому пойдем дальше и сделаем переключаемые табы в сайдбаре со всевозможнами ссылками. Всю конструкцию мы сделаем из 3-х вкладок, которые дадут мощный прирост второуровневых страниц.

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

Итак, нам понадобится один яваскриптик (tabs.js), файлы header.php и sidebar.php из установленной темы. В каталоге темы создаем папку “javascript” и в нее кладем наш файлик со скриптом. Все, полдела сделано. Теперь открываем header.php и добавляем в Head такую строчку с нашим скриптом:

<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/javascript/tabs.js”> </script>

Всё, вторая половина дела сделана, осталась третья и последняя! Она же правда и сама сложная. Открываем sidebar.php и в то место, где хотим увидить наши вкладки добавляем такой код:

<div class=”SR”>
<div class=”recent”>
<ul>
<li><a href=”#tab-posts”>Недавнее</a></li>
<li><a href=”#tab-tags”>Метки</a></li>
<li><a style=”margin-right:0px;” href=”#tab-comments”>Популярное</a></li>
</ul>
<?php if (function_exists(’akpc_most_popular’)) { ?>
<ul id=”tab-comments”>
<?php akpc_most_popular(); ?>
</ul><?php } ?>
<ul id=”tab-posts”>
<?php $posts = get_posts(”numberposts=10&orderby=post_date&order=DESC”); foreach($posts as $post) : ?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<div id=”tab-tags”>
<?php wp_tag_cloud(”); ?>
</div>
</div></div>

В качестве примера выступают 3 вкладки – “Недавнее”, “Популярное” и “Тэги”. В недавнем отображаются 10 последних постов, в популярное выводятся записи отсортированные плагином Popularity Contest, а тэги и так ясно. Можно вставлять во вкладки любой код и менять их содержимое как больше нравится. Но тут неблагодарный читатель остановит меня и задаст коварный вопрос: – А где же собственно вкладки, все ссылки выдаются как попало? И правда, надо же еще прописать стили:

.SR { width: 200px; margin-right: 0px; padding-bottom: 30px; float: left;}
.SR .recent { background: #ffffff; padding: 0px; margin-bottom: 3px; }
.SR .recent .tabs { overflow: hidden; }
.SR .recent .tabs { height: 1%; }
.SR .recent .tabs li { float: left; background: none; }
.SR .recent .tabs li a { float: left; font: 14px; color: #2175BC; padding: 3px 3px 6px 3px; background: #cdeb8b url(images/tabs-inactive.png) no-repeat bottom center; margin-right: 0px; text-decoration: none;}
.SR .recent .tabs li a.active, .SR .recent .tabs li a:hover { background: #4096EE url(images/tabs-active.png) no-repeat bottom center; color: #fff; text-decoration: none; }
.SR .recent a, .SR .recent a:visited { color:#2175BC; text-decoration: underline;}
.SR .recent a:hover { color:#FF7400; text-decoration: underline;}

#tab-comments { display: none; margin-bottom: 5px; }
#tab-comments li { padding: 4px 0px 4px 2px; border-bottom: solid 1px #c5ded7; font-size: 11px; color:#2175bc;}
#tab-comments li a { display: block;}
#tab-posts { margin-bottom: 5px; font-size: 11px; }
#tab-posts li { line-height: 14px; padding: 1px 0px 1px 2px;}
#tab-tags { display: none; margin-bottom: 5px; font-family: “Verdana”; line-height: 22px;}

Вот как-то так. Теперь все работает и очень даже здорово много полезных ссылок прячется на вкладках и не занимает тьму места. Да, забыл сказать, файлик tabs-active.png нужен, чтобы внизу на табе была стрелочка.

Если ты знаешь, как в недавних вывести посты с 5 по 15, а не 1-10, как по дефулту, то расскажи в комментах и получи постового в этой записи!

Хорошего контента и прибыли жирненькой!

Похожие записи

• Сапёр выходит на промысел (0)
• Финансовый итог 2009 (1)
• Стриптиз октября (0)
• СПАМ маст дай! (0)
• Сентябрьское стрипшоу (0)