Как добавить виджеты в подвал сайта

как установить виджеты в footer

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

Я никак не мог сделать, чтоб виджеты отображались горизонтально а не вертикально. Самый простой способ это сделать – зарегистрировать новый sidebar в файле Функции темы (functions.php), добавить строчку для его отображения в Подвале (footer.php) и добавить стили. А сейчас по порядку. Я опишу два способа, тот что нашел в интернете и тот что подошел мне.

Первый способ добавить виджеты в футер:

Первый шаг, регистрируем новый “sidebars”, чтобы сделать это, просто добавляем код, который приведен ниже в function.php:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '

',
'after_widget' => '

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Footer’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

',
));
?>

Вторым шагом переходим в sidebar.php и заменяем следующую строку динамического сайдбара на свою:
находим:

меняем на:

Третьим шагом добавим код в список стилей в файле – Список стилей (style.css):
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}

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

Далее переходим в footer.php и в контейнере футера добавляем строку для отображения сайдбара:

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

Второй способ добавить виджеты в футер:

Первым шагом все также регистрируем новый “sidebars” в function.php, добавляем такой код в файле (functions.php):
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '

',
'after_widget' => '

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

',
));

Далее в контейнере футера (footer.php) добавляем строку для отображения сайдбара:


Здесь будут виджеты О_о ))

И последний третий шаг это добавление кода в список стилей (style.css):
#footerboxes {
width:960px;
margin:20px auto 0px auto;
padding:10px 10px 0px 35px;
overflow:hidden;
font-size:11px;
}

#footerboxes .box1, #footerboxes .box2, #footerboxes .box3 {
width:190px;
padding:0px 8px 0px 8px;
float:left;
overflow:hidden;
}

#footerboxes .box1, #footerboxes .box2 {
margin-right:5px;
}

#footerboxes h2 {
font-family:Georgia, «Times New Roman», Times, serif;
text-transform:none;
padding:0px 0px 5px 0px;
font-weight:lighter;
font-size:18px;
color:#333;
border-bottom:1px solid #ddd;
}

#footerboxes p {
line-height:17px;
word-spacing:1px;
margin-bottom:5px;
margin-top:10px;
}

#footerboxes .textwidget {
margin:0px 0px 15px 0px;
padding:0px 0px 0px 0px;
line-height:20px;
font-size:11px;
}

#footerboxes ul {
list-style:none;
margin:0px 0px 5px 0px;
padding:0px 0px 5px 10px;

}
#footerboxes ul li {
font-family:Verdana, Geneva, sans-serif;
text-transform:capitalize;
font-size:11px;
line-height:16px;
word-spacing:1px;
padding:2px 0px 2px 15px;
margin:2px 0px 2px 0px;
background:url(‘images/bg_sb_arrow1.png’) no-repeat 0px 7px;
}

#footerboxes a { color:#4F4F4E; text-decoration:none;}
#footerboxes a:hover { color:#970700; text-decoration:underline;}

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

Сохраните, чтобы не потерять!

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

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