Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress
Скачать ИСХОДНЫЙ ФАЙЛ
Данная статья является 3 из 3 частей цикла «Создаем тему WordPress на базе статического HTML»:
- Создаем тему WordPress на базе статического HTML: Подготовка разметки
- Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов
- Создаем тему 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" />Ясно, что конкретное имя вашего файла будет отличаться от моего, но идея должна быть вам понятна. Вы могли заметить, что функция, которую я использовал здесь, та же, что использовалась мною раньше для вызова стилей из файла заголовка.
Теперь сохраните файл и обновите страницу. Все изображения в файлах шаблона теперь должны отображаться.