Загальна структура файлів теми WordPress

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

Не буду особливо розпинатися. Скажу коротко, у вас 2 варіанти:
1. Вбудований редактор WordPress
Знаходиться в Консолі у меню Зовнішній вигляд → Редактор.

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

2. Сторонні програми для редагування коду

Для Windows я користуюся Notepad + + і Adobe Dreamweaver. Для MacOS можу порадити Coda, а для Linux нічого радити не буду, ці хлопці і так чудово знають, чим краще правити код. 🙂

Плюси: очевидні, зручна розмітка і підсвічування синтаксису. Наприклад в Notepad + +, натискаючи на будь тег, підсвічується і його закривається тег-побратим. Це дуже зручно.
Мінуси: це все ж окремі програми, з якими вам доведеться самому розібратися. Деякі програми безкоштовні, а деякі платні.

Узагальнена структура WordPress теми
Файли теми оформлення

Будь WordPress сайт (а правильніше говорити тема, тому як сайт буде працювати при активації однієї з встановлених тем) насправді є набором файлів. Десь там на стороні вашого хостинг-провайдера ці файли обробляються серверами, і вам на монітор повертається готовий результат – власне сайт. Те, що ви бачите, коли заходите за адресою через веб-браузер.

У випадку з WordPress цей набір файлів буде відрізнятися в кожній темі по-своєму. Але є одна спільна риса: цей набір складається з файлів з розширенням. Php,. Css і. Js (сам WordPress цілком написаний на мові PHP, так що. Php файли – основна частина будь теми оформлення).

У кожній темі оформлення повинен бути присутнім мінімальний набір файлів для коректної роботи в середовищі движка WordPress. Ви можете відкрити папку зі своєю активною темою (\ корень_сайта \ wp-content \ themes \ ваша_тема) і, швидше за все, ви знайдете там всі ці файли:

Узагальнена структура WordPress теми

Далі ми поговоримо про ці файли докладніше.
Зовнішній вигляд сайту

Тепер поговоримо про структуру зовнішнього вигляду WordPress сайту. Для того, щоб не було плутанини типу «Я хочу додати цю штучку ось сюди» або «Мені потрібно вставити цю кнопку туди», визначені області WordPress теми прийнято називати своїми іменами. Випадковий відвідувач, що потрапив на будь-який сайт, бачить те, що бачить: кнопочки, панельки, заголовки, посилання і так далі. Людина більш підкований в WordPress бачить цей сайт більш структурно.

Давайте для прикладу візьмемо блог WordPresso. Ось як виглядає його головна сторінка:

Загальна структура файлів теми

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

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

Тепер, коли ви знаєте назву областей зовнішнього подання WordPress сайту, ви можете говорити: «Мені потрібно додати ще один банер в підвалі», або «Я хочу вставити віджет в бічну панель», або «Потрібно змінити порядок меню в шапці».

Докладніше про файли та коді

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

header.php – Шапка

Шапка – це верхня область сайту, в якій міститься логотип, назву сайту, верхнє навігаційне меню, додатково можуть вставлятися рекламні банери, закріплені сторінки. Це верхня (перша) область, відповідно і оброблятися цей файл буде в першу чергу. Це означає, що в файл header.php також прописуються всі підключаються JavaScript файли, CSS файли і так далі.

footer.php – Підвал

Аналогічно шапці, це нижня область сайту, яка може містити копірайти, контактну інформацію, додаткове меню, лічильники метрики і так далі. Якщо провести аналогію з Microsoft Word, то шапка і підвал – це верхній і нижній колонтитули. Це ті частини сайту, які завжди будуть відображатися зверху і знизу, куди б ви не перейшли в рамках сайту.

index.php – Основна частина

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

sidebar.php – Бічна панель

Бічна панель – це блок супроводжує інформації, де виводяться віджети, форма пошуку, соціальні кнопки, хмара міток, реклама, банери та інша інформація. Бічна панель може бути справа від основної частини або зліва. Може бути 2 бічні панелі відразу, а може бути відсутнім взагалі.

Загальна структура файлів теми WordPress

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

Загальна структура файлів теми WordPress

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

Загальна структура файлів теми

functions.php – Файл конфігурації теми

Це файл, якого «не видно» на сайті, але який відіграє дуже важливу роль у правильній роботі теми оформлення. Фактично, тут містяться інструкції по роботі адміністративної частини теми оформлення, тут реєструються всі додаткові функції, які може задіяти тема, сюди включаються для завантаження всі інші компоненти і модулі теми, які були винесені розробником в рамках окремих файлів, щоб потім можна було замінити одну складову замість всього файлу functions.php цілком.

Іншими словами, цей файл відповідає за основну функціональну складову теми оформлення. І саме в functions.php вставляється більшість прикладів коду з наших уроків.

У цей файл доводиться найчастіше вставляти код з прикладів в наших уроках. Робиться це дуже просто: скопіюйте код з уроку, натиснувши по цій кнопці:

Потім відкрийте файл functions.php (або інший потрібний файл) за допомогою вбудованого редактора або сторонньої програми (як було описано вище), опуститеся в кінець файлу і вставте код перед закриттям php тега?>

Це основне і єдине правило – не порушити цілісність і структуру вже існуючого коду.

Якщо код, який ви вставляєте, починається відкриттям php тега <? Php, то відповідно і вставляти його треба після закриття попереднього. Нічого складного.

style.css – Таблиця стилів оформлення

Ще один дуже важливий файл, без якого не буде працювати ні одна тема оформлення WordPress. Цей файл якраз найкраще «видно» на головній сторінці будь-якого WordPress сайту.

Все оформлення, фон, шрифти, кольори, інтервали відступу, заливка, тіні, градієнти – за все це відповідає єдиний файл style.css, тому його важливість важко переоцінити.

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

Які ще файли ми забули? Я просто коротко перелічу з описом:
404.php – файл, що відповідає за сторінку помилки. Якщо ви перейшли по посиланню, яке посилається на неіснуючу запис або сторінку на вашому сайті, ви потрапите на 404.php, де буде написано Вибачте, але такої сторінки не існує, або щось в цьому роді.

archive.php – цей файл відповідає за висновок і відбір записів за обраними критеріями: по рубриці, по автору, за день, місяць, рік або по мітці.

comments.php – все просто, файл відповідає за коментування ваших записів та сторінок. Містить налаштування форми коментування.

page.php – файл, що відповідає за публікацію і висновок Сторінок. Наприклад, у верху нашого блогу в Шапці є меню, кожен елемент якого відкриває свою Сторінку.

search.php – файл, який відповідає за пошук по сайту і виведення результатів пошуку.

single.php – файл, який відповідає за публікацію і висновок Записів. Урок, який ви читаєте прямо зараз, відображається завдяки файлу single.php.

Ось і все! Сподіваюся цей урок роз’яснив деякі моменти, і тепер вам буде простіше орієнтуватися, в який саме файл потрібно вставляти додатковий код.