Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

20.07.2008 | Рубрики: WordPress
Тэги: css, WordPress, Вордпресс, макет, шаблон, шапка

Итак, в прошлый раз мы разобрались с рядовым составом шаблона для Вордпресс и с тем, для чего служат отдельные файлы. Сегодня займемся фалом header.php, который выводит «шапку» блога и до кучи содержит множество полезной информации в виде мета-тэгов, доктипа страницы и пр. Но сначала мы вернемся к первой части и подготовим наш макет, нарисованный в Фотошоп, с тем, чтобы его уже можно было привязать к шаблону.

Если внимательно посмотреть на макет, то станет очевидным, что конкретно рисованных объектов там не так уж и много. У нас это: логотип с перекрещенными кистью и карандашом, значок подписки на RSS-фид и фон под окно поиска. То есть, всего три изображения. Все остальное на самом деле можно оформить в листе стилей CSS. Таким образом, нам нет необходимости «пилить» макет при помощи инструмента Slice Tool («ломтики»). Достаточно объединить все слои макета и затем при помощи прямоугольного выделения Rectangular Marquee Tool выделить поочередно все три изображения и скопировать каждый в отдельный слой. После этого можно просто выключать остальные слои и сохранять по одному каждый слой с необходимым изображением.

Особо с размерами не заморачивайтесь. Не суть важно, сколько лишних пикселей фона будет по краям каждой картинки. Макет у нас довольно просторный, поэтому нет смысла вымерять все до последнего пикселя.

Из нашего макета получим вот такие три картинки, которые назовем logo.gif, rss-feed.gif, search-bg.gif:

   

Не забывайте, что имена изображений должны быть написаны по-английски и не содержать пробелов. То есть, logo.gif или logo_moego_bloga.gif — правильно, но: логотип.gif или logo moego bloga.gif — неправильно.

Теперь откроем лист стилей style.css из шаблона pool (см. часть 1). В самом начале любого листа стилей для шаблона Вордпресс идет закомментированный текст (оформленный между значками /* и */), в котором содержится служебная информация. В частности, именно оттуда Вордпресс вытаскивает название шаблона, его описание и автора, когда в разделе Внешний вид в админ-панели мы выбираем какой из шаблонов активировать. Так как мы намерены полностью переделать шаблон, то можем с легкостью переписать и данный текст (gpl-license это позволяет). Запишем там следующее:

/*
Theme Name: Kisa’s blog
Theme URI: http://www.vorobyaninov.com/
Description: A two columns theme for WordPress.
Author: Kisa Vorobyaninov
Author URI: http://www.vorobyaninov.com
Version: 1.0
*/

Все остальное в описании удалим.

Далее следует набор правил для тэга body, но я рекомендую до него вписать так называемое «глобальное правило» для сброса настроек браузеров по-умолчанию:

* {
margin: 0;
padding: 0;
border: 0;
}

Затем в правилах для body запишем следующее:

body {
background: #fff;
color: #727070;
font-family: Arial, Verdana, sans-serif;
}

У нас основной фон белого цвета и не содержит никаких фоновых рисунков. Цвет текста серый (#727070), а основной шрифт — Arial. Все остальное в этом наборе правил лишнее и потому смело удаляем.

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

#content {
background: #fff;
margin: 0 auto;
width: 800px;
}

Цвет фона опять же белый. В принципе это можно и не писать, так как фон всей страницы уже задан. Но вдруг вам захочется сменить какой-либо из фонов? А вот второе правило — margin: 0 auto; — очень нужное и полезное. Оно задает размещение контейнера строго по центру видимой области экрана. Ширина нашего контейнера равна общей ширине макета, то есть 800 пикселей.

Ну а теперь мы непосредственно подошли к шапке шаблона. В CSS набор правил для нее задан под именем #header. В оригинальном шаблоне в качестве фона для шапки предлагается картинка с размерами 600х150 пикселей, которая заполняет весь блок шапки. Мы же используем обычный цвет для фона, а логотип прицепим в файле header.php обычным изображением со ссылкой. Поэтому в CSS мы для этого блока перепишем правила следующим образом:

#header {
background: # 333332;
width: 800px;
height: 150px;
}

Лирическое отступление:

Как я уже предлагал ранее, при создании макета в Фотошоп желательно каждый слой обзывать внятным именем, чтобы не потеряться потом в куче Layer-ов. При этом можно в качестве имен использовать названия цвета в его html-ном отображении в виде #000000. Если же вы все-таки забыли каким цветом залили тот или иной фон или набрали текст, то очень хорошим помощником послужит крохотная утилитка под названием Pixie, которую можно бесплатно скачать с сайта Nattyware.com. Достаточно запустить ее и навести курсор на нужный участок. Цвет будет показан в нескольких кодировках, в том числе и в html формате. Это зачастую гораздо проще, чем ловить пипеткой Фотошопа нужный цвет.

С листом стилей пока закончим и перейдем непосредственно к файлу header.php.

Доктип мы трогать не станем, там все в порядке. Начнем с метатэгов. Самый первый указывает на кодировку текста:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Так как Вордпресс использует кодировку utf-8, то эту строку можно смело исправить на следующую (тем самым уменьшив количество запросов к серверу):

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Следующий мета-тэг показывает версию используемого движка ВП:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

Ее я рекомендую вообще удалить, ибо это хороший ключик для хакеров, а для блога — совершенно лишнее.

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

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

Если оставить строку как есть, то в открытом окне браузера, в самом верху название странички будет выглядеть так: Название браузера – Название блога. Лучше ее переписать так:

<title><?php wp_title(' '); ?><?php if(wp_title(' ', false)) { echo ' | '; } ?><?php bloginfo('name'); ?></title>

При открытии главной страницы, ее название будет таким: Название блога – Название браузера. А при открытии какой-либо статьи таким: Название статьи | Название блога – Название браузера.

Далее идет подключение к странице листа стилей CSS. Можно оставить как есть, а можно всю эту конструкцию:

<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>);
</style>

переписать так:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Ниже идет ссылка на подключение иконки favicon.ico, которая отображается в адресной строке браузера. Ее вы сможете нарисовать самолично, используя специальные программы или тот же Фотошоп с соответствующим плагином.

Следующие три ссылки со значением alternate используются для вывода RSS ленты вашего блога. Из всех трех оставьте только первую:

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

RSS .92 и Atom 0.3 считаются уже устаревшими форматами и использовать их нет особого смысла.

На этом пока что закончим. В следующий раз прикрутим к шапке логотип, значок RSS и поговорим подробно о верхнем горизонтальном меню.

Вебсовет

1 2 3 4 5 6 7 8 9