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

21.07
2008

Рубрики: 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) мы тиснули «див» так же с классом “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>

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

Вебсовет

1 2 3 4 5 6 7 8 9

Digg it Bookmark it Stumble it add to technorati

Комментарии (6) на запись “Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)”

  1. Никита 22.07.2008 13:47

    Ура! :) Спасибо огромнейшее! Почти доделал шапку для будущего сайта на wordpress, благодаря вашим урокам!

  2. Игорь Квентор 22.07.2008 16:04

    Отлично! :) Возникнут сложности - спрашивайте.

  3. yaandry 23.09.2008 15:54

    благодарю, все расписано как прям для меня, для нуба X)

  4. Игорь Квентор 26.09.2008 07:45

    yaandry, не за что! Скоро соберу все это в книгу, где распишу шаги более подробно.

  5. Елена 26.11.2008 23:00

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

  6. Игорь Квентор 27.11.2008 15:49

    Елена, вэлкам! :) Спасибо на добром слове!

Трэкбеки

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




Поиск

Рубрики

Архив



SMS.копилка

Пузомерки


PageRank





Blog Catalog

DMOZ

Каталог дизайнерских блогов