RSS
Twitter
Email
Продать блогДобавляем виджеты в футер
10 июня 2010 Комментариев 6
Доброй ночи дорогие читатели. Мне почему то не спится, и я решил Вам рассказать как я добавил виджеты в футер своего блога. Я много переворошил информации в интернете, чтоб это реализовать. Есть пару статей но они почему то не помогли мне. Я никак не мог сделать, чтоб виджеты отображались горизонтально а не вертикально. Самый простой способ это сделать – зарегистрировать новый 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;}
Как Вы видите здесь мы выравниваем каждый виджет и настраиваем отображение шрифтов в этих виджетах.
Вот и все, пробуйте и у Вас обязательно получится, если не первым способом, то вторым.
С уважением безработный сеошник.
июня 12, 2010 @ 13:51:14
Полезная информация, блог у вас красочный:)
После добавления этого кода, какие именно виджеты будут?
июня 12, 2010 @ 13:59:41
Виджеты можно свои любые добавлять с админки.
июня 19, 2010 @ 15:05:10
Ура на обоих блогах все сделал по инструкции…..
РАБОТАЕТ…
июня 19, 2010 @ 21:13:50
Я рад что тебе помогла моя статья.
Авг 07, 2010 @ 18:13:54
Огромное спасибо! У меня с первого раза получился второй способ)))
Респект автору!
Нет слов, чтобы описать эмоции в благодарность Вам!:-)
Сен 06, 2010 @ 21:22:49
Большое спасибо за статью, а то разбираться с движком нету времени а тут все расписано.