Завантажити вихідний файл
Дана стаття є 2 з 3 частин циклу «Створюємо тему WordPress на базі статичного HTML»:
У першій частині цієї серії статей я розповіла вам, як підготувати файли HTML і CSS для конвертації в WordPress, як правильно задати структуру, коректний код і класи.
У цій статті ви дізнаєтеся, як розділити ваш файл index.html на набір файлів шаблонів для використання в WordPress.
Що вам знадобиться:
Для виконання цього уроку вам будуть потрібні основні інструменти для редагування HTML і PHP:
Редактор за вашим вибором.
Що таке файли шаблонів?
Тема WordPress складається з ряду файлів шаблонів. Як мінімум для коректної роботи тема повинна містити в собі два файла: index.php і style.css.
Проте в добре опрацьованої теми вміст файлу index.php повинно бути розділене на основний файл шаблона (index.php) і набір включаються файлів. Це файли, що містять код для заголовка, бічній панелі і підвалу сторінки.
В деяких темах додаткові включаються файли використовуються через Цикл; я розповім про це детальніше у четвертій частині даного циклу.
Дані файли називаються «включаються», тому що ви вставляєте в файл index.php код, який повідомляє WordPress, що їх вміст потрібно включити в сторінку.
Наш файл index.html буде розділений на чотири PHP файлу:
- index.php, який буде включати в себе основний зміст плюс код для розміщення інших файлів;
- header.php, який буде включати в себе розділ плюс все, що знаходиться в шапці та меню навігації;
- sidebar.php, який буде містити область бічній панелі віджетів;
- footer.php, який буде містити (ви вже здогадалися!) підвал плюс закриття тега ;
У цій серії ви додасте до цих файлів елементи, з допомогою яких в вашу тему можна буде включити віджети, меню і цикли, а також звернення, які будуть використовуватися плагінами. Ви також додасте додаткові файли шаблонів для відображення різних типів контенту.
Якщо ви хочете отримати більше базової інформації по даній темі, прочитайте розділ Кодексу WordPress Template Hierarchy.
Але зараз все, що нам потрібно зробити, це створити набір PHP-файлів і розподілити між ними вміст нашого файлу index.php.
Створюємо файли PHP
Для початку ми створимо порожні файли. Створіть чотири порожніх файлу з наступними назвами і відкрийте їх в редакторі коду:
index.php
header.php
sidebar.php
footer.php
Переконайтеся, що всі вони знаходяться в папці з назвою теми — у моєму випадку я назву папки ‘wptutsplus-demo-theme’. Скопіюйте також в цю папку таблиці стилів. Ми не будемо редагувати їх в цьому уроці, але займемося цим у наступній частині серії.
Заповнення файлу Header
Далі вам потрібно скопіювати верхню частину раніше створеного файлу index.html в файл header.php.
Відкрийте файл index.html і виберіть всі оголошення від DOCTYPE до відкриття тега div class=»main»:
Створення теми WordPress – Створення теми WordPress з статичного HTML-файлу
Створення теми WordPress
Створення теми WordPress з статичного html-файлу
Тут буде розташовуватися віджет — з адресою
(або іншою інформацією на ваш розсуд)
Пропустити, щоб перейти до вмісту
- На головну
- Останні записи
- Цікаві статті
Скопіюйте даний код та вставте його в файл header.php.
Збережіть зміни.
Заповнення файлу бічній панелі
Тепер повторіть ті ж дії для файлу бічній панелі.
Якщо ваш файл index.html має виділений елемент aside class=»sidebar», і все, що стосується сайдбара, що міститься в ньому.
Віджет в сайдбарі
Це віджет сайдбара, у вашій темі WordPress ви можете виводити його в будь-якому місці.
Ще один віджет в сайдбарі
Другий віджет в сайдбарі, можливо ви будете використовувати плагін для виводу соціальних закладок або просто список популярних статей.
Скопіюйте цей код у файл sidebar.php і збережіть зміни.
Заповнення файлу футера
Процес заповнення файлу footer.php ідентичний.
Скопіюйте весь код, який розташовується після сайдбара у вашому файлі index.html:
Перший віджет в підвалі
Область віджета в підвалі – для її заповнення використовується плагін або віджет.
Другий віджет в підвалі
Область віджета в підвалі – для її заповнення використовується плагін або віджет.
Третій віджет в підвалі
Область віджета в підвалі – для її заповнення використовується плагін або віджет.
Четвертий віджет в підвалі
Область віджета в підвалі – для її заповнення використовується плагін або віджет.
Скопіюйте цей код у файл footer.php.
Збережіть зміни.
Ви можете запитати, чому блок .main закривається у файлі підвалу, а не у файлі бічній панелі.
Це пов’язано з тим, що якщо пізніше ви налаштуєте файл шаблону під сторінки, які не мають бічній панелі, ви просто виключіть з шаблону файл сайдбара, а залишите тільки футер, і тоді блок .main все одно буде закриватися коректно.
Заповнення файлу Index
І останнім етапом буде створення файлу index.php. Зробити це буде трохи складніше, вам доведеться додати деякі функції PHP, які WordPress використовує для включення заголовка, бічній панелі і підвалу.
Відкрийте порожній файл index.php і додайте код, наведений нижче:
Переконайтеся, що між початком включається заголовка і включається бічною панеллю залишено простір — сюди ви будете додавати вміст індексного файлу, яке не є частиною ні заголовка, ні бічній панелі, ні футера.
Тепер відкрийте файл index.html ще раз і виберіть весь код між відкривається блоком елемента class=»main» і бічною панеллю:
Це заголовок запису або сторінки
Опубліковано 5 листопада Рейчел МакКоллин
Вміст запису. У розділі Архіву записів, це може бути
превью поста або ж текст запису.
Зображення в WordPress
Ця запис містить кілька зображень – як тільки ви конвертуєте цей html-файл в тему WordPress, ви зможете використовувати його інструменти для обробки зображень, і працювати з зображеннями буде набагато простіше!
Вона також має характерне зображення — знову ж таки, через WordPress ви зможете обробляти їх, ви ніколи більше не повернетеся до статичного HTML.
У частині 10 цієї серії ви дізнаєтеся, як додати до вашої теми підтримку
Вибраних зображень.
Ви можете використовувати їх для автоматичного відображення картинок в одиночних і архівних записах.
У частині 11 ви дізнаєтеся, як створити власну сторінку архіву.
Категорія і мітки
В цьому розділі ви зможете виводити категорію,
до якої належить запис, і пов’язані з нею мітки.
Як це зробити з допомогою шаблону тегів, я розповім у четвертій частині цієї серії.
Скопіюйте цей код і вставте його в свій файл index.php нижче рядка get_header ( ).
Збережіть зміни у файлі index.php.
Підводимо підсумки
Тепер у нас є основа для теми WordPress. Ви перетворили ваш HTML-файл в набір файлів PHP і налаштували їх на спільну роботу.
У наступній частині цієї серії статей я розповім вам, як оредактировать таблицю стилів, щоб створити робочу тему, і загружу тему WordPress.
Переклад статті «Creating a WordPress Theme From Static HTML: Creating Template Files» був підготовлений дружною командою проекту Сайтостроение від А до Я.
