WordPress child-theme – co to i jak stworzyć?

WordPress jako CMS potrafi zadziwiać swoją prostotą, liczbą zastosowań i oczywiście możliwościami konfiguracyjnymi. To narzędzie o ogromnym potencjalne zarówno dla niedzielnych blogerów, średniej wielkości sklepów e-commerce, jak i zaawansowanych programistów. W odróżnieniu od gotowych rozwiązań, silnik WordPressa pozwala nam na wprowadzenie dogłębnych przemian bez potrzeby edycji kodu źródłowego całej strony. Doskonałym przykładem na to są właśnie motywy potomne, czyli tzw. child themes. Dowiedz się czym są, jakie niosą ze sobą zalety oraz jak je wdrożyć bez posiadania technicznej wiedzy.

Co to WordPress child-theme?

WordPress child-theme to motyw potomny stworzony na podstawie informacji zawartych w motywie nadrzędnym (parent-theme). Dzięki niemu nie musimy edytować kodu głównego motywu. Możemy wprowadzić małe zmiany, które zostaną nadpisane, zachowując przy tym przejrzystość i widoczność zmian w oddzielnych plikach oraz katalogach. Zauważmy, że edycja kodu głównego szablonu nie umożliwia podglądu ich historii. Tak jak nie ingerujemy w core WordPress’a, tak samo powinniśmy unikać edycji głównego motywu.

Dlaczego motyw potomny jest ważny?

WordPress w odróżnieniu od innych popularnych CMS-ów zakłada pełną zgodność z ideą open-source. Otwartoźródłowość nie ogranicza nas w żaden sposób. Możemy oszczędzić czas, pieniądze i przy odrobinie umiejętności, wdrożyć dosłownie każde nieszablonowe rozwiązanie korzystając wyłącznie z wiedzy swojej lub specjalisty.

Z perspektywy programisty, WordPress jest zbiorem gotowych interfejsów programistycznych tzw. API. To oznacza, że nie musi on programować wszystkiego od początku. Mając dostęp do zbioru gotowych metod i klas może szybko zaaplikować typowe, powtarzalne wzorce, używając do tego dokumentacji dewelopera, motywów i wtyczek.

W przełożeniu na prostszy język, WordPress składa się z głównego „modułu”, którym jest sam silnik (core) czy też tzw. czysta instalacja, motywów (themes) oraz wtyczek (plugins). Motywy pozwalają na wprowadzanie zmian w zakresie wyglądu oraz struktury strony czy panelu administracyjnego. Wtyczki rozszerzają witrynę o nietuzinkowe funkcjonalności np. umożliwiają szybkie dostosowanie strony do zasad SEO (Yoast), dodają sklep (WooCommerce) czy formularz kontaktowy (Contact Form) na wybranej podstronie.

Istnieje mnóstwo powodów, aby rozpocząć korzystanie z child-theme. Jest to w pełni darmowe i nie wymaga specjalnych technicznych umiejętności. W zależności od tego czym się zajmujesz, rozwiązanie to możesz wykorzystać na kilka sposobów. Głównym zamysłem jest jednak przejrzystość oraz łatwość odnalezienia się w kodzie. Każdy przyszłościowy projekt, w którym zamierzamy wprowadzić zmiany w motywie powinien korzystać z child-theme.

Tworząc motyw potomny z użyciem języka PHP, poza dobrą praktyką, zyskujemy następujące korzyści:

• możemy dowolnie manipulować ułożeniem i zachowaniem elementów na stronie przez edycję kodu CSS, HTML i PHP,
• możemy integrować WordPressa z zewnętrznymi rozwiązaniami bez edytowania kodu źródłowego głównego motywu,
• chronimy się przed aktualizacjami motywu nadrzędnego – przy aktualizacji nie dojdzie do nadpisania naszych zmian,
• widzimy wpływ swoich zmian bez doszukiwania się i domyślania, co tak naprawdę zrobiliśmy,
• możemy uczyć się jak działają motywy WordPressa i stać się praktycznymi programistami motywów WP.

Jak stworzyć i dodać child-theme na stronie WordPress?

Tworzenie i dodawanie child-theme na stronie WordPress to proces, który jak już wspomnieliśmy, jesteśmy w stanie przejść bez posiadania specjalistycznych umiejętności. Wystarczy odrobina cierpliwości, ulubiony motyw, dostęp do serwera przez FTP, panelu administratora (/wp-admin/) oraz klarowna instrukcja krok po kroku.

Pierwszym krokiem jest wybór odpowiedniego motywu. Raczej mamy to już za sobą, jako że WordPress po instalacji domyślenie dodaje do katalogu /wp-content/themes motyw na dany rok np. Twenty Nineteen.

Teraz, na przykładzie powyższego motywu (Twenty Nineteen), omówimy krok po kroku jak stworzyć child-theme dla dowolnego motywu nadrzędnego.

Na początek zajmiemy się plikiem potomka „style.css”.

1. Łączymy się z serwerem przez FTP przez dowolny program np. FileZilla, CoreFTP lub panel na naszym hostingu.
2. Przechodzimy do katalogu wp-content/themes/, gdzie tworzymy folder z nazwą zainstalowanego motywu i przyrostkiem „child”. Przykład: twentynineteen-child.
3. Otwieramy folder (np. twentynineteen-child) i tworzymy w nim plik (arkusz stylów) o nazwie „style.css”. Pamiętajmy o rozszerzeniu „.css”.
4. Edytujemy plik dodając do niego nagłówek z regułami, które będą informować Wordpressa o tym jak traktować właśnie utworzony katalog. Zawartość do edytowania i wklejenia:/*
Theme Name: twentynineteen-child
Theme URI: http://nazwa-twojej-domeny.tld/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://nazwa-twojej-domeny.tld
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentynineteenchild
*/
5. W powyższym kodzie musimy podmienić kilka linijek tj. „template” oraz „theme name”.W template po dwukropku podajemy nazwę motywu nadrzędnego, korzystając z nazwy jego katalogu.W theme name po dwukropku podajemy nazwę swojego motywu z dopiskiem „Child” (taka nazwa wyświetlana w panelu administratora).W ramach dobrej praktyki możemy edytować pozostałe linie jak opis, URI czy nazwę autora.

Druga część to załadowanie przed chwilą utworzonego arkusza stylów. Aktualnie plik „style.css” jest dla WordPressa obojętny. Musimy sprawić, aby był odpowiednio skojarzony. Zrobimy to w następujący sposób:

1. W katalogu child-theme np. twentynineteen-child tworzymy plik o nazwie „functions.php”.
2. Wchodzimy do katalogu motywu nadrzędnego np. /wp-content/themes/twentynineteen i zapisujemy wszystkie nazwy plików z rozszerzeniem .css (nie .scss).
3. W przypadku motywu Twenty Nineteen mamy do czynienia tylko z plikiem style.css.
4. Dla powyższego przykładu kod, który należy wkleić do pliku functions.php wygląda tak: add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

$parent_style = 'twentynineteen-style'; //Tutaj edytujemy.

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')
);
}
5. Edytujemy tylko jedną linijkę, a mianowicie „$parent_style = ‚twentynineteen-style’;”. Pod „twentynineteen” podstawiamy nazwę katalogu motywu nadrzędnego. Zachowujemy przyrostek „-style”. Jeśli w katalogu motywu nadrzędnego jest więcej plików z rozszerzeniem „‚.css” to dodajemy kolejną linijkę w postaci „wp_enqueue_style( $parent_style, get_template_directory_uri() . ‚/nazwa-arkusza-stylow.css’ );”
6. Zapisujemy plik i gotowe! Teraz możemy aktywować motyw potomny z poziomu panelu administratora.