Як створити дочірню тему у WordPress

Як створити дочірню тему у WordPress

Вітаю, шановні читачі блогу!

Сьогодні розглянемо стандартну тему для більшості блогів, присвячених WordPress — створення дочірньої теми.

Для чого нам може знадобитися створення такої теми:

  1. Потрібно змінити дизайн деяких сторінок блогу, не зачіпаючи інший функціонал теми.
  2. Потрібно змінити функціонал певної сторінки — наприклад, головної або форми коментування.
  3. Потрібно додати новий функціонал.

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

Створення дочірньої теми

Перше, що нам потрібно зробити — створити каталог за адресою «/www/wp-content/themes/», який символізуватиме назву нашої дочірньої теми. Оскільки я створюю дочірню тему на базі «twentytwelve», я назву її «chhild-twentytwelve».

Далі потрібно повідомити WordPress, що створювана тема є дочірньою.

Для цього переходимо в каталог «chhild-twentytwelve» і створюємо у ньому файл стилів «style.css». У файл додаємо наступний коментар:

/*
Template: twentytwelve
Theme Name: chhild-twentytwelve
*/

де:
Template — назва батьківської теми
Theme Name — назва дочірньої теми

Вище описано мінімальний набір параметрів теми. За бажанням, можна залишити навіть лише параметр «Template».

На цьому можна сказати, що робота завершена. Якщо перейти в адмін-панель у розділ «Теми», ви побачите нашу тему:

Створена дочірня тема

Як бачите, наша дочірня тема без прев’ю. Його можна створити самостійно — зробити скріншот, перейменувати файл у «screenshot.png» розміром 880x660 px і помістити його у папку з темою.

Якщо ми «активуємо» тему, сайт буде відображатися некоректно. Це тому, що стилі оформлення батьківської теми не були підключені.

Щоб стилі «підтягнулись», потрібно у каталозі з нашою темою створити файл «functions.php» і додати в нього такий код:

<?php
add_action('wp_enqueue_scripts', function() {
	wp_enqueue_style('style-parent', get_template_directory_uri().'/style.css');
});

Хук «wp_enqueue_scripts» призначений для підключення стилів і JavaScript-коду. Використовуючи його, за допомогою виклику:

wp_enqueue_style('style-parent', get_template_directory_uri().'/style.css');

ми підключаємо стилі батьківської теми.

На цьому розробку шаблону дочірньої теми завершено.

Пости на схожі теми

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

Напишіть коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *