Strona główna

Artykuły

WordPress & Divi

O mnie

Kontakt

Jak zrobić child theme (motyw potomny) na przykładzie Divi?

by 20 Kwi 2020Divi, Wordpress0 comments

Każdy, kto trochę poważniej zaczyna się zajmować tworzeniem stron w oparciu o WordPress – w pewnym momencie zaczyna mieć potrzebę trochę większych modyfikacji, niż są dostępne „out of the box”. Oczywiście – najlepszym sposobem byłoby stworzenie swojego motywu od podstaw… ale byłoby to mało efektywne jak potrzebujemy wprowadzić tylko parę modyfikacji do już istniejącej skórki, której używamy.

Dla osób leniwych – na samym końcu tego wpisu znajdziecie gotowy child theme do Divi – wystarczy go pobrać i zainstalować u siebie.

W jakim celu tworzymy child theme?

Kiedy chcemy dodać do istniejącego motywu dodatkowe funkcje, własny CSS… czy dodatkowe szablony stron – musimy pobawić się trochę bezpośrednio w kodzie. Dodajemy własny kod php, czy javascript, modyfikujemy istniejące CSSy… i jesteśmy zadowoleni z efektów.

Niestety – wszystkie nasze zamiany będą działały tylko do momentu, kiedy twórca naszego motywu nie postanowi zrobić aktualizacji. Po aktualizacji wszystko co zrobiliśmy pójdzie do śmieci.

Więc albo rezygnujemy z aktualizacji ryzykując bezpieczeństwo naszej strony, albo skrzętnie przywracamy nasze zmiany w świeżo zaktualizowanej wersji… albo tworzymy motyw potomny 🙂

Czym jest child theme?

W dużym uproszczeniu – child theme (czyli motyw potomny) jest właśnie zbiorem funkcji i plików, które rozszerzają funkcjonalność naszego głównego motywu. Samodzielnie nie jest w stanie działać – ale kiedy obok niego jest wgrany główny theme – wtedy „mówi mu”:

Hej – jak uruchamiasz swoje pliki – weź również pod uwagę to co tutaj podaję…. to jest ważniejsze i jeśli odwołuje się do tego samego co Twoje funkcje – zastąp je moimi 🙂

Co dla nas najważniejsze – w przypadku aktualizacji głównego motywu – nasze modyfikacje nie ulegną zmianie. Zmienia się główny „silnik” naszej strony…. ale to co zapisaliśmy w child theme nie ulegnie zmianom.

Jak zrobić child theme dla Divi?

Stworzenie motywu potomnego jest bardzo łatwe. Pokażę to na przykładzie Divi, którego najczęściej używam…. ale tak naprawdę metodologia jest taka sama w przypadku każdego innego motywu.

Trzeba przygotować 3 pliki jako podstawę (później możesz tam dogrywać kolejne pliki…. ale bez tych 3 nie będzie działać)… mianowicie:

  • plik functions.php – tutaj będziemy wprowadzać większość kodu modyfikującego działanie motywu głównego
  • plik style.css – tutaj będziemy zmieniać wygląd serwisu za pomocą css
  • plik screenshot.png – żeby na stronie motywów w naszym kokpicie wszystko wyglądało jak należy 😉

Zacznijmy od najmniej istotnej rzeczy – czyli sam screenshot.png. To powinna być grafika ilustrująca nasz motyw potomny. Zawartość dowolna – grunt, żeby było łatwo zidentyfikować, który to nasz theme 😉 Rozdzielczość takiego pliku to 1200×600 px … i tak naprawdę to jedyny wymóg.

Plik style.css – tutaj poza naszymi stylami wpisujemy również rzeczy, które będą się wyświetlać w naszym WordPressie jak się wejdzie w szczegóły motywu. Dodatkowo – ostatnia linijka definiuje jakiego do jakiego motywu głównego odnosi się nasz child theme.
Wszystko co w kodzie napisałem dużymi literami trzeba zmienić wg swojego uznania.

/*======================================
Theme Name: NAZWA TWOJEGO MOTYWU POTOMNEGO
Theme URI: ADRES INTERNETOWY MOTYWU/STRONY NA KTÓREJ JEST UŻYWANY
Description: OPIS MOTYWU. EW NOTATKI DLA SIEBIE NA PRZYSZŁOŚĆ
Version: NUMER WERSJI
Author: TUTAJ SIĘ PRZEDSTAW ;)
Author URI: ADRES AUTORA MOTYWU
Template: Divi
======================================*/

Plik functions.php – najważniejszy plik w motywie potomnym. Tutaj definiujemy zmiany funkcjonalne względem motywu głównego. Podstawowa zawartość to:

<?php 
function divichild_enqueue_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divichild_enqueue_scripts' );
?>

teraz już nasz child theme wie, co ma robić i co wczytywać.

Jak zainstalować child theme?

Jak już stworzyłeś te pliki – najszybciej będzie je spakować w jeden plik zip… nazwać go wg uznania. Tak przygotowany plik instalujesz wchodząc w swój panel administracyjny WordPress w sekcję Wygląd -> Motywy . Tam klikamy „Dodaj” a następnie „Wyślij motyw na serwer” … Wybieramy przygotowany plik zip i… już 🙂 Jak jest zainstalowany motyw główny – to możesz aktywować swój child theme.

Potrzebujesz Divi?

Chcesz tworzyć strony za pomocą Divi, ale jeszcze go nie masz?
Kup korzystając z poniższego linka – dzięki temu będziesz wspierać rozwój tego serwisu.

Jeśli mój post Ci pomógł – postaw mi kawę:)

Paweł Szynkiewicz

Paweł Szynkiewicz

Właściciel SOFF Studio Kreatywne

Mam ponad 20 lat doświadczenia jako projektant UX/UI. Na co dzień prowadzę SOFF Studio Kreatywne, gdzie staramy się rozwiązywać problemy biznesowe naszych Klientów .

0 Comments

Submit a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Share This