Создание 2-х колоночного шаблона WordPress. Часть 4. Шапка (продолжение)

Создание 2-х колоночного WordPress

Продолжаем оформлять шапку нашего шаблона WordPress (см. ранее части 1, 2, 3).

В этой части будет много кода, так что будьте внимательнее.

Открываем файл header.php. Сразу за тегом <body> начинается основной блок по имени content. Если посмотреть внимательно, то внизу этого файла мы не найдем закрывающего тэга </div> для него (кому интересно, можете пересчитать последовательно открывающие и закрывающие «дивы»). Он появится много позднее, в файле footer.php.

Напоминаю, что весь шаблон состоит из отдельных деталей-файлов. Это очень удобно, однако можно потеряться в «дивах». Так что бдите!

Следом за открытым тэгом блока content идет блок header вот с такой прилепленной конструкцией:

<div id="header" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;">

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

Данная конструкция делает всю шапку одной большой ссылкой на домен блога. Нам это совершенно ненужно, а потому удаляем все лишнее и оставляем только:

<div id="header">

Далее, при помощи тэгов <h1></h1> у нас выводится заголовок блога, который одновременно является ссылкой на домен. Но нам нужно перед заголовком поставить наш нарисованный логотип и так же сделать его ссылкой.

Если мы просто впишем перед тэгами h1 кусок кода для вставки картинки, то наш заголовок сместится под картинку и в Опере затеряется в дебрях горизонтального меню, а в ИЕ просто сдвинет меню еще ниже.

operaex.gif   ieex.gif

Поэтому мы откроем лист стилей CSS и после правил для шапки добавим еще вот такой кусок:

.logo {
float: left;
}

.rss {
float: right;
color: #FD9C04;
}

В файле header.php перепишем вот это место:

<div id="header">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>

следующим образом:

<div id="header">
<a href="<?php echo get_settings('home'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="Блог Кисы В." /></a>
<div class="logo"><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?></div>
<div class="rss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss-feed.gif" alt="rss" /></a><br />
Подпишись на RSS!</div>
</div>

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

<?php echo get_settings('home'); ?>

— означает вызов адреса домена. Этот кусок можно вполне заменить на http://www.vorobyaninov.com/ и это будет то же самое.

<?php bloginfo('template_directory'); ?>/images/logo.gif

— так же не что иное как ссылка на картинку, лежащую в папке шаблона. Это действительно проще, чем например писать вот такой длинный адрес: http://www.vorobyaninov.com/wp-content/themes/pool/ images/logo.gif.

Картинке логотипа мы приписали класс «logo», которому в листе стилей CSS задали правило float: left;

Перед тэгом заголовка (h1) мы тиснули div так же с классом «logo».

Сразу за ним мы вписали вызов описания блога:

<?php bloginfo('description'); ?>

И поставили закрывающий тэг </div>.

Что получилось? Образно говоря, мы заголовок и описание заключили в отдельный блок. У нас в начале шапки (слева) лежит картинка с обтеканием left, следом лежит блок с заголовком и описанием, тоже с обтеканием left.

Теперь нам осталось разместить картинку RSS-фида и призыв подписаться, но уже с обтеканием right. Что мы и сделали, задав им общий «див» с классом «rss».

Сделаем сразу еще одно добавление. Следом за кодом RSS пропишем вот такую строку:

<div class="clearfloat"></div>

Если кто не помнит, то это так называемая «очистка» для плавающих блоков. Она позволяет прекратить всякие обтекания после последнего элемента. Иначе, если останется свободное место, браузер будет стремиться еще чего-нить впихнуть туда.

Соответственно в листе стилей нужно также прописать правила для этого полезного класса:

.clearfloat {
clear: both;
}

В результате у нас в шапке получилось уже что-то более менее похожее на наш макет.

Далее в коде файла header.php идет блок с именем pages. По логике вещей это должна быть уже часть с контентом, но авторы оригинального шаблона решили так обозвать горизонтальное меню. Дабы не путаться, оставим имена как есть.

В оригинале менюшка лежит под шапкой. В нашем же макете она находится на территории самой шапки. Что мы сделаем? Для начала вытащим из этого файла кусок кода, выводящий форму поиска:

<div id="search">
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="s" id="s" size="20" value="search in blog..." />
</form>
</div>

и сохраним его где-нибудь в укромном месте в виде текстового файла. Он нам еще пригодится. Затем берем оставшийся кусок:

<div id="pages">
<div class="alignleft">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Blog</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>

и переносим его в блок header сразу после куска кода с очисткой, но перед закрывающим «дивом». Должно получиться следующее:

<div id="header">
<a href="<?php echo get_settings('home'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="Блог Кисы В." /></a>
<div class="logo"><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?></div>
<div class="rss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss-feed.gif" alt="rss" /></a><br />
Подпишись на RSS!</div>
<div class="clearfloat"></div>
<div id="pages">
<div class="alignleft">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Blog</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
</div>

Менюшка встала на свое место, а окно поиска исчезло.

logoex1.gif

Теперь путем нехитрых махинаций с размерами и цветом шрифтов, подгонкой отступов и полей можно привести шапку в соответствии с нарисованным макетом.

Если вы осилили все предыдущее, то с этим справитесь легко сами. Ну, а кто не справится — в конце цикла постов по данной теме будет лежать готовый переделанный шаблон, который можно будет скачать и внимательно изучить на досуге. :)

Пару слов о коде горизонтального меню. Вордпресс выводит сюда статичные страницы, которые вы создаете в админской блога. По-умолчанию, вначале всегда идет ссылка на главную страницу:

<a href="<?php echo get_settings('home'); ?>">Blog</a>. Вместо слова Blog впишем слово Главная.

Следующая строчка:

<?php wp_list_pages('title_li='); ?>

выведет все остальные страницы.

Чтобы сохранялся определенный порядок при выводе страниц, нужно при создании каждой найти в админской справа блок «Порядковый номер» и вписать туда необходимый номер страницы. Понятное дело, что нумерация идет как обычно — слева направо.

Так же вы можете ниже этой строки вписать обычные ссылки, например на форум, если он у вас есть:

<li><a href="http://www.vorobyaninov.com/forum/">Форум</a></li>

Продолжение следует.

Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет
Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона
Создание 2-х колоночного шаблона для Вордпресс. Часть 3. Шапка
Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 5. Контент
Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

21.07.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: