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


За нуждата от child тема и как да създадем детска тема сами или с помощта на плъгин

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

В един момент на много от блогерите ни се налага да създадем child тема. Създаването на child или детска тема е необходимо, за да може спокойно да се променят CSS  правилата, без да се пипа в оригиналната тема.

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

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

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

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

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

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

Една 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.
    Интернет, технологии и маркетинг 1
  3. Влизам в новосъздадената папка и създавам празен текстов файл, наречен style.css.
    Интернет, технологии и маркетинг 2
  4. Отварям новосъздадения файл с десен бутон и Edit и копирам следния код:

/*
Theme Name: Twenty Sixteen Child
Theme URI: http: //thenameofyoursite.com/twenty-sixteen-child/
Description: Child Theme of Twenty Sixteen
Author: Your name
Author URI: http://thenameofyoursite.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
*/

/* == Add your own styles below this line ==
–––––––––––––––*/

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

Тук може да се вмъкнат всички 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. Както се забелязва от изображението,
Интернет, технологии и маркетинг 3

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

Интернет, технологии и маркетинг 4

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

Интернет, технологии и маркетинг 5

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

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

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

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

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

<?php
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.

Създаване child (детска) тема чрез използване на приставка

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

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

Създаваме child тема с Child theme configurator

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

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

Как да създадеш Child theme с плъгин-

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

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

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

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

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

Заключение

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

 

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

Какво е Child тема в WordPress и как да я създадем инфографика
Share this Image On Your Site / Споделете на сайта си, чрез копиране и поставяне на кода отдолу

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

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

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

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


Тагове:

6 коментара

  1. Добрин
  2. κινεζικη αστρολογια

Коментари

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.