- Як редагувати код?
- 1. Вбудований редактор WordPress
- 2. Сторонні програми для редагування коду
- Узагальнена структура WordPress теми
- Зовнішній вигляд сайту
- Детальніше про файлах і коді
- header.php - Шапка
- footer.php - Підвал
- index.php - Основна частина
- sidebar.php - Бічна панель
- functions.php - Файл конфігурації теми
- style.css - Таблиця стилів оформлення
- Які ще файли ми забули?
У наших уроках ми часто наводимо приклади щодо поліпшення і розширення вбудованих можливостей 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-contentthemesваша_тема) і, швидше за все, ви знайдете там всі ці файли:
Далі ми поговоримо про ці файли докладніше.
Зовнішній вигляд сайту
Тепер поговоримо про структуру зовнішнього вигляду WordPress сайту. Для того, щоб не було плутанини типу "Я хочу додати цю штучку ось сюди" або "Мені потрібно вставити цю кнопку туди", певні області WordPress теми прийнято називати своїми іменами. Випадковий відвідувач, що потрапив на будь-який сайт, бачить те, що бачить: кнопочки, панельки, заголовки, посилання і так далі. Людина більш підкований в WordPress бачить цей сайт більш структурно.
Давайте для прикладу візьмемо наш блог Hostenko.com/wpcafe . Ось як виглядає його головна сторінка:
Я спеціально скомпонував зображення так, щоб було видно всі основні області.
Як бачите, головна сторінка нашого блогу складається з 4-х частин: шапки, підвалу, основної частини і бічній панелі. Справедливо зазначити, що така структура є найбільш поширеною в більшості тем оформлення WordPress.
Тепер, коли ви знаєте назву областей зовнішнього подання WordPress сайту, ви можете говорити: "Мені потрібно додати ще один банер в підвалі", або "Я хочу вставити віджет в бічну панель", або "Потрібно змінити порядок меню в шапці".
Детальніше про файлах і коді
На зображенні вище ви бачите, що за кожну область сайту відповідає певний файл у папці теми оформлення. Ви бачите 4 області, яким відповідають 4 файлу, але насправді файлів більше. Я опишу тільки найважливіші файли теми.
header.php - Шапка
Шапка - це верхня область сайту, в якій міститься логотип, назву сайту, верхнє навігаційне меню, додатково можуть вставлятися рекламні банери, закріплені сторінки. Це верхня (перша) область, відповідно і оброблятися цей файл буде в першу чергу. Це означає, що в файл header.php також прописуються всі підключаються JavaScript файли, CSS файли і так далі.
Фрагмент файлу:
footer.php - Підвал
Аналогічно шапці, це нижня область сайту, яка може містити авторські права, контактну інформацію, додаткове меню, лічильники метрики і так далі. Якщо провести аналогію з Microsoft Word, то шапка і підвал - це верхній і нижній колонтитули. Це ті частини сайту, які завжди будуть відображатися зверху і знизу, куди б ви не перейшли в рамках сайту.
Фрагмент файлу:
index.php - Основна частина
Основна частина (вона ж тематична) відповідає за виведення стрічки ваших постів (записів, публікацій, це все синоніми). У цьому файлі міститься код для виведення заголовка запису, мініатюри, автора, дати публікації, міток, анонса записи, кнопки для продовження читання записи далі.
Фрагмент файлу:
sidebar.php - Бічна панель
Бічна панель - це блок супровідної інформації, де виводяться віджети, форма пошуку, соціальні кнопки, хмара міток, реклама, банери та інша інформація. Бічна панель може бути справа від основної частини або зліва. Може бути 2 бічні панелі відразу, а може бути відсутнім взагалі.
Фрагмент файлу:
Код цього файлу говорить про те, що сайдбар в цій темі повністю налаштовується через Консоль. І тільки панель пошуку жорстко закріплена у верхній позиції. А значить, щоб додати або змінити будь-який елемент в бічній панелі, потрібно зайти в меню Зовнішній вигляд → Віджет, і там перетягнути в область сайдбара потрібні елементи:
Наприклад, багато наших читачів запитують, яким плагіном реалізований наш блок соціальних кнопок на головній сторінці. Відповідь приблизно наступний: це не плагін а наша власна розробка. В сайдбарі доданий віджет "Текст", який містить код опису кожної кнопки. Виглядає це приблизно так:
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.
От і все! Сподіваюся цей урок роз'яснив деякі моменти, і тепер вам буде простіше орієнтуватися, в який саме файл потрібно вставляти додатковий код.
Дивіться також:
Як редагувати код?Як редагувати код?
Які ще файли ми забули?
