Основы правильного редактирования шаблонов WordPress
Неумелое редактирование шаблона WordPress может привести к плачевным последствиям. Удаление даже одной строки из кода темы может сделать ее полностью неработоспособной. Поэтому в этом вопросе нужно разбираться досконально.
Особенности шаблонов для WordPress
Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html. Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:
В состав темы входит несколько основных групп файлов:
- CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
- Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php;
- functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
- Изображения – рисунки, которые используются в качестве фона.
Благодаря использованию шаблонов в WordPress удалось отделить внешнее представление сайта от программного кода. Поэтому они никак не влияют друг на друга, и их версии можно обновлять по отдельности.
Все установленные темы доступны для просмотра через интерфейс админки сайта. Для этого нужно перейти в раздел бокового меню «Внешний вид» – «Темы». Некоторые параметры внешнего вида шаблона можно установить в пункте «Theme Options»:
- Поменять цвет меню;
- Установить цвет ссылок;
- Выбрать один из вариантов структуры сайта;
- Задать расположение меню;
- Установить цвет фона для контента.
Список параметров, доступных в «Theme Options», может быть разным для каждой из тем.
Для продвинутых пользователей в панели администрирования WordPress имеется встроенный редактор шаблонов. Он также доступен в разделе меню «Внешний вид»:
На диске (или хостинге) файлы всех установленных тем хранятся в папке wp-content/themes/. В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:
Чтобы лучше понять, как редактировать шаблон WordPress, разберем на примере создание темы для сайта.
Создаем новую рубашку для своего сайта
Создавать тему будем пошагово:
1) Заходим в директорию wp-content/themes/ и создаем папку theme_test. В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css. Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver. Внутри комментариев прописываем название темы:
/*Theme Name: Theme_test*/.
/************************************************
Defaults
************************************************/Так мы даем понять WordPress, что это стилевой файл новой темы;
3) Создаем с помощью того же редактора файл index.php. Вставляем в него код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style type="text/css">
* {
margin:0;
}
body {
height: 100%;
min-width:900px;
font-family:Cambria, "Times New Roman", serif;
background:#C0C0C0;
font-size:36px;
}
html {
position:relative;
min-height:100%;
}
#header {
height:100px;
background:#0080FF;
color:#fff;
padding-top:10px;
}
#content {
padding-top:20px;
padding-bottom: 100px;
}
#footer {
height: 50px;
padding-top:10px;
background:#0000A0;
position: absolute;
bottom: 0;
width: 100%;
}
#header .in_header {
width:800px;
margin:auto;
}
#content .in_content {
width:800px;
margin:auto;
}
#footer .in_footer {
width:800px;
margin:auto;
}
</style>
</head>
<body>
<div id="header">
<div class="in_header">
<p>Заголовок</p>
</div>
</div>
<div id="content">
<div class="in_content">
<p>Контент</p>
</div>
</div>
<div id="footer">
<div class="in_footer">
<p>Подвал</p>
</div>
</div>
</body>
</html>Сохраняем файл в папке нашей темы. Теперь здесь два файла, предназначенных для создания шаблона WordPress:
На данном этапе новая тема уже видна через админку сайта в списке установленных:
Если активировать тему, то в окне браузера сайт будет выглядеть вот так:
Как видно из примера, структура и стилевое описание шаблона в WordPress разделены. На практике за вывод частей дизайна отвечают функции. При вызове такой функции происходит генерация кода нужного элемента страницы по одноименному шаблону.
Так что перед тем, как сделать шаблон для WordPress, нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php. Затем разнесем по ним код одноименных частей страницы.
Содержимое footer.php:
<div id="footer">
<div class="in_footer">
<p>Footer</p>
</div>
</div>
</body>
</html>Содержимое header.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<title>Документ без названия</title>
</head>
<body>
<div id="header">
<div class="in_header">
<p>Header</p>
</div>Здесь строкой
<? get_header();?>
</div>
<div id="content">
<div class="in_content">
<p>Content</p>
</div>
</div>
<? get_footer();?>Вот таким образом мы создали одностраничный шаблон для блога.
Более легкий способ
Создание тем для WordPress требует хороших знаний и практического опыта веб-программирования. Поэтому был разработан целый ряд программных приложений, позволяющих создавать уникальные темы даже обычным пользователям. Рассмотрим их на примере программы TemplateToaster.
Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS. Также можно загрузить уже готовые темы:
Весь инструментарий приложения сосредоточен в верхней части. В самом окне редактора отображается черно-белый шаблон страницы сайта. Выделяя каждый из элементов дизайна, с помощью верхней панели инструментов устанавливаются значения множества параметров отображения:
После некоторых манипуляций с интерфейсом программы для создания шаблонов WordPress может получиться что-то стоящее. Доступен предварительный просмотр созданной темы в нескольких браузерах:
К сожалению, в бесплатной версии приложения сохранение темы не доступно. Возможен лишь ее импорт через ftp:
Но это не единственный способ, как создать шаблон для WordPress без специальных навыков. Еще это можно сделать с помощью онлайн-генераторов тем. Их интерфейс во многом схож с рассмотренным выше приложением.
- lubith.com – ресурс имеет англоязычный, но вполне понятный интерфейс. Для начала работы нужно пройти простую процедуру регистрации. Сервис позволяет не только создавать, но и скачивать разработанные шаблоны:
- yvoschaap.com – этот генератор также страдает англоязычностью. Для начала работы с ним не требуется регистрация. Поддерживается создание шаблонов и их скачивание. Но интерфейс немного трудноват для восприятия и имеет более узкий набор параметров для настройки:
Какой вариант создания шаблона выбрать?
Самостоятельное создание тем для человека, не наделенного соответствующим опытом и знаниями, может стать затруднительным. Поэтому лучше воспользоваться специализированными сервисами или приложениями. А полученные из этой статьи знания использовать для редактирования готовых шаблонов WordPress.
