Посібник із теми WordPress для початківців – Частина 7: налаштування теми та пропоновані зображення

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

Ми будемо працювати здебільшого з functions.phpфайлом, який додали на попередньому уроці. Наприкінці ми додамо код для виведення рекомендованих зображень у наші шаблони.

Налаштування теми

Усі теми потребують певного коду для їх налаштування, вказуючи WordPress активувати певні функції. Це включає в себе активацію меню, віджетів, переклад і так далі. Зазвичай це робиться за допомогою «функції теми налаштування», зазвичай підключеної до хука зі зручною назвою after_setup_theme. Для деяких конкретних речей нам потрібно використовувати хук ініціалізації WordPress під назвою init.

Написання необхідного коду налаштування теми дляafter_setup_theme

Давайте налаштуємо таку «функцію теми налаштування» у нашому functions.php, підключену до after_setup_theme:

add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
 
}

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

Спочатку нам потрібно визначити максимальну ширину зображень і вставок (наприклад, відео). Це гарантує, що коли автори вставляють великі зображення в публікації, зображення залишаються в межах певної ширини. Я встановив 840 пікселів (оскільки мені потрібно місце для бічної панелі), але ви можете налаштувати це на свій смак.

$GLOBALS['content_width'] = 840;

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

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Зверніть увагу на використання нової функції для отримання каталогу тем, get_stylesheet_directory(). Це дуже схоже на те, що get_stylesheet_directory_uri()ми зустріли на останньому кроці, але тут нам потрібен відносний шлях, а не URL.

Потім нам потрібно додати деякі «підтримки тем», які активують функціональність WordPress, яка не активована за замовчуванням.

Це була ціла купа add_theme_supportдзвінків! Як випливає з назви, add_theme_supportповідомляє WordPress про активацію функцій, які не активовано за замовчуванням. Наприклад, пропоновані зображення («ескізи постів»), підтримка тегів HTML5 і функція спеціального логотипу WordPress у Налаштувачі (за бажанням налаштуйте потрібне зображення логотипу!).

Є ще багато цікавих функцій, тому я раджу вам прогорнути документацію для add_theme_support. Наприклад, є досить новий title-tag, який обробляє тег title. Я пропустив його в цьому посібнику, оскільки ми вже додали тег title header.phpвручну.

Майте на увазі, що якщо ви додаєте підтримку для title-tag, вам слід видалити тег title із файлу заголовка, щоб запобігти повторюваним тегам title.

Нарешті ми додаємо кілька add_theme_supportдля нового Гутенберга в WordPress. Ми додамо підтримку широких розділів, активацію функціональності стилів блоків і підтримку адаптивних вставок:

add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');

Кінцевий результат

Ось остання функція налаштування в нашому functions.php:

Після збереження ви зможете додавати пропоновані зображення до публікацій в адмінці! Давайте додамо ще одне виправлення теми, functions.phpперш ніж додавати пропоновані зображення до наших шаблонів; пам’ятайте, що wp_titleза header.phpзамовчуванням ми не можемо відобразити нічого на головній сторінці? Давайте це виправимо.

Додавання фільтра доwp_title

Давайте додамо нашу першу правильну функцію модифікації фільтра, використовуючи add_filter(). Фільтр, який ми підключимо, має таку саму назву, як і функція, яку ми використовували для WordPress для динамічного отримання заголовка сторінки; wp_title. Що ми виправимо, так це переконатися, що заголовок не є порожнім на першій сторінці – це типово в WordPress. На головній сторінці ми хочемо, щоб вона була заповнена назвою сайту WordPress.

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

Знаючи, коли налаштувати заголовок

Ми хочемо налаштувати змінну title, лише якщо ми знаходимося на першій сторінці. Для всіх інших сторінок ми хочемо залишити його (просто повернути як є). Але як ми дізнаємося, що ми на першій сторінці?

Ми можемо скористатися перевагами умовних тегів WordPress, які є цілим набором корисних функцій, які повертають істину або хибність на основі умови. Найчастіше вони використовуються, щоб запитати, чи перебуваємо ми на певній сторінці чи шаблоні. Ми можемо просто запитати: «Ми на головній сторінці?». Якщо цей метод повертає true, лише тоді ми будемо змінювати змінну title.

Варто зазначити, що для головної сторінки є два умовні теги, а саме is_home()та. is_front_page().Вони відрізняються залежно від ваших налаштувань «Читання» – чи відображає ваша головна сторінка останні дописи, чи налаштовано на фіксовану сторінку. Якщо ви дотримуєтеся цього посібника з абсолютно новою інсталяцією WordPress із налаштуванням за замовчуванням, ви використовуєте is_front_page().

Отримання назви сайту WordPress

Тепер ми знаємо, який фільтр використовувати та як переконатися, що ми змінюємо заголовок, лише якщо знаходимося в потрібному місці. Але якою повинна бути назва? Зазвичай заголовком головної сторінки буде назва вашого сайту WordPress. Але як ми отримуємо цю інформацію?

Для отримання інформації про поточну інсталяцію WordPress ми використовуємо bloginfo()функцію. Як параметр ми просимо повернути назву сайту, що робиться встановленням параметра на «name». А оскільки це фільтр, і нам потрібно його повернути, а не повторити, ми використовуємо його дочірній метод get_bloginfo(). Дзвінок bloginfo()завжди відтворюватиме вихід.

add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
    if (is_front_page()) {
        return get_bloginfo('name');
    }
    return $title;
}

Якщо ви оновите головну сторінку, ви побачите, що назва вашого сайту з’являється в <title>тегу (і на вкладці браузера)! Наш фільтр впливає лише на першу сторінку, тому будь-які інші сторінки, такі як окрема публікація, мають повертати те саме, що й раніше; заголовок публікації.

Виведення представлених зображень у файли шаблонів

Раніше, коли ми налаштовували підтримку тем, ми додали підтримку рекомендованих зображень. Якщо це активовано, тепер ми можемо виводити ці зображення в наших шаблонах. Давайте зробимо це зараз!

Відкрийте index.phpта знайдіть для них місце всередині петлі. Я вирішив розмістити його після назви, але ви вирішуєте, де ви хочете їх розмістити. Ви використовуєте функцію the_post_thumbnail()для виведення зображення. Рекомендується спершу перевірити, чи допис взагалі встановив пропоноване зображення, що ми робимо за допомогою has_post_thumbnail().

Якщо у вашій публікації немає виділеного зображення, після заголовка нічого не виводиться. Однак, якщо ви встановите пропоноване зображення для однієї зі своїх публікацій, the_post_thumbnail()виведе <img>тег із вибраним зображенням. Ця функція приймає деякі додаткові параметри. Наприклад, ви можете визначити, який розмір зображення ви хочете використовувати, і керувати атрибутами, доданими до зображення. Як завжди, я раджу вам швидко переглянути документацію та налаштувати її на свій смак.

Документація щодо використаних методів

• add_action
• load_theme_textdomain
• get_stylesheet_directory
• add_theme_support
• add_filter
• is_front_page
• get_bloginfo
• has_post_thumbnail
• the_post_thumbnail