Добавь виджетированный подвал в свою Wordpress тему

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

В этом посте будет очень много кода, приготовься и читай дальше…

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. Вот что мы пока имеем:

htmllist

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. У тебя должно получиться что-то похожее на это:

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; ?>

Теперь боковая колонка и подвал виджетированы. Давай протестируем их добавив виджетов в подвал. Я использую виджеты Блогролла, Последние комменарии и текстовый виджет. Вот как это выглядит у меня:

done

Заключение

В общем, вот и все основы виджетирования подвала Wordpress.

По мотивам themelab.com

Oookit.ru – сетка металлическая.

Связанные записи

Комментарии: 37 на “Добавь виджетированный подвал в свою Wordpress тему”

  1. Marunya Написал(а):

    Очень доходчиво, спасибо

  2. Ninura Написал(а):

    Сайдбары просто надо заменить в файле functions.php И все? а те удалить?

  3. Skech Написал(а):

    Ninura, ага. Только на всякий случай сделайте резервную копию functions.php

  4. Grunyatka Написал(а):

    Хороший метод, PHP мне нравится

  5. Alex Написал(а):

    У меня в теме это по умолчанию, но а вообще зачем это если к примеру в боковой колонке это есть, зачем повторять?

  6. Олег Написал(а):

    Этот способ для тех тем которые не имеют в футере этой фишки. А нужно это если хочется сайдбар сделать не таким высоким. А то частенько пост короче чем сайдбар.

  7. Павел Написал(а):

    Как упражнение для Вордпресс и html это, безусловно, полезно.
    Но если подумать об удобстве для посетителей…
    Неужели сам автор при просмотре сайта доходит до футера?

  8. Pobeg Написал(а):

    Мда.. просто и со вкусом)
    Жаль что на свой блог не прикрутить – в дизайн не впишется..
    Но на заметку возьму- авось пригодится!

  9. Evgenya Написал(а):

    Люди это реальная вещь. Верьте всему, что написано в статье.

  10. Guard Написал(а):

    А дизайн блога не развалится от этих всех вставок? и что можно еще прилепить в «подвал»?

  11. скорый Написал(а):

    чёт много в подвале всего получится Но я зделал всерано!

  12. lifeout Написал(а):

    Мда, для новичка слишком «многа букаф, нипанятна» (с), но… Пост позволяет в полной мере осознать возможности кодинга, да и движка ВП в частности. Спасибо автору!

  13. Leon Написал(а):

    Я хоть и новичок в этом деле но все доходчиво понял! Автору большое спасибо!

  14. Anastasia Написал(а):

    Вроде бы и не сложно, только такие виджеты в сайдбаре привлекают больше внимания, чем в футере.

  15. Хочу гитару Написал(а):

    Неплохо придумано. Действительно, есть вещи, которые совсем необязательно навешивать по краям, а в «подвале» им как раз то самое место – и не мешают, и необходимую информацию содержат. Надо попробовать.

  16. Секси герл Написал(а):

    Спасибо за идею, я лично с вордпресом только начинаю работать, так что этот сайт мне пригодиться, как источник новых идей)))

  17. fact Написал(а):

    Да, интересно. Я так еще не делал.
    Обычно в файле footer.php делал таблицу и список.
    Автору за информацию спасибо, надо будет попробовать.

  18. Готика Написал(а):

    В принципе делал так сам ранее на своих блогах, правда с некоторыми отличиями. А вообще подвал самое правильное место для всех примочек.

  19. Igor Bredikhin Написал(а):

    Честно говоря так и не понял нафига это пихать в футер :-(
    Неужели сайдгара мало…

  20. Призрак Написал(а):

    Сайдбара действительно иногда не хватает, в особенности когда только одна колонка.

    Автору большое спасибо, давно искал это =)

  21. KeyArch Написал(а):

    Да, симпатичная штука. Но на некоторых темах футер действительно не подходит для этого.

  22. Milasha Написал(а):

    Симпатичная штучка и потенциально опасная. Спасибо, пойду экспериментировать!

  23. Любитель Венеции Написал(а):

    Почему опасная?

    А так очень красиво, мне нравится.

  24. Tamerbek Написал(а):

    Спасибо большое, хорошо разжевано.

  25. Kos Написал(а):

    Интересно. А можно посмотреть примеры?
    ———-
    Клининг от Клининговой компании

  26. Филлип Написал(а):

    Сам раньше так делал, но подобным виджетам в подвале не место, имхо.

  27. Andrey Написал(а):

    Сложновато для меня – не проще ли найти готовый шаблон с уже реализованными такими же фишками?

  28. carfax Написал(а):

    По-моему не стоит перегружать страницу различными виджетами и т.п., т.к. большинству нужна интересная информация, а не цацки ;) )

  29. BlackBoy Написал(а):

    ну подвал занять хорошая идея. Но как сделать так чтобы ссылки были разного размера для пользователей с большими мониками и маленькими?А так разлезется шаблон. А так неплохо для статических шаблонов!

  30. Бешенный сеошник Написал(а):

    Автору респект. Написано доходчиво и понятно. Ну а то что «многабукаф», это не страшно:)

  31. Павел Написал(а):

    Спасибо автору что все расписал донельзя лучше

  32. Alex Написал(а):

    Что то на вордпрессе 2.9.1 не прокатило… или это только в стандартных темах работает?

  33. Utka Написал(а):

    Давольно полезно, но у меня в 9.1 тоже не работает…

  34. Xstroy Написал(а):

    Отличное подробное пособие просто по виджетированию темы.
    То, что написано на wordpress, позволяет лишь легко убить тему.
    Благодарю за стольподробные описания.

  35. Дядя Яша Написал(а):

    Я и не ожидал, что это так просто. Спасибо за технологию ;)

  36. Гитарист Написал(а):

    Спасибо, попробую сделать у себя так же… Вроде все проссто :)

  37. Expert Написал(а):

    Получилось!!!!!!!

Оставьте комментарий

Щёлкни в квадратик, докажи, что не робот.
сделано dimoning.ru



Ссылки в комментариях будут свободны от nofollow.