Підручник із теми WordPress для початківців – Частина 1: Вступ

У цьому уроці ви почнете вивчати, як WordPress завантажує вміст залежно від того, на якій сторінці ви перебуваєте, та ієрархію файлів шаблонів теми. Ви також дізнаєтесь, що потрібно для дійсної теми. І в кінці ми нарешті створимо нашу тему та активуємо її.

Файли шаблонів теми

За капотом WordPress визначає, який шаблон завантажити на основі URL-адреси, за якою ви перебуваєте. Якщо ваш WordPress встановлено в домені «example.com/wordpress/», ви повинні побачити шаблон першої сторінки. Перехід до «example.com/wordpress/category/news/» за замовчуванням надасть вам список публікацій, призначених категорії Новини. за допомогою шаблону категорії.

WordPress дотримується ієрархії того, який шаблон завантажувати, а який вибирати залежить від того, які шаблони доступні у вашій темі. Наприклад, «example.com/wordpress/category/news» WordPress спочатку шукатиме шаблон, специфічний для категорії «новини». Якщо його не знайдено, WordPress шукатиме шаблон, специфічний для ID категорії. Знову ж таки, якщо його не знайдено, WordPress шукає шаблон загальної категорії. Якщо його не знайдено, WordPress шукатиме ще більш загальний шаблон для архівів. І так далі і так далі.

WordPress Codex, який є сайтом документації WordPress, зберігає корисне й оновлене зображення, яке ілюструє ієрархію файлів шаблонів теми; https://codex.wordpress.org/File:Template_Hierarchy.png#file

Не хвилюйтеся, якщо спочатку зображення буде виглядати занадто заплутаним! По мірі проходження підручника ви повернетеся до цього зображення, щоб знайти шаблони, які ви бажаєте застосувати у своїй темі.

Ви читаєте зображення, рухаючись зліва направо. Залежно від того, на якій сторінці ви перебуваєте, шаблони є дуже конкретними, і чим більше ви просуваєтеся до правого боку, тим загальнішими стають шаблони. Останнім резервним варіантом є крайній правий; index.php, який буде завантажено, якщо не знайдено інших відповідних шаблонів.

Усі файли шаблонів, перелічені на зображенні вище, мають розташовуватися в кореневій папці вашої теми з іменами, як зазначено. Ви не можете розміщувати свої шаблони у вкладених папках для організаційних цілей, оскільки тоді WordPress не зможе їх знайти!

Почнемо з простого! Сьогодні ми створимо лише кілька файлів, необхідних для того, щоб WordPress розпізнав їх як тему, а потім розширимо їх.

Анатомія теми WordPress

Вам потрібно лише два файли, щоб створити дійсну тему WordPress.

На ілюстрації ієрархії шаблону ви помітили крайній правий; дзвонив index.php? Це останній резервний шаблон, якщо WordPress не зможе знайти жодного шаблону. Це один із необхідних файлів. Інший файл є файлом таблиці стилів (.css). Він не обов’язково повинен містити CSS, але він повинен містити блок коментарів, який надає інформацію WordPress про вашу тему. Ці дві речі – все, що вам потрібно для дійсної теми WordPress.

Давайте створимо нашу тему, створивши ці два файли!

Створення вашої першої теми

Кожна з тем має бути в окремій папці підпапки /wp-content/themes/. Якщо ви перейдете до цієї папки у своєму файловому навігаторі, ви, мабуть, уже побачите тут кілька папок тем; twentynineteen, twentyseventeen тощо. Це теми, які входять до WordPress за замовчуванням.

У /wp-content/themes/створіть нову папку. Назвіть її відповідно (маленьким регістром, без пробілів, не так, як будь-яка інша папка). Зазвичай назва папки є версією назви вашої теми. У цьому підручнику я назву свою папку теми «wptutorial«.

Увійдіть у папку вашої теми та створіть новий порожній файл під назвою index.php. Я відредагував файл і просто додав довільний текст, щоб ми могли легше бачити, коли він використовується:

Ми вже на півдорозі! Створимо другий необхідний файл. У папці вашої теми створіть новий порожній файл під назвою style.css.

Відкрийте style.cssфайл і негайно запустіть блок коментарів (/*і закрийте його за допомогою */). У цьому блоці коментарів нам потрібно дотримуватися деяких правил WordPress щодо визначення нашої теми. Як мінімум нам потрібно визначити назву нашої теми. Але ми також можемо додати інформацію про автора, домашню сторінку, номер версії, інформацію про ліцензію та багато іншого. Перегляньте документацію WordPress про те, що ви можете додати.

У цьому підручнику ми зробимо це простим; ми додамо назву теми, а ви напишете власне ім’я автора. Ви можете використати будь-яке ім’я(на), це те, що я ввів у свій style.css:

/* 
Theme Name: A White Pixel Theme 
Author: Alex White 
*/

Збережіть і закрийте файл (цей підручник більше не торкатиметься цього файлу), якщо ви не хочете написати CSS для своєї теми під час роботи.

Щиро вітаю! Тепер ви створили дійсну тему WordPress!

Активація вашої теми

Давайте зайдемо в панель адміністратора WordPress і перейдемо до «Вигляд > Теми» і перевіримо, чи зможемо ми знайти там нашу тему.

Натисніть кнопку Активувати та перейдіть на свій сайт. Ви повинні побачити все, що ви написали index.php!

Цей index.phpшаблон використовуватиметься незалежно від того, на якій сторінці ви перебуваєте. Спробуйте переглянути одну публікацію, і ви побачите те саме. Тема повинна мати щонайменше 5-10 шаблонів для обробки різного вмісту. Не хвилюйтеся, ми встигнемо.

Чудово, у нас є тема! На наступному уроці ми почнемо фактично кодувати в ньому і змусимо його щось робити.