Как да създадете WordPress Child тема и защо е необходима

child-theme

Здравейте, приятели! От тази статия ще разберем как лесно и бързо да създадем и използваме WordPress child теми, и защо използването им е толкова важно и нужно.

Защо трябва да използвате child теми

Решавате, че нещо във вашата тема не ви харесва и искате да направите промени. Например да смените цвета на линковете или да направите заглавието (h1 таг) на статиите по-голямо или по-малко или да смените шрифта. Правите промените и се радвате на резултатите. Но идва ден и излиза нова версия на вашата тема и вие разбира се ъпдейтвате темата със новата версия. Но този ъпдейт води до загуба на промените които сте направили по темата и труда ви отива на вятъра.

И именно тук ще ви спаси вашата child тема. Child темата позволява да правите промени, които не засягат кода на оригиналната тема и което позволява да запазите направените промени след като направите ъпдейт със по-нова версия на родителската тема. Ще се съгласите, че това е много удобно и няма да ви се налага отново да правите промени във кода.

Създавайки child тема, вие създавате отделен набор от файлове, които може да използвате за да направите промени в темата, без въобще да засегнете родителската тема. Не само, че при ъпдейт на родителската тема няма да се загубят направените промени, но също и може да сте сигурни, че няма да „съсипете“ кода на вашата оригинална тема, защото всъщност вие не модифицирате нейните файлове, а тези на child темата. Винаги може да изключите вашата child тема и да върнете оригиналната тема.

Как да създадем child тема

Във този пример, аз ще създам child тема за темата която върви със WordPress, twentyfifteen.

Първо, трябва да създадем нова папка за нашата child тема. Слагате име като на оригиналната тема, тире и добавяте думата child ето така: twentyfifteen-child.

Във тази папка създайте празен файл със име style.css (или за по лесно, копирайте оригиналния файл style.css на родителската тема и го поставете във папката със child темата. Отворете го и изтрийте целия код във файла).

Във празния файл style.css във вашата child тема сложете този код:

/*
 Theme Name:     Twenty Fifteen Child Theme
 Theme URI:      https://wordpress.org/themes/twentyfifteen/
 Description:    Twentyfifteen Child Theme
 Author:         the WordPress team
 Author URI:     https://wordpress.org/
 Template:       twentyfifteen
 Version:        1.4
*/
 
@import url("../twentyfifteen/style.css");
 
/* =Промените в оригиналния код ги поставяйте под този ред
----------------------------------------------------------- */

Най важната част от този файл е ред: @import url(„../twentyfifteen/style.css“); който импортва оригиналния css файл от оригиналната (родителската) тема. Трябва да внимавате името на папката което попълвате за името на оригиналната тема да не е сгрешено (във този случай е: twentyfifteen). Съответно когато вие правите child тема, ще попълните името на вашата родителска тема.

Във папката със вашата оригинална тема има снимка със име screenshot. Копирайте тази снимка във вашата child тема и я отворете със някакъв редактор на картинки, например Photoshop. Напишете във картинката например надпис Child или името на темата Child и запазете промените. Така, ще знаете, че това е вашата Child тема и по лесно ще ги различавате.

Активиране на Child темата

След като сте създали папка със вашата child тема и файл stle.css, може да качите и да активирате новата ви child тема.

child-theme-1

Модифициране на вашия style.css

След като сме създали и качили нашата child тема и сме включили оригиналния style.css на темата, нашата child тема ще изглежда като оригиналната. За да променяте оригиналния style.css, трябва да добавяте промените във файл style.css на child темата. Всичката CSS информация която добавяте във style.css на child темата, ще се счита като по-важна от информацията във style.css на родителската тема и промените ще влизат в действие, без да се променя кода на родителската тема.

Например, искате да промените цвета на фона на темата. Взимате както е в този случай този код:

body {
    background: #f1f1f1;
}

И променяте със цвета който искате, аз съм избрал да променя цвета със например червен:

/*
 Theme Name:     Twenty Fifteen Child Theme
 Theme URI:      https://wordpress.org/themes/twentyfifteen/
 Description:    Twentyfifteen Child Theme
 Author:         the WordPress team
 Author URI:     https://wordpress.org/
 Template:       twentyfifteen
 Version:        1.4
*/
 
@import url("../twentyfifteen/style.css");
 
/* =Промените в оригиналния код ги поставяйте под този ред
----------------------------------------------------------- */
body {
	background: #e82437;
}

След като промените са направени и запазени във файл style.css на child темата, те влизат веднага във действие. Във моя случай се променя цвета на фона от бял на червен.

child-theme-2

Промяна на файл functions.php

Във файл functions.php се намират главните функции и функциите на главната тема винаги са заредени във child темата. Но ако искате да добавите още функции във вашата тема, то трябва да създадете нов файл functions.php във папката със вашата child тема. Вашия functions.php файл във child темата трябва да започва със отварящ php таг и във края да има затварящ php таг:

<?php

// Вашия php код се поставя под този ред

?>

Редактиране на останалите файлове в темата

Освен style.css и functions.php, може да правите структурни промени и във останалите php файлове. Това трябва да се прави внимателно, но редактирането на php файловете ще ви позволи да променяте всяка част на темата. За разлика от functions.php, която автоматично се импортва във child темата, останалите php файлове се редактират като се заменят напълно със нов файл.

Оригиналния файл във главната тема не важи, а вместо това се използва новия от child темата. Първото нещо което трябва да направим е да сложим точно копие на стария файл преди да започнем да правим промени в него. Затова просто копирате файла от оригиналната тема и го поставяте във вашата child тема, като внимавате името на файла и мястото да са еднакви като във основната тема.

Например, ако искаме да променим: twentyfifteen/inc/custom-header.php, то трябва да копираме и да поставим този файл (custom-header.php) във: twentyfifteen-child/inc/custom-header.php. Тоест във папка twentyfifteen-child създавате папка inc и в нея поставяте custom-header.php.

WordPress знае, че трябва да използва този файл, а не този в оригиналната тема, защото името и разположението са същите като в оригиналната тема. След това вече може да отворите файла и да правите необходимите ви промени.

Ако мислите, че няма да се справите със създаване на child тема, то може да използвате плъгин One-Click Child Theme, който ще свърши цялата работа.

За днес това всичко от мен, приятели. Успех.

С уважение, Николай Томов

Хареса ли ви статията? Споделете я с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *