Завантажити ВИХІДНИЙ ФАЙЛ
Дана стаття є 3 з 3 частин циклу «Створюємо тему WordPress на базі статичного HTML»:
У перших двох частинах цієї серії ви дізналися, як підготувати статичний 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 і знайдіть наступний рядок:
Замініть її наступним кодом:
Атрибут href вказує браузеру, що зображення знаходиться у папці image сайту — поки оригінальний сайт був статичним, це просто відносилося до сторінки, яка в даний момент проглядається.
У WordPress все працює по-іншому – ваша папка images є подкаталогом теми, і ви повинні вказати WordPress, що шукати зображення потрібно в ній.
У файлі header.php відредагуйте код наступним чином:
Зрозуміло, що конкретне ім’я вашого файлу буде відрізнятися від мого, але ідея повинна бути вам зрозуміла. Ви могли помітити, що функція, яку я використовував тут, та ж, що використовувалася мною раніше для виклику стилів з файлу заголовка.
Тепер збережіть файл і оновіть сторінку. Всі зображення в файлах шаблону тепер повинні відображатися.
Переклад статті «Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.
