Создание темы для WordPress. Часть 2. Создание темы из html-шаблона
Доброго времени суток. Сегодня мы с Вами продолжим создание темы для WordPress. Хочу немного напомнить материал прошлого урока “Создание темы для WordPress. Часть 1. Верстка и разбивка на отдельные файлы.”. На прошлом уроке мы создали c Вами html-шаблон и разбили его логически по разным файлам. А сегодня мы остановимся на переделовании данного html-шаблона в тему для WordPress. И так, давайте приступим…
Прежде, чем приступить к созданию темы для WordPress, у Вас должна быть установлена CMS WordPress и Вы должны иметь готовый htm-шаблон прошлого урока на базе которого мы и будем создавать свою тему WordPress, скачать его можно отсюда. Ну, что ж давайте приступим к созданию темы для WordPress на основе нашего html-шаблона.
В каталоге wp-content/themes/ создадим папку mytheme. В этой папке и будет находиться наша тема. Скопируем в нее наш html-шаблон.
Начнем с самого простого — таблицы стилей.
Изменение style.css
В таблице стилей в принципе ничего менять не надо. Единственное в начале файла необходимо добавить информацию о данной теме для WordPress:
/* Theme Name: MyTheme Theme URI: https://web-programming.com.ua Description: Создание темы для WordPress снуля Author: Ромчик Author URI: https://web-programming.com.ua Template: Version: 0.0.1 . Тут мы можем описать условие лицензии . */
где:
- Theme Name — название темы для WordPress
- Theme URI — адрес страницы данной темы
- Description — описание темы
- Author — автор данной темы
- Author URI — адрес страницы автора
- Template — необязательное поле, название родительской темы
- Version — версия темы
- .<текст>. — между точками мы описываем лицензию
На этом изменения для файла таблицы стилей завершены.
На следующем этапе перейдем к редактированию файла header.php.
Подключение таблицы стилей.
Давайте я приведу пример файла header.php, который у нас есть, чтоб наглядно было видно, что мы изменяем.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <b>Header</b> </div> <div id="clear"></div>
Теперь давайте подключим таблицу стилей, для этого строчку
<link href="style.css" rel="stylesheet" type="text/css" />
изменяем на:
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
Сохраняем, активируем в WordPress нашу тему. Переходим на сайт и видим, что стили подключились.
Описание фунции bloginfo.
Функция bloginfo служит для отображения информации о Вашем ресурсе. Информацию о ресурсе Вы можете заполнить в админке WordPress, перейдя в Настройки->Общие. Функция bloginfo может быть использована в любом месте Вашего шаблона. Рассмотрим параметры, которые принимает данная функция:
- name — выводит название Вашего ресурса
- description — выводит краткое описание Вашего ресурса
- admin_email — выводит адрес администратора
- url — выводит URL ресурса
- wpurl — выводит URL ресурса
- stylesheet_directory — выводит адрес, где расположены файлы с таблицами стилей
- stylesheet_url — выводит адрес к файлу style.css
- template_directory — указывает путь к папке с шаблоном
- template_url — указывает URL к папке с шаблоном
- atom_url — указывает URL к RSS-расслке через atom
- rss2_url — выводит URL к RSS рассылке, http://<сайт>/feed
- rss_url — выводит URL к RSS рассылке, http://<сайт>/feed/rss
- pingback_url — выводит URL к функции оповещения http://<сайт>/xmlrpc.php
- rdf_url — выводит URL к RSS-рассылке http://<сайт>/feed/rdf
- comments_atom_url — выводит URL RSS-рассылки к комментариям http://<сайт>/comments/feed/atom
- comments_rss2_url — выводит URL RSS-рассылки к комментариям http://<сайт>/comments/feed/
- charset — выводит кодировку ресурса
- html_type — выводит медиа тип
- language — выводит язык ресурса
- text_direction — выводит направление текста
- version — выводит версию WordPress
Мы с Вами разобрали одну из основных функций WordPress bloginfo, которая необходима для создания темы для WordPress.
Изменение мета-тегов.
Давайте теперь адаптируем мета теги в нашей теме. Для этого изменим строку:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
на следующую:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type')?>; charset=<?php bloginfo('charset')?>" />
Изменение title.
Давайте сделаем так, чтобы в title выводилось название нашего ресурса (Пока пусть будет, так. В дальнейшем мы title оптимизируем: будет выводиться название статьи и название ресурса). Для этого строку:
<title>Документ без названия</title>
изменим на:
<title><?php bloginfo('name')?></title>
На этом настройку файла header.php закончим и перейдем к настройке файла index.php
Настройка файла index.php.
Приведем пример нашего файла index.php, как он выглядит сейчас
<?php include('header.php') ?>
<div id="content">
<div id="center">
<b>Content</b>
<?php bloginfo('template_url') ?>
</div>
<?php include('sidebar.php') ?>
<?php include('footer.php') ?>
Переделаем его под тему для WordPress. Так для подключения файла header.php в WordPress используется следующая конструкция: get_header()
Функция get_header может принимать один параметр $name, тогда будет подключаться файл header-$name.php.
Для подключения файла sidebar.php используется функция get_sidebar(). По аналогии с get_header может принимать один параметр $name.
И для подключения footer.php используется функция get_footer(). Данная функция также может принимать один параметр $name.
Изменим наш index.php следующим образом:
<?php get_header() ?>
<div id="content">
<div id="center">
<b>Content</b>
<?php bloginfo('template_url') ?>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
Изменение footer.php.
Футер менять сильно не будем. А просто добавим в футер название нашего сайта и чтоб это название было ссылкой на главную страницу.
Файл footer.php:
</div> <div id="clear"></div> <div id="clear_div"></div> </div> <div id="footer"> <b>Footer</a> </div> </body> </html>
Изменим его следующим образом:
</div>
<div id="clear"></div>
<div id="clear_div"></div>
</div>
<div id="footer">
<a href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>
</div>
</body>
</html>
Все на этом наш второй урок закончен. Исходник данного урока Вы можете скачать по этой ссылке. В следующих уроках мы с Вами оформим страницу для вывода постов, страницу для вывода одного поста, вывод комментариев и много другое, что Вам поможет сделать профессиональную тему для WordPress. Так, что не пропускайте выхода новых статей подписавшись на RSS-рассылку данного блога.
[…] собственную тему для WordPress. На прошлом уроке мы с Вами создали тему из html шаблона. Но пока наша тема ничего не отображает. А в этом […]
Спасибо, все очень понятно.
Добрый день, ссылка на исходники не рабочая. Приходится все копипастить со страниц.
В описании подключения функций ошибка -> get_ssidebar()
исправил, спасибо
Исправил, спасибо
Люди подскажите, а как подключить вторую таблицу стилей?
<link href="/.css» rel=»stylesheet» type=»text/css» />. Единственное учтите, что приоритет будет за второй подключенной таблицей.