Выпуск 24. Делаем собственный шаблон
Шаблоны WordPress
Многие хотели бы научиться делать свои шаблоны для WordPress'а. Вот недавно появился перевод "Сделайте вашу собственную тему для Wordpress" - на мой взгляд отличное руководство, хотя и не лишенное недостатков.
Совсем недавно нас порадовал Денис с "WP Theme Design Show" (создание шаблона для WordPress). Так что эти ссылки, надеюсь, вам пригодятся.
С моей стороны, предлагать вам еще одно руководство по созданию шаблонов, да еще и утверждать, что оно лучше других, было бы легкомысленно. Поэтому, я решил сделать несколько выпусков, в которых на простых примерах, с подробным разъяснением показать как бы это делал сам. Если вам эти опыты покажутся интересными и полезными, буду только рад.
Как обычно я буду стараться подробно останавливаться на каждом шаге. Для опытных это может показаться нудноватым, но я рассчитываю на неподготовленного читателя.
Как и чем работать будем?
Перед тем, как приступить непосредственно к написанию шаблона, нужно определиться с основами. Нам потребуются знания как минимум из четырех обласей:
- Умение читать HTML
- Умения читать и разбираться в CSS
- Иметь представление о PHP
- Знать основы WordPress
Я напомню, что многие из этих вопросов я уже рассматривал в предыдущих выпусках рассылки, поэтому вы можете обратиться к её архиву.
Для написания самого кода нам потребуется самый обыкновенный Блокнот или его улучшенный вариант, например Notepad2. Впрочем это не принципиально и вы можете выбрать свой вариант. Главное, чтобы вам было удобно с ним работать.
Основная идея шаблона
Первым шагом мы должны определиться со структурой нашего шаблона. Нам нужно держать в голове функциональные блоки WordPress (блок рубрик, ссылок, счетчиков, рекламы, управления и т.д.) и представить себе их расположение на сайте.
Чтобы как-то визуализировать этот процесс, воспользуемся отличной подборкой из 40 готовых каркасов.
Об этой ссылке я узнал у одного из участников группы русского WordPress'а. Если у вас есть аккаунт на Google, то вы можете присоединиться к группе.
Я решил остановиться на трехколоночном варианте (номер 9), поэтому вам нужно будет тоже его скачать.
Переходим к WordPress'у
Каркас, который мы только что скачали, содержит в себе готовый css-код, благодаря которому осуществляется позиционирование элементов структуры сайта. Конечно же это самый минимум, но для нас это идеальное решение, поскольку мы теперь сможем сами добавить нужные блоки и оформление к ним.
Чтобы подключить шаблон к WordPress'у нужно сделать в каталоге /themes/ , каталог, в котором и будет располагаться наш шаблон. Шаблон мы назовем Rioni, соответственно и каталог будет с тем же именем.
Сейчас нам не нужно думать ни об оформлении, ни о программировании. На этом этапе мы должны просто создать файлы, которые будет понимать WordPress.
Файл style.css
Описание шаблона хранится в этом файле в самом верху в виде css-комментария. То есть вы создаете пустой файл с именем style.css. В самом его верху пишем:
/* Theme Name: Rioni Theme URI: Description: Обучающий шаблон Rioni Version: 1.0 Author: MAX Author URI: http://maxsite.org/ */
После этого откроем наш каркас (файл "LayoutGala09.html") и скопируем из него css-стили ( они располагаются между строк:
<style type="text/css"> ... нужный нам код ... </style>
Обратите внимание, что кодировка нашего шаблона будет UTF-8. Если вы используете другую, то измените её указание там, где она явно указана.
В итоге мы получаем нужный нам css-файл.
Файлы шаблона
WordPress-шаблон может состоять всего из двух файлов: style.css и index.php. Однако, это не самый подходящий вариант, поскольку нам нужно будет разделить шаблон для разных функциональных частей: меню, подвал, шапка и т.д. Поэтому, мы сделаем такую структуру:
- header.php (вывод заголовков html)
- index.php (основной файл)
- sidebar-1.php (первое боковое меню)
- sidebar-2.php (второе боковое меню)
- footer.php (подвал)
- main.php (вывод содержимого)
Файлы index.php
Этот файл является главным для шаблона WordPress. Если нет другого файла-шаблона, например home.php (используется для вывода главной страницы), то WordPress отдает управление именно в файл index.php.
Создаем файл index.php. В самом начале подключаем:
<?php
require('./wp-blog-header.php');
require_once('header.php');
?>
Первый файл нужен нам для "подключения" к функциям WordPress, а вторым мы подключаем header.php, в котором будет находиться html-секция HEAD.
После этого открываем наш каркас и копируем из него все строки (в index.php):
</head> <body> ... вот от этих тэгов и копируем до конца файла ...
Файл footer.php
В этом файле мы подключим подвал сайта. Поскольку пока мы не решили все вопросы с оформлением, то пока добавим в этот файл любой текст, например:
<p>(C) 2007, RIONI</p>
Подключаем footer.php
Открываем файл index.php и в конце файла находим блок подвала:
<div id="footer"><p>Here it goes the footer</p></div>
Должно получиться так:
<div id="footer">
<?php require('footer.php'); ?>
</div>
Файл header.php
Этот файл практически во всех шаблонах типовой. В нем содержатся мета-тэги, подключаются стили, пинги и т.д. Я привожу сразу готовый вариант, поскольку особых вариаций не требуется:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="WordPress <?php echo $wp_version ?>">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon"
href="<?php echo get_settings('siteurl'); ?>/favicon.ico"
type="image/x-icon">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="<?php bloginfo('rss2_url'); ?>">
<link rel="alternate" type="text/xml" title="RSS .92"
href="<?php bloginfo('rss_url'); ?>">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
href="<?php bloginfo('atom_url'); ?>">
<?php wp_head(); ?>
</head>
<body>
<!-- end header -->
Первая проверка
Начальный этап завершен. Теперь мы можем зайти в админ-панель и выбрать шаблон Rioni. Если вы все сделали правильно, то на сайте вы должны увидеть наш каркас (один в один).
Конечно же пока наш шаблон не обладает нужной функциональностью, зато мы смогли перенести html-шаблон на WordPress 
.
С этого момента мы сможем контролировать процесс разработки визуально, просто обновляя браузер.
Лирическое отступление
Мне бы хотелось, чтобы вы попробовали выполнить все предлагаемые действия. Если вы действительно хотите понять процесс создания шаблона, то простое "копи-пасте" вас ни чему не научит. Только выполнение задачи, когда вы столкнетесь с какими-нибудь трудностями и сможете их решить, только так можно научиться чему-либо. Другого пути нет.
Название блога
Наполним шаблон небольшой функциональностью. Для этого мы будем использовать функции WordPress'а. Начнем с названия блога.
Используем функции:
- bloginfo('name') - вывод названия
- bloginfo('description') - описание блога
- bloginfo('siteurl') - путь к главной странице
Находим в index.php div-блок "отвечающий" за вывод верхней шапки. Несложно догадаться, что это <div id="header">.
Добавляем наши функции:
<div id="header">
<h1><a href="<?php bloginfo('siteurl') ?>/"><?php bloginfo('name') ?></a></h1>
<h2><?php bloginfo('description') ?></h2>
</div>
Сразу же проверяем результат. Мы видим, что текст в шапке расположен не совсем верно -получились слишком большие отступы между текстами. Для его исправления нам нужно править style.css.
Правила CSS
Чтобы ориентироваться в CSS, вам нужно знать несколько несложных правил.
1. Для описания тэга в CSS можно использовать такую конструкцию, например :
h1 { color: #FF00FF; margin: 10px; }
Эта запись будет означать, что все тэги <h1> будут отображены цветом #FF00FF и иметь отступ 10px с каждой стороны.
Сразу определимся с браузером. Дело в том, что есть хорошие браузеры, а есть плохие, например IE. Чтобы нам не мучиться, мы будем делать шаблон только для хороших браузеров, например FireFox или Opera, потому что они соответствуют стандартам. А для плохого браузера, при желании, мы в самом конце может быть сделаем костыли в виде хаков. Другого способа нет.
2. Если нам нужно описать идентификатор ID, то используем такую конструкцию:
div#header {height: 150px; margin: 0; background: #EEE; color: #79B30B;}
Эта запись будет применена в тегу <div id="header">. Для него установится высота 150px, фон цвета #EEE (короткая запись, которая соответствует #EEEEEE) и цвет текста внутри блока будет #79B30B.
3. Если нам нужно описать класс (class), то пишем:
h1.header {color: red;}
Это оформление будет применено к тэгу: <h1 class="header">.
4. Кроме этих правил, в CSS используется наследование. Например, если мы запишем:
div #footer p {margin: 0; padding: 10px;}
- то это будет означать, что тэги <p>, внутри элемента с id="footer", который входит в <div> будет иметь внешний отступ 0px и внутренний 10px.
5. Ну и на последок, есть еще одно правило: если вы вначале файла определили элемент, например красным цветом, а после переопределили его зеленым, то отображаться он будет зеленым.
Теперь, зная эти правила, мы сможем приступить к редактированию наших стилей.
Подправим style.css
Поскольку нам все равно переделывать стили, то есть смысл сразу же подчистить существующие, чтобы в дальнейшем к этому вопросу не возвращаться.
Порядок таков: смотрим появляющиеся тэги (а также id, class) в index.php, и в такой же последовательности определяем их в style.css.
Первым нам попадется тэг <body>. Определяем его так:
body {font-family: Arial, Sans-serif; font-size: 10pt;}
- то есть мы определили, что базовым размером шрифта для всего шаблона будет 10pt, гарнитурой Arial.
После этого мы находим div#container. Обратите внимание, что в файле он встречается дважды. В этом блоке находится содержимое всего шаблона, поэтому этот блок отвечает за выравнивание по центру браузера.
Пишем так:
div#container {width: 700px; margin: 0 auto;}
Этим мы указываем, что ширина блока 700px, а выравнивание достигается автоматической установкой отступов слева и справо, а сверху и низу нулевыми.
После этого у нас пойдут блоки с текстами, поэтому перед ними нужно прописать основные установки для ссылок и абзацев (пока этого хватит). После этого можно будет изменить стиль (например ссылок) в конкретном блоке.
Пишем:
p {margin: 3px 0px 4px 0px;}
a {color: red;}
С ссылкой думаю, ясно, а вот параметры margin расшифрую. Все оступы можно указать короткой записью в следующем порядке: верх, право, низ, лево, то есть обход по часовой стрелке, начиная от полдня (так легче запомнить).
В конце подчистки вам нужно будет самостоятельно сгруппировать повторяющиеся элементы, чтобы они оказались рядом.
Делаем header
Как видно по коду, нам нужно переопределить стиль для div#header. Наш h1 находится в div#header. Но, для начала, неплохо было бы определить сам div#header и, после, значения для h1 и h2.
Я решил, что саму надпись названия блога и его описание нужно разместить на сером фоне снизу слева. Делается это так:
div#header {background: #EEE; padding: 100px 10px 10px 10px;}
div#header h1 {font-size: 14pt; margin: 0px;}
div#header h2 {font-size: 10pt; margin: 0px;}
Думаю, что этот код не вызовет у вас затруднений, но всё-таки его опишу.
- div#header - устанавливаем фон серый (#EEE); внутренние отступы: сверху - 100px, остальные по 10px.
- div#header h1 - элемент h1 в этом блоке: шрифт 14pt, все отступы сбрасываем.
- div#header h2 - аналогично предыдущему, для h2 только размер шрифта 10pt.
На цвета мы сейчас особого внимания не обращаем. Они настраиваются в последнюю очередь. Сейчас главное размеры и расположение элементов.
Если у вас не было ошибок, то вы увидите уже рабочий шаблон с ссылкой на главную страницу (хотя, больше ничего пока и нет ).
Ну а, если у вас возникли проблемы и, что-то не получилось, то вы можете скачать мой вариант и сверить со своим.
Продолжение: http://maxsite.org/ras25
Весь курс создания шаблона:
