Підручник із теми WordPress для початківців – Частина 3: Динамічний вміст
У цьому уроці посібника з теми WordPress для початківців ми дізнаємося про хуки в WordPress і додамо кілька хуків у нашу тему, які необхідні для належної роботи теми з WordPress і плагінами. Ми також почнемо отримувати доступ до динамічного вмісту з WordPress у нашому заголовку, наприклад автоматично отримувати поточну назву сторінки.
Спочатку нам потрібно трохи дізнатися про хуки в WordPress. Хуки — це основна функція, з якою вам потрібно ознайомитися. Я не прихильник простого показу цілої купи коду, у який потрібно копіювати+вставляти, не знаючи, що це насправді робить. Якщо ви дотримуєтеся цього підручника, ви хочете навчитися цьому належним чином, чи не так?
Не хвилюйтеся, я поки що буду коротким. Ми дізнаємося більше про це пізніше в цьому посібнику.
Хуки в WordPress
Коротко; Оскільки WordPress виконує весь код для завантаження та рендерингу сторінки, існують певні «контрольні точки», які ми називаємо хуками. У цих точках WordPress дозволяє розробникам змінювати або додавати власний код. WordPress визначив цілу групу «контрольних точок», де, кожна з яких має унікальну назву. Якщо ви знаєте її ім’я, ви можете додати свій власний код у ці контрольні точки. Таким чином легко наказати WordPress запускати ваш код, коли він досягне цієї контрольної точки як частину свого процесу.
Є два типи гачків; дії та фільтри. Дії – це пункти коду, куди ви можете додати спеціальний код, наприклад, вивести щось або зробити щось для власних цілей. Фільтри — це точки коду, де ви можете змінити певну змінну перед її використанням або виведенням. Вони дуже схожі, але фільтри прикріплені до однієї конкретної змінної, а дії – ні.
Плагіни, теми та сам WordPress можуть «підхопити» свій код за допомогою add_action()дій і add_filter()фільтрів. Ці дві функції повідомляють WordPress запускати перехоплений код щоразу, коли виконання досягає цих перехоплень.
Щоб визначити хуки, які ви використовуєте do_action()для дій і apply_filters()фільтрів.
Для тих, хто хоче знати більше, у мене є ще одна публікація, в якій докладно розповідається про хуки в WordPress.
Тема WordPress повинна містити певні важливі хуки (дії). Ці гачки дозволяють WordPress, плагінам і самій нашій темі підключатися до критичних речей. Давайте подивимося на ті критичні гачки, які нам потрібно додати.
Хуки верхнього та нижнього колонтитулів теми
Усі теми WordPress повинні мати два хуки в шаблонах. Одна дія повинна бути розміщена в заголовку (всередині <head>тегу), а інша в нижньому колонтитулі (безпосередньо перед закриваючим </body>тегом). Ці два гачки абсолютно необхідні, щоб WordPress, ваша тема та будь-який плагін могли додавати свої сценарії та код стилів до вашої теми.
Нам потрібні гачки wp_headі wp_footerдля верхнього та нижнього колонтитулів відповідно.
Зазвичай, коли ми хочемо запустити хук, ми викликаємо do_action(<hook name>). Але оскільки ці два хуки дуже важливі, WordPress спростив їх для нас, помістивши їх у простий виклик функції. Отже, для цих двох хуків ви можете просто використовувати wp_head()та wp_footer(). У фоновому режимі ці двоє запускають do_action().
Давайте додамо ці два хуки (виклики функцій) до наших шаблонів верхнього та нижнього колонтитулів і подивимось, що станеться.
Натисніть «Оновити» у своєму інтерфейсі. Якщо ви ввійшли в систему, ви повинні побачити панель адміністратора WordPress! Це означає, що тепер WordPress може успішно додавати свої сценарії та стилі до вашої теми.
Ви можете перевірити вихідний код HTML і побачити, що ваш заголовок тепер містить досить багато коду. Це код, який ви не додали до своєї теми. Як бачите, сам WordPress використовує додані нами хуки, щоб виконувати свої власні дії.
Давайте перейдемо від хуків і почнемо розглядати, як ми можемо динамічно отримувати вміст із WordPress і виводити його в наш заголовок.
Динамічний вміст у заголовку
Давайте скажемо WordPress динамічно встановлювати назву документа (для <title>тегу). Для цього ми використаємо функцію (яка, до речі, має фільтр), яка називається wp_title(). Як ми дізналися вище, оскільки wp_title()це фільтр, ви, WordPress або плагіни можете змінювати результат. Пізніше в цьому посібнику ми додамо до цього фільтр.
Функція wp_title()приймає кілька аргументів, які ви можете налаштувати на свій смак, але поки я додам порожній рядок, щоб він відображав лише назву тієї сторінки, на якій ми знаходимося.
Переключіть свій <title>тег header.phpна це:
Любитель із вас міг помітити, що головна сторінка не створює заголовок. Це стандартна поведінка WordPress, яку ми виправимо пізніше в цьому посібнику (ми зробимо це за допомогою фільтра). Якщо ви відвідуєте окрему публікацію чи сторінку, ви повинні отримати назву публікації.
У WordPress є чудова функція, яка динамічно генерує купу класів для <body>тегу залежно від того, на якій сторінці ми перебуваємо; називається body_class. Оновіть <body>тег у header.phpцьому:
Оновіть і перегляньте всі класи, додані до <body>тегу. Подивіться на різні сторінки (перша сторінка, одиночна сторінка, категорія). Усі ці класи дуже корисні для стилізації та диференціації різних схожих частин. Швидше за все, ви використовуватимете кілька з них у своєму CSS.
Щоб дотримуватися належної практики HTML, ми також маємо повідомити про мову сайту в HTML. Для цього ми використовуємо функцію WordPress, щоб отримати мову з налаштувань; атрибути_мови.
І, нарешті, я хотів би додати деякі мета-теги тощо, які не є специфічними для WordPress, але відповідають загальним практикам веб-дизайну. Ось так header.phpвиглядає повний файл:
Для наступного кроку в цьому підручнику ми header.phpзануримося, index.phpщоб дізнатися, як отримати більш динамічний вміст, наприклад публікації.