Посібник із теми WordPress для початківців – Частина 6: Функції теми.php
Сьогодні ми дізнаємося, де і як додати код поза шаблонами в нашій темі. Ми робимо це, додаючи functions.phpфайл теми. Попутно ми також навчимося правильно додавати ваші таблиці стилів і сценарії.
Файл functions.php теми
Темі потрібно десь розмістити код, який не є частиною шаблонів. Завжди є купа коду, який потрібно додати всім темам, щоб працювати з функціональністю. Наприклад, увімкнення функції представлених зображень WordPress (ви помітили, що її немає?), підтримки меню, віджетів, додавання таблиць стилів і сценаріїв (належним чином) тощо.
Цей файл functions.php. WordPress автоматично та завжди завантажує цей файл, якщо він існує у вашій темі. Він завжди завантажується як в адмінці, так і в інтерфейсі.
Додаємо файл functions.php до нашої теми
Давайте створимо новий порожній файл у нашій кореневій папці теми та назвемо його functions.php.
У цьому файлі негайно починайте з початкового тегу PHP (<?php) і не включайте закриваючий тег. Файл functions.phpпризначений для коду PHP, а не HTML. Ваша тема може зламатися (або навіть просто діяти дивно), якщо у цьому файлі є символи або символи нового рядка поза тегами PHP. Ви, очевидно, можете вийти з тегів PHP для виведення HTML, але це потрібно зробити всередині функцій або хуків. Дозвольте мені пояснити це за допомогою експерименту.
Давайте перевіримо цей файл, щоб побачити, як він працює. Всередині functions.phpнапишіть відлуння якогось фіктивного тексту:
Оновіть інтерфейс. З’являється фіктивний текст. Але якщо ви перевірите або переглянете джерело HTML, ви побачите, що текст з’являється перед відкриттям <html>. Це створює абсолютно недійсний HTML!
Перейдіть до панелі адміністратора та натисніть «Оновити». Він також робить те саме там (воно може бути приховано за панеллю адміністратора, але воно є в HTML).
Як бачите, будь-який код у вашому functions.phpшаблоні завантажується раніше за будь-який інший. Тому, як правило, будь-який вихід (HTML поза тегами PHP або echo) має бути всередині функцій, які запускатимуться в потрібний час, зазвичай підключені до дій або фільтрів.
Згадайте, коли ми дізналися про та додали хуки в частині 3 підручника з теми WordPress для початківців. Спосіб запуску коду на хуку полягає в тому, щоб приєднати до нього функцію за допомогою add_action(). Давайте перевіримо щось інше; давайте зробимо функцію, підключену до хука, який ми вже визначили в наших шаблонах; wp_footer.
Видаліть ми functions.phpдодали echoдля тестових цілей і замість цього напишіть:
Натисніть «Оновити» у інтерфейсі та переконайтеся, що рядок добре з’являється саме в тому місці, яке ви визначили wp_footer, безпосередньо перед закриттям </body>. Крім того, зауважте, що це не відобразить нічого в адмінці. Це тому, що wp_footerце хук, який запускається лише у інтерфейсі.
Давайте зробимо наші перші правильні операції в functions.php!
Примітка: у PHP неможливо мати дві функції з однаковими назвами. Це включає в себе назви функцій у WordPress, вашу тему та будь-який активований плагін! Дотримуйтесь найкращих практик і додайте до своїх функцій слаг теми, як у прикладі вище: ” wptutorial_<function_name>“. Це значно зменшує можливість фатального збою WordPress через ідентичні назви функцій.
Примітка 2: Не має значення, у якому порядку ви додаєте функції та хуки у свій functions.php. Пам’ятайте, що хуки запускаються в певних контрольних точках, а не в тому порядку functions.php. Єдиним винятком є випадки, коли ви включаєте інші файли або ініціалізуєте власні класи.
Правильний спосіб додавання стилів і сценаріїв проти неправильного
Дехто з вас може пам’ятати частину 3, де ми додали wp_headгачок у наш header.php. Після того, як ми зробили це, WordPress зміг завантажити свої стилі та сценарії, включаючи панель адміністратора. Можливо, ви думаєте, що для того, щоб додати наші таблиці стилів, нам потрібно створити функцію, підключену до таблиці стилів wp_headі виводити її <link>… Зазвичай ви маєте рацію!
Однак у WordPress є особливий спосіб додавання сценаріїв і стилів. Це в основному для керування порядком завантаження та уникнення завантаження дублікатів бібліотек. Наприклад, ви, як автор теми, можете додати сценарії Javascript, які залежать від jQueryбібліотеки. Тоді вам потрібно переконатися, що jQueryвін завантажується перед вашими файлами. Але WordPress і будь-які плагіни мають таку саму потребу, щоб переконатися, що jQueryвони завантажуються перед їхніми сценаріями. Ви не можете завантажувати jQueryбібліотеку кілька разів, оскільки це спричиняє проблеми. Тож WordPress має спосіб керувати порядком завантаження сценаріїв і таблиць стилів.
Додавання таблиць стилів (правильний спосіб)
Для додавання будь-яких стилів і будь-яких JavaScript-скриптів ми використовуємо хук під назвою wp_enqueue_scripts. Так, ви також використовуєте цей хук для стилів, незважаючи на його назву. Додавання сценаріїв і стилів називається «поставленням у чергу» — як «поставити в чергу». Давайте поставимо в чергу (додамо) нашу таблицю стилів за допомогою функції wp_enqueue_style в нашому functions.php:
Функція wp_enqueue_styleприймає як мінімум два параметри. Перше — це унікальне ім’я (дескриптор або «ідентифікатор слизняка»), а друге — розташування файлу. Ідентифікатор має бути унікальним, оскільки це ідентифікатор, який WordPress використовує для визначення наявності дублікатів.
Що стосується повернення шляху до вашої теми, доступних функцій багато. Вище я використовував get_stylesheet_directory_uri(), який повертає URL-адресу вашої папки теми, а потім я додав решту шляху до нашої таблиці стилів.
PS: WordPress пропонує окрему функцію для повернення повної URL-адреси вашої теми style.css: get_stylesheet_uri(). Я використав іншу функцію вище, оскільки з нею корисніше ознайомитись. Ви використовуватимете його для будь-яких інших файлів, які потрібно поставити в чергу.
Функція wp_enqueue_styleприймає більше корисних параметрів, таких як залежності (які інші файли css потрібно завантажити раніше) і номер версії (корисно для цілей кешування).
Оновіть інтерфейс і переконайтеся, що ваша таблиця стилів завантажена в <head>тег!
Якщо ви один із тих, хто прагне зробити свою тему красивішою під час її кодування, ось ваш шанс. Я заохочую вас почати визначати свій HTML, класи та оболонки та додати деякі стилі у свій style.css. Ми додамо більше вмісту, який потребуватиме стилізації, упродовж цієї серії навчальних посібників.
Додавання скриптів (правильний шлях)
Давайте розглянемо, як ми додаємо JavaScript до нашої теми. Це робиться за допомогою того самого хука (так що ви можете помістити все в одну функцію). Але для сценаріїв ми використовуємо дещо іншу функцію.
Щоб поставити сценарій у чергу, ви використовуєте wp_enqueue_script(). Параметри такі ж, як wp_enqueue_style(). Перший — унікальний дескриптор, а другий — шлях до сценарію. Третій (необов’язковий) — це масив залежностей. Як четвертий (необов’язковий) параметр ви встановлюєте номер версії. І, нарешті, по-п’яте (необов’язково), ви визначаєте, чи слід завантажувати сценарій у <head>тег чи в кінці </body>.
WordPress поставляється з великою кількістю вже включених бібліотек. Вони не завжди всі завантажені, але доступні, якщо вони вам потрібні. Якщо ви хочете додати загальний сценарій бібліотеки, спочатку перевірте, чи є він у WordPress. Прикладами є jQuery, усі модулі інтерфейсу jQuery, Underscore та Backbone.
Якщо ви додаєте один із сценаріїв WordPress як залежність, вам не потрібно ставити цей сценарій у чергу! Давайте зробимо це на практиці.
Створіть папку assetsта вкладену папку jsв нашій папці теми, а потім додайте новий порожній main.jsфайл. Скажімо, для цього сценарію потрібна jQueryбібліотека, тому ми встановлюємо її як залежність. Ми знаємо, що WordPress постачається з jQueryпакетами, і його описом є jquery. Ми поставимо наш сценарій у чергу так:
Якщо ви оновите інтерфейс і перевірите свій вихідний код, ви побачите, що ваш сценарій, main.js, додано, але також цю jQueryбібліотеку завантажено. І jQueryзавантажується перед вашим файлом!
Тепер ви навчилися додавати стилі та сценарії. Щоб додати більше файлів, додайте wp_enqueue_style()або wp_enqueue_script()для кожного нового файлу.