Tworzymy motyw potomny (Child Theme) w WordPressie

Cześć! Jestem blogerem, który specjalizuje się w tworzeniu stron internetowych. Dziś, pragnę zabrać was w podróż przez świat WordPressa i opisać proces tworzenia motywu potomnego, znanego również jako child theme.

Dlaczego warto tworzyć motywy potomne?

Z pewnością zastanawiasz się, skąd wziął się ten pomysł na stworzenie motywu potomnego. Odpowiedź jest prosta: aby zabezpieczyć nasze indywidualne zmiany podczas aktualizacji motywu głównego. Gdy wprowadzamy zmiany bezpośrednio w motywie głównym, ryzykujemy ich utratę podczas każdej aktualizacji. Czyż nie brzmi to przerażająco?

Czym właściwie jest motyw potomny?

Motyw potomny, to zestaw plików, które dziedziczą funkcjonalność i wygląd motywu nadrzędnego. Pozwalają nam wprowadzać własne zmiany bez konieczności ingerowania w oryginalny motyw.

Jak działa motyw potomny?

Kiedy WordPress nie może znaleźć pewnych plików w motywie potomnym, szuka ich w motywie nadrzędnym. To dziedziczenie sprawia, że możemy modyfikować oryginalny motyw, nie ingerując bezpośrednio w jego pliki.

Jak stworzyć motyw potomny?

Stworzenie folderu dla motywu potomnego

Tworzenie motywu potomnego zaczynamy od utworzenia nowego folderu w katalogu motywów WordPressa. Nazwa folderu jest dowolna, ale dobrą praktyką jest dodanie „-child” do nazwy motywu nadrzędnego.

Stworzenie pliku style.css

Następnie musimy utworzyć plik style.css. Ten plik jest kluczowy dla naszego motywu potomnego.

Wypełnienie pliku style.css

W pliku style.css musimy wprowadzić kilka niezbędnych informacji, takich jak nazwa motywu potomnego, nazwa motywu nadrzędnego, wersja i autor.

/*
Theme Name: Twenty Twenty-One Child
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Motyw potomny dla Twenty Twenty-One
Author: Twoje Imię
Author URI: http://example.com
Template: twentytwentyone
Version: 1.0.0
*/

@import url("../twentytwentyone/style.css");

Teraz omówmy każdą linijkę tego pliku:

Theme Name: Jest to nazwa twojego motywu potomnego, która będzie widoczna w panelu administracyjnym WordPressa.
Theme URI: Jest to adres URL, gdzie możesz znaleźć więcej informacji o motywie.
Description: Tutaj możesz podać krótki opis twojego motywu potomnego.
Author: Podaj swoje imię lub nazwę firmy.
Author URI: Jest to adres URL, gdzie użytkownicy mogą znaleźć więcej informacji o autorze motywu.
Template: Jest to najważniejsza część nagłówka. Wartość tej linii powinna być taka sama jak nazwa katalogu motywu nadrzędnego. W naszym przypadku, dla motywu nadrzędnego Twenty Twenty-One, nazwa katalogu to twentytwentyone.
Version: Tu wpisujesz wersję motywu potomnego. Zazwyczaj zaczynamy od 1.0.0.

Czytaj więcej: Jak skasować wszystkie zamówienia ze sklepu WooCommerce?

Następnie, używamy dyrektywy @import do zaimportowania pliku style.css z motywu nadrzędnego. Dzięki temu, nasz motyw potomny dziedziczy wszystkie style CSS z motywu nadrzędnego.

Stworzenie pliku functions.php

Kolejnym krokiem jest stworzenie pliku functions.php. Pozwala on na dodanie własnych funkcji do naszego motywu potomnego.

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

Omówmy teraz poszczególne linie kodu:

my_theme_enqueue_styles(): Jest to nazwa funkcji, którą tworzymy. Ta funkcja będzie dodawać nasze style CSS do strony.
$parent_style: Jest to zmienna, którą używamy do przechowywania nazwy stylu dla naszego motywu nadrzędnego.
wp_enqueue_style: Jest to funkcja WordPressa, która umożliwia dodanie plików CSS do strony.
get_template_directory_uri() i get_stylesheet_directory_uri(): Są to funkcje WordPressa, które zwracają adresy URL do katalogu motywu nadrzędnego i potomnego.
add_action: Jest to funkcja WordPressa, która pozwala nam „podłączyć” naszą funkcję my_theme_enqueue_styles do akcji wp_enqueue_scripts. Dzięki temu, nasze style CSS zostaną dodane do strony w odpowiednim momencie.

Czytaj więcej: Dlaczego opieka nad WordPressem jest ważniejsza, niż myślisz

Wszystko razem umożliwia nam to załadowanie pliku style.css z motywu nadrzędnego, a następnie załadować plik style.css z naszego motywu potomnego, nadpisując tym samym style nadrzędne.

Aktywacja motywu potomnego

Po przygotowaniu wszystkich niezbędnych plików, możemy aktywować nasz motyw potomny. Robimy to w panelu administracyjnym WordPressa, tak jak każdy inny motyw.

Tworzenie motywu potomnego to proces, który może wydawać się skomplikowany, ale z moim przewodnikiem jestem pewien, że poradzisz sobie bez problemu. Pamiętaj, że dzięki motywowi potomnemu, twoje zmiany będą bezpieczne nawet po aktualizacji motywu głównego. Powodzenia!Szukasz tańszej usługi lub usług SEO dla swojej strony internetowej? Zatrudnij mnie na Useme.com