WordPress jak zrobić motyw potomny

W tym artykule: nie tak krótko o motywach potomnych – czym są i dlaczego warto z nich korzystać a także jak zrobić motyw potomny w WordPress.

O motywie potomnym pierwszy raz wspominałam gdy wymieniałam sposoby, na jakie można zacząć tworzenie własnego motywu w WordPress. Było to w artykule z serii o tworzeniu od podstaw motywu do WordPressa: Budowa motywu do WordPressa, wycieczka w świat szablonów.

Czym jest motyw potomny?

Motyw potomny (ang. child theme) jest motywem, który dziedziczy style i funkcjonalności innego motywu (motyw, na którym bazujemy nazywamy motywem nadrzędnym).

Po co stosuje się motywy potomne?

Ok, wiemy już, że motyw potomny otrzyma style i funkcje z innego motywu, ale po co właściwie miałby to robić, jakie to daje możliwości?
Okazuje się, że dziedziczenie po motywie nadrzędnym jest szalenie użyteczne, gdy naszym celem jest zmodyfikowanie już istniejącego motywu.

Można na starcie wymienić parę plusów wynikających z pracowania na motywie potomnym:

• zmiany, które nanosimy bazując na motywie nadrzędnym są bezpieczne w potomku – aktualizacja motywu nadrzędnego ich nie wyczyści
• jeśli w motywie potomnym coś przekombinujemy, szybko możemy deaktywować motyw potomny i wrócić do motywu nadrzędnego
• dzięki motywowi potomnemu, można szybko zrobić motyw bazujący na innym z dopasowanymi do naszych potrzeb stylami/dodatkowymi funkcjonalnościami
• jest to całkiem dobry sposób na poznanie się z tworzeniem motywów do WordPress

Jak zrobić motyw potomny w WordPress?

Wiemy  już czym jest motyw potomny i w jakich przypadkach się z niego korzysta. Teraz możemy iść dalej i zobaczyć w jaki sposób tworzy się motywy potomne w WordPress.

Na warsztat biorę motyw, który dołączany jest do instalacji WordPress’a – Twenty Fifteen. Bazując na nim, chcę zrobić motyw potomny, który będzie modyfikował oryginalne style motywu nadrzędnego.

Wszystko zaczyna się od nowego katalogu

Żeby stworzyć motyw potomny, w katalogu z motywami ([ścieżka do instalacji WP]/wp-content/themes/) tworzę nowy folder i nazywam go: twentyfifteen-child.

• style.css – z zakomentowanym nagłówkiem
• functions.php – do załączenia arkuszy stylów rodzica i dziecka

W arkuszu stylów motywu-dziecka kluczowy jest zakomentowany nagłówek z meta danymi. Bardzo ważne jest wpisanie nazwy katalogu motywu nadrzędnego w linijce zaczynającej się od „Template: „.

Moża tam też określić inne przydante informacje takie jak nr wersji, nazwę autora, domenę tekstową itp.

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
Version: 1.0.0
*/

Teraz  trzeba jeszcze zaimportować w motywie potomnym style rodzica i dołączyć style dziecka.

Robimy to w pliku functions.php – w nim generalnie możemy rozszerzać funkcjonalność motywu nadrzędnego. Tam też musi znaleźć się funkcja, zarejestrowana do zaczepu akcji o nazwie wp_enqueue_scripts, ładująca style obu motywów:

<?php 

function twentyfifteen_child_enqueue_styles() {
    
    // nazwa $handle użyta w motywie nadrzędnym podczas rejestracji arkusza stylów
    $parent_style = 'twentyfifteen-style';
    
    // załączenie stylów motywu nadrzędnego
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
    /**
     * załączenie stylów motywu potomnego
     * $parent_style są przekazywane jako zależność, żeby załadowały się w pierwszej kolejności
     * przekazujemy też bieżącą wersję arkusza (potrzebna do cache'owania)
     */
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_enqueue_styles' );

Teraz po odświeżeniu strony z wczytanym motywem potomnym widać już style załadowane z rodzica.

Struktura katalogu:

wp-content/themes
|-- twentyfifteen
|    |-- [pliki motywu nadrzędnego]
|
|-- twentyfifteen-child
|    |-- style.css
|    |-- functions.php

Mając aktywny motyw potomny, mogę w nim dowolnie modyfikować motyw, na którym bazuję – bez obaw, że po aktualizacji motywu nadrzędnego moje wprowadzone zmiany się wykasują.

Przykładowa zmiana kolorystyki w motywie potomnym:

/*
 Theme Name: Twenty Fifteen Child
 Template: twentyfifteen
 Version: 1.0.0
*/

.sidebar,
.entry-footer{
    background-color: #FFFD98;
}

Przydatne informacje:

Jeśli w motywie potomnym chcemy załączać np. grafiki, które są w katalogu motywu potomnego, musimy użyć funkcji zwracającej odpowiednią ścieżkę.

Użyte w motywie potomnym:

• get_stylesheet_directory_uri() – zwraca ścieżkę URL do motywu potomnego
  ( np. http://localhost/wp/wp-content/themes/twentyfifteen-child )
• get_stylesheet_directory() – zwróci ścieżkę absolutną do katalogu na serwerze.
  (np. C:\xampp\htdocs\wp/wp-content/themes/twentyfifteen-child)
• get_template_directory_uri() – zwraca ścieżkę URL do motywu nadrzędnego
  (np. http://localhost/wp/wp-content/themes/twentyfifteen)