Преобразование шаблона сайта в тему WordPress
Каждый сайт характеризуется своим дизайном. Если сайт действует уже какое-то время, то этот дизайн становится в некотором роде брендом сайта. Поэтому одним из факторов, который сдерживает людей при переводе традиционного сайта на платформу WordPress, является именно нежелание отказываться от существующего дизайна.
К счастью, при переводе сайта на WordPress сохранить дизайн не так тяжело. Для этого достаточно просто перевести его в новую тему WordPress. В этой статье мы рассмотрим вопрос о том, как это делается.
Каждый, кто имел дело с системой WordPress, знает, что дизайн вордпрессовского сайта в значительной мере отделен от его движка. За дизайн отвечает шаблон, или тема, и при установке новой темы дизайн может меняться коренным образом. Сам процесс установки новой темы довольно прост, и его легко может выполнить человек, не имеющий специальной подготовки.
Тема представляет собой некоторый набор файлов, которые закачиваются на сервер, после чего тема активируется в админпанели, и все готово. Однако сама по себе тема может быть достаточно сложна, и для разработки новой темы, вообще говоря, требуются познания не только в веб дизайне, но и знание HTML, CSS и PHP.
Большинство коммерческих шаблонов достаточно сложны. Но сложность их вызвана, прежде всего, тем, что разрабатываются они для продажи, а значит, должны быть в высшей степени настраиваемыми и универсальными. Человек, купивший тему, должен быть в состоянии изменить множество характеристик дизайна, как то: цвет фона, фоновый рисунок, гарнитуру и размеры шрифтов, цвет шрифта, количество и расположение сайдбаров, и т.д. и т.п.
Но все изменения делаются один раз, при установке и настройке темы. После этого все эти возможности уже не нужны. Действительно, трудно себе представить сайт, где каждую неделю будут меняться цвета фона или шрифта, или что-то еще. Поэтому при переводе сайта на WordPress шаблон сайта не требует лишних «наворотов». А значит, весь процесс может быть не так сложен.
Перейдем теперь к самому процессу создания темы. Если Ваш сайт делался давно, и использовал старые спецификации HTML, не использовал стили CSS, то будет нелишним предварительно привести шаблон страниц сайта в соответствие с последними стандартами. Это значительно облегчит дальнейшие работы по переводу шаблона на WordPress.
В отличие от статических сайтов, где вся информация присутствует непосредственно в тексте HTML, в сайтах WordPress большая часть необходимой информации извлекается непосредственно из внутренней базы MySQL.
Например, каждая страница сайта содержит уникальный тэг TITLE. На статическом сайте все эти заголовки страниц формируются вручную для каждой отдельной страницы. Текст тэга TITLE присутствует в точности в том виде, как есть. В то же время на вордпрессовском сайте все заголовки хранятся в базе данных, и при формировании каждой страницы извлекаются оттуда и переносятся в текст HTML кода.
Результирующая страница WordPress собирается воедино из нескольких шаблонов файлов, тэги этих шаблонов обращаются к базе данных, извлекая необходимую информацию, и в конечном итоге мы получаем страницу, которая внешне практически неотличима от страницы обычного сайта. Но вместо создания десятков и сотен отдельных страниц нам потребуется создать всего лишь несколько шаблонных файлов. Что это за файлы?
Прежде всего, это CSS файл стилей style.css. Он содержит всю необходимую информацию по отображению контента на страницах сайта, такую как цвета фона и шрифтов, гарнитуру и размеры шрифтов, цвета ссылок, и прочую информацию подобного рода. Далее, это файлы шаблонов страниц и их составных частей, написанные на PHP. И, наконец, это файлы скриптов, графические файлы картинок, некоторые другие специальные файлы.
Каждая страница сайта, как правило, делится на несколько логических частей. Это такие части, как шапка (хедер), боковая панель (сайдбар), основной контент, и подвал (футер). При этом шапка и подвал повторяются в точности для всех страниц, боковая панель может незначительно отличаться для нескольких типов страниц, и все страницы содержат разный основной контент.
В каждой странице статического сайта все эти части присутствуют непосредственно. В то же время страница сайта WordPress каждый раз собирается заново из отдельных шаблонов. Нет никакого смысла держать на сайте одну и ту же повторяющуюся информацию.
Соответственно, обычно тема WordPress включает в себя следующие файлы:
- header.php
- index.php
- single.php
- page.php
- sidebar.php
- footer.php
- functions.php
Бывают и другие, но эти являются основными. Однако начинается каждая тема с файла style.css.
Файл стилей
Файл стилей присутствует в каждой теме WordPress. В нем содержится общая информация о теме, которая размещается в комментарии в начале файла. Далее идут сами стили.
Без общей информации о теме, она просто не существует, то есть WordPress считает, что ее нет. В результате такую тему невозможно активировать. Вот содержание стандартного префикса темы в файле CSS (для темы Кубрик).
/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous Kubrick
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
*/
Такие же данные должны присутствовать и для любой другой темы. Обязательным параметром является название темы, остальные могут быть или отсутствовать.
Таким образом, для формирования файла стилей темы WordPress Вы должны взять свой файл стилей, который используется для страниц статического сайта, и добавить в его начало префикс по указанной форме. Как минимум, необходимо указать имя темы, и при желании другую информацию о теме и о себе. Файл сохраните.
Сегментация страницы сайта
Как мы уже говорили, все логические части присутствуют на странице статического сайта. Но для формирования темы нам придется их разделить.
Необходимо выделить часть шапки, которая пойдет в файл header.php, часть боковой панели для файла sidebar.php, а также подвал страницы, который разместится в файле footer.php. Что касается части основного контента, то она будет уникальна для каждой страницы.
Теперь выделите каждую из перечисленных частей страницы, и в HTML редакторе разграничьте их тэгами комментариев, например:
<!-- НАЧАЛО SIDEBAR -->
<!-- КОНЕЦ SIDEBAR -->
Вначале выделите хедер, затем сайдбар, основной контент, и, наконец, футер. Каждая из частей должна оказаться между соответствующими тэгами начала и конца данной части.
При этом весь повторяющийся контент должен оказаться внутри хедера, сайдбара или футера. То же содержание, которое уникально для каждой из страниц сайта, будет находиться в секции основного контента.
После того, как весь шаблон HTML статического сайта сегментирован, можно приступать к построению шаблонов темы WordPress. Этот процесс мы рассмотрим подробно в следующей части цикла.
Другие статьи цикла:
Перенос обычного сайта на WordPress
Все неплохо, и так понятно описано, можно прям учебный курс создать, но очень сложно подбить все это под W3 валидацию. На моем сайте Casinobius.ru проверил (шаблон купленный даже) так там было 160 ошибок данного рода, после моей работы над оттачиванеим css осталось 56 и то не могу понять в чем там проблемма! Можно конечно исправить как сказано на сайте валидатора, но можно потерять в дизайне! TЩЕ ПРО SIDEBAR: да вещь хорошая, но лучше пользоваться кодом и вставлять прямо в код страницы, так читал на многих сайтах!
А какое отношение к данному материалу имеет валидация? Вы ведь сами приводите пример, касающийся легально купленной темы. Как видите, проблемы с валидацией бывают и у профессиональных тем.
К тому же я бы не стал так уж сильно полагаться на валидаторы. Это такие же программы, как и любые другие, и точно так же могут ошибаться. Да и сообщения бывают разные, т.е. разной степени тяжести. Если это предупреждающие сообщения, то можно их просто принять к сведению. В конце концов, критерием истины является практика, то есть то, как виден сайт в браузерах. Если нормально, то нет смысла исправлять то, что работает.
Почему же тогда все пытаются использовать W3 валидатор для теста сайта?
Как одно из средств для проверки правильности. Но не следует его абсолютизировать.