Оригинал статьи – 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
Спасибо, полезно.
Привет. понятно и доступно и темы твои прикольные. у меня такой вопрос: какой минимум кода и стилей надо положить файлы чтобы увидеть результат? я сделал как ты написала, но css еще пуст(только начал разбирать что это), вроде активировал тему, а ничего не показывается когда пытаюсь войти на сайт
Привет! CSS в этом плане не имеет значения, он служит только для украшательства и не влияет на появление содержимого. Если на странице вообще ничего не показывается (пустой белый экран), то, вероятно, ошибка где-то в php-коде. Я могу посмотреть, но советую вам просто открыть index.php из шаблона Default (по умолчанию) и банально копировать код себе.
Осталось загрузить папку в директорию с другими шаблонами, по умолчанию это wp-content/themes.
Вот на этом месте можно подробнее. Во первых где эту папку найти, во вторых какой прогой все туда залить. Я сутки ее ищу и не могу найти. В браузере или где она. На компе понятно где. Тогда как ее на сайт перенести.
Вам нужен FTP-клиент. Эта такая программа, которая позволяет напрямую заходить в папки у вашего хостера без использования браузера, например, Total Commander или CuteFTP. Нужно будет ввести данные, которые легко найти на сайте вашего хостинга, и установить соедиение. Тогда вы увидите ветвь директорий, в том числе wp-content.
Если ваш хостинг разрешает использовать cPanel, можете закачать шаблон через Панель, а именно меню для загрузки файлов (называется по-разному).
Приятная статья, мне даже очень и очень понравилось! Попробовал, помогло, спасибо
Статья супер, я без особых навыков почти “натянул” html шаблон на WordPress, но, и столкнулся с рядом проблемм:
1. Возле ссылки отображаються кружки чёрные..
2. Это даже не проблема, это вопрос: нажмите на моё имя, перейдите на сайт – можно ли этот шаблон натянуть на WordPress? И не возникнет ли проблем с областями ссылок меню?
3. Сколько примерно стоит натяжка шаблона на двиг?
По поводу первого вопроса. Чёрные кружки, я так понимаю, отображаются у бокового меню? Подозреваю, что оно оформлено списками. Добавьте в CSS-файл следуюший код:
ul,ol { list-style:none; }
Ваш сайт, безусловно, натянуть можно. Хотя я не совсем понимаю насчет “областей ссылок”. Стоить это будет недорого, потому что шаблон простой.
Напишите мне на имейл сколкьо точно будет стоить натяжка шаблона на двиг, и если можно, вашу асю, чтоб я сразу к вам постучался – обсудим подробности…
Жду ответа…
Написала.
А как сделать два сайдбара? Как например у iPhones.ru?
Если нужно именно два меню в двух файлах, то вместо
php get_sidebar();
можно написать, например, так:
php include_once("sidebar1.php"); include_once("sidebar2.php");
В данном случае sidebar1.php – это первое меню, а sidebar2.php – второе. Но, судя по коду, на iPhones.ru всё сделано банальными таблицами.
Неплохой материал. Жду новых публикаций.
Подписался бы на RSS, но не нашел где, ответьте пожалуйста на е-мэил
Прикольный у вас дизайн на блоге. Заказывали где то или это бесплатный ?
Интернет пишется с большой буквы внутри предложения, если что. И сотые не с точкой, а с запятой. Это по стандарту.
А так неплохо все, просто вэри гуд!
Спасибо! Можно было еще добавить самих файлов, чтобы скачать.
Хороший ресурс)) Темы интересные и дизайн красивый)
Супер статья! Подписался на RSS, буду следить =)
Спасибо за статью!
Вопрос: при добавлении темы в Вордпрессе и при переходе в раздел “Виджеты”, появляется сообщение “Сайдбары не определены” и “…тема, который вы сейчас используете, виджет-несовместимая…”
Уже курю мануал, но если Вы знаете что можно сделать, чтобы пофиксить, скажите, пожалуйста.
Спасибо, разобрался.
Надо добавить functions.php – например, переписать из темы classic.
На всякий случай, текст sidebar.php:
first
second
По идее, WordPress сам должен подключать недостающие файлы из темы default.
У меня есть более полный обзор о том, Как создать свою WordPress-тему. Читайте — http://shehov.name/blog/2009-06-20-17
Спасибо! это первое, что я нашёл, но отличное начало.
А куда саму тему сохранять, в каком файле или «screenshot.png». Не разберу, сам дизайн темы разработал, скриншот сделал. А как и где сохранить не пойму, помогите!!!
Андрей, попробуйте на панели управления выбрать «Внешний вид» — «Добавить» тему — загрузить файл — установить тему из «.zip» архива.
Другой вариант: вам надо загрузить папку с темой туда, где у вас находится сам WordPress, то есть, в /wp-content/themes/. Потом её, опять-таки, можно будет выбрать во вкладке «Внешний вид».
Спасибо но до загрузки темы по FTP рано. Я не могу понять как мой шаблон, который я создал в отдельном файле Dreamweaver разкидать по четырём файлам для WordPress и я так думаю что скриншот темы тоже нужно определить в какойто файл. Не разберу также где нужно прописать путь <link rel=»stylesheet» href=»» /> к CSS файлу. Спасибо за понимание но с кодированием проблемы.
Между <head> и </head> нужно написать <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />.
А почему пишем только для нормальных браузеров? Ведь большинство использует ненормальный ИЕ. Есть еще и маньяки, которые используют ИЕ6. Ну это так…
А почему если один сайдбар, то , а если два, то через include()? WordPress не подхватывает файл по имени функции? Или, может быть, надо определить саму функцию где-то заранее?
Заранее спасибо.
Интересно!Есть желание посмотрите мой блог на похожие темы.
wp-designer.ru
Я сделал всё как надо, шаблон тоже удачно встал… но выдаёт такую ошибку “Cannot redeclare mysql2date() (previously declared in” в чём может быть проблема?
Попробуйте временно удалить или переименовать functions.php