Как вывести виджеты в футере WordPress блога. Виджетируем подвал сайта

Привет, Друзья! Сегодня хочу рассказать Вам, как вывести виджеты в футере WordPress блога. Сразу хочу сказать, что я не гуру-программист и не зубр в php, поэтому сделал как смог, и просьба к профессионалам не глумиться, если виджетировал футер не по канонам и нормам WordPress, а указать в комментариях на возможные ошибки.

Конечно можно найти WordPress тему с возможностью добавлять виджеты в футер, но что делать, если Ваш шаблон не поддерживает данную функцию? Правильно — сделать самим! А для чего это нужно, спросите Вы? Да все просто — дополнительный, так сказать, сайдбар (только внизу ), в который Вы, на свое усмотрение можете вывести все что угодно, т.е. дополнительное место, которое Вы можете использовать для вывода различных элементов, и которое никак не мешает и не напрягает Ваших посетителей! (Кстати, в последнее время очень многие стали в футере выводить различную информацию.)

Когда я решил в подвале AimBlog.ru сделать дополнительные три колонки под виджеты, то естественно за решением и инструкциями отправился в сеть, но столкнулся с проблемами — всю информацию что находил в сети, на этом шаблоне не мог преобразовать в результат, футер ну никак не хотел виджетироваться (хотя, может быть плохо искал и глубоко копать было лень), в общем сделал я исходя из своих знаний и интуиции (да-да, именно интуиции, Вы не ослышались), и теперь хочу поделиться с Вами наработками и опытом , может быть кому и пригодится…..

Ну самое простое, на мой взгляд, это в файле functions.php зарегистрировать еще три сайдбара и через специальную функцию вывести их в футере вашего сайта, (т.е. в файле footer.php.) Но, вот как раз такой способ на моем блоге и отказался работать — печалька… Вы же, на своих сайтах, именно данным способом можете попробовать вывести блоки под виджиты в футере. Давайте, чтобы вам не рыскать в сети информацию и не тратить свое время, я покажу как это осуществить.

Как добавить виджеты в футер WordPress блога. Способ 1

Итак, открывает блокнотом Notepad++ (почему именно этим блокнотом? читаем здесь) файл functions.php (этот файл находится в папке с вашим блогом в директории wp-content/themes/название вашей темы) и сразу после открывающего тега <?php вставляем вот этот код для регистрации нового сайдбара:

[php]if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’footer_l’,
‘before_widget’ => ‘<div class="footer1">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<div class="title">’,
‘after_title’ => ‘</div>’,
));[/php]

Где переменные:

• ‘name’ — имя блока для виджетов. Здесь можете придумать любое имя. (желательно короткое и легкое чтобы самим не запутаться) Например, footer_l
• ‘before_widget’ — Говоря научным языком, в эту строчку прописывается HTML код который Вы хотите добавить перед виджетом
• ‘after_widget’ — Html код после виджета

Давайте попробую по-русски объяснить для чего нужны параметры ‘before_widget’ и ‘after_widget’ (потому что сначала я вообще не понял для чего они). Итак, видите, у нас в строчке ‘before_widget’ прописан код <div class=»footer1″>‘, а в строчки ‘after_widget’ — ‘</div>’ – улавливаете суть? Все просто, в первой строчки открывающий тег див с классом footer1, а во второй закрывающий див, а это значит что с помощью CSS мы сможем регулировать и менять внешний вид нашего блока с виджетами.

Те, кто не знает CSS и HTML хотя бы на самом поверхностном уровне — ОБЯЗАТЕЛЬНО прочтите эту статью — и ОБЯЗАТЕЛЬНО ознакомьтесь с данными языками. Поверьте мне, это не так сложно как кажется на первый взгляд! И если вы всерьез хотите заниматься блоггингом, без этих основ, к сожалению, будет сложно…

• Строчки ‘before_title’ и ‘after_title’ — соответственно стили заголовка виджета.

Вот таким, достаточно нехитрым способом регистрируется новый сайдбар.

Похожим образом регистрируем еще два сайдбара. Нам ведь нужны три колонки))) Только каждому сайдбару не забываем присваивать свои имена. Я зарегистрировал три sidebar-а и дал им следующие имена – “sidebar_c.php”, “sidebar_l.php”, “sidebar_r.php”. Не забываем сохранить изменения:

Смотрим в админку блога во вкладку Виджеты:

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

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

Для этого открываем файл footer.php и в самом начале, после тега <?php global $theme; ?> или <? ?><!— footer —><div id=»footer»> (в общем теги могут отличаться, но смысл в том, что прописать код нужно в начале, после открывающего футер тега) а вот и сам код вывода блока виджетов:

[php]<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_l’) ) { ?>

<?php } ?>[/php]

В строчке!dynamic_sidebar(‘footer_l’) указываете то имя, которое зарегистрировали в файле functions.php В моем случае это  “footer_l”.

(Также Вы можете выводить не только виджеты, но и просто любой код или функцию. Для этого нужно просто вставить нужную функцию или код между строчкой

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_l’) ) { ?>  и  <?php } ?>

Значит прописываем в файле footer.php все три функции для вывода наших трех сайдбаров и вот что в итоге должно получиться у нас в файле footer.php

[php]<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_l’) ) { ?>
<?php } ?>

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_c’) ) { ?>
<?php } ?>

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_r’) ) { ?>
<?php } ?>[/php]

Как видите, меняется только имя сайдбара.

Опять же, к каждой функции вывода нужно присвоить свой класс DIV и в таблице стилей (файл style.css), с помощью CSS расположить блоки с виджетами горизонтально в ряд. Если этого не сделать, тогда блоки с виджетами будут располагаться в один столбик, что в футере ну никак не будет смотреться. (Вот так будут выводиться элементы на сайте без редактирования CSS)

В конечном итоге в файле footer.php будет вот такой код:

[php]<div class="footer_l">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_l’) ) { ?>
<?php } ?>
</div>

<div class="footer_c">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_c’) ) { ?>
<?php } ?>
</div>

<div class="footer_r">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer_r’) ) { ?>
<?php } ?>
</div>[/php]

А в файле style.css мы пропишим вот такое условие:

[php].footer_l {
float: left;
width: 33%;
}
.footer_r{
float: left;
width: 33%;
}
.footer_c {
float: left;
width: 33%;
}[/php]

Теперь виджеты на сайте выводятся горизонтально:

Со стилями, можете играться как только захотите, нет пределов совершенству… и настроить вывод блоков в подвале сайта можете совершенно как Вам заблагорассудится!

Еще раз Вам советую, скачайте мини курс по CSS и HTML и изучите!!!

Скачать курс по CSS

Скачать курс по HTML

Ну а теперь просто идете в админку блога и в созданные блоки вставляете любые виджеты. Все! Скрин того, что получилось находится чуть выше)))

К сожалению, на моем блоге данный метод не сработал, а все что я сейчас показал, я делал на Денвере и делал на другом шаблоне, и заработало все вообще без проблем! А теперь расскажу о методе, который применил на AimBlog.ru.

Выводим виджеты в подвал WordPress блога. Способ 2

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

Так вот, в файле functions.php регистрация сайдбаров (на многих шаблонах регистрация именно такая) происходит через функцию

[php]if (function_exists(‘register_sidebars’)) register_sidebars(3);[/php]

Видите — register_sidebars(3) — это и есть три сайдбара.

Далее в папке с моей темой (wp-content/themes/название темы) у меня имеется файл sidebar.php — это главный файл для вывода сайдбара (данный файл имеется во всех шаблонах WordPress (ознакомьтесь со статьей о структуре/составе шаблонов WordPress)) и еще имеются три файла — sidebar_c.php, sidebar_l.php, sidebar_r.php и эти три сайдбара подключаются в файле главного sidebar.php такими функциями:

[php]<?php include (TEMPLATEPATH . "/sidebar_c.php"); ?>
<?php include (TEMPLATEPATH . "/sidebar_l.php"); ?>
<?php include (TEMPLATEPATH . "/sidebar_r.php"); ?>[/php]

Внутри файлов sidebar_c.php, sidebar_l.php, sidebar_r.php  прописан вот такой код:

[php]<div class="sidebar1">
<ul>

<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(1) ) : else : ?>

<?php endif; ?>

</ul>
</div>[/php]

во всех трех одинаковый, меняется только цифра в строчке dynamic_sidebar(1) т.е. в файле sidebar_c.php — 1 в файле sidebar_r.php — 2 а в файле sidebar_l.php — 3

Вот так выглядела моя админка и место для добавления виджитов изначально:

Тут главное поймите принцип работы — Есть файл функшион, в нем строчка регистрации трех сайдбаров, функции подключения этих трех сайдбаров расположены в файле главного сайдбара (sidebar.php), а уже функция вывода блоков для виджетов, расположены непосредственно в этих трех файлах (sidebar_c.php, sidebar_l.php, sidebar_r.php)

Так вот, что сделал я. Я просто взял и подключил еще три сайдбара. Давайте, по порядку.

1)  В файле functions.php в строчке if (function_exists(‘register_sidebars’)) register_sidebars(3); я тройку заменил на цифру 6 (это я как бы сказал что у меня шесть сайдбаров) вот так — if (function_exists(‘register_sidebars’)) register_sidebars(6);

2)  В папке, где у меня находятся все файлы шаблона (wp-content/themes/название темы) я создал три php файла и обозвал их sidebar_cc.php, sidebar_ll.php, sidebar_rr.php (чтобы не путаться и не выдумывать с названиями:))

3)  Затем я по очереди открыл эти файлы (sidebar_cc.php, sidebar_ll.php, sidebar_rr.php) и в каждом прописал знакомый нам код(который прописан в каждом файле sidebar_c.php, sidebar_l.php, sidebar_r.php ). Менял, как Вы, наверное, догадались только цифры (в файле sidebar_cc.php — 4, sidebar_ll.php — 5, sidebar_rr.php — 6)

[php]<div class="sidebar2">
<ul>

<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(4) ) : else : ?>

<?php endif; ?>
</ul>
</div>[/php]

4 Ну а подключил я эти три новых сайтбара в файле footer.php

[php]<?php include (TEMPLATEPATH . "/sidebar_cc.php"); ?>

<?php include (TEMPLATEPATH . "/sidebar_ll.php"); ?>

<?php include (TEMPLATEPATH . "/sidebar_rr.php"); ?>[/php]

Теперь прозрачней становится принцип действия?:) (Изначально три сайтбара (sidebar_c.php, sidebar_l.php, sidebar_r.php) подключаются в файле sidebar.php и виджеты в результате добавления выводятся в боковой колонки сайта,   А новые три файла (sidebar_cc.php, sidebar_ll.php, sidebar_rr.php) подключил в файле footer.php и теперь, при добавление виджетов они будут выводиться в футере Вашего сайта!) Теперь понятно?:)

Ну и напоследок, поработаете с CSS, подстройте внешний вид блогов и все будет гут!!! Это кажется что сложно, уверяю, не все так страшно, как кажется и не все кажется, как видится…

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

Конечно, совсем новичку сложно в этом будет разобраться, но при огромном желание…

Только перед тем как будете редактировать файлы вашего сайта, обязательно сделайте их резервные копии, а лучше вообще сделайте полный бэкап сайта! А еще лучше, сначала сделайте все на Денвере, а затем уже на сайте!

У кого остались вопросы спрашивайте в комментариях.

Если я где то не прав, или Вы знаете как проще вывести виджеты в футере WordPress блога, то также с удовольствием Вас выслушаю…

Если понравилась статья, был бы очень признателен за ретвиты и лайки!!!

Все, Удачи Вам, и клевых сайтов)))