Головна → Теми → Дочірні теми в WordPress
Дочірні теми в WordPress дозволяють вносити зміни в існуючі теми, причому таким чином, що подібні зміни не загубляться при оновленні вихідної (або батьківської) теми. Крім зовнішнього вигляду, дочірні теми дозволяють змінювати розмітку, і навіть функціонал батьківської теми, розширюючи її під свої власні потрібні.
Підтримка дочірніх тем (child themes) в WordPress з'явилися ще давно, але більшість користувачів на сьогоднішній день все одно вважають за краще вносити зміни в код вихідної теми безпосередньо. У цій статті ми розповімо про те, як працюють дочірні теми в WordPress, і чому саме за допомогою дочірніх тим слід вносити будь-які зміни в існуючі теми.
Що таке дочірня тема
Дочірня тема в WordPress - це тема, яка успадковує зовнішній вигляд і весь функціонал батьківської (вихідної) теми. Таке спадкування дозволяє легко змінювати і доповнювати окремі ділянки батьківської теми, не змінюючи при цьому саму вихідну тему. Завдяки цьому підходу оновлення батьківської теми не вплине на подібні зміни.
Батьківської темою може виступити будь-яка інша тема для WordPress (за винятком дочірніх тем), і для роботи дочірньої теми, обидві теми повинні бути встановлені, але активувати необхідно саме дочірню.
Як створити дочірню тему
Як приклад ми створимо дочірню тему My Child Theme і будемо використовувати стандартну тему Twenty Twelve як батьківської.
Спершу переконайтеся в тому, що батьківська тема існує - знайдіть директорію twentytwelve в wp-content / themes. Потім створіть нову директорію в wp-content / themes і назвіть її my-child-theme. У цій новій директорії створіть файл style.css і вставте в нього наступний заголовок:
За допомогою цього заголовка ми визначили назву нашої нової теми, а так же вказали батьківську. Директива @import в даному випадку підвантажує всі стилі з теми Twenty Twelve, поверх яких ми будемо вносити наші зміни. Без цієї директиви, наша дочірня тема буде успадковувати тільки шаблони (розмітку) батьківської теми, а не стиль.
Після цього ваша директорія з темами повинна виглядати приблизно так:
Структура дочірньої теми
Зайшовши в розділ Зовнішній вигляд → Теми, ви побачите, що ваша нова тема вже доступна для активації.
Активація дочірньої теми
Якщо ви її активуєте і перейдете на головну сторінку вашого сайту, ви побачите, що ваша дочірня тема виглядає в точності як стандартна тема Twenty Twelve.
Робота зі стилями
Стилі CSS дочірньої теми можна задати прямо в файлі style.css відразу після директиви @import. Наприклад, для установки кольору фону і кольору посилань у вашій темі, додайте наступний код в кінець файлу стилів:
Таким чином ви можете змінювати стилі будь-яких елементів батьківської теми, а знайти необхідний елемент ви можете легко за допомогою засобів розробника в браузері Google Chrome або за допомогою розширення Firebug для браузера Firefox.
Робота з шаблонами
За допомогою дочірньої теми ви так само можете легко змінювати самі шаблони батьківської теми. Для цього досить створити файл в дочірньої темі з тим же ім'ям, що і у шаблону в батьківській темі. Наприклад, щоб замінити шаблон footer.php на свій власний, створіть файл footer.php в директорії з вашої дочірньої темою:
Таким чином ми замінили текст в підвалі теми Twenty Twelve на наш власний.
Часто при роботі з шаблонами в дочірніх темах, простіше скопіювати існуючий шаблон з батьківської теми і вносити в нього зміни вже в дочірньої темі, зберігаючи таким чином структуру всього HTML документа. Якщо ви зробили помилку, ви завжди можете видалити шаблон і почати заново.
Ви так само можете створювати нові файли шаблонів, які відсутні в батьківській темі, і WordPress буде підключати їх згідно ієрархії шаблонів. Наприклад, якщо в батьківській темі відсутній файл page.php, ви можете створити файл з таким ім'ям у вашій дочірньої темі і WordPress його підключить при відображенні будь-якої сторінки.
Варто так само відзначити, що подібним чином змінювати можна не всі файли батьківської теми. Наприклад, ви не зможете змінити файл, який був викликаний PHP функцією include або require.
Робота з functions.php
Файл з функціями теми functions.php має особливе значення для тих WordPress. Ви не можете його повністю замінити в вашій дочірньої темі, але ви можете створити свій власний файл functions.php. який WordPress виконає до того як завантажити functions.php або будь-який інший шаблон батьківської теми.
Це означає, що у вашому файлі functions.php ви можете використовувати події, фільтри і так звані «переобумовленої» функції, для того щоб маніпулювати поведінку батьківської теми. Наприклад, у файлі footer.php в темі Twenty Twelve викликається подія twentytwelve_credits. Щоб додати наш власний текст під час цієї події, ми можемо використовувати наступний код в functions.php нашої дочірньої теми:
Ви так само можете перевизначити деякі функції батьківської теми. Наприклад, в темі Twenty Twelve використовується функція twentytwelve_content_nav для відображення навігації по записах. Якщо вам необхідно змінити поведінку цієї функції, наприклад використовувати навігацію WP-PageNavi. ви можете її перевизначити в файлі functions.php в дочірньої темі:
Врахуйте, що перевизначати можна не всі функції батьківської теми, а тільки ті, які обгорнуті в умова з функцією function_exists. наприклад:
Локалізація дочірніх тим
Після цього ви можете використовувати функції локалізації WordPress в ваших рядках:
Зверніть увагу на другий параметр (текстовий домен), він повинен збігатися з тим, що ви вказали у виклику функції load_child_theme_textdomain. Таким чином WordPress буде користуватися Директорією languages в дочірньої темі для всіх рядків з доменом my-child-theme. при цьому стрічки у задану тему будуть як і раніше переводитися за допомогою вихідних мовних пакетів.
висновок
У висновку хотілося б ще раз відзначити - ніколи не змінюйте вихідні файли існуючої теми WordPress, всі ваші зміни загубляться при оновленні теми. Саме дочірні теми є самим надійним і правильним способом вносити зміни в існуючі теми WordPress.
Якщо ж ви хочете внести зміни тільки на рівні CSS (не змінюючи при цьому шаблони), ви так само можете скористатися будь-яким плагіном для редагування CSS.
Костя, спасибі Вам!
Привіт Костянтин. Вирвав вже собі все волосся з проблемою локалізації дочірньої теми. Все зробив по інструкції. Вставив в функції потрібний код. Створив po і mo файли (за допомогою плагіна CodeStyling Localization) в дочірньої і батьківської темі. Однак, після поновлення теми, як годиться, зникли файли локалізації в батьківській темі і весь переклад изчез. Я все перевірив. Я так розумію, що вордрпресс бере файли локалізації тільки з батьківської теми і не бачить їх в папці languages дочірньої теми. Доводиться постійно копіювати po і mo файли з дочірньою в батьківську і тільки тоді працює. Хоча, як я розумію, файли локалізації повинні працювати з дочірньою теми і не зазнавати змін батьківської теми. Чи не підкажете, що може бути проблемою? Дякуємо.
Дмитро, якщо я не помиляюся то файлами локалізації дочірньої теми можна переводити лише нові рядки, які ви використовуєте в дочірньої темі, у них адже і «текстовий домен» повинен бути різний.
Якщо ви хочете змінити файл локалізації батьківської теми, то найкраще скористатися Директорією wp-content / languages / themes / themename і розмістити там файли перекладу, хоча в 4.0 в цій області плануються зміни, і поки не зовсім зрозуміло як це позначиться на відновленні.
Зробила все, як ви сказали, але чомусь стилі так і не підтягнулися.
/ *
Theme Name: Sueva-child
Description: Моя дочірня тема
Template: suevafree
* /
в чому може бути проблема?
і окреме спасибі за ваш сайт, все дуже дохідливо, зрозуміло написано, а головне приємно оку і прекрасно структуровано!
Було б простіше якби прислали посилання на ваш сайт, де встановлена ця дочірня тема.
Зробила все те ж саме з іншою темою (twenty twelve, все вийшло ідеально. У чому ж причина? Сама тема така? Що ще може впливати на зовнішній вигляд сторінки, крім файлу style.css?
Привіт Костянтин. А як зробити так, щоб за допомогою дочірньої теми видалити частину коду з function.php. Наприклад в батьківській темі в файлі function.php у мене створюється фото з зазначеними розмірами по засобом коду «add_image_size ( 'thumb-small', 160, 160, true);». Я хочу зробити так, щоб цей шматок коду не виконувався, як це зробити?
Добрий день, Костянтин. У мене така ж проблема як і у Галини. Хотіла відцентрувати twenty fourteen. Але не завантажуються стилі з батьківської теми. Підкажіть, будь ласка, що не так?
/ *
Theme Name: twentyfourteen
child
Template: twentyfourteen
Підкажіть як бути з плагінами? Є два конкретні приклади. Я змінив плагін woocommerce - додавши свій хук, і змінивши порядок виведення елементів в плагіні. Вніс зміни в сам плагін, а не в файли шаблону. Як правильно вносити зміни в плагіни - щоб при оновленні вони зберігалися? Створювати свій новий плагін або як? Підкажіть будь ласка.
Юрій, з плагінами на жаль не вийде так як з темами. Якщо вам потрібно додати свій фільтр або подія в чужій плагін, то краще за все звернутися до розробника і попросити додати цей хук, тому що він може бути корисний не тільки вам.
Якщо розробник відмовиться, тоді ви можете вести власну «гілку» їх плагіна, тримати список ваших змін, наприклад у вигляді файлу .diff, і застосовувати цей файл кожного разу, коли оновлюється оригінальний плагін.
Спасибі за швидку відповідь. Варіант з файлом .diff це автоматизований процес або всі зміни необхідно проводити кожен раз вручну?
Якщо ви його автоматизуєте, то він буде автоматизовано :) Програми diff і patch є в кожної Unix-подібної системи. Якщо ж плагін є на GitHub, то можна спробувати вести fork там, і час від часу оновлювати його з оригіналу.
Доброго дня. Відбуваються дивні речі.)) В css файлі (дочки) міняю стилі все окей, але іноді чомусь деякі не хочуть працювати. Не підкажете в чому може бути проблема?
Встановила тему яка вже містила в собі і батьківську і дочірню. З самого початку астівіровала і працювала в батьківській. Прийшов час встановити оновлення. Треба б активувати дочірню перед цим заходом, але вона не повністю копіює батьківську (втрачає меню не ненокорих сторінках та ін.) Що потрібно зробити щоб вона стала ідентичною. Дякуємо.
А як перевизначити в function.php дочірньої теми підключення файлу, зроблене в function.php батьківської теми? Конкретно, зверніть увагу на таке: в файлі function.php батьківської теми є рядок require get_template_directory (). '/inc/custom-header.php'; При цьому при активації дочірньої теми custom-header.php тягнеться з батьківської теми. Я так розумію, що для того, щоб custom-header.php брався з дочірньою теми, потрібно рядок підключення цього файлу перевизначити в function.php дочірньої теми. Як це зробити? Просте зазначення рядка require get_template_directory (). '/inc/custom-header.php'; в function.php дочірньої теми викликає помилку.
Ні, якщо тема використовує безпосередньо require. то змінити цю поведінку з дочірньою не можна. У вашому випадку краще знайти фільтри і події які виконуються в custom-header.php і спробувати їх відключити за допомогою remove_action або remove_filter.
Можливо дурість але цього не зрозумів: «_e ( 'My translatable text goes here.', 'My-child-theme');".
Взагалі вийшло благополучно створити дочірню тему, скинув доньці папку «languages» зі зміненими файлами перекладу. Прописав в файлі functions.php все як вказано в статті, але переклад не відображається. Пробував встановлювати заново тему з наступною активацією, але нічого не вийшло.
Якщо завдання, зробити свій власний вже існуючий переклад теми, то швидше за все потрібно використовувати інший фільтр, а саме:
$ Mofile = apply_filters ( 'load_textdomain_mofile', $ mofile, $ domain);
Т. е. Потрібно за допомогою своєї функції «схопитися» за load_textdomain_mofile і порівнявши domain підсунути шлях до файлів в дочірньої темі. Тим самим можна буде зберігати перекази батьківської теми в дочірньої без необхідності змінювати самі шаблони.
Ймовірно, це не самий кльовий спосіб, тому що шлях вже повний віддається і порівнювати його не дуже зручно буде.
Можливо дурість але цього не зрозумів: «_e ( 'My translatable text goes here.', 'My-child-theme');".
My translatable text goes here - текст, який необхідно перекласти.
my-child-theme - текстовий домен дочірньої теми (повинен відрізнятися від батьківської).
Переклад був відсутній на сторінці contact.php створив її копію в доньці. Відредагував домени в цьому файлі на домен-child. Ну і власне все, переклад з'явився. Але виходить тепер у разі поновлення contact.php мене це не торкнеться. Схиляюся до того що потрібно перевизначити батьківську функцію «load_theme_textdomain»
Хоча в такому разі не буде оновлюватися переклад. Доведеться залишити як є.
А, хоча стоп. Можна ж порівнювати домен - він красивий, т. Е. Через звичайний if ($ domain === 'parent-theme-name'). А що-небудь робити з $ mofile не треба - в нього потрібно просто записати новий шлях до файлу з дочірньою теми і все :)
Взагалі тема не повинна завантажувати нічого в свої директорії, вона повинна завантажувати весь призначений для користувача контент тільки в wp-content / uploads, ну а взагалі залежить від коду, може бути завантажуються в батьківську, а може і в дочірню.
У інклуд зміни вносити за допомогою дочірніх тим не можна, тому що вони завантажуються безпосередньо через include () або require (). а не через locate_template ().
З! Important працювати взагалі складно, для перевизначення такого стилю, вам необхідно також використовувати! Important і при цьому ще вибрати більш специфічний CSS селектор.