1 этап Подготовка

Предположим, что вы уже знакомы с wordpress, знаете html и css и имеете хотя бы смутное представление о php.
Что мы имеем на старте:
установленная CMS WordPress на хостинге или локально на Denver
редактор (лично я пользуюсь PHP Designer)
Если вы готовы — то приступаем.

2 этап

подберем нужный нам «каркас» нашего сайта

я нашел простой каркас на 2 колонки — который вполне можно использовать для примера

скачать каркас «2col»

3 этап

Когда мы определились с шаблоном и знаем наверняка где будем располагать функциональные блоки WordPress (меню, счетчики, реклама и т.д.) — мы можем приступать к сборке нашего собственного шаблона

4 этап

Создаем папку нашей темы в каталоге /themes/

Файл style.css

Описание шаблона хранится в этом файле в самом верху в виде css-комментария. То есть вы создаете пустой файл с именем style.css. В самом его верху пишем:

/*
Theme Name: theme Name
Theme URI:
Description: Обучающий шаблон theme Name
Version: 1.0
Author: Xobotoff
Author URI: http://alex.xobotoff.ru/
*/

Из таблицы стилей заготовленного каркаса копируем сюда все содержимое после css-комментария.

Мы получили нужный нам css-файл нашего шаблона.

Файлы шаблона

WordPress-шаблон может состоять всего из двух файлов: style.css и index.php. Однако, это не самый подходящий вариант, поскольку нам нужно будет разделить шаблон для разных функциональных частей: меню, подвал, шапка и т.д. Поэтому, мы сделаем такую структуру:

index.php (основной файл)
header.php (вывод заголовков html)
sidebar.php (боковое меню)
footer.php (подвал)

index.php

Этот файл является главным в шаблоне WordPress. Если нет , например home.php (используется для вывода главной страницы), то WordPress отдает управление именно в файл index.php.

Сюда мы можем смело поместить всё содержимое файла index.html нашего каркаса.

только укажем расположение стилей таким образом:

найдем строку 10

<link rel="stylesheet" href="style.css" />

и заменим на

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

в выбранном мной для примера каркасе присутствуют 2 картинки. положим их в папку /images/
и в стилях подпишем новый путь до картинки
и в index.php в строке 28 укажем путь
вместо

<img src="logo.gif" alt="Ampersand Solutions" />

пишем

<img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="Ampersand Solutions" />

добавим в отсек  head

<?php wp_head(); ?>

и в самом конце перед  /body

<?php wp_footer(); ?>

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

Сборка собственного шаблона wordpress. Часть 2