Сайдбары и Футеры WordPress

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

Давайте посмотрим на этот пример:

Wordpress схема сайта
Схема сайта

Заметили два сайдбара? Великолепный способ представить огромное количество информации посетителям.

Множественные сайдбары

Код для создания шаблона, типа показанного выше, выглядит примерно так:

<?php get_header(); ?>
<?php get_sidebar(); ?> Первый сайдбар
<div id="main-content">
// Loop
</div>
<?php get_sidebar("secondary"); ?> Второй сайдбар
<?php get_footer(); ?>

Обратите внимание, что мы обычно не зовем правый сайдбар «правым», мы называем его «вторым». Если в один прекрасный день мы решим поменять их местами, понятие «правый» потеряет смысл. Вот что означает правильная семантика в веб-дизайне — описывать без указания.

Два тега get_sidebar() в этом коде могут размещаться во всех основных файлах шаблона, связанных с стилем полной страницы, содержащей оба сайдбара (index.php, single.php, page.php и т.д.) Вы можете настроить два шаблона сайдбаров, sidebar.php и sidebar-secondary.php соответственно, с разметкой и тегами по усмотрению, одинаковыми или различными.

Вот типовой пример кода, который может использоваться в этом шаблоне:

<div id="sidebar">
<!-- разметка и код первого сайдбара -->
</div>
<div id="main-content">
<!-- разметка и код цикла вывода записей -->
</div>
<div id="sidebar-secondary">
<!-- разметка и код  второго сайдбара-->
</div>
<div id="footer">
<!-- разметка и код футера -->
</div>

и это нам может дать например такую трехколоночную структуру используя CSS

#sidebar { width: 200px; float: left; }
#main-content { width: 500px; float: left; }
#sidebar-secondary { width: 200px; float: right; }
#footer { clear: both; }
Добавить комментарий

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

Scroll Up