Куди вставляти цей код у WordPress? Загальна структура файлів теми

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

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

Отже, поїхали!

Як редагувати код?

Не особливо розпинатимуся. Скажу коротко, у вас 2 варіанти:

1. Вбудований редактор WordPress

Знаходиться в Консолі у меню Зовнішній вигляд → Редактор.

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

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

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

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

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

Файли теми оформлення

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

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

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

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

Зовнішній вигляд сайту

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

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

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

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

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

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

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

header.php - Шапка

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

Фрагмент файлу:

footer.php - Підвал

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

Фрагмент файлу:

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

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

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

Бічна панель - Це блок супроводжуючої інформації, де виводяться віджети, форма пошуку, соціальні кнопки, хмара міток, реклама, банери та інша інформація. Бічна панель може бути праворуч від основної частини або зліва. Можливо дві бічні панелі відразу, а може бути взагалі.
Фрагмент файлу:

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

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

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.

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

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/