Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress

Скачать ИСХОДНЫЙ ФАЙЛ

Данная статья является 3 из 3 частей цикла «Создаем тему WordPress на базе статического HTML»:

  1. Создаем тему WordPress на базе статического HTML: Подготовка разметки
  2. Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов
  3. Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress

В первых двух частях этой серии вы узнали, как подготовить статический файл HTML для конвертации в WordPress и как разделить его в набор файлов шаблонов.

Теперь у вас есть основа темы, но, к сожалению, пока ваши файлы не будут работать как тема.

Чтобы тема могла заработать, вы должны рассказать о ней WordPress. Это делается в таблице стилей. В этой статье мы как раз этим и займемся.

Далее мы загрузим новую тему в WordPress и протестируем ее. Кроме этого, мы создадим скриншот темы, так легче работать с панелью администрирования WordPress.

Что вам потребуется.

Так как теперь мы приступаем к работе непосредственно с WordPress, нам понадобятся некоторые дополнительные инструменты:

  • Редактор по вашему выбору;
  • Браузер для проверки результатов;
  • Графический редактор, чтобы сохранить скриншот вашей темы в нужном разрешении;
  • Установленный на локальном или удаленном сервере WordPress;
  • Если вы работаете на локальном сервере, вам потребуется MAMP, WAMP или LAMP, чтобы активировать WordPress тему.

Если вы работаете удаленно, вам потребуется FTP доступ к вашему сайту, плюс права доступа администратора к установленному WordPress.

1. Настройка темы в таблице стилей

Перед загрузкой темы вам нужно отредактировать таблицу стилей. Откройте файл style.css в папке шаблонов.

В самом начале файла добавьте следующий код:

/*
Название темы: Создание темы WordPress на базе HTML - Часть 3
URI темы: http://rachelmccollin.co.uk
URI автора: http://rachelmccollin.co.uk
Описание: Тема разработана в рамках данного цикла статей 
 по созданию темы WordPress из статического HTML-файла.
 Эта тема иллюстрирует третью часть цикла.
Версия: 3.0
Лицензия: GNU General Public License v2 или более поздняя
URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html
*/

Описание вашей темы будет уникальным для вас и вашей темы, но оно должно иметь ту же структуру. Сохраните таблицу стилей и закройте ее.

2 . Вызов стилей из заголовка файла

На данный момент файл header.php содержит ссылку на статическую таблицу стилей, которая не будет работать в WordPress. Прежде чем загружать тему, вам нужно изменить эту ссылку.

Откройте файл header.php и найдите следующую строку:

<link href="style.css" rel="stylesheet" media="all" type="text/css" />

Замените ее следующим кодом:

<img alt="" src="images/logo.jpg" />

Атрибут href указывает браузеру, что изображение находится в папке image сайта - пока оригинальный сайт был статическим, это просто относилось к странице, которая в данный момент просматривается.

В WordPress все работает по-другому – ваша папка images является подкаталогом темы, и вы должны указать WordPress, что искать изображение нужно в ней.

В файле header.php отредактируйте код следующим образом:

<img alt="" src="<?php bloginfo( 'stylesheet_url' ); ?>/images/logo.jpg" />

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

Теперь сохраните файл и обновите страницу. Все изображения в файлах шаблона теперь должны отображаться.

РедакцияПеревод статьи «Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPress»