Підручник із теми WordPress для початківців – Частина 2: Шаблони
Цей урок підручника з теми WordPress для початківців навчить вас структурувати основні будівельні блоки теми та почати створювати шаблони. Ми почнемо створювати вихідні дані HTML і розглянемо, як включити будівельні блоки в шаблони нашої теми. На попередньому кроці ми налаштували мінімальну кількість теми WordPress і активували її. Але на даний момент він не дуже працює і навіть не містить дійсного HTML для веб-сторінки. Давайте це виправимо.
Блоки верхнього та нижнього колонтитулів (і бічної панелі).
У наших файлах шаблонів нам потрібен дійсний HTML. Ми могли б написати повну структуру HTML (починаючи з <html>і <head>повністю <body>) у index.php, але це стає непрактичним, якщо підтримувати кілька файлів шаблонів у вашій темі. Уявіть, що ви створили купу шаблонів, а потім зрозуміли, що вам потрібна невелика зміна в частині заголовка; тоді вам потрібно буде відредагувати всі шаблони, щоб вони залишалися узгодженими. Це не розумно.
Рішення полягає в тому, щоб розділити повну структуру HTML на розумні частини; будівельні блоки. Кожен блок міститься в окремому файлі, і щоразу, коли вони нам потрібні в шаблоні, ми включаємо їх. Найпоширенішими та розумними блоками є один для заголовка, один для нижнього колонтитула та один для вмісту, але якщо у вашій темі є бічна панель, бічна панель також має бути окремою будівлею.
Ті з вас, хто більше знайомі з PHP, мабуть, знайомі з методами include()або require(). Це саме те, що ми зробимо, але ми будемо використовувати функції WordPress для включення інших файлів, оскільки вони мають додаткові переваги.
У цьому уроці ми створимо верхній, нижній колонтитул і бічну панель як будівельні блоки. Однак бокові панелі стають все рідше і рідше на веб-сторінках, але ми все одно впровадимо праву бічну панель у нашу тему. Ці три будівельні блоки є загальноприйнятою практикою в усіх темах WordPress – і насправді це настільки часто, що WordPress пропонує автоматизацію для цих трьох речей.
Створення шаблонів верхнього, нижнього колонтитула та бічної панелі
Давайте створимо новий порожній файл із назвою header.phpв нашій папці теми. Наразі ми додамо дуже простий HTML (не хвилюйтеся, пізніше ми додамо правильний HTML).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Створіть новий файл із назвою footer.phpу каталозі вашої теми. Усе, що нам потрібно (наразі) у цьому файлі, це закриття нашої HTML-структури.
</body>
</html>І, нарешті, створіть новий порожній файл під назвою sidebar.php. <aside>Ми додаємо всередину лише тег HTML .
<aside class="sidebar">
</aside>Включаючи будівельні блоки
Повернемося до нашого index.phpфайлу. Все, що нам зараз потрібно зробити, це повідомити WordPress, куди ми хочемо включити файл верхнього та нижнього колонтитулів. Очевидно, що ми хочемо завантажити заголовок на самому початку, а нижній – у самому кінці цього файлу.
WordPress пропонує прості функції для включення цих будівельних блоків; get_header()і get_footer()для файлу верхнього та нижнього колонтитулів відповідно. Досить інтуїтивно зрозуміло, правда? Давайте додамо їх у наш index.php і подивимось, що станеться.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Оновіть інтерфейс і перевірте або перегляньте джерело HTML, щоб побачити, що ми об’єднали кілька будівельних блоків у повну структуру HTML.
Тепер ви можете вільно редагувати вміст index.phpнезалежно від верхнього та нижнього колонтитулів!
Давайте також включимо бічну панель. Майте на увазі, що у вашій темі ви можете розглянути випадки та шаблони, де вам не потрібна бічна панель, наприклад головна сторінка.
Додати бічну панель так само просто, як і верхній і нижній колонтитули; для цього ми використовуємо get_sidebar(). Давайте додамо це до index.php безпосередньо перед отриманням нижнього колонтитула.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Оновіть, і ви повинні побачити джерело HTML, включаючи наш <aside>. Не хвилюйтеся, пізніше ми дізнаємося, як перетворити його на справжню область бічної панелі, де ви можете розміщувати віджети.
Наша тема зараз досить статична. У наступному уроці цієї серії навчальних посібників з теми WordPress ми нарешті почнемо належним чином занурюватися у функції WordPress, щоб динамічно завантажувати вміст і інформацію з WordPress у наші шаблони.