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

Скачать исходники для статьи можно ниже

Что такое Виджеты?

WordPress виджеты добавляют на сайт визуальные и интерактивные опций и функций. Изначально виджеты разрабатывались для того, чтобы сделать сайт более удобным и понятным для его посетителей (как визуально, так и функциоанльно).
Основным преймуществом виджетов является то, что для их вставки и редактирования не нужно знать языки программирования и исправлять код темы. Все манипуляции над ними осуществляются через панель управления вашим сайтом в пункте “Внешний вид”, подпункт “Виджеты”.
Виджеты размещаются в сайдбарах (специальные блоки).
Разные темы имеют разное количество сайдбаров для размещения виджетов (но бывают и темы без сайдбаров), которые могут располагаться в различных местах вашего сайта (подвал, боковая панель, шапка, контент).
Для активизации виджета, вам нужно зайти в панель управления (пункт “Внешний вид”, подпункт “Виджеты”) и перетащить необходимый вам виджет справа из списка виджетов в нужный вам сайдбар (специальный блок).

Стандартный набор виджетов WordPress:
Архивы – показывает архив ссылок на записи по месяцам.
Календарь – отображает календарь на текущий месяц. Даты отображаются в виде ссылок, если в этот день есть запись.
Ссылки – отображает список ссылок, разделенных по категориям.
Управление – отображает ссылки на сайт администратора, вход / выход в панель управления, записи RSS, RSS комментариев и WordPress.org.
Страницы – показывает ссылки на каждую страницу .
Последние комментарии – отображает список последних одобренных администратором сайта комментариев.
Последние записи (посты) – показывает список последних записей, постов.
RSS – отображает RSS-канала.
Поиск – выводит форму поиска по сайту.
Облако тегов – отображает список меток, используемых на сайте.
Текст – используется для ввода HTML, Javascript, или просто текста.

Если у вас не хватает места для виджетов, то его можно добавить.

Как создать и разместить блок виджетов в подвале?

Перед тем как производить все манипуляции с вашим сайтом не забудьте сделать его резервную копию, так как ваш сайт может сломаться.

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

Стандартная схема состоит их 4 шагов:

Шаг 1. Регистрируем новый блок (сайдбар) для размещения в нем виджетов в WordPress (файл functions.php).

Шаг 2. Заполняем новый сайдбар виджетами через панель управления сайтом.

Шаг 3. Вставляем код для вывода сайдбара с виджетами в том месте сайта, где мы хотим его видеть

Шаг 4. Корректируем внешний вид сайдбара (блока с виджетами) с помощью файла стилей (style.css).

Рассмотрим данные действия на примере простенькой темы: Europe

Найти ее можно, зайдя в панель управления, в левом меню выбираем пункт “Внешний вид”, далее подпункт “Темы оформления”, выбираем закладку “Установка тем оформления”, в строке поиска пишем Europe, устанавливаем и активизируем данную тему.

Шаг 1. Регистрируем новый блок (сайдбар) для размещения в нем виджетов в WordPress (файл functions.php).

Для этого заходим в панели управления в левом меню в пункт “Внешний вид”, далее выбираем подпункт “Редактор”, а справа в списке Шаблоны выбираем файл functions.php.

И в самом начале после тега <?php вставляем следующий код:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'New Sidebar',
        'before_widget' => '<div class="newsidebar">',
        'after_widget' => '</div>',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));

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

‘name’ — имя блока для виджетов. Здесь можете придумать любое имя.

‘before_widget’ — в эту строчку прописывается HTML код, который Вы хотите добавить перед виджетом

‘after_widget’ — Html код после виджета

Параметры ‘before_widget’ и ‘after_widget’ нужны для придания определенного стиля оформления блока с виджетами с помощью CSS.

Параметры ‘before_title’ и ‘after_title’ — соответственно для придания стиля оформления заголовкам виджета.

В вышеуказанном коде мы обернули заголовок виджета в блок div и задали ему стиль оформления title, а сайдбару с виджетами – стиль newsidebar, который описывается в файле stily.css, но об этом расскажу в шаге 4.

Шаг 2. Заполняем новый сайдбар виджетами через панель управления сайтом.

Заходим в панели управления в пункт “Внешний вид”, далее выбираем подпункт “Виджеты” и видим, что у нас справа появился новый сайдбар с названием “New sidebar” :

Теперь мы можем перетащить виджеты слева в New sidebar.

Для наглядности перетащите туда что-нибудь.

Для примера я перебросил туда следующие виджеты: Страницы, Ссылки и Архив.

Шаг 3. Вставляем код для вывода блока виджета в том месте сайта, где мы хотим его видеть.

Заходим в панели управления в левом меню в пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблоны выбираем файл footer.php и вставляем в него следующий код:

<div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("New Sidebar") ) : ?>
<?php endif; ?>
</div>

Куда его вставлять можно узнать экспериментальным методом (вставляете код и смотрите, где на странице появился виджет), я вставил код сразу после следующей строчки:

<div id="footer" class="grid_16">

То есть код файла footer.php изначально выглядел так:

			<?php if ( is_home() || is_404() || is_category() || is_day() || is_month() ||
						is_year() || is_search() || is_paged() || is_tag() ) {
			?>
			<?php if ( !dynamic_sidebar('For Tag Cloud widget') ) : ?>
            <?php endif; ?>
			<?php } ?>
<hr />

<div id="footer" class="grid_16">

	<div class="copyright">
		<span class="copy">Copyright &copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></span>
	</div>
	<div class="powered">
		Powered by <a href="http://wordpress.org/">WordPress</a>. Designed by <a href="http://www.blogdesign.com.ua/">Blog Design</a>.
	</div>
</div>
</div>
		<?php wp_footer(); ?>
</body>
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</html>

А после вставки кода с новым сайдбаром (New Sidebar) стал выглядеть так:

			<?php if ( is_home() || is_404() || is_category() || is_day() || is_month() ||
						is_year() || is_search() || is_paged() || is_tag() ) {
			?>
			<?php if ( !dynamic_sidebar('For Tag Cloud widget') ) : ?>
            <?php endif; ?>
			<?php } ?>
<hr />

<div id="footer" class="grid_16">

<div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("New Sidebar") ) : ?>
<?php endif; ?>
</div>
	<div class="copyright">
		<span class="copy">Copyright &copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></span>
	</div>
	<div class="powered">
		Powered by <a href="http://wordpress.org/">WordPress</a>. Designed by <a href="http://www.blogdesign.com.ua/">Blog Design</a>.
	</div>
</div>
</div>
		<?php wp_footer(); ?>
</body>
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</html>

Теперь блок с виджетами появился в подвале:

Шаг 4. Корректируем его внешний вид с помощью стилей css.
Созданный нами виджет будет отображаться в подвале слева в одну колонку. Не очень удобно – если вы будете использовать много виджетов, то подвал у вас будет все больше и больше удлиняться.

Для иного отображения необходимо корректировать файл стилей (style.css).

Заходим в панель управления, в левом меню выбираем подпункт “Внешний вид”, далее подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css и в самом конце кода вставляем следующее:

.newsidebar {
 float: left;
 width: 33%;
 }

Данным кодом мы регулируем следующие параметры:
float – задает расположение блока слева на право (left), можно поставить справа налево (right).
width – задает ширину блока в процентах от ширины подвала (для того, чтобы расположить в 3 столбика нужно указать 33%).

И у нас получилось красивое размещение виджетов в три колонки.

Для заголовка виджета тоже можно придать свое оригинальное оформление. Для этого также вставим в конец кода файла style.css следующее:

.title {
font-size: 14px;
color: #66cc66;
text-align: left;
padding: 10px 0 10px 50px;
 }

Данным кодом мы регулируем следующие параметры:
font-size: 14px; – задаем размер шрифта – 14 пикслей;
color: #66cc66; – зелененький цвет;
text-align: left; – выравнивание слева;
padding: 10px 0 10px 50px; – отступы: сверху – 10, справа – 0 (авто), снизу – 10, слева – 50 пикселей.

И вот, что у нас получилось:

PS: Также можете почитать интересную статью как вставить блок виджета в подвал и разместить его в три колонки по следующей ссылке:
http://aimblog.ru/ustanovka/nastrojka-wordpress/kak-vyvesti-vidzhety-v-futere-wordpress-bloga-vidzhetiruem-podval-sajta.html