Открыть меню

Как добавить виджеты в футер


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

Я ставила в начале года перед собой цель изучить php и понять, как устроены темы. А задавая вопросы Dimox в интервью (известный и опытный вебмастер), я спросила о том, с чего бы он посоветовал начать тем, кто желает постичь азы HTML  верстки. Дмитрий рассказал о замечательном сайте http://htmlbook.ru/, куда я и отправилась совершенствоваться :).

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

Как добавить возможность вывода виджетов в футере

HTML

Первый шаг — это добавление html кода. Допустим, мы хотим иметь 3 секции для вывода виджетов в футере: Последние записи, Архив по месяцам, Архив по дням. Для этого добавляем такой html код, прямо перед строкой с копирайтами:

<div>
<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>
<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>
<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></div>

Этот код, заключает каждый виджет в div. В каждом виджете есть заголовок и неупорядоченный список ссылок. Да, я знаю, что ссылки ведут в никуда. Позже мы заменим их согласно шаблона WordPress. Вот, что мы получаем, после добавления этого кода, перед строкой с копирайтом.

как добавить виджеты в футер

CSS

Как мы можем видеть, выглядит не очень хорошо без CSS стилей. Добавляем код в список стилей:

.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}

Этот код выравнивает каждый отдельный виджет в футере по левому краю, что означает, что они будут расположены один за другим. Ширина поставлена 33%, что задают одинаковый размер виджетов в одном ряду. Параметр padding добавляет границу 15 px по левому краю.

Теперь видно, как HTML и CSS взаимодействуют вместе. Или вот, что в итоге получается:

добавить виджеты в футер

Код для WordPress

На этот момент, у нас есть ссылки, которые никуда не ведут. Давайте заменим этот код реальными ссылками, которые там должны быть, согласно теме WordPress. Заменим, то что имеем, на следующий код:

<div>
<h3>Recent Posts</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4'); ?>
</ul>
</div>
<div>
<h3>Monthy Archives</h3>
<ul>
<?php wp_get_archives('limit=4'); ?>
</ul>
</div>
<div>
<h3>Daily Archives</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4'); ?>
</ul>
</div>

Параметры должны быть понятны, но если Вы не знаете о каком-то из них, то о них можно узнать здесь: WordPress Template Tag Lookup Tool.

Виджетируем footer

Первый шаг, нам нужно зарегистрировать “sidebars.” Чтобы сделать это, нам нужно просто довать код, который приведен ниже в function.php.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div>',
'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. Прямо перед первым тегом div в “sidebar-item”, добавляем следующее:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>

И сразу после закрытия тега div в footer.php и перед “clear”, который мы недавно добавляли вставляем:

<?php endif; ?>

Все, теперь мы имеем footer, в котором можем зармещать виджеты. Давайте попробуем потестить то, что вышло добавив виджеты в футер из админки WordPress.

Как работает этот код, можно видеть у меня на блоге в нижней части страницы, где и размещен футер.

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

Внимание: перед тем, как проводить любые манипуляции с темой блога — не забудьте про резервную копию. Это еще одно знание, которое нужно применять на практике, если не хотите получить горький опыт.

 

Как добавить виджеты в футер обновлено: Октябрь 23, 2009 автором: Елена Иванова
Обсуждение: 16 комментариев
  1. Я сколько себя не заставлял почитать книги по PHP так ни разу и не уселся))). Пока справляюсь логикой.

    Ответить
  2. Я сколько себя не заставлял почитать книги по PHP так ни разу и не уселся))). Пока справляюсь логикой.

    Ответить
  3. Не вижу смысла так «потеть» — сейчас полно тем с уже предустановленными виджитами в футере..

    Ответить
  4. Не вижу смысла так «потеть» — сейчас полно тем с уже предустановленными виджитами в футере..

    Ответить
  5. а я как-то не очень за виджеты в футере

    Ответить
  6. а я как-то не очень за виджеты в футере

    Ответить
  7. Lady Maksima:

    lepricon, я тоже вначале логикой пользовалась, но логика без знаний, в какой-то момент, уже перестает помогать 😉

    SupamaN, мне доставляет удовольствие что-то изучать, самосовершенствоваться 😳

    volos_86, как говорится на вкус и цвет — товарищей нет 🙂

    Ответить
  8. Lady Maksima, согласен, что одной логикой не обойтись, нужны хотя бы минимальные знания php. Но вот набрать должный уровень, какой бы мне хотелось — не получается. Катастрофически не хватает времени. 🙂

    Ответить
  9. Lady Maksima, согласен, что одной логикой не обойтись, нужны хотя бы минимальные знания php. Но вот набрать должный уровень, какой бы мне хотелось — не получается. Катастрофически не хватает времени. 🙂

    Ответить
  10. Вот ужас! В блоггинге уже столько месяцев, но не могу привыкнуть к такому: «процесс виджетизации футера»!!! Это нормальный человек разве может понять?

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

      Ответить
  11. Вот ужас! В блоггинге уже столько месяцев, но не могу привыкнуть к такому: «процесс виджетизации футера»!!! Это нормальный человек разве может понять?

    Ответить
  12. Andrey Glivatsky:

    Спасибо автору. Ведь виджеты по этой схеме можно добавлять куда угодно.

    Ответить
  13. Спасибо, все доступно описано, на пхп учить нужно)

    Ответить
  14. Спасибо. Сработало. Но загвоздка на шаблонах с HTML5 и CSS3 — не работает. Жаль…. 🙁

    Ответить
  15. Ruson:

    Вау! спасибо огромнешее за детальное разьяснение.

    Кто не находит в этом смысла или кому это просто не интересно, проходите мимо.

    Есть те, которым действительно это очень нужно!

    Хотя и изучаю веб программирование больше полу года, на вашем блоге оказался впервые. Сейчас начал активно изучать создание шаблонов на вордпресе, данная статья , мне, как новичку в вордпрессе оказалась очень и очень полезной.

    Спасибо еще раз, принимайте нового постоянного подписчика )

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Женский SEO блог LadyMaksima · Копирование материалов сайта без разрешения запрещено
Дизайн и поддержка: GoodwinPress.ru

Рассылка 'Создание блога, заработок в интернет'