Създаване на child theme

Модул 5: Теми и разширения · Време за четене: 9 минути

Учебна цел: След този урок ще можете да създадете child theme и ще знаете кога Ви е необходим и кога не.

Ключови понятия: child theme, родителска тема, Template: в style.css, functions.php, wp_enqueue_style, презаписване на шаблон, theme.json в child theme, Create Block Theme

Проблемът, който решава едно child theme

Да кажем, че искате заглавната част на Вашата класическа тема да изглежда малко по-различно и за целта редактирате header.php в папката на темата. Работи. Три седмици по-късно излиза ъпдейт на темата, който оставяте да се инсталира автоматично (както трябва, урок 7.2). Ъпдейтът заменя всички файлове на темата и Вашата промяна изчезва.

Child theme е малка тема, която казва: „използвай всичко от онази друга тема (родителската тема), освен това, което аз имам свое.“ Своите промени поставяте в child theme. Родителската тема продължавате просто да обновявате и Вашите промени остават.

Кога да, кога не

Нуждаете се от child theme, ако искате да промените или допълните файлове на дадена тема:

• искате различен шаблон (при класическа тема PHP файл, при блок тема HTML шаблон);
• искате собствен CSS, който е твърде голям за полето за CSS;
• искате собствен PHP код, свързан с визуалното оформление (допълнителен размер на изображение, допълнително местоположение за меню).

Не Ви е необходимо child theme, ако:

• редактирате блок тема в Редактора на сайта: тези промени се съхраняват в базата данни и остават след ъпдейт (урок 5.1);
• само добавяте малко CSS чрез Допълнителен CSS (в Настройки при класическа тема, или в Стилове в Редактора на сайта);
• искате да добавите функция, която няма нищо общо с визуалното оформление (формуляр, връзка). Тя принадлежи в разширение, за да преживее смяна на темата.

Child theme за класическа тема

Child theme е папка в wp-content/themes/ с поне един файл: style.css. Да кажем, че Вашата родителска тема се намира в wp-content/themes/hoofdthema/. Тогава създайте папка wp-content/themes/hoofdthema-child/ с този style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Персонализирани промени за example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Вашият собствен CSS код е по-долу. */
.site-header { border-bottom: 3px solid #e8a33d; }

Най-важният ред е Template:. Там трябва да стои името на папката на родителската тема (не името, което виждате в администрацията). Ако то не съвпада точно (главни букви, тирета), WordPress съобщава в Изглед > Теми, че родителската тема липсва.

Освен това създавате functions.php, за да заредите стиловете. Коректният начин:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Дали родителската тема сама зарежда собствения си stylesheet, зависи от темата. Проверете в документацията на Вашата родителска тема; някои изискват в child theme също да заредите stylesheet-а на родителя с get_template_directory_uri() . '/style.css'. Ако Вашият сайт след активиране е без оформление, значи stylesheet-ът на родителя не се зарежда.

Ако искате да промените шаблон, копирайте само този един файл (например header.php) от родителя в child theme и редактирайте копието. WordPress проверява първо в child theme, после в родителя. Не копирайте всички файлове: тогава вече няма да получавате подобренията на родителя.

functions.php на child theme не заменя този на родителя, а се зарежда преди него. И двата се изпълняват.

Child theme за блок тема

При блок тема работи по същия начин, с блок файлове:

• style.css със същото заглавие и Template:;
• theme.json: той се обединява с този на родителя, затова в него поставяте само това, което искате да промените (например цветовата палитра);
• templates/ и parts/, които заместват тези на родителя.

Файл functions.php при блок тема често не е необходим, защото WordPress зарежда стиловете от theme.json автоматично.

Съществува официално разширение, Create Block Theme, което създава child theme вместо Вас от Редактора на сайта, включително промените Ви в базата данни. Полезно е, ако сте редактирали блок тема и искате тези промени да бъдат записани във файлове (например, за да ги пренесете на друг сайт).

Как да го настроите на Вашия сайт

1. Създайте папката и файловете на собствения си компютър и проверете папката на родителската тема.
2. Качете папката в wp-content/themes/ чрез File Manager или през SFTP. Или компресирайте папката като zip и я качете в Изглед > Теми > Ново тема > Качване на тема.
3. Отидете на Изглед > Теми. Вашето child theme ще бъде там. Активирайте го.
4. Проверете сайта си: менютата и джаджите (widgets) може да се наложи да бъдат свързани отново при смяна към child theme; настройките от Настройки важат за всяка тема поотделно, затова ги настройте отново или ги експортирайте с разширение.
5. Родителската тема трябва да остане инсталирана. Не я изтривайте; child theme не работи без нея.

Направете това за предпочитане първо в тестова среда (staging) (урок 8.3), защото смяната на тема на натоварен работещ сайт може да предизвика временен безпорядък.

Обобщение

• Child theme запазва промените Ви във файловете на темата извън родителската тема, така че ъпдейтите не ги презаписват.
• Не Ви е необходим за промени в Редактора на сайта или малко Допълнителен CSS; функциите принадлежат в разширение.
• Минимум: папка със style.css, в който Template: сочи точно папката на родителската тема.
• Копирайте само шаблоните, които наистина променяте; functions.php на child theme се зарежда редом с този на родителя.
• Родителската тема остава инсталирана и продължава да се обновява.

Тест

Задача

Задача A5.2: Проверка на Вашата child theme. Създайте child theme за Вашата тема, на тестовия Ви сайт или в тестова среда (staging) (урок 8.3), и го активирайте. Въведете адреса на сайта и името на папката на child theme. Програмата ще провери wp-content/themes/<папка>/style.css и ще потвърди: файлът съществува, в него има Theme Name: и Template:, стойностите на style.css на родителя в тази папка също съществуват, и началната страница сочи към child theme (т.е. той е активен).

Задача D5.2: Какво сте променили и защо? Отбележете кои файлове се намират във Вашето child theme, какво сте променили във всеки файл и защо това не е можело да се направи в Редактора на сайта, в Допълнителен CSS или в разширение. Отметнете, че родителската тема все още е инсталирана и има автоматични ъпдейти.

Допълнително четене

Тези статии описват стъпките в панелите на WebOké; в други панели работят по сходен начин.

• Ръководство за DirectAdmin 11.1: Отваряне на File Manager: директориите във Вашия пакет
• Ръководство за DirectAdmin 11.2: Качване и изтегляне на файлове
• Ръководство за DirectAdmin 11.7: Свързване с FileZilla (FTP, FTPS и SFTP)
• Child themes (developer.wordpress.org, на английски): https://developer.wordpress.org/themes/advanced-topics/child-themes/