Зміст циклу статей «Початок роботи з WordPress»:
Отже, настав час восьмий і заключній частині циклу статей, присвячених покрокового створення свого сайту на WordPress. Я сподіваюся, що після прочитання попередніх статей ви вже досить впевнено почуваєте себе в питаннях створення і налаштування власного сайту. Я помітив одну цікаву річ: як тільки ви починаєте розуміти основні взаємозв’язки між компонентами WordPress, то для вас відкривається широке поле для експериментів.
У сьогоднішній статті ми розглянемо останній містичний файл, який входить в нашу тему і з якою вам часто доведеться мати справу. Це один з тих файлів, вносити зміни у який можна не боячись в глобальних масштабах порушити роботу теми. Сьогодні ми будемо розбиратися з цим файлом – шаблоном функцій (functions.php).
Якщо коротко, то цей файл відповідає за перевизначення стандартного функціоналу нашого сайту. Крім цього, ми також можемо додавати нові функції. Це дуже потужний інструмент! І сьогодні ми розглянемо кілька способів, використовуючи які можна розширити можливості нашого тестового сайту.
Перед тим як ми почнемо, нам знадобиться:
- FTP-доступ до нашого сайту;
- текстовий редактор;
- іконка сайту розміром 32 на 32 пікселя, збережена у форматі .ico з ім’ям favicon.ico.
Чим ми будемо займатися:
- прив’язувати до нашого сайту код відстеження Google Analytics для обліку статистики;
- додавати іконку на наш сайт.
Перед тим, як ми продовжимо, треба розібратися в тому, як шаблон функцій веде себе в контексті нашої дочірньої теми, тому що його поведінка дещо відмінно від інших шаблонів.
У дочірньої темі, замість того, щоб замінювати функціональність у відповідних файлах батьківського теми, як це робилося в попередніх статтях циклу, файл functions.php дозволяє додавати новий або розширити наявний функціонал. Він не замінює наявні функції, але дозволяє перевизначити їх поведінку.
Тому, коли викликається наша сторінка, і сервер виробляє магічну операцію, збираючи всі шаблони в один файл, то спочатку виповнюється код, написаний в functions.php дочірньої теми, а потім вже батьківського.
Так як файл функцій написаний на мові PHP, нам доступні всі засоби мови розмітки HTML.
Що ж, давайте приступимо!
Прив’язка трекінг-коду Google Analytics до нашого сайту для обліку статистики
У цій частині статті ми навчимося додавати до нашого сайту функції статистики. Крім описаного способу, можна скористатися спеціальними плагінами. Скажу відразу, що використання плагінів це не менш правильний спосіб, ніж той, про який розповідається нижче.
Суть справи полягає в тому, що більшість плагінів, які надають дані можливості, будуть (в основному) не сильно відрізнятися в установці та налаштування. Вони просто будуть зберігати код, що реалізує функції, в окремих файлах у своїх папках. Той спосіб, що описано нижче, дуже практичний, не надто складний і наочний для цілей цієї статті. Отже, давайте докладніше.
Створення власного файлу функцій
Крок 1. Відкрийте ваш FTP-клієнт і перейдіть в директорію дочірньої теми.
Крок 2. У списку файлів на віддаленому сервері натисніть правою кнопкою миші і виберіть «Створити новий файл» (Create new file).
Крок 3. Введіть ім’я вашого майбутнього файлу функцій — functions.php – та натисніть OK.
Крок 4. Відкрийте створений файл functions.php в текстовому редакторі.
Крок 5. На цьому кроці вам потрібно налаштувати тільки що створений файл так, щоб сервер розпізнавав його як такий, що містить код PHP. Для цього, додайте відкриваючий тег
ОК, давайте розберемося з цим кодом.
// Вставка коду Google Analytics футер
Рядок 1 у нас починається з двох символів //. Це означає початок коментаря, який не несе в собі функціональності, але дає інформацію про призначення тієї чи іншої частини коду для людини, який його читає. Використання двох послідовних символів навскісної риски (//) це швидкий спосіб створити однорядковий коментар в коді PHP. Якщо ми хочемо створити блок коментарів, розташованих більш ніж на одному рядку, то слід використовувати конструкцію — /* тут коментар */ — аналогічно коментарям в CSS. Дуже корисно додавати коментарі та примітки, щоб потім самому розібратися в своєму коді, що особливо актуально для великих проектів.
add_action( ‘wp_footer’, ‘mytheme_add_googleanalytics’ );
Рядок 4, починається з функції add_action, виглядає на перший погляд незрозуміло.
add_action це функція PHP, яка виконує потрібні нам дії в заданих місцях коду. Це називається «пастка» або «гачок» (hook). В інтернеті можна знайти безліч прикладів функцій, які дозволяють додавати або видаляти функціонал з використанням механізму пасток. В даному випадку, ми використовуємо функцію add_action щоб «підчепити» код функції mytheme_add_google_analytics до функції wp_footer.
function mytheme_add_googleanalytics() {
Рядок 5 визначає і відкриває тіло функції mytheme_add_google_analytics.
і в рядку 7 місце, залишене під вставку коду з сайту сервісу Google Analytics. Поки це лише HTML-коментар, але скоро ми це виправимо.
У рядку 9 ми закриваємо функцію за допомогою фігурної дужки.
Зауважте, що ми знову відкриваємо тег після фігурної дужки { у рядку 5, а потім, вставивши уривок коду, отриманий від сервісу Google Analytics (ми зробимо це далі), відкрити його знову в рядку 8, щоб продовжити писати PHP-код.
Крок 7. Тепер прийшов час увійти в обліковий запис Google Analytics і скопіювати код для вставки. Створіть обліковий запис Google і увійдіть в сервіс Google Analytics.
Крок 8. Тепер, вставте рядок 7 скопійований код замість HTML-коментаря.
Крок 9. Тепер збережіть файл і поновіть сторінку в браузері, щоб побачити зміни.
Дослідіть код сторінки з допомогою «інспектора», щоб побачити ваш динамічний вставлений код:
Додавання іконки до вашого сайту
Адже ви знаєте, що таке favicon, вірно? Якщо хочете освіжити пам’ять або дізнатися, виконавши пошук за запитом «Що таке favicon». Коротенько, це маленька іконка, яку ви часто можете побачити праворуч від назви сайту у відкритих закладках браузера, або в списку збережених закладок.
Крок 1. Створіть свою іконку favicon.ico, використовуючи спеціальну програму (наприклад, IcoFX), або скачайте готовий варіант в інтернеті.
Крок 2. Завантажте значок в директорію з вашої дочірньої темою через FTP-клієнт.
Крок 3. Вставте наступний код у ваш файл functions.php:
// Додавання favicon на ваш сайт
add_action( ‘wp_head’, ‘mytheme_add_favicon’ );
function mytheme_add_favicon() {
echo «;
}
Крок 4. Збережіть файл на віддалений сервер і оновити ваш сайт у браузері, щоб побачити зміни.
У рядку 1 записана вже відома вам функція add_action (дивіться вище), але ми її визначаємо по-іншому. В даному випадку, гачок ми вішаємо на функцію wp_head (на противагу попередній функції add_action, яка була прив’язана до футеру, тут ми прив’язуємося до шапці нашого сайту), а привязываемой функцією є mytheme_add_favicon.
Зверніть увагу на принцип запису імен функцій:
Ви можете помітити, що в обох випадках я починав назва функції з першої частини імені нашої дочірньої теми mytheme_ і закінчував писанням того, що робить дана функція, тобто add_favicon. Це робиться з декількох причин:
У будь-якому випадку, якщо у вас в директорії з дочірньою темою є файл favicon.ico, то код, наведений вище, повинен відмінно працювати. Трохи пояснень:
Якщо код написаний правильно і файл значка знаходиться в потрібному місці, браузер в свою чергу відобразиться піктограма нашого сайту у відкритій вкладці, там, де ви зазвичай бачите всі подібні іконки.
Можна помітити, що в цьому випадку нам не потрібно було повторно відкривати і закривати теги , як ми робили це на кроці 7 і 8 першого прикладу. Це тому, що у другому прикладі, все було написано на коді PHP від початку і до кінця. І навіть незважаючи на те, що туди включалися шматочки на HTML, це була лише PHP-рядок. Якщо вам це поки незрозуміло, то, як тільки ви звикнете з функціями, подібними до наведених вище, а також навчитеся писати їх самостійно, ви зрозумієте різницю, про яку я кажу. Головне треба розуміти, що код, наведений вище, коректний і в подібних випадках ви можете використовувати аналогічні прийоми.
Висновок
Тепер ви починаєте усвідомлювати потенціал файлу functions.phpі незабаром вас неможливо буде зупинити навіть найскладнішої завданням! З ростом досвіду і знань, ви зможете реалізувати на своєму сайті практично будь-функціонал, який захочете, і, врешті-решт, візьмете весь свій ресурс під повний контроль!
Пам’ятаєте! Перед внесенням змін у файли на сервері, обов’язково зберігайте їх копії на робочий стіл. Невірний код у файлі functions.php може спричинити виникнення проблем, які порушують нормальну роботу сайту, а якщо ви будете зберігати копії файлів ДО внесення в них змін, то завжди зможете зробити відкат до попередньої версії і почати спочатку.
Переклад статті «Beginning With WordPress: Customising Our Site’s Using Functionality functions.php» був підготовлений дружною командою проекту Сайтостроение від А до Я.
