Выпуск 28. Делаем собственный шаблон для WordPress (часть 5)
Последняя часть
Это последняя, пятая часть выпуска, посвященная созданию шаблонов для WordPress. Мне пришлось на написание этого выпуска потратить две недели, дважды переписывал практически с нуля. В отличие от тех, кто просто "тырит" чужие записи, я предпочитаю делиться с вами результатами своего труда.
Однако, к делу!
Дизайн
Наш шаблон имеет необходимую функциональность, но напрочь лишен какого-либо оформления (дизайна).
Прежде, чем приступить к практической части, нужно определиться, что мы хотим получить в итоге. Дизайн - очень субъективная вещь. Кому-то нравятся "легкие наброски" с минимальным количеством графики, кто-то наоборот - предпочитает "сильные" цвета и объемные плашки; третий же предпочтет нестандартный подход в виде "рюшечек" и "завитушек". Нельзя утверждать, что какой-то определенный стиль лучше другого. Тем более, что дизайн, помимо эстетики, должен каким-то образом переплетаться с тематикой сайта. Для блогов, где очень часто тематика разнообразная, требуется некий "универсальный" подход, цель которого не сколько поразить "красивостью", сколько сделать просто приятное не раздражающее оформление.
К сожалению, я не могу похвастаться web-дизайнерскими способностями, но поделиться различными приемами, всё-таки смогу 
. Главная наша цель сегодня - понять и научиться использовать различные приёмы, которые вы сможете в дальнейшем использовать на своём блоге.
Основные приёмы HTML
HTML устроен так, что все его элементы есть ни что иное, как прямоугольники (HTML 4). Поэтому, для того, чтобы на странице отобразить нечто отличное от таких примитивов, используют изображения. Например, для того, чтобы отобразить тень над каким-либо блоком, дизайнер готовит картинку с этой тенью и располагает её рядом с нужным блоком в виде повторяющегося элемента. Тами образом визуально кажется, что бок имеет тень.
Таких приемов на самом деле не очень много, и нужный эффект достигается путем их комбинирования. Большинство из них выполняются в виде css-стилей.
Фон
Для того, чтобы добавить фон к элементу, в его стиле нужно использовать параметр background, например:
... {background: url("images/bg-main.gif");}
В этом примере будет выведен фон в виде картинки, расположенной по указанному адресу. Сама же картинка фона будет расположена в виде мозаики, то есть будет повторяться по вертикали и по горизонтали. Если же нам нужно сделать отображение только один раз, то указывается no-repeat:
... {background: url("images/bg-main.gif") no-repeat;}
Этот прием можно использовать для "скругления" углов. Если нужно отобразить фон повторяющийся по вертикали, то вместо no-repeat, нужно указать repeat-y, а если нужно по горизонтали, то repeat-x.
В background можно указать и цвет фона. Это бывает полезно, когда по каким-либо причинам изображения не доступны для браузера (например в момент загрузки) и, чтобы избежать "мелькания" цветов, часто указывают фон равный или близкий к фону картинки.
Сам фон (изображение) можно сдвинуть относительно верхнего левого угла блока. Например, для отображения его справа указывается right, для отображения снизу bottom, а для выравнивания по центру: center. Кроме этого можно указать и явные значения отступа в пикселах. В целом же background может иметь такие значения (символ "|" обозначает "или"):
... { background: цвет
url("адрес")
no-repeat|repeat-x|repeat-y
top|right|bottom|left
center
Xpx Ypx; }
Изображения
Не всегда требуемый результат достигается фоном. Например для того, чтобы сделать кликабельную "шапку-картинку" фон просто не подойдет: нужно использовать либо другой элемент, либо тэг <img> внутри <a>.
С <img> проблемы бывают прежде всего из-за отступов. Причем нужно учитывать отступы, заданные как в самом теге (margin), так и в его родительском элементе (padding). Иногда, чтобы расположить изображение точно в углу родительского элемента можно указать его выравнивание через float. В этом случае, браузер включает обтекание и изображение выравнивается по родительскому элементу. Но, в любом случае, <img> требует различного подхода в конкретном случае.
Рамки
Иногда нужного эффекта можно добиться с помощью простой рамки. Примеры я приводил еще в первых выпусках рассылки, поэтому здесь дублировать не буду. Напомню только, что для рамки используется параметр border, например:
border: 1px red solid;
Это красная рамка в 1px сплошной линией.
Приемы оформления
Помимо HTML-приемов дизайнер использует художественные приемы. В Интернете вы найдете статьи, что такое дизайн-WEB2 с примерами. Но на самом деле таки приемов не так уж и много:
- сплошной фон
- градация
- тень
- рамка по краям
- сложный фон, например в косую линию
- отражение на кнопках, лого и т.п.
Безусловно, это не все примеры (свой вариант вы можете оставить в комментариях), но в большинстве случаев этого будет достаточно.
Инструменты
Поскольку наш шаблон учебный, то у нас задача научиться использовать различные HTML-приёмы. Поэтому я не стал использовать что-то очень сложное. Я взял картинку из клипарта, немного её подправил, нарисовал небо, поиграл цветами и отрегулировал уровни.
Для работы вам понадобится PhotoShop. Хотя, если строго, то вы можете использовать любой редактор, например я часто использую CorelDraw.
Описывать здесь примеры работы с PhotoShop нет смысла: очень уж велики они получатся, тем более, что это уже сделал Денис и посмотреть, что это такое вы можете на его сайте (со скриншотами и полным описанием).
Но, главное, что перед началом работы вы должны иметь какой-то набросок того, что вы хотите получить в итоге. Тогда вам будет гораздо проще понять что именно нужно делать. Чтобы нам не запутаться, я привожу скриншот нашего уже готового шаблона, а дальше буду рассказывать что и откуда взялось. Отслеживать изменения в коде по ходу моего рассказа (с предыдущего шага) будет сложновато. Поэтому вы можете сразу скачать готовый вариант и уже по нему следить за моими действиями (сверяя с предыдущим шаблоном-каркасом).
Картинка в шапке
За основу была взята картинка из какого-то клипарта: к ней применил несколько фильтров (фотошоп) и внизу добавил тень. После этого я "разрезал" её инструментом Slice и экспортировал как JPG-файл ("Save for Web...").
Когда вы будете делать картинки, то вам нужно всегда держать в голове структуру блоков. Например в нашем шаблоне идет такая иерархия (см. файл index.php):
- <body>
- <div id="container">
- <div id="header">
- <div id="wrapper">
Во всех этих блоках мы можем использовать различный фон. Например в body я указал:
background: #106397 url("images/bg-body.jpg") repeat-x;
где #106397 - основной цвет фона страницы (синий); bg-body.jpg - картинка-градация, которая создает эффект перехода с самого верха страницы до основного фонового цвета.
Саму картинку (горы) я рассположил в #header:
margin-bottom: 45px; background: url("images/logo.jpg") no-repeat;
Здесь же нужно подобрать высоту блока (padding) и указать отступ снизу (margin-bottom).
А для того, чтобы создать коричневую полоску-разделитель, использовал элемент #container:
background: white url("images/bg-top.jpg") repeat-x;
Здесь же я указал цвет фона под текстами (белый). Это нужно сделать, поскольку выше мы прописали синий цвет.
Шаблон сейчас начал выглядить вполне презентабельно, но пока что цвета заголовков, ссылок явно ему не соответствуют. Велик соблазн немедленно их подправить, но лучше оставим их на потом. Первым делом нужно расположить все элементы правильно и выставить положенные отступы. После этого устанавливаем фон и картинки оформления. Вот только после этого этапа мы можем приступать к оформлению текстов.
Первое боковое меню
Для боковых меню я решил использовать два приема: фон и верхняя картинка.
Картинка, которая располагается вверху первого бокового меню, подключается таким образом в файле sidebar-1.php:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/top-navigation.gif"
alt="" title="" width="198" height="30" />
В итоге, наше меню оказалось визуально отделенным от шапки.
Фон же я расположил справа в блоке #navigation. Для этого я заранее подготовил картинку с тенью. После этого в стилях #navigation пишем:
background: #69B5FC url("images/bg-navigation.gif") repeat-y right;
Для того, чтобы зрительно завершить этот блок я указал для него нижнюю границу (#navigation):
border-bottom: 12px solid #1E6AAF;
Второе боковое меню
Второе боковое меню я сделал по той же схеме, что и первое. Конечно же мне пришлось менять цвета и размеры картинок, но в целом действия точно такие же.
В sidebar-2.php я записал:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/top-extra.gif"
alt="" title="" width="176" height="30" />
В стиле для #extra:
background: #F4DF94 url("images/bg-extra.gif") repeat-y right;
border-bottom: 12px solid #DFB00A;
Как видите пока что нам не пришлось писать сложный код.
Подвал
Завершение страницы важный элемент, но, признаться, у меня всегда с ним были трудности, поскольку не понятно, что в нем должно содержаться, помимо копирайта. Поэтому, я делаю очень простую вещь: оставляю как есть, только меняю цвет:
#footer {background: #13415B; ...
Многоточие в данном случае означает, что для этого элемента уже описан какой-то стиль. Поэтому я явно указываю только то, что нужно к нему добавить (выделено полужирным).
Блок основного текста
Собственно менять особенно нечего, поскольку мы уже настроили размеры шрифта раньше. Единственный нюанс, это отступ слева. Сейчас текст вплотную прилепает к левому краю, поэтому мы добавим расстояние в 10px:
#content {padding-left: 10px; ...
Ссылки в шапке
Вот теперь, пожалуй, мы сможем приступить к оформлению текстов. Начнем со ссылок. Их цвет нужно менять. Сделаем их под цвет сайта (синим):
a, a:visited {color: #1E6AAF;}
a:hover {color: blue;}
Но теперь у нас возникла другая проблема: ссылки в шапке и в меню оказались не совсем тем цветом, которыми мы планировали. Поэтому для таких случаев мы будем использовать контекстный селектор, например для шапки укажем цвет ссылок белым:
#header h1 a {color: white; text-decoration: none;}
То есть название блога находится в элементе a, который вложен в h1, а тот, в свою очередь, в #header.
Поскольку в шапке отображается и описание блога (h2), то подберем цвет и для него:
#header h2 {color: #98B6D8; ...
Ссылки в меню и подвале
В боковых меню будем использовать тот же принцип. Напомню, что меню мы формируем в виде списков, поэтому нам нужно указать единый цвет для элемента списка (li) и ссылок, которые будут находиться в этих элементах. Если этого не сделать, то булечка окажется другого цвета, чем сам текст.
Вот такая несложная запись получается:
#navigation li, #navigation a {color: #00436A;}
Аналогично делаем и для второго бокового меню (цвет, естественно другой):
#extra li, #extra a {color: #866500;}
Для текста в подвале мы укажем простой белый цвет и выравнивание по центру:
#footer p {color: white; text-align: center; ...}
#footer a {color: white;}
Заголовки в меню
Заголовки мы сделали в виде h2.box. Есть смысл их немного подправить:
#navigation h2.box {color: #00436A;}
#extra h2.box {color: #866500;}
Цветом я их сделал таким же, как и ссылки.
Сейчас расположение заголовков не очень удачное из-за отступов. Мне бы хотелось их немного увеличить от предыдущего блока, и уменьшить от списка. Поэтому я изменил стиль h2.box:
h2.box {font-size: 11pt; margin: 20px 0px 0px 10px;}
Но, возникла незадача: самый первый заголовок оказался слишком оторваным от начала блока. По-идее для него нужно установить top-отступ нулевой. Но, поскольку стиль у нас один для всех, то эти изменения скажутся и на всех остальных. Когда-то я долго бился над этой задачей, пока не нашел очень простой способ, который помог мне сэкономить кучу времени и кода. Запомните, он может вам пригодиться!
Суть его в том, что в CSS есть возможность указывать два класса для одного элемента. То есть в первом мы указываем некий базовый стиль, а вторым уточняем его детали.
Открываем файл sidebar-1.php и изменяем строчку:
<h2 class="box">Рубрики</h2>
на
<h2 class="box first">Рубрики</h2>
Точно также делаем и в sidebar-2.php:
<h2 class="box">Поиск</h2>
меняем на
<h2 class="box first">Поиск</h2>
То есть мы ввели еще один класс first, в котором и укажем нужный нам отступ:
h2.first {margin-top: 0px;}
Вуаля (в смысле - F5)! И наш заголовок оказался ровно там, где ему и положенно быть.
Заголовки записей
Заголовки записей на главной странице стали такими же, как и ссылки, поскольку это и есть ссылки. Но, при переходе к полной записи их цвет становиться черным (ссылки убираются). Мне это не очень понравилось, поэтому я изменил цвет заголовка на темно-синий (тоже самое нужно сделать и для странички рубрик):
div.maintop h1 {color: #13415B; ...}
h1.cat {color: #13415B; ...}
Теперь нужно как-то оформить служебную строчку (рубрика, дата и т.д.). Я не стал придумывать ничего особенного, а просто сделал цвет серым, и увеличил отступ строки от основного текста:
div.maintop {margin-bottom: 10px;}
div.maintop p {font-size: 8pt; color: gray;}
Разделитель записей
Для разделения записей мы можем просто указать тонкую пунктирную линию. Правда в этом случае нужно настроить отступы таким образом, чтобы они оказались равными для внутренней части (padding) и внешней (margin):
div.mainbottom {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px dotted gray;
clear: both;
}
Параметр clear требует особого пояснения. Он служит для того, чтобы принудительно сделать перенос строки. Его нужно указать для тех случаев, когда у вас в короткой записи окажется картинка с обтеканием. В этом случае браузер будет выполнять обтекание для всех элементов по высоте картинки, даже из других записей. Чтобы этого избежать мы и указали clear: both.
Если у вас возникают проблемы с обтеканием в шаблонах, то можно использовать в тексте: <br clear="all" /> - укажите этот код в конце своей записи.
Подводим итоги
Ну что ж наш шаблон почти готов и на этом мы можем остановиться. С точки зрения дизайнера и программиста, мне хотелось бы внести в него дополнительные функции, добавить плагины и так далее. Да и по оформлению можно было бы внести и подкорректировать какие-то детали. Но, поскольку предела совершенству все равно нет, то этот процесс может длиться бесконечно.
Вернитесь к первому выпуску и посмотрите с чего мы начинали. Теперь откройте файлы шаблона и убедитесь, что не такой уж и сложный получился его код. Если вы в состоянии его прочитать и понять, значит я не зря делал эти выпуски. Ну, а если у вас возникнет желание высказаться по этому поводу (и не только этому), то свой комментарий вы можете оставить, прямо здесь.
Весь курс создания шаблона:
Постоянная ссылка: http://maxsite.org/?p=222
Версия для печати
