Створення теми для Wordpress

У цій статті ми розберемо структуру теми WordPress та створимо простий шаблон теми з власного дизайну.

Конструкція теми

Для початку розглянемо структуру файлів будь-якої теми даної CMS. Існує два основних файли:

  • index.php - цей файл відповідає за виведення головної сторінки вашого сайту;
  • style.css – відповідає за зовнішнє оформлення вашого сайту.

Ці файли повинні бути обов'язково. Якщо один з них відсутній, то ваша тема не працюватиме.

Тему розбивають на блоки:

  • header.php - шапка сайту;
  • footer.php - підвал сайту;
  • sidebar.php - сайтбар(сайтбари) вашого сайту.

створення

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

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

Створення теми WordPress

Для того, щоб створити свою тему, нам знадобиться готова верстка макета сайту.

1. Підключаємося по FTP до нашого сайту і йдемо в папку, що містить шаблони тем на шляху /wp-content/themes/ і створюємо тут папку з назвою нашої теми. Назвати її можна як завгодно – головне латинськими літерами. Далі заливаємо туди файли нашої верстки та перевіряємо наявність необхідних файлів index.php та style.css.

Зверніть увагу, що всі файли в папці теми повинні бути з розширенням .php, а не .html.

2. Після цього в адмінпанелі у вкладці зовнішній вигляд -> теми повинна з'явитися наша свіжостворена тема. Після неїактивації бачимо – стилі відвалилися. Щоб їх причепити, потрібно прописати абсолютний шлях до файлів стилів, картинок і скриптів.

3. Наступне, що потрібно зробити, це розбити індексний файл на блоки. Створюємо файл header.php і виносимо з індексного файлу в нього все що пов'язано з шапкою (наприклад, шапку і навігацію). Далі те саме проробляємо з файлами footer.php і sidebar.php відповідно. За підсумками цих дій у нас у файлі index.php має залишитися лише контентна область.

Тепер шаблон розбитий на блоки і залишилося їх підключити в індексному файлі за допомогою таких функцій: