WordPress – Child theme

Jeśli nie chcesz tworzyć własnego theme (motywu) ale ten, który masz zainstalowany wymaga paru poprawek dobrym rozwiązaniem jest stworzenie motywu potomnego czyli Child theme.

W nim wprowadzamy niezbędne modyfikacje, które zostana nawet jeśli główny temat zaktualizujesz do nowszej wersji.

Kroki do stworzenia child theme dla Storefront

1. Utwórz folder motywu potomnego
   1. wejdź na swój serwer, np. przez FTP (FileZilla) lub za pomocą menedżera plików w panelu hostingowym.
   2. przejdź do katalogu z motywami WordPress: wp-content/themes/
   3. utwórz nowy folder dla motywu potomnego, np.: storefront-child
2. Stwórz plik style.css
   1. w folderze storefront-child utwórz plik style.css
   2. zamieść w nim kod (znajdziesz go poniżej), który informuje o podstawowych, ważne:
      1. Template: – musi dokładnie odpowiadać nazwie folderu motywu głównego (w przykładzie: storefront)
      2. Theme Name: – nazwa motywu potomnego – możesz użyć dowolnej nazwy
3. Stwórz plik functions.php
   1. w folderze storefront-child utwórz plik functions.php
   2. zamieść w nim kod, który załaduje style motywu głównego i motywu potomnego
4. Aktywuj motyw potomny
   1. przejdź do Wygląd > Motywy w panelu WordPress
   2. znajdź motyw Storefront Child i aktywuj go
5. Dodawanie modyfikacji – czyli wprowadzasz zmiany w motywie potomnym
   1. CSS – dodajesz własne style
   2. szablony PHP – skopiuj plik z motywu głównego (np. header.php) do folderu motywu potomnego i modyfikuj go
   3. funkcje PHP – dodawaj nowe funkcje i wywołaj je w pliku functions.php
   4. WooCommerce: jeśli edytujesz szablony WooCommerce, użyj katalogu: storefront-child/woocommerce/ – skopiuj do niego pliki z folderu storefront/woocommerce/ i wprowadzaj zmiany
6. Testowanie
   1. sprawdź, czy zmiany są widoczne i czy nie występują błędy

Kod pliku style.css

/*
 Theme Name: Storefront Child
 Theme URI: https://domain.com
 Description: Child theme for Storefront
 Author: Your Name
 Author URI: https://domain.com
 Template: storefront
 Version: 1.0
*/

/* Additional CSS styles can be added below */.

Kod pliku functions.php

// Load the styles of the main theme and the child theme
function storefront_child_enqueue_styles() {
    // the style of the main theme
    wp_enqueue_style(‘storefront-parent-style’, get_parent_theme_file_uri() . ‘/style.css’);
    // The style of the child theme
    wp_enqueue_style(‘storefront-child-style’, get_stylesheet_uri(), array(‘storefront-parent-style’));
}
add_action(‘wp_enqueue_scripts’, ‘storefront_child_enqueue_styles’);

Translated with DeepL.com (free version)

Pamiętaj, że kiedy tworzysz w child theme używasz get_stylesheet_directory_uri() zamiast get_template_directory_uri() by pobrać ścieżkę do katalogu motywu.

Różnice między funkcjami get_template_directory_uri() a get_parent_theme_file_uri()

get_template_directory_uri()

• zwraca URL katalogu motywu głównego (rodzica)
• używana w motywach potomnych do odwoływania się do zasobów motywu rodzica
• używana szczególnie w starszych kodach

get_parent_theme_file_uri()

• zwraca URL pliku lub katalogu w motywie głównym (rodzicu)
• jest bardziej elastyczna, ponieważ pozwala łatwiej pracować z plikami wewnątrz struktury motywu głównego
• zalecana, jeśli pracujesz z nowszymi wersjami WordPressa (WordPress 4.7+), ma lepsze wsparcie dla wyszukiwania plików w strukturze motywu