Створення власної теми Wordpress

Основні файли

Тема CMS - варіант зовнішнього вигляду сайту, що працює на даній CMS. Як правило, зовнішній вигляд сайту можна кардинально змінити у адмінці CMS буквально у кілька кліків, при цьому інформаційне наповнення сайту не зміниться.

У CMS Wordpress файли тем знаходяться в папці /wp-content/themes/. Після встановлення Wordpress у вас в цій папці знаходяться три теми. Вони досить прості і "стандартні". Замовнику ж частіше за все потрібен індивідуальний дизайн для його сайту.

Теми можна скачати чи купити у магазині Wordpress чи на сторонніх сайтах шаблонів. А також можна створити свою власну тему з унікальним дизайном.

Розглянемо з яких файлів складається тема Wordpress. Відкривайте файли в редакторі та дослідіть їх.

  • screenshot.png - файл-скріншот зовнішнього вигляду теми для візуальної оцінки теми у списку тем в налаштуваннях адмінки.
  • functions.php - основний файл функцій.
  • *.php - файли шаблонів сторінок та окремих блоків.
  • style.css - файл стилів (може бути декілька файлів стилів).
  • JS-скрипти, шрифти, зображення.

Створення власної теми

Для створення теми вам потрібна готова верстка сайту, виконана класичним способом (html, css, js файли, зображення, спрайти, шрифти).

Можна не з нуля створювати свою тему, а скопіювати існуючу і модифікувати її.

Почнемо з найпростішого. В папці /wp-content/themes/ створіть нову папку з назвою вашої теми, наприклад, minecraft.

Відкрийте в браузері зверстаний сайт, або макет в фотошопі, зробіть скріншот першого екрану, підріжте його до актуального розміру (щоб не було багато пустого місця зліва та справа від контенту), збережіть файл як screenshot.png або screenshot.jpg.

Скопіюйте в папку файл стилів, в разі потреби переіменуйте його на style.css. Відкрийте файл стилів однієї з базових тем Wordpress. У своєму файлі вам потрібно задати кодування, створити подібні коментарі з описом теми, інакше тема може не відображатися в списку тем в адмінці. Якщо ж ви скопіювали існуючу тему - вам треба змінити інформацію в коментарях.

Приклад коментаря:

/*
Theme Name: Minecraft
Theme URI: https://github.com/username/wp-minecraft/
Description: Theme for site about Minecraft
Author: username
Author URI: https://github.com/username/
Template: назва папки батьківської теми (необов'язкове поле)
Version: 0.1 (необов'язкове поле)

Додатковий опис теми, ліцензія, контакти і т.п. (не обов'язково)
*/

Якщо ви використовуєте батьківську тему, то ваша тема може складатися лише з файлу стилів, за потреби - зображень, скріншота.

Відволічіться, створіть нову тему Red на основі однієї з базових, змініть колір тексту на червоний, протестуйте.

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

Повертаємося до нашої теми Minecraft.

Створіть файл functions.php і пропишіть у нього директиву початку коду PHP <?php

Решта php-файлів - це шаблони. Тема може складатися з одного файла шаблону index.php, в якому буде прописана вся верстка, а також логіка відображення контенту, та зазвичай створюють окремі шаблони на кожен значущий блок сайту.

Wordpress використовує ієрархію шаблонів, збирає сторінку з окремих блоків, прописаних в різних файлах.

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

Щоб краще зрозуміти - розглянемо приклад. Користувач заходить на сторінку http://mysite.com/category/cats/, при цьому в базі даних категорія cats має ID = 4. Для відображення цієї сторінки Wordpress спочатку намагатиметься знайти файл category-4.php, якщо такого немає - то використає загальний шаблон для відображення категорій category.php, якщо ж і цього файлу немає, то буде використано шаблон archive.php для відображення архіву постів. Ну і якщо і цього файлу не знайде, то використає index.php.

Ще приклад: користувач відкриває головну сторінку http://mysite.com/, Wordpress намагається відобразити шаблон home.php, якщо його немає, то буде використано шаблон index.php.

Схема ієрархії шаблонів Wordpress
Схема ієрархії шаблонів Wordpress

Для формування сторінки в шаблонах можна використовувати теги умов:

<?php
if ( умова ) {
  get_template_part( 'box1' );
} else {
  get_template_part( 'box2' );
}

Продовжимо. Скопіюйте в папку теми файл index.html та переіменуйте його в index.php.

Головна сторінка сайту Minecraft складається з чотирьох основних блоків: хедер, футер, бокова та основна панелі. Перші три блока виносимо в окремі файли header.php, footer.php та sidebar.php.

Перегляньте ці файли в існуючих темах. В header.php виноситься все, починаючи з директиви <!DOCTYPE html>, а в футер - кінець сторінки із закриваючим тегом </html>

В файлі index.html замість винесених блоків вставляємо функції php, які будуть звертатися до тих шаблонів:

index.php
<?php
  get_header();
  get_sidebar();
?>

<main>
  <h1>Подключайся и играй на наших серверах</h1>
  <img ...>
  ...
</main>

<?php
  get_footer();

В існуючих темах знайдіть в файлах хедера та футера функції wp_head(); та wp_footer();. Дослідіть код сторінки сайту та визначте що роблять ці функції. Пропишіть їх в потрібні місця в свою тему.

Знайдіть в існуючих темах підключення меню та пропишіть відповідні директиви в свою тему в хедер і бокову панель. Налаштуйте пункти меню в адмінці.

Замість блока новин підключіть шаблон, що відображатиме три останні пости.