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

Я ставила в начале года перед собой цель изучить 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.

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

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

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

Отличное фуршет меню, разнообразие блюд, как для праздничного фуршета, так и для повседневного.

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

Помогут с трудоустройство моряков одесса. Крюинговой компанией V.Ships. хорошо себя зарекомендовала в помощи по трудоустройству моряков.