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


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

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

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

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

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

 Как да създадем една Child тема за WordPress?

Какво ни трябва – един файл CSS стил…

Да се създаде една Child тема е лесно. Достатъчен е един файл CSS style sheet и използване на wp_enqueue_style().

Ще покажа в това упътване как създавам 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 тема в WordPress и как да я създадем инфографика
Share this Image On Your Site / Споделете на сайта си, чрез копиране и поставяне на кода отдолу

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


Тагове:

2 коментара

  1. κινεζικη αστρολογια

Коментари