Виджеты: понятие, назначение, пример их создания и размещения в подвале

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

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

 

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

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>

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

вставляем виджет в WordPress

 

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

виджет в подвале

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

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

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

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

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

виджет в подвале WordPress

Для заголовка виджета тоже можно придать свое оригинальное оформление. Для этого также вставим в конец кода файла 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 пикселей.

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

виджеты в WordPress

 
 

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

  1. Алексей

    Добрый день! Работаю на докальном хостинге. Движок вордпресс нравится, особенно после Джумлы. Никак не могу найти информацию, как сделать так, чтобы последние записи не выводились на главной странице. Если делаю статичную страницу, то пропадает слайдбар на главной. Как быть, не подскажите? Заранее благодарю. Алексей.

  2. Sabina

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

  3. ElenaMedvedeva

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

  4. Уведомление: Создаем простую тему на wordpress | MnogoBlog

  5. Уведомление: Создаем простую тему на wordpress: часть 2 | MnogoBlog

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