Child тема в WordPress: Какво представлява и как да създадете такава

WordPress темите могат изцяло да променят дизайна на вашия сайт. Когато сте в процес по изработка на уебсайт с WordPress ще имате много опции за създаване на тема или избиране на готова такава. Например, вашата тема може да има оформление с една или две колони.

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

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

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

В тази статия ще ви разкажем всичко за child темите и ще ви покажем как да създавате такива теми след изработка на WordPress уебсайт. За да разберете какво прави child темите толкова ценни, нека първо разгледаме връзката между parent и child темите (това са респективно основната и дъщерната тема).

Какво е parent тема в WordPress?

По същество parent темата представлява основната тема на вашия сайт. Тя включва всички файлове с темплейти, както и елементите, необходими за правилната работа на темата.

Файловете index.php и style.css (съответно основният шаблон и стиловите файлове) са единствените шаблонни файлове, които се изискват. Въпреки това обаче повечето теми включват и други неща, като PHP файлове, файлове за локализация, графики, Javascript и/или текстови файлове.

След като завършите своята изработка на уебсайт с WordPress е важно да запомните, че с изключение на child темите, всички останали теми се разглеждат като основни (parent) теми. А сега, нека разгледаме по-отблизо и какво представлява child темата, както и какви са нейните предимства.

Какво е child тема в WordPress?

Child темата представлява подтема, която наследява външния вид и функциите на основната (parent) тема. Когато правите модификации по child темата, те се съхраняват отделно от файловете на основната тема.

Ползи от създаването на child тема

На първо място създаването на child тема след изработка на WordPress уебсайт ви позволява да актуализирате основната си тема, без да губите вашите персонализации.

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

В резултат на това ще бъдете изправени пред невъзможен избор: или да не поддържате темата си актуална, което е огромен риск за сигурността, или да загубите вашите персонализации и времето, което сте инвестирали в създаването им.

За щастие след изработка на уебсайт с WordPress създаването и персонализирането на child тема решава именно този проблем. Тъй като дъщерната тема ви позволява да съхранявате модификациите си в отделна папка от тази на основната ви тема, това ги прави лесни за копиране или преместване от един сайт на друг.

Тази практика също така ви позволява да се потопите в света на разработването на теми в една безопасна среда. Ако започнете да персонализирате своята child тема и нещо се обърка или пък не сте доволни от резултата, можете просто да деактивирате дъщерната тема. Това ще възстанови основната тема и уебсайтът ви ще се върне към предишния си вид.

Въпреки всички предимства, изброени дотук, нашата WordPress компания иска да ви предупреди, че създаването на child тема не винаги е най-добрият вариант. Така например, ако искате да правите обширни персонализации по функционалността на темата, би било по-добре директно да създадете parent тема или пък да изберете опция, която предлага съществуваща дъщерна тема, която може да бъде редактирана веднага.

И все пак, ако основната ви цел е да добавяте персонализиран CSS, то тогава създаването на child тема е идеален вариант. Сега, след като вече знаете кои са най-големите предимства от създаването и персонализирането на дъщерна тема, нека преминем през процеса по създаване на такава тема.

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

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

В следващите точки ще ви преведем именно през стъпките, които трябва да следвате. За целта на тази демонстрация, ще използваме настоящата тема по подразбиране на WordPress – Twenty Twenty-Two (настояща към 11.07.2022).

Стъпка 1: Създайте папка за вашата child тема

Първото нещо, което трябва да направите е да създадете папка, в която да поставите всички шаблонни файлове и елементи на дъщерната ви тема. За да създадете такава папка след изработка на уебсайт с WordPress, трябва да използвате File Manager от контролния панел на вашия хостинг доставчик.

След като отворите File Manager, кликнете върху папката public_html. След това кликнете върху папката wp-content. Намерете папката с етикет “themes”. После кликнете върху +Folder от лентата с инструменти в горната част на екрана.

Наименувайте тази папка, като използвате името на parent темата и добавите “-child” в края. Така че, ако създавате child тема на Twenty Twenty-Two, трябва да именувате папката „twentytwentytwo-child“. Тази папка ще служи като директорията на вашата дъщерна тема.

Стъпка 2: Създайте stylesheet за вашата child тема

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

Ще трябва да добавите задължителен header коментар в най-горната част на файла, за да може таблицата със стилове наистина да работи. Този коментар съдържа основна информация за дъщерната тема, включително че това е child тема с определена parent тема.

В действителност е необходимо да добавите само две неща: името на темата и шаблона (т.е. името на основната тема). Можете да включите и друга информация, включително описание, име на автор, версия и тагове. Тези допълнителни подробности са важни, ако възнамерявате да публикувате или продавате дъщерната си тема.

Сега нашата WordPress компания ще ви даде пример за пълен header коментар за дъщерна тема на Twenty Twenty-Two:

/*

Theme Name: Twenty Twenty-Two


Theme URI: https://example.com/twenty-twenty-two-child/


Description: Twenty Twenty-Two Child Theme


Author: Snezhana Simeonova


Author URI: https://example.com


Template: twentytwentytwo


Version: 1.0.0


License: GNU General Public License v2 or later


License URI: http://www.gnu.org/licenses/gpl-2.0.html


Tags: two-column, responsive-layout


Text Domain: twentytwentytwochild


*/ 

Обърнете внимание на наклонените черти и звездичките. След изработка на WordPress уебсайт те сигнализират, че този код ще бъде „коментиран“ в CSS. По този начин WordPress няма да се опитва да го изпълни.

Можете да добавите персонализиран CSS по-късно, когато сте готови да започнете да персонализирате дъщерната си тема. Засега кликнете върху ‘Save’, така че тази таблица със стилове да бъде запазена в директорията на дъщерната ви тема.

Стъпка 3: Заредете стиловите таблици на вашите child и parent теми

Сега е време да заредите стиловите таблици на вашите child и parent теми. Това ще гарантира две неща.

Първо, това гарантира, че дъщерната ви тема ще наследи стила на основната тема. По този начин, когато активирате своята child тема няма да гледате куп нестилизиран текст.

Второ, това гарантира, че след изработка на уебсайт с WordPress таблицата със стилове на дъщерната тема ще се зарежда преди тази на основната тема (т.е. без да я отменя). По този начин, след като добавите персонализиран CSS или пък промените дъщерната си тема по някакъв друг начин, тези модификации ще допълнят или заменят определени стилове и функции на основната тема.

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

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

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

}

?>

Стъпка 4: Инсталирайте и активирайте своята child тема

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

За да качите файла, отидете в таблото за управление на WordPress и кликнете върху Appearance > Themes > Upload. След това изберете директорията на child темата ви.

След като темата се качи, кликнете върху ‘Activate’. И така, вашата child тема вече е активна! Единственият проблем е, че в момента тя изглежда точно като вашата parent тема. Това означава, че е време за персонализиране.

Стъпка 5: Персонализиране на вашата child тема

За да персонализирате дъщерната си тема след изработка на уебсайт с WordPress, вероятно ще започнете с добавяне на CSS към файла style.css в директорията на вашата child тема. Това е един от най-лесните начини да направите промени по темата си.

Достатъчно е да добавите код към таблицата със стилове на child темата (под header коментара) и ще можете да персонализирате цветовата схема, отстоянията, типографията и други основни елементи от дизайна на основната тема. Този код ще замени кода в таблицата със стилове на вашата parent тема.

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

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

add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );

След изработка на WordPress уебсайт можете да добавите колкото искате функции между отварящите и затварящите PHP тагове на вашия файл. Това е! Child темата ви официално е готова! Съветваме ви първо да тествате сайта си в стейджинг среда, след което, ако всичко е наред, можете да направите промените live.

Бонус: Създаване на child тема с помощта на плъгин

Ако предпочитате да използвате плъгин, с който да създадете child тема, то тогава нашата WordPress компания може да препоръча плъгина Child Theme Configurator. Този плъгин е изключително лесен за използване. С негова помощ ще можете да създавате и персонализирате дъщерни теми бързо, без да се налага да пишете код.

И така, първото нещо, което трябва да направите, е да инсталирате и активирате плъгина Child Theme Configurator. При активиране трябва да отидете на Tools » Child Themes от вашето табло за управление. В раздела Parent/Child ще бъдете помолени да изберете основна тема от падащото меню. За целта на това ръководство отново ще използваме темата Twenty Twenty-Two.

Когато след изработка на уебсайт с WordPress инсталирате и активирате плъгина, може да кликнете върху бутона ‘Analyze’. Плъгинът ще иска да се увери, че избраната от вас тема е подходяща за използване като основна тема. В нашия случай Twenty Twenty-Two е добър избор.

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

В следващия раздел ще бъдете помолени да изберете как да бъде достъпвана таблицата със стилове на основната тема. Отново може да оставите настройките по подразбиране.

Когато стигнете до ‘Section 7’, нашата WordPress компания ви препоръчва да кликнете върху бутона с надпис ‘Click to Edit Child Theme Attributes’. След това можете да попълните подробностите за дъщерната си тема.

Когато създавате child тема ръчно, вие губите менютата и уиджетите на основната тема. Плъгинът Child Theme Configurator обаче може да ги копира от основната в дъщерната тема. Просто поставете отметка в квадратчето ‘Section 8’.

Накрая кликнете върху бутона, за да създадете новата си child тема. Плъгинът ще създаде папка за дъщерната ви тема и ще добави файловете style.css и functions.php, които ще използвате по-късно, за да персонализирате темата.

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

Ако всичко работи както трябва, просто кликнете върху бутона ‘Activate & Publish’ и вашата child тема ще бъде активирана.

5 грешки, които да избягвате, когато създавате child тема

Ако искате да създадете добре работеща child тема след изработка на WordPress уебсайт, ви съветваме да избягвате следните 5 грешки:

1. Не включвайте интервали в името на папката. Вместо това заменете интервалите с тирета.
2. Не използвайте име на шаблон, различно от името на основната тема, когато създавате style.css файл. WordPress няма да знае от коя основна тема вашата дъщерна тема трябва да наследи стила си.
3. Винаги включвайте URL връзката @import във файла style.css. Ако не направите това, child темата няма да импортира външния вид и функционалността на parent темата.
4. Не използвайте различни case типове, когато изписвате името на темплейта. Имената на шаблоните са чувствителни към главни и малки букви.
5. Не дублирайте пълния functions.php файл от вашата основна тема във вашата дъщерна тема. Това ще накара сайта ви да се зареди два пъти по едно и също време. За да избегнете това, нашата WordPress компания ви съветва да работите със снипети код.

Какво да правите, ако вашата WordPress child тема не работи?

Child темата ви не работи? Ето някои неща, които трябва да проверите, за да отстраните проблема:

1. Проверете отново вашия functions.php файл

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

2. Уверете се, че сте кръстили таблицата със стилове “style.css”

Съветваме ви след изработка на уебсайт с WordPress да проверите дали случайно не сте кръстили своя CSS лист “stylesheet.css” вместо “style.css”. Тъй като “style.css” е стандартната конвенция за именуване на WordPress, използването на това име ще позволи на вашия functions.php файл автоматично да определи, че това е вашата таблица със стилове. Ако наименувате своята таблица със стилове по друг начин, functions.php файлът няма да може да я извлече и рендерира правилно на крайния потребител.

3. Изчистете кеша

Нашата WordPress компания ви препоръчва да изчистите своя кеш, тъй като браузърът ви може да показва по-стара версия на вашия сайт. Също така бихте могли да отворите уебсайта си в инкогнито прозорец, за да прегледате публикуваните от вас промени. Ако сте инсталирали плъгин за кеширане, за да подобрите скоростта на уебсайта си, деактивирайте го, докато работите върху вашата child тема.

4. Добавете !important към вашия CSS код

Ако parent темата ви все още отменя CSS кода на вашата дъщерна тема, добавете !important към елементите, които сте променили. Това принудително ще замени всичко, което е написано в CSS листа на основната тема. Нашата WordPress компания ви съветва да добавите !important точно преди точката и запетаята:

p { background-color: gray !important; }

Правилото !important може да се използва за идентификатори, CSS класове и стандартни HTML елементи като параграфи, таблици, заглавия и др.

5. Свържете се с поддръжката на вашата тема или проверете за решения на проблема във форума за теми

Ако сте предприели всички изброени по-горе стъпки и CSS-ът ви все още не се зарежда, е време да се свържете с екипа за поддръжка на вашата тема или пък да проверите за решения на проблема във форума на съответната тема в WordPress.org.

Това може да ви даде отговори, специфични за вашата тема. Не забравяйте, че докато сте били в процес по изработка на WordPress уебсайт, е възможно разработчикът на вашата тема да е използвал къстъм код или пък да е внедрил различна система за именуване на файловете на темата.

Създайте своята WordPress child тема!

И така, инсталирането на WordPress тема е чудесна първа стъпка в създаването на вашия сайт. За да персонализирате темата си може да използвате билдър на теми (ако темата ви се предлага с такъв) или пък вградения редактор Gutenberg. Но за да направите повече и да персонализирате не само дизайна на вашата тема, но и нейната функционалност, би било най-добре да създадете child тема.

По време на, а и след изработка на уебсайт с WordPress, дъщерните теми са фантастичен инструмент за рационализиране на вашия процес на разработка. Те са сравнително лесни за настройка и намаляват риска от причиняване на значителни щети върху вашия уебсайт, които могат да възникнат, когато променяте неговия стил.

Повече по темата

• Как PHP Подсилва Разработката на Сайтове с WordPress
• WordPress Multisite: Решение за Управление на Множество Уебсайтове
• Интеграция на WordPress с Next.js: Перфектната комбинация за бързи и гъвкави уебсайтове
• Предимствата на Headless WordPress за Модерни Уеб Приложения
• WordPress Multisite: Идеалното решение за управление на мрежа от сайтове