
Давно хотел добавить виджеты в подвал одного из своих блогов. Наконец добрался и до этого, очень кстати подвернулось руководство по этой теме, которым я хочу поделиться. Из этого руководства ты узнаешь как добавить в свою тему подвал с блэкджеком и шлюхами виджетами.
В этом посте будет очень много кода, приготовься и читай дальше…
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 – сетка металлическая.
августа 27, 2009 в 11:55
Очень доходчиво, спасибо
августа 28, 2009 в 11:54
Сайдбары просто надо заменить в файле functions.php И все? а те удалить?
августа 28, 2009 в 22:04
Ninura, ага. Только на всякий случай сделайте резервную копию functions.php
сентября 8, 2009 в 19:07
Хороший метод, PHP мне нравится
сентября 9, 2009 в 03:38
У меня в теме это по умолчанию, но а вообще зачем это если к примеру в боковой колонке это есть, зачем повторять?
сентября 9, 2009 в 14:59
Этот способ для тех тем которые не имеют в футере этой фишки. А нужно это если хочется сайдбар сделать не таким высоким. А то частенько пост короче чем сайдбар.
сентября 13, 2009 в 22:03
Как упражнение для Вордпресс и html это, безусловно, полезно.
Но если подумать об удобстве для посетителей…
Неужели сам автор при просмотре сайта доходит до футера?
сентября 18, 2009 в 20:11
Мда.. просто и со вкусом)
Жаль что на свой блог не прикрутить – в дизайн не впишется..
Но на заметку возьму- авось пригодится!
сентября 18, 2009 в 22:56
Люди это реальная вещь. Верьте всему, что написано в статье.
сентября 25, 2009 в 17:39
А дизайн блога не развалится от этих всех вставок? и что можно еще прилепить в «подвал»?
октября 7, 2009 в 14:25
чёт много в подвале всего получится Но я зделал всерано!
октября 13, 2009 в 20:13
Мда, для новичка слишком «многа букаф, нипанятна» (с), но… Пост позволяет в полной мере осознать возможности кодинга, да и движка ВП в частности. Спасибо автору!
октября 24, 2009 в 15:59
Я хоть и новичок в этом деле но все доходчиво понял! Автору большое спасибо!
ноября 12, 2009 в 22:50
Вроде бы и не сложно, только такие виджеты в сайдбаре привлекают больше внимания, чем в футере.
ноября 28, 2009 в 14:25
Неплохо придумано. Действительно, есть вещи, которые совсем необязательно навешивать по краям, а в «подвале» им как раз то самое место – и не мешают, и необходимую информацию содержат. Надо попробовать.
декабря 7, 2009 в 21:26
Спасибо за идею, я лично с вордпресом только начинаю работать, так что этот сайт мне пригодиться, как источник новых идей)))
декабря 10, 2009 в 00:41
Да, интересно. Я так еще не делал.
Обычно в файле footer.php делал таблицу и список.
Автору за информацию спасибо, надо будет попробовать.
декабря 16, 2009 в 00:34
В принципе делал так сам ранее на своих блогах, правда с некоторыми отличиями. А вообще подвал самое правильное место для всех примочек.
декабря 18, 2009 в 18:57
Честно говоря так и не понял нафига это пихать в футер
Неужели сайдгара мало…
декабря 21, 2009 в 16:09
Сайдбара действительно иногда не хватает, в особенности когда только одна колонка.
Автору большое спасибо, давно искал это =)
декабря 25, 2009 в 17:03
Да, симпатичная штука. Но на некоторых темах футер действительно не подходит для этого.
декабря 30, 2009 в 02:12
Симпатичная штучка и потенциально опасная. Спасибо, пойду экспериментировать!
января 6, 2010 в 19:01
Почему опасная?
А так очень красиво, мне нравится.
января 19, 2010 в 20:50
Спасибо большое, хорошо разжевано.
февраля 9, 2010 в 07:43
Интересно. А можно посмотреть примеры?
———-
Клининг от Клининговой компании
февраля 9, 2010 в 22:08
Сам раньше так делал, но подобным виджетам в подвале не место, имхо.
февраля 10, 2010 в 09:17
Сложновато для меня – не проще ли найти готовый шаблон с уже реализованными такими же фишками?
февраля 12, 2010 в 02:26
По-моему не стоит перегружать страницу различными виджетами и т.п., т.к. большинству нужна интересная информация, а не цацки
)
февраля 12, 2010 в 16:24
ну подвал занять хорошая идея. Но как сделать так чтобы ссылки были разного размера для пользователей с большими мониками и маленькими?А так разлезется шаблон. А так неплохо для статических шаблонов!
февраля 13, 2010 в 20:42
Автору респект. Написано доходчиво и понятно. Ну а то что «многабукаф», это не страшно:)
февраля 16, 2010 в 13:42
Спасибо автору что все расписал донельзя лучше
февраля 16, 2010 в 17:39
Что то на вордпрессе 2.9.1 не прокатило… или это только в стандартных темах работает?
февраля 23, 2010 в 00:00
Давольно полезно, но у меня в 9.1 тоже не работает…
февраля 24, 2010 в 15:12
Отличное подробное пособие просто по виджетированию темы.
То, что написано на wordpress, позволяет лишь легко убить тему.
Благодарю за стольподробные описания.
марта 3, 2010 в 02:12
Я и не ожидал, что это так просто. Спасибо за технологию
марта 4, 2010 в 18:08
Спасибо, попробую сделать у себя так же… Вроде все проссто
марта 7, 2010 в 23:34
Получилось!!!!!!!