Spreadfirefox Affiliate Button

Создание темы для WordPress

11 июня
2007 года

Оригинал статьи — 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();
?>
<<em>div id="main"</em>>
<?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>
<<em>div class="storycontent"</em>>
<?php the_content(__('(more...)')); ?>
<<em>/div</em>>
<div class="feedback"><?php wp_link_pages(); ?><?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></div><<em>/div</em>> <!--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

    Всего комментариев: 33 на запись “Создание темы для WordPress”

    1. ElaSTiC пишет:

      Спасибо, полезно.

    2. vredin пишет:

      Привет. понятно и доступно и темы твои прикольные. у меня такой вопрос: какой минимум кода и стилей надо положить файлы чтобы увидеть результат? я сделал как ты написала, но css еще пуст(только начал разбирать что это), вроде активировал тему, а ничего не показывается когда пытаюсь войти на сайт :(

    3. deerstop пишет:

      Привет! CSS в этом плане не имеет значения, он служит только для украшательства и не влияет на появление содержимого. Если на странице вообще ничего не показывается (пустой белый экран), то, вероятно, ошибка где-то в php-коде. Я могу посмотреть, но советую вам просто открыть index.php из шаблона Default (по умолчанию) и банально копировать код себе.

    4. ААА пишет:

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

      Вот на этом месте можно подробнее. Во первых где эту папку найти, во вторых какой прогой все туда залить. Я сутки ее ищу и не могу найти. В браузере или где она. На компе понятно где. Тогда как ее на сайт перенести.

    5. deerstop пишет:

      Вам нужен FTP-клиент. Эта такая программа, которая позволяет напрямую заходить в папки у вашего хостера без использования браузера, например, Total Commander или CuteFTP. Нужно будет ввести данные, которые легко найти на сайте вашего хостинга, и установить соедиение. Тогда вы увидите ветвь директорий, в том числе wp-content.

      Если ваш хостинг разрешает использовать cPanel, можете закачать шаблон через Панель, а именно меню для загрузки файлов (называется по-разному).

    6. Виктор пишет:

      Приятная статья, мне даже очень и очень понравилось! Попробовал, помогло, спасибо :)

    7. Евгений пишет:

      Статья супер, я без особых навыков почти «натянул» html шаблон на WordPress, но, и столкнулся с рядом проблемм:

      1. Возле ссылки отображаються кружки чёрные...

      2. Это даже не проблема, это вопрос: нажмите на моё имя, перейдите на сайт — можно ли этот шаблон натянуть на WordPress? И не возникнет ли проблем с областями ссылок меню?

      3. Сколько примерно стоит натяжка шаблона на двиг?

    8. deerstop пишет:

      По поводу первого вопроса. Чёрные кружки, я так понимаю, отображаются у бокового меню? Подозреваю, что оно оформлено списками. Добавьте в CSS-файл следуюший код: ul,ol { list-style:none; }

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

    9. Евгений пишет:

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

      Жду ответа...

    10. deerstop пишет:

      Написала.

    11. Fir пишет:

      А как сделать два сайдбара? Как например у iPhones.ru?

    12. deerstop пишет:

      Если нужно именно два меню в двух файлах, то вместо

      php get_sidebar();

      можно написать, например, так:

      php include_once("sidebar1.php"); include_once("sidebar2.php");

      В данном случае sidebar1.php — это первое меню, а sidebar2.php — второе. Но, судя по коду, на iPhones.ru всё сделано банальными таблицами.

    13. Андрей пишет:

      Неплохой материал. Жду новых публикаций.

    14. Антон пишет:

      Подписался бы на RSS, но не нашел где, ответьте пожалуйста на е-мэил

    15. Михаил Александров пишет:

      Прикольный у вас дизайн на блоге. Заказывали где то или это бесплатный ?

    16. mambu пишет:

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

      А так неплохо все, просто вэри гуд!

    17. serg пишет:

      Спасибо! Можно было еще добавить самих файлов, чтобы скачать.

    18. lolaNala пишет:

      Хороший ресурс)) Темы интересные и дизайн красивый)

    19. Женя пишет:

      Супер статья! Подписался на RSS, буду следить =)

    20. Lfway пишет:

      Спасибо за статью!

      Вопрос: при добавлении темы в Вордпрессе и при переходе в раздел «Виджеты», появляется сообщение «Сайдбары не определены» и «...тема, который вы сейчас используете, виджет-несовместимая...»

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

    21. Lfway пишет:

      Спасибо, разобрался.

      Надо добавить functions.php — например, переписать из темы classic.

      На всякий случай, текст sidebar.php:

      first

      second

    22. deerstop пишет:

      По идее, WordPress сам должен подключать недостающие файлы из темы default.

    23. Никита Шехов пишет:

      У меня есть более полный обзор о том, Как создать свою WordPress-тему. Читайте — shehov.name/blog/2009-06-20-17

    24. Kont пишет:

      Спасибо! это первое, что я нашёл, но отличное начало.

    25. Андрей пишет:

      А куда саму тему сохранять, в каком файле или «screenshot.png». Не разберу, сам дизайн темы разработал, скриншот сделал. А как и где сохранить не пойму, помогите!!!

    26. deerstop пишет:

      Андрей, попробуйте на панели управления выбрать «Внешний вид» — «Добавить» тему — загрузить файл — установить тему из «.zip» архива.

      Другой вариант: вам надо загрузить папку с темой туда, где у вас находится сам WordPress, то есть, в /wp-content/themes/. Потом её, опять-таки, можно будет выбрать во вкладке «Внешний вид».

    27. Андрей пишет:

      Спасибо но до загрузки темы по FTP рано. Я не могу понять как мой шаблон, который я создал в отдельном файле Dreamweaver разкидать по четырём файлам для WordPress и я так думаю что скриншот темы тоже нужно определить в какойто файл. Не разберу также где нужно прописать путь <link rel=»stylesheet» href=»» /> к CSS файлу. Спасибо за понимание но с кодированием проблемы.

    28. deerstop пишет:

      Между <head> и </head> нужно написать <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />.

    29. Случайно зашел пишет:

      А почему пишем только для нормальных браузеров? Ведь большинство использует ненормальный ИЕ. Есть еще и маньяки, которые используют ИЕ6. Ну это так...

      А почему если один сайдбар, то , а если два, то через include ()? WordPress не подхватывает файл по имени функции? Или, может быть, надо определить саму функцию где-то заранее?

      Заранее спасибо.

    30. Создание темы для WORDPRESS | ViraStudio пишет:

      [...] взята – blog.sleety.org/wp/create-wp-theme/ Очень помогла разобраться в свое время. Поэтому хочу [...]

    31. Виктор пишет:

      Интересно!Есть желание посмотрите мой блог на похожие темы.

      wp-designer.ru

    32. Тимур пишет:

      Я сделал всё как надо, шаблон тоже удачно встал... но выдаёт такую ошибку «Cannot redeclare mysql2date () (previously declared in» в чём может быть проблема?

    33. deerstop пишет:

      Попробуйте временно удалить или переименовать functions.php

    Оставьте отзыв!

    Все комментарии предварительно проверяются администратором. Если ссылка на ваш сайт вызывает у меня сомнения (сайт рекламный, принадлежит не вам и т.п.), комментарий модерацию не пройдет. Пожалуйста, учтите это,прежде чем оставлять сообщение.