В моєму Курс WordPress я часто називатиму шаблони темами і теми шаблонами, тут не лякайтеся просто досі всі в інтернеті не можуть визначитися, як правильно називати і для нас, у цьому курсі, названі мною два поняття будуть синонімами. Поки просто не морочіться.

У WordPress є 2 виду шаблонів:

1. На основі батьківського шаблону. Раджу тим, хто вже розуміється на WordPress і хоче навчитися цього виду розробки шаблонів прочитати урок “Дочірні теми у WordPress«;
2. Створення шаблону з нуля, про це ми і говоритимемо далі.

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

Розпочинаємо розробку теми

Для початку розробки теми у вас має бути вже встановлений та налаштований WordPress. Створіть у папці /wp-content/themes/ папку з назвою вашої майбутньої теми. Увага Ім'я папки теми має бути латиницею і не містити пробілів або спецсимволів, можна використовувати для розділення слів символ підкреслення. Я назву свою папку my_theme_tmp тому що цю тему можна буде використовувати для розробки своїх власних тем надалі.

Повний шлях до теми сайту

/wp-content/themes/my_theme_tmp

Після створення папки для теми вам знадобиться шаблон у форматі html, з яким ми працюватимемо. Я для себе завантажив безкоштовний шаблон із сайту html5up.net, під назвою Безтурботний. Ви також можете завантажити шаблон з мого сайту.

Після того як завантажили базовий шаблон, помістіть його в папку теми, як показано на малюнку нижче.

Деякі файли в процесі розробки теми ми видалятимемо або змінюємо.

У WordPress є головні та другорядні файли, кожна тема повинна мати файл index.php і style.css. Перейменуємо файл index.html на index.php, а також поряд створимо файл style.css.

Щоб наша тема була видна, і ми могли її активувати, нам необхідно розмістити спеціальний код у файл style.css, у самий верх файлу стилів.

важливо, цей файл завжди повинен перебувати в корені нової теми!

Цей коментар wordpress використовує для отримання базової інформації та завдяки ній ви підключаєте свою тему до CMS. Цей коментар може бути більшим. Про структуру коментаря нічого більше розповідати не буду, ви можете самостійно відкрити будь-яку готову тему та подивитися як влаштований файл стилів. За цим файлом, думаю все зрозуміло.

Активуємо нову тему WordPress

Заходимо в панель адміністратора та активуємо нову тему.

Наша тема поки що без картинки і щоб її додати вам необхідно оформити картинку та розмістити її в корінь теми з назвою screenshot.png або screenshot.jpg. Розмір картинки стандартно на даний момент 880х600 пікселів. Після завантаження картинки до папки теми вона автоматично підв'язалася в адмінці.

Для роботи в майбутньому нам також знадобиться файл functions.php, його також треба створити у папці теми. На цьому поки що перший урок з розробки тем для wordpress закінчено, чекайте нових уроків, думаю вам сподобатися.