Как да създадеш child тема във WordPress стъпка по стъпка и защо е нужно

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

Публикацията е обновена на 08.01.2021.

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

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

Изясняване същността на child тема

Като ползвам дефиницията от WordPress:

Родителската тема е пълна тема, която включва всички необходими файлове и активи на шаблони на WordPress, за да работи темата. Всички теми – с изключение на дъщерни (child) теми – се считат за родителски теми.

Една “Child Theme” на WordPress е тема, която наследява функционалностите на друга тема, наречена основна или родителска и позволява да се модифицират или добавят нови такива, без да влияе на темата източник.

Детската тема е огледалното отражение на родителската тема. Каквито и промени да направиш в отражението, няма да засегнат оригиналната тема. Но ако в родителската тема се направят някакви промени (например при обновяване), те ще бъдат видими в child темата.

Една child тема не може да функционира самостоятелно без темата родител.

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

Използвайки съответните .css и .php файлове, можеш да модифицираш всичко – от стил, параметри на оформлението до действително кодиране и скриптове, използвани от дъщерна тема, дори ако атрибутите не присъстват в родителската ѝ тема.

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

Да изясним накратко…

Защо е толкова полезна Child темата?

• Ако модифицираш темата си и направиш ъпдейт, модификациите ще са загубени (презаписват се файловете CSS, PHP, изображения и т.н.). Когато ползваш child тема можеш спокойно да направиш обновяване на темата родител и да не загубиш промените си.
• Позволява ти да променяш, добавяш, изтриваш функции или части от тема, без да пипаш в оригинала;
• Друго предимство на използването на детска тема е, че ако модификацията й създава проблем, винаги можеш да я деактивираш и да се върнеш обратно към родителската тема.
• Добър начин да се обучаваш да развиваш теми – можеш да вземеш началните елементи от изходната тема и да променяш, както ти харесва.

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

Можем да го направим по два начина –

• Създаване на child тема ръчно и
• Създаване на child тема чрез приставка.

Ръчно създаване на child тема

Както споменах по-горе, една child тема се съхранява в отделна папка от темата родител, всяка със своите style.css и functions.php файлове. Можеш да добавиш и други файлове, но тези двата са минималното необходимо, за да функционира правилно детската тема и съответно твоят сайт / блог.

Ще покажа в това упътване как да създадем Child тема на Twenty Sixteen темата, предоставена безплатно от WordPress, и която в момента имам в папка Themes на моя wp-content. Същото може да се приложи за всяка друга тема.

1. От Контролния панел в пространството на хостинга (cPanel) отивам във Файловия мениджър–>папка wp-content–>themes в root на сайта. Намирам темата (в случая) Twenty Sixteen – twentysixteen.
2. Създавам нова папка с името на темата родител и добавено child: twentysixteen-child.
   
   
3. Влизам в новосъздадената папка и създавам празен текстов файл, наречен style.css.
4. Отварям новосъздадения файл с десен бутон и Edit и копирам следния код:

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://the_name_of_your_site.com/twenty-sixteen-child/
Description: Child Theme of Twenty Sixteen
Author: Your name
Author URI: http://the_name_of_your_site.com/
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: tags for your site, separated with a comma, example: blu, white, gray, light, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images
Text Domain: twenty-sixteen-child
*/

Маркираните части промени в съответствие с твоя случай.

Тук може да се вмъкнат всички CSS правила, които заместват тези на родителската тема.

Виж значението на различните термини:

• Theme Name:  Името на child theme.
• Description: Описание на child theme.
• Theme URI: Адресът на който може да се намери тази child theme.
• Author: Името на автора на тази child theme.
• Author URI: Адресът на уеб сайта на автора.
• Template: Името на папката на родителската тема.
• Version: Версията на child theme.

Единствено важните полета, за да работи правилно child theme са:

• Theme Name 
• Template 

Може да срещнеш някъде, че е необходимо към горния код да се добави и този ред:

@import url

/* Import CSS style sheets from Parent Theme */
@import url(„../twentysixteen/style.css“);

Така да се дефинира пътят на CSS style sheets на родителската тема.

Внимание: Това действие може да се направи по друг, по-добър начин. Виж по-надолу.

Останалите полета са факултативни.

Кликвам Запазване и Затваряне на файла style.css.

5. Както се забелязва от изображението,

няма предварителен преглед на темата Child. За да й сложим картинка, ще вмъкна изображение с размери 300×250 px и име screenshot.jpg в папката на темата Child.

Ето новият вид:

6. Kакто подсказах по-горе@import не е добър избор, защото създава ново повикване HTTP и забавя сайта.  Счита се вече за грешна практика. (Виж по-подробно това изследване на Steve Souders).

Тогава следващата стъпка, за да заредим CSS стиловете на родителска и дъщерна тема е…

Модифициране на файла functions.php

Ако отидем да активираме Child темата на WordPress, ще забележим, че файловете на темата се качват, но не и файловете CSS.

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

<?php
/* enqueue script for parent theme stylesheeet */
add_action( ‘wp_enqueue_scripts’, ‘load_parent_style’ );
function load_parent_style () 
{wp_enqueue_style( ‘parent-style’, get_template_directory_uri(). 
'/style.css' );}
?>

С това „поставяме на опашка“ CSS style sheets на родителската тема.
Отиваме във Външен вид на Таблото, избираме Теми и активираме нашата Child тема.

Виж още: Не мога да се свържа със сайта си: как да разреша проблема

Още възможности на тема Child в WordPress

Освен промените, които можем да направим на нашата Child тема чрез презаписване на style.css, можем да променяме и functions.php. Вмъквайки код в тага php, променяме различни функционалности на нашето уеб пространство и сайта.

За разлика от style.css, functions.php не презaписва основното на родителската тема. Поради това можеш само да вмъкнеш код php, необходим ти за твоите цели. С някои промени от този тип се избягва наслагването на още плъгини.

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

Виж как да създадеш child тема чрез използване на приставка

Много блогери избягват да работят с код. Въпреки че, в този случай добавянето на код, за да създадем child тема на WordPress не e особено сложнo, ако се притесняваш, можеш да използваш приставка.

Плъгинът, който ще ти предложа, е много прост за използване. Ще направя преглед на Child theme configurator.

Инсталираме приставката и я активираме. Отиваме на Инструменти в Таблото на WordPress.

Отметни CREATE a new Child Theme. Избери темата, на която искаш да създадеш тема наследник или детска тема и щракни върху Analyze, за да провериш дали е възможно автоматично създаване.

Останалите настройки остави по подразбиране, но в точка 7 персонализирай атрибутите: въведи твоето име, описание и т.н.

В точка 8 можеш да избереш опцията за копиране на менюта, джаджи и други настройки от родителската тема в child темата.

След приключване кликни върху Create New Child Theme, за да съдадеш child темата на твоята родителска тема.

Преди да активираш детската тема, провери визуализирането й за грешки.

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

Заключение

Ето едно видео и една инфографика по въпроса:

Инфографиката (на английски), с обясненията:

Share this Image On Your Site / Споделете на сайта си, чрез копиране и поставяне на кода отдолу</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p><strong>Please include attribution to site name goes here Here with this graphic./ Моля, споделете и името на източника.</strong></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p><a href=“><img src=“ alt=“ width=“ border=’0’/></a></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>

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

Тук можеш да оставиш коментар дали си използвал някога child тема на WordPress? Как я създаде – ръчно или с някой плъгин?

Източник на основното изображение: Pixabay.com.

Източник за първото изображение: Pngtree.com.