Шаблон WordPress


Перед тем, как приступить непосредственно к написанию шаблона, нужно определиться с основами. Нам потребуются знания как минимум из четырех областей:
   1. Умение читать HTML
   2. Умения читать и разбираться в CSS
   3. Иметь представление о PHP
   4. Знать основы WordPress
Для написания самого кода нам потребуется самый обыкновенный Блокнот или его улучшенный вариант, например Notepad2. Впрочем, это не принципиально и вы можете выбрать использовать любой графический редактор. Главное, чтобы вам было удобно с ним работать.

Основная идея шаблона

Первым шагом мы должны определиться со структурой нашего шаблона. Нам нужно держать в голове функциональные блоки WordPress (блок рубрик, ссылок, счетчиков, рекламы, управления и т.д.) и представить себе их расположение на сайте.

Переходим к WordPress'у

Чтобы подключить шаблон к WordPress'у нужно сделать в каталоге /- /themes/ -/, каталог, в котором и будет располагаться наш шаблон. Шаблон мы назовем /-Rioni-/, соответственно и каталог будет с тем же именем.
Сейчас нам не нужно думать ни об оформлении, ни о программировании. На этом этапе мы должны просто создать файлы, которые будет понимать WordPress.

Файл style.css

Описание шаблона хранится в этом файле в самом верху в виде css-комментария. То есть вы создаете пустой файл с именем /-style.css-/. В самом его верху пишем:

  1.  /*
  2.  Theme Name: Rioni
  3.  Theme URI:
  4.  Description: Обучающий шаблон Rioni
  5.  Version: 1.0
  6.  Author: MAX
  7.  Author URI: http://maxsite.org/
  8.  */

После этого откроем наш каркас (файл "LayoutGala09.html") и скопируем из него css-стили ( они располагаются между строк:

  1.  <style type="text/css">
  2.  ... нужный нам код ...
  3.  </style>

Обратите внимание, что кодировка нашего шаблона будет UTF-8. Если вы используете другую, то измените её указание там, где она явно указана.
В итоге мы получаем нужный нам css-файл.

Файлы шаблона

WordPress-шаблон может состоять всего из двух файлов: /-style.css-/ и /-index.php-/. Однако, это не самый подходящий вариант, поскольку нам нужно будет разделить шаблон для разных функциональных частей: меню, подвал, шапка и т.д. Поэтому, мы сделаем такую структуру:
**/-header.php-/ (вывод заголовков html)
**/-index.php-/ (основной файл)
**/-sidebar-1.php-/ (первое боковое меню)
**/-sidebar-2.php-/ (второе боковое меню)
**/-footer.php-/ (подвал)
**/-main.php-/ (вывод содержимого)

Файлы index.php

Этот файл является главным для шаблона WordPress. Если нет другого файла-шаблона, например /-home.php-/ (используется для вывода главной страницы), то WordPress отдает управление именно в файл /-index.php-/.
Создаем файл /-index.php-/. В самом начале подключаем:

  1.  <?php
  2.  require('./wp-blog-header.php');
  3.  require_once('header.php');
  4.  ?>

Первый файл нужен нам для "подключения" к функциям WordPress, а вторым мы подключаем /-header.php-/, в котором будет находиться html-секция /-HEAD-/.
После этого открываем наш каркас и копируем из него все строки (в /-index.php-/):

  1.  </head>
  2.  <body>
  3.  ... вот от этих тэгов и копируем до конца файла ...

Файл footer.php

В этом файле мы подключим подвал сайта. Поскольку пока мы не решили все вопросы с оформлением, то пока добавим в этот файл любой текст, например:

  1.  <p>(C) 2007, RIONI</p>

Подключаем footer.php

Открываем файл /-index.php-/ и в конце файла находим блок подвала:

  1.  <div id="footer"><p>Here it goes the footer</p></div>

Должно получиться так:

  1.  <div id="footer">
  2.  <?php require('footer.php'); ?>
  3.  </div>

Файл header.php

Этот файл практически во всех шаблонах типовой. В нем содержатся мета-тэги, подключаются стили, пинги и т.д. Я привожу сразу готовый вариант, поскольку особых вариаций не требуется:

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  "http://www.w3.org/TR/html4/loose.dtd">
  3.  <html><head>
  4.  <title><?php wp_title(); ?></title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.  <meta name="generator" content="WordPress <?php echo $wp_version ?>">
  7.  <meta name="description" content="">
  8.  <meta name="keywords" content="">
  9.  <link rel="shortcut icon"
  10.   href="<?php echo get_settings('siteurl'); ?>/favicon.ico"
  11.   type="image/x-icon">
  12.  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
  13.   type="text/css" media="screen">
  14.  <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
  15.  <link rel="alternate" type="application/rss+xml" title="RSS 2.0"
  16.   href="<?php bloginfo('rss2_url'); ?>">
  17.  <link rel="alternate" type="text/xml" title="RSS .92"
  18.   href="<?php bloginfo('rss_url'); ?>">
  19.  <link rel="alternate" type="application/atom+xml" title="Atom 0.3"
  20.   href="<?php bloginfo('atom_url'); ?>">
  21.  <?php wp_head(); ?>
  22.  </head>
  23.  <body>
  24.  <!-- end header -->

Первая проверка

Начальный этап завершен. Теперь мы можем зайти в админ-панель и выбрать шаблон /-Rioni-/. Если вы все сделали правильно, то на сайте вы должны увидеть наш каркас (один в один).
Конечно же пока наш шаблон не обладает нужной функциональностью, зато мы смогли перенести html-шаблон на WordPress.
С этого момента мы сможем контролировать процесс разработки визуально, просто обновляя браузер.

Лирическое отступление

Мне бы хотелось, чтобы вы попробовали выполнить все предлагаемые действия. Если вы действительно хотите понять процесс создания шаблона, то простое "копи-пасте" вас ни чему не научит. Только выполнение задачи, когда вы столкнетесь с какими-нибудь трудностями и сможете их решить, только так можно научиться чему-либо. Другого пути нет.

Название блога

Наполним шаблон небольшой функциональностью. Для этого мы будем использовать функции WordPress'а. Начнем с названия блога.
Используем функции:
**/-bloginfo('name')-/ - вывод названия
**/-bloginfo('description')-/ - описание блога
**/-bloginfo('siteurl')-/ - путь к главной странице
Находим в /-index.php-/ div-блок "отвечающий" за вывод верхней шапки. Несложно догадаться, что это /-<div id="header">-/.
Добавляем наши функции:

  1.  <div id="header">
  2.  <h1><a href="<?php bloginfo('siteurl') ?>/"><?php bloginfo('name') ?></a></h1>
  3.  <h2><?php bloginfo('description') ?></h2>
  4.  </div>

Сразу же проверяем результат. Мы видим, что текст в шапке расположен не совсем верно -получились слишком большие отступы между текстами. Для его исправления нам нужно править /-style.css-/.

Правила CSS

Чтобы ориентироваться в CSS, вам нужно знать несколько несложных правил.
1. Для описания тэга в CSS можно использовать такую конструкцию, например :

  1.  h1 { color: #FF00FF; margin: 10px; }

Эта запись будет означать, что все тэги /-<h1>-/ будут отображены цветом /-#FF00FF-/ и иметь отступ 10px с каждой стороны.
Сразу определимся с браузером. Дело в том, что есть хорошие браузеры, а есть плохие, например IE. Чтобы нам не мучиться, мы будем делать шаблон только для хороших браузеров, например FireFox или Opera, потому что они соответствуют стандартам. А для плохого браузера, при желании, мы в самом конце может быть сделаем костыли в виде хаков. Другого способа нет.
2. Если нам нужно описать идентификатор /-ID-/, то используем такую конструкцию:

  1.  div#header {height: 150px; margin: 0; background: #EEE; color: #79B30B;}

Эта запись будет применена в тегу /-<div id="header">-/. Для него установится высота 150px, фон цвета #EEE (короткая запись, которая соответствует #EEEEEE) и цвет текста внутри блока будет #79B30B.
3. Если нам нужно описать класс (/-class-/), то пишем:

  1.  h1.header {color: red;}

Это оформление будет применено к тэгу: /-<h1 class="header">-/.
4. Кроме этих правил, в CSS используется /-наследование-/. Например, если мы запишем:

  1.  div #footer p {margin: 0; padding: 10px;}

- то это будет означать, что тэги /-<p>-/, внутри элемента с /-id="footer"-/, который входит в /-<div>-/ будет иметь внешний отступ 0px и внутренний 10px.
5. Ну и на последок, есть еще одно правило: если вы вначале файла определили элемент, например красным цветом, а после переопределили его зеленым, то отображаться он будет зеленым.
Теперь, зная эти правила, мы сможем приступить к редактированию наших стилей.

Подправим style.css

Поскольку нам все равно переделывать стили, то есть смысл сразу же подчистить существующие, чтобы в дальнейшем к этому вопросу не возвращаться.
Порядок таков: смотрим появляющиеся тэги (а также id, class) в /-index.php-/, и в такой же последовательности определяем их в /-style.css-/.
Первым нам попадется тэг /-<body>-/. Определяем его так:

  1.  body {font-family: Arial, Sans-serif; font-size: 10pt;}

- то есть мы определили, что базовым размером шрифта для всего шаблона будет 10pt, гарнитурой /-Arial-/.
После этого мы находим /-div#container-/. Обратите внимание, что в файле он встречается дважды. В этом блоке находится содержимое всего шаблона, поэтому этот блок отвечает за выравнивание по центру браузера.
Пишем так:

  1.  div#container {width: 700px; margin: 0 auto;}

Этим мы указываем, что ширина блока 700px, а выравнивание достигается автоматической установкой отступов слева и справо, а сверху и низу нулевыми.
После этого у нас пойдут блоки с текстами, поэтому перед ними нужно прописать основные установки для ссылок и абзацев (пока этого хватит). После этого можно будет изменить стиль (например ссылок) в конкретном блоке.
Пишем:

  1.  p {margin: 3px 0px 4px 0px;}
  2.  a {color: red;}

С ссылкой думаю, ясно, а вот параметры /-margin-/ расшифрую. Все оступы можно указать короткой записью в следующем порядке: верх, право, низ, лево, то есть обход по часовой стрелке, начиная от полдня (так легче запомнить).
В конце подчистки вам нужно будет самостоятельно сгруппировать повторяющиеся элементы, чтобы они оказались рядом.

Делаем header

Как видно по коду, нам нужно переопределить стиль для /-div#header-/. Наш /-h1-/ находится в /-div#header-/. Но, для начала, неплохо было бы определить сам /-div#header-/ и, после, значения для /-h1-/ и /-h2-/.
Я решил, что саму надпись названия блога и его описание нужно разместить на сером фоне снизу слева. Делается это так:

  1.  div#header {background: #EEE; padding: 100px 10px 10px 10px;}
  2.  div#header h1 {font-size: 14pt; margin: 0px;}
  3.  div#header h2 {font-size: 10pt; margin: 0px;}

Думаю, что этот код не вызовет у вас затруднений, но всё-таки его опишу.
**/-div#header-/ - устанавливаем фон серый (#EEE); внутренние отступы: сверху - 100px, остальные по 10px.
**/-div#header h1-/ - элемент /-h1-/ в этом блоке: шрифт 14pt, все отступы сбрасываем.
**/-div#header h2-/ - аналогично предыдущему, для /-h2-/ только размер шрифта 10pt.
На цвета мы сейчас особого внимания не обращаем. Они настраиваются в последнюю очередь. Сейчас главное размеры и расположение элементов.
Если у вас не было ошибок, то вы увидите уже рабочий шаблон с ссылкой на главную страницу (хотя, больше ничего пока и нет).




Хотите быстро подобрать женскую элегантную сумку через плечо? Мы оптимизировали процесс и уже завтра вы сможете насладиться выбором!