Давно хотел добавить виджеты в подвал одного из своих блогов. Наконец добрался и до этого, очень кстати подвернулось руководство по этой теме, которым я хочу поделиться. Из этого руководства ты узнаешь как добавить в свою тему подвал с блэкджеком и шлюхами виджетами.
В этом посте будет очень много кода, приготовься и читай дальше…
HTML
Первый шаг, вставить HTML разметку. Допустим мы будем использовать в подвале три отдельных секции Список Последних Постов, Архив по Месяцам и Архив по Дням. Поместим этот код в файл footer.php сразу над строкой с копирайтами. Перед редактированием файлов не ленись делать резервные копии.
<div class="footer-item"> <h3>Recent Posts</h3> <ul> <li><a href='#' title='Featured post'>Featured post</a></li> <li><a href='#' title='Blockquotes'>Blockquotes</a></li> <li><a href='#' title='How the ‘more’ tag works'>How the ‘more’ tag works</a></li> <li><a href='#' title='Order or Unorder'>Order or Unorder</a></li> </ul> </div> <div class="footer-item"> <h3>Monthy Archives</h3> <ul> <li><a href='#' title='March 2008'>March 2008</a></li> <li><a href='#' title='February 2008'>February 2008</a></li> <li><a href='#' title='January 2008'>January 2008</a></li> <li><a href='#' title='December 2007'>December 2007</a></li> </ul> </div> <div class="footer-item"> <h3>Daily Archives</h3> <ul> <li><a href='#' title='March 7, 2008'>March 7, 2008</a></li> <li><a href='#' title='February 9, 2008'>February 9, 2008</a></li> <li><a href='#' title='January 4, 2008'>January 4, 2008</a></li> <li><a href='#' title='December 22, 2007'>December 22, 2007</a></li> </ul> </div> <div class="clear"></div>
Этот код помещает каждый виджет в div. Каждый виджет содержит заголовок и список ссылок ведущих в никуда. Позже мы заменим их тэгами шаблона WordPress. Вот что мы пока имеем:
Kuznets.ru, для тех кто хочет купить кухню.
CSS
Как видишь без CSS стайлинга выглядит не так как надо. Добавь следующий код в свой style.css
.footer-item { float: left; width: 33%; padding-bottom: 10px; } .footer-item ul { padding-left: 15px; }
Благодаря float: left каждый виджет сносится в лево, что позволяет выстроить их в ряд. Ширина задана 33%, что делает возможным уместить их на одном уровне. Так же между ними есть небольшой отступ(padding).
Зацени, как работают вместе HTML и CSS. У тебя должно получиться что-то похожее на это:
WordPress код
В данный момент мы имеем кучу пустых HTML ссылок. Давай заменим Последние записи, Архив по месяцам и Архив по дням эквивалентными тэгами шаблонов WordPress. Замени то, что уже имеется в файле footer.php следующим:
<div class="footer-item"> <h3>Recent Posts</h3> <ul> <?php wp_get_archives('type=postbypost&limit=4'); ?> </ul> </div> <div class="footer-item"> <h3>Monthy Archives</h3> <ul> <?php wp_get_archives('limit=4'); ?> </ul> </div> <div class="footer-item"> <h3>Daily Archives</h3> <ul> <?php wp_get_archives('type=daily&limit=4'); ?> </ul> </div>
Тэги wp_get_archives здесь используются, как заглушки. Мы заменим их после того, как виджетируем подвал.
Blockstroi.ru – производство пенобетонных блоков.
Виджетируй это
Сперва нужно зарегистрировать так называемые «сайдбары»(sidebars). Для этого просто замени то, что есть у тебя в файле functions.php следующим кодом:
<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Sidebar', 'before_widget' => '<div class="sidebaritem">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Footer', 'before_widget' => '<div class="footer-item">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); ?>
Теперь перейдём в файл sidebar.php и заменим уже имеющийся там код:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
вот этим кодом:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) : ?>
Дальше открываем файл footer.php, сразу перед первым дивом вставляем следующее
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
После закрывающего дива «footer-item»(и перед дивом «clear» который мы добавили раньше) вставь следующее:
<?php endif; ?>
Теперь боковая колонка и подвал виджетированы. Давай протестируем их добавив виджетов в подвал. Я использую виджеты Блогролла, Последние комменарии и текстовый виджет. Вот как это выглядит у меня:
Заключение
В общем, вот и все основы виджетирования подвала WordPress.
По мотивам themelab.com
Oookit.ru – сетка металлическая.
Спасибо, очень хороший мануал, давно хотел сделать у себя на блоге!
Думается мне, это не особенно интересно большинству посетителей. Их внимание, к сожалению, очень редко доходит до подвала.
Спасибо за скриптик! Очень удобно давно видел на блогах подобный вот только не знал, как исполнить! Вот наткнулся на ваш блог теперь нашел! Подпишусь!
Я считаю что в подвале все это лишнее. У самого только копирайты стоят.
Спасибо за инфу, тоже попробую у себя попозже..
Что то не вышло у меня поставить. Ошибку выдаёт на английском.
Спасибо за статью и за поэтапное расписание что и как делать! респект!
спасибо за подробный обзор листинга, переделал и себе футер
автору респект! 
Спасибо, искал как раз чтобы закодированный подвал в теме поменять )
Огромное спасибо. Давно пора свой шаблон подрихтовать.
отличная статья
давно хотел добавить твиттер и прочее в подвал
Подвал- дело нужное, несомненно! спасибо!
Спасибо добавил!
спасибо за информацию)) очень полезно!
Отличный мануал, будем использовать! Спасибо
Спасибо за фичу!
И действительно получилось ништяково ))
Отличная штука!
Теперь у меня виджетированноподвальный блог )
Вот это я понимаю!
Хоть футер на что-то сгодится. А то раньше футер и футер, а сейчас это целых три виджета )
Ещё бы виджетов хороших найти чтобы туда ставить, каких-нибудь специально предназначеных. Но это уже немножко другой вопрос…
Осталось ещё парочку виджетов хэдердобавить и вообще виджефицированный блог получится )
Оказывается все не так сложно , буду переходить на wp.
seo-cook, давно пора))
Виджеты, привлекают внимание, главное не переборщить
Автору большое спасибо, давно искал это =)
щас поэкспериментирую-ка!)
В подвале виджеты не нужны, мало кто до подвала страницу прокручивает.
Спасибо.
Очень полезные данные, попробую у себя тоже реализовать такую штуку сейчас.
Прекраснейшая статья, спасибо за скрипт. Как-то водном из проектов опробовал этот способ. Хотя не сразу, но получилось здорово. Еще раз спасибо.
Красиво получилось, спасиб огромное! Только сделал на пустом (с двумя постами) бложике. Забавно смотрится =D.
а у меня нечего в шабе неизмениш ни виджеты непоставишможно както сделать но пока ненашол пост про это
Спасибо за мануал, побольше таких статей, и успехов в работе.