Выпуск 28. Делаем собственный шаблон для WordPress (часть 5)
Четверг, 19 апреля 2007 г.
Просмотров: 2775
Подписаться на комментарии по RSS
Последняя часть
Это последняя, пятая часть выпуска, посвященная созданию шаблонов для 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" /> - укажите этот код в конце своей записи.
Подводим итоги
Ну что ж наш шаблон почти готов и на этом мы можем остановиться. С точки зрения дизайнера и программиста, мне хотелось бы внести в него дополнительные функции, добавить плагины и так далее. Да и по оформлению можно было бы внести и подкорректировать какие-то детали. Но, поскольку предела совершенству все равно нет, то этот процесс может длиться бесконечно. ![]()
Вернитесь к первому выпуску и посмотрите с чего мы начинали. Теперь откройте файлы шаблона и убедитесь, что не такой уж и сложный получился его код. Если вы в состоянии его прочитать и понять, значит я не зря делал эти выпуски. Ну, а если у вас возникнет желание высказаться по этому поводу (и не только этому), то свой комментарий вы можете оставить, прямо здесь.
Весь курс создания шаблона:

Комментариев: 31
о, спасибо... поэкспериментируем :wink:
Спасибо Вам, Максим за понятные инструкции. Благодаря Вам я научилась понимать php и разбираться в WordPress
Ну вот, Денис нас порадовал и второй частью шаблона на WordPress
Всем, кому интересно (рекомендую!), читаем на его сайте.
Кстати недавно столкнулся с тем что Opera и Firefox некорректно работают с background-position: top center;, а в IE как ни странно все отображалось правильно. Этот факт меня насторожил, а действительно ли Opera и Firefox "нормальные браузеры"?
Большое спасибо за детальные инструкции по созданию собственной темы с нуля. Я хочу перевести свой свой сайт на WordPress и Ваши инструкции черезвычайно полезны.
Валерий
Максим, Вы делаете очень много для расширения круга пользователей WordPress. Не нашли бы время для развития направления "Темы" в таком плане: сделать акцент на php содержание темы. Начать с примера простейшей темы - только вывод вывод дневниковых записей.
В следующих примерах наращивать функциональность приближаясь к порталу. Показать как это будет сказываться на скорости приложения.
Дизайн для всех примеров можно оставлять "академический", т.е. кроме div-ов ничего не надо.
Валерий.
Я подумаю.
Спасибо!
Максим, большое Вам спасибо! С большим удовольствием прочитал все Ваши выпуски.О PHP, HTML, о работе с WordPress-ом и ещё о куче всяких мелочей, отравляющих жизнь начинающему блоггеру так просто и доступно никто не писал. Спасибо ещё раз!
С наилучшими пожеланиями! Л.Г.
Максим, спасибо за интересные материалы. До ваших "опусов" никак не мог разобраться в WP шаблонах, ибо "ковырялся" изначально в default'овом, но там вообще темный лес
Хотя в css и php разбираюсь (те же шаблоны у джумлы разобрал по "костям"), но вот в WP кое-чего так и не "извлек" на свет:
1. За какой переменной прячется вывод навигационной строки
2. За какой переменной прячется вывод блока с тэгами
И вообще где можно прочитать подробнее про функции, о которых нет в ваших статьях?
Эти функции нужно отдельно писать или использовать плагины. Функции WordPress'а описаны в кодексе (http://codex.wordpress.org/). Где-то я на блоге приводил ссылку на сайт с описанием многих функций.
Отличная статья, вот только бы еще конечный результат был выложен (что получилось у вас), а то в прошлых выпусках все было.
Над картинкой есть ссылка на архив с готовым вариантом.
Сорри, не увидел :eek:.
Очень помогли статьи!!! спасибо.. не для всех цмс, хоть даже для блогов, написано столь подробную инструкцыю создания шаблона))
Прекрасно! А как сделать меню в хедере ?
а Я СДЕЛАЛ ДЛЯ себя проще,просто выбрал картинки какие мне нужно было заменить и поменял в исходнике теперь у меня обновленный дизайн
А почему нет функции добавления виджетов? :?:
Макс, дякую за дуже детальну інструкцію. Вже минув рік з її написання, але вона все ще актуальна і я думаю довго буде актуальною.
Дякую, я якраз роблю свою першу тему, написано суперово!:cool:
Очень познавательные статьи. Без них я не был бы способен создавать шаблоны для WP. Спасибо вам, Максим.
Урок №1 (Первый шаг)
Сделал все как написано до первой провеки.
Пишет что Список стилей не найден.
В чем ошибка то?
Ну значит файл стилей не найден.
Пардон мой косяк походу чуствителен к регистру был с большой буквы
Скажите пожалуйста, а если у меня к каждой статей (в контенте) присутствует рисунок либо илюстрация, как мне ее взять в рамочку и что и где мне прописать?
За ранее благодарна за ответ!
Здравствуйте.Спасибо за хорошие уроки,очень позновательно.Но появился такой вопрос.На учебном шаблоне я меняю картинки и у меня обрезается нижней части логотипа где то 15-20 пикселей и отображается фон контента
Рекомендую создавать виджет-адаптированные сайдбары.
http://codex.wordpress.org/Widgetizing_Themes
Максим, зачем этот блок:
div id="wrapper"
?
блин код не прошел
вот этот блок зачем?
Спасибо большое
Я раньше сидел на Joomla после перехода на вордпресс я его просто ненавидел... Из-за того что не мог понять как прикрутить свой дизайн, а после Вашей статьи я понял что ничего сложного нет. Конечно мне всё равно не нравиться жёсткая привязка к названиям блоков, но есть и преимущества перед Joomla в том плане что, если в джумле нужно скрывать что не надо, а тут наоборот можно это просто не вписывать и не выводить... Ещё раз спасибо 
У меня вопрос, вот сделаем мы шаблон - а как баннеры в шапку кинуть? надо плагин добавлять??
А то я начал с блогспота и там, нужно прописывать - возможность добавлять в шапку баннеры...Подскажи Макс.
как сделать так чтоб этот код был в каждой записи автоматически, чтобы его каждый раз не писать?
Вот прочитал этих несколько статтей. Автору респект! Большое спасибо! Работа сделанна на суперовом уровне!