Оригинал статьи – anekostudios.com. Перевод вольный.

Часто спрашивают, как изменить дизайн сайта так, чтобы он работал под WordPress. На самом деле, это довольно просто. Сайт, который вы видите — мой первый опыт в изготовлении подобных тем. Я расскажу, как заставить мирно сосуществовать WordPress и любые дизайны. Надеюсь, у вас есть хотя бы какие-то познания в HTML, CSS и — в идеале — PHP, но если возникнут вопросы, можете задавать их прямо здесь, в комментариях.

Итак, я расскажу, что я обычно делаю, когда у меня есть:
1) сайт, который надо совместить с WordPress
и/или 2) желание создать новую тему специально для WordPress.

Шаг первый. Оформление вашего сайта.

Для начала надо создать сам сайт. Я использую тот язык разметки, который мне удобнее (обычно XHTML 1.0 Strict, при необходимости Transitional), и просто сооружаю шаблон сайта: кодирую всё, как если бы делала обычную статическую страницу, создаю кнопки, заголовки, файл стилей CSS и цвета — всё. После этого я проверяю код и файл стилей на наличие ошибок. Такая проверка очень важна, особенно если вы собираетесь разместить готовую тему для общего пользования. Если вы исправите ошибки сейчас, то более чем в два раза сократите время последующих правок. Я также стараюсь чаще комментировать во время работы, особенно когда кодирую в XHTML. Нет ничего противнее, чем наблюдать кучу <div>-тэгов в начале файла, столько же в конце, еще больше — в середине, и не знать, какой <div> закрыт, а какой нет.

В общем, для примера возьмем дизайн, состоящий из двух колонок. Конечный код (без текстового наполнения) будет выглядеть примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>
<body>
<div id="wrapper">

<div id="header">
</div> <!-- конец заголовка -->

<div id="content">

<div id="sidebar">
</div> <!-- конец боковой панели -->

<div id="main">
</div>

</div> <!-- конец содержимого -->

<div id="footer">
</div> <!-- конец нижней части -->

</div> <!-- конец наполнителя -->
</body>
</html>

Зачем мне получившийся файл с готовым дизайном? Я хочу быть уверена в том, что все составляющие шаблона находятся на своих местах и в правильном порядке, и проверить ошибки на этой стадии — ведь, например, один незакрытый тэг <div> может превратить ваш дизайн в бесполезное месиво из текста и картинок. Закончите кодировку шаблона сейчас, прежде чем мы разделим этот сайт под WordPress, исправлять что-либо потом будет немного сложнее, особенно если вы не очень разбираетесь в коде. :)

А теперь, когда готов сам дизайн, давайте приспособим его для WordPress.

Шаг второй. Разделение шаблона.

Итак, сначала нужно разделить шаблон. Вы должны разделить свой дизайн на 4 части: header.php, footer.php, index.php и sidebar.php. Что они значат?

header.php — заголовок, то, начало вашего сайта. Обычно состоит из статичных элементов: какие-то картинки, ссылки, иногда меню.

sidebar.php — боковая панель. :)

index.php — “начинка” сайта, тут лежит ценное содержимое и динамически меняющиеся элементы (то есть программный код). :)

footer.php — нижний колонтитут, конец шаблона.

WordPress, грубо говоря, соединяет эти четыре части, как паззл. Каждый файл ложиться на свое место и образует сам сайт. Для чего это нужно? Возьмем пример, когда в вашем сайте более ста страниц. У каждой страницы одинаковый заголовок, фоновые изображения, панель навигации и т.д., меняется чаще всего только содержимое. И если вам нужно, к примеру, добавить ссылку в меню, то придется вручную вставлять эту ссылку на каждую из 100 страниц. Когда вы используете темы, то достаточно сделать только одно изменение – например, добавить ссылку в sidebar.php — и изменяться все остальные страницы. По-моему, очень мило.

Вернемся к коду, который мы соорудили, и я покажу, как разбить его на части.

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>

<body>

<div id="wrapper">

<div id="header">
</div> <!-- Конец заголовка -->

<div id="content">

С этого когда будет начинаться каждая ваша wordpress-страница. Далее у нас идет боковая панель:

sidebar.php:

<div id="sidebar">
</div> <!-- конец боковой панели --> И, наконец, нижняя панель:

footer.php:

</div> <!-- конец содержимого -->
<div id="footer">
</div> <!-- конец нижней части -->
</div> <!-- конец наполнителя -->

</body>
</html>

Я пропустила index.php, чтобы для начала показать статичные (не меняющиеся) области сайта. Конечно, впоследствии вы можете вставить туда и динамически меняющиеся элементы. А теперь index.php:

index.php:

<?php
get_header();
?>

<?php
get_sidebar();
?>

<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> —
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
</div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>

<div class="feedback">

<?php wp_6_link_pages(); ?>

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>

</div> <!--closing .post -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>

<?php posts_nav_link(' — ', __('« Предыдущая страница'), __('Следующая страница »')); ?>

<?php get_footer(); ?>

</div>

Если вы приглядитесь, то заметите, что это все тот же шаблон, разграниченный тэгами <div>. Только теперь он разбит на части:

<?php
get_header();
?>

<?php
get_sidebar();
?>

Здесь идет содержимое сайта, а именно, программный код. Чтобы разбираться в нем, желательно знать основы PHP-программирования. И заканчивается…

<?php
get_footer();
?>

WordPress начнет загрузку сайта с того, что вызовет страницу index.php, которая, в свою очередь, увидит этот php-код и обратиться к header.php, sidebar.php и footer.php. К примеру,
<?php
get_header();
?>
разместит на странице заголовок — содержимое файла header.php. И так далее, пока наш сайт не соберется, как детский конструктор.

Шаг третий. Использование CSS

Итак, шаблон сайта готов, но если вы загрузите его прямо сейчас, то работать он не будет. :) Почему? Дело в том, что мы не позаботились указать правильный путь к файлу со стилями. Обычный адрес вроде

<link rel=”stylesheet” href=”style1.css” />

в данном случае не сработает. Дело в том, что файлы не будут располагаться в корневой директории сайта, а ссылка с header.php пока ведет именно туда. Вот правильный путь к CSS-файлу, который используется по умолчанию:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” />

“Стоп!”, – скажете вы. У меня же есть и другие файлы стилей: например, дополнительные заплатки для броузера IE или стили для печати страницы на принтере. Воспользуемся альтернативным вариантом:

<?php bloginfo(‘template_directory’); ?>

Это код указывает путь к вашей директории шаблонов (themes). Далее вам нужно самим указать конкретный файл со стилями, например, print.css для печати страницы на принтере:
<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/print.css” media=”print” />
Также помните, что WordPress, помимо своих собственных тэгов, активно использует готовые тэги HTML. Например, меню пол умолчанию оформляется как список:

<ul><h2>Ваше меню</h2>
<li>ссылка первая</li>
<li>ссылка вторая</li>
<li>еще ссылка</li>
<li>ссылка</li>
</ul>

Таким образом, если вы не используете <li> в стилях, ваша панель навигации будет выглядеть странно. Лучше назначить CSS какие-то свойства для этих тэгов. Если встретитесь с подобной ситуацией, просто посмотрите сам код страницы (“CTRL” + “U” в браузере Firefox), чтобы узнать, какие-именно тэги использовал WordPress.

Окончание

С внешним оформлением вы закончили, осталось наполнить его содержимым. Например, изменить index.php по вашему желанию, включить панель навигации в sidebar.php:

<div id="sidebar">
<?php get_links_list(); ?>
</div>

Теперь надо сделать скриншот, чтобы наш дизайн красиво отображался на странице выбора шаблонов (панель администратора WordPress, по умолчанию Presentation или “Внешний вид”). Откройте шаблон в вашем браузере, нажмите Print Screen, затем вставьте изображение в любой графический редактор (Edit -> Paste). Уменьшите изображение до размера 300х225 и сохраните как “screenshot.png” (расширение — png).

Также желательно добавить информацию о шаблоне в css-файл. Открываете файл со стилями и в самом начале пишете:

/*
Theme Name: Название вашей темы.
Theme URI: Адрес темы в интернете.
Description: Описание.
Author: Ваше имя. :)
Author URI: Ваш сайт.
Version: Версия. Первая, вторая и так далее. Обычно номеруют: version 1.0, 2.0 и так далее. Впрочем, можете обозначать версии любым способом, каким вам удобно, например, указывать дату создания шаблона.
*/

Вот и всё. Теперь поместите файлы в какую-нибудь папку, например, newtheme. Осталось загрузить папку в директорию с другими шаблонами, по умолчанию это wp-content/themes.

Например: http://www.сайт.com/wordpress/wp-content/themes/newtheme