Создание темы для WordPress. Часть 2. Создание темы из html-шаблона

Ромчик
8

Создание своей темы для WordPressДоброго времени суток. Сегодня мы с Вами продолжим создание темы для 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-рассылку данного блога.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Создание темы для WordPress. Часть 3. Вывод постов. | Все о WEB программировании - 26.02.2012 в 15:10

    […] собственную тему для WordPress. На прошлом уроке мы с Вами создали тему из html шаблона. Но пока наша тема ничего не отображает. А  в этом […]

  • Vitaliy - 09.08.2012 в 18:41

    Спасибо, все очень понятно.

  • Третяк Дмитрий - 05.11.2012 в 15:15

    Добрый день, ссылка на исходники не рабочая. Приходится все копипастить со страниц.

  • akurio - 06.12.2012 в 03:12

    В описании подключения функций ошибка -> get_ssidebar()

    • Roman - 06.12.2012 в 14:44

      исправил, спасибо

    • Roman - 06.12.2012 в 14:47

      Исправил, спасибо

  • Razdor - 07.06.2013 в 20:33

    Люди подскажите, а как подключить вторую таблицу стилей?

    • Roman - 08.06.2013 в 21:27

      <link href="/.css» rel=»stylesheet» type=»text/css» />. Единственное учтите, что приоритет будет за второй подключенной таблицей.

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика