Jak dokonywać dostosowań za pomocą motywu potomnego

Ten samouczek nie jest dla wszystkich.

Nie musisz być doświadczonym programistą, aby podążać za nim, ale potrzebujesz prawdziwego zainteresowania, aby dowiedzieć się więcej o WordPressie i działaniu motywów.

Jeśli nie boisz się pracować z odrobiną kodu i ubrudzić sobie ręce plikami motywów, witaj na pokładzie!

W tym przewodniku dowiesz się, jak dostosować witrynę WordPress do zawartości Twojego serca za pomocą motywu potomnego, ale najpierw…

Omówmy dokładnie, dlaczego powinieneś w ogóle używać tej dziwnej rzeczy zwanej „motywem potomnym".

Dlaczego warto korzystać z motywu potomnego?

Powtarzaj za mną:

Uroczyście przysięgam, że nigdy nie będę edytować pliku motywu.

Nowi użytkownicy WordPressa, którzy są zainteresowani wprowadzaniem dostosowań za pomocą kodu, często bezpośrednio edytują pliki w swoim motywie. To jest wielkie nie.

Czemu?

Jeden powód: po zaktualizowaniu motywu WordPress zastąpi istniejący motyw nową wersją motywu.

Więc dlaczego to ma znaczenie?

Wyobraź sobie, że używasz wersji 1.04 motywu Challenger. Przeniosłeś menu w pliku header.php i dodałeś nowy CSS do style.css. Następnie pojawia się wersja 1.05 i widzisz powiadomienie na pulpicie nawigacyjnym.

Po aktualizacji do wersji 1.05 oba pliki header.php i style.css zostaną zastąpione plikami w wersji 1.05 Challengera. Nie będą zawierać tych samych zmian, które wprowadziłeś, więc Twoja praca zostanie utracona i nie będzie możliwości jej odzyskania. Może to być dość przygnębiające, jeśli pogrążysz się godzinami w swoich dostosowaniach.

Jeśli jednak umieścisz dostosowania w motywie potomnym Challenger, możesz bezpiecznie zaktualizować do wersji 1.05 bez utraty dostosowań, ponieważ są one bezpiecznie przechowywane w motywie potomnym.

Stanie się to nieco jaśniejsze, gdy przejdziemy do prawdziwego przykładu, więc przejdźmy teraz do tematu potomnego.

Jak stworzyć motyw potomny

Chociaż nie zamierzam szczegółowo wyjaśniać, jak działa cały kod, są to podstawowe pomysły i fragmenty, których potrzebujesz, aby zacząć.

Podstawowe ustawienia

Zacznij od utworzenia pustego folderu na pulpicie. Możesz nazwać go, jak chcesz, ale standardową konwencją nazewnictwa jest używanie nazwy motywu małymi literami, a następnie „dziecko” i zastępowanie spacji myślnikami.

Na przykład motyw potomny dla motywu Challenger miałby nazwę folderu „challenger-child”. Ten folder będzie zawierał wszystkie pliki motywu podrzędnego.

Potrzebujesz tylko jednego pliku, aby utworzyć technicznie poprawny motyw potomny, style.css.

Utwórz plik style.css

Korzystając z wybranego edytora kodu, utwórz nowy plik w folderze motywu podrzędnego i nazwij go style.css.

Plik style.css to oczywiście miejsce, w którym dodasz wszystkie swoje CSS, aby dostosować swoją witrynę. Aby WordPress rozpoznał Twój motyw podrzędny jako prawidłowy, musisz dodać taki nagłówek arkusza stylów na samej górze style.css:

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Możesz skopiować ten dokładny nagłówek i użyć go do własnych motywów podrzędnych. Po prostu zamień nazwę motywu na dowolny dostosowywany motyw.

Najważniejszą częścią jest wartość „Szablon”, którą należy ustawić na nazwę motywu nadrzędnego. W szczególności nazwa używana dla folderu zawierającego motyw nadrzędny.

Mając to na miejscu, możesz już aktywować motyw potomny za pomocą menu Wygląd i używać go. Jednak Twoja strona będzie całkowicie pozbawiona stylu!

Gdy motyw potomny jest aktywowany, WordPress nie będzie już ładować pliku style.css motywu nadrzędnego, a zamiast tego będzie polegać na motywie potomnym.

Oto jak załadować oba arkusze stylów…

Utwórz plik functions.php

W edytorze kodu utwórz drugi plik w motywie potomnym i nazwij go functions.php.

Następnie dodaj do pliku następujący kod:

<?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' );

Ta funkcja nakazuje WordPressowi załadować plik style.css motywu nadrzędnego, a następnie załadować plik style.css motywu potomnego. Wczytanie arkusza stylów motywu potomnego po ułatwieniu zastąpienia selektorów CSS motywu nadrzędnego.

Jak wspomniałem wcześniej, nie zamierzam omawiać tego kodu linia po linii, ale bardziej szczegółowe wyjaśnienie tego fragmentu można znaleźć w Kodeksie WordPress.

Dostosowywanie za pomocą nowego motywu potomnego

To wszystko, co musisz zrobić, aby stworzyć działający motyw potomny!

Dzięki konfiguracji motywu potomnego istnieją trzy sposoby dostosowywania witryny za jego pomocą.

Dodaj i zastąp style

Do pliku style.css motywu potomnego można dodać dowolną liczbę nowych kodów CSS.

Wyszukując selektory do użycia w CSS, nie sprawdzaj pliku style.css motywu nadrzędnego. Wszystkie nasze motywy używają „preprocesora CSS”, więc nawet nie patrzymy na ten plik! Zamiast tego skorzystaj z tego inteligentniejszego procesu, aby znaleźć selektory CSS, a myślę, że odniesiesz znacznie większy sukces w dostosowywaniu swojej witryny.

Nadrzędne funkcje

Dzięki dobrze zakodowanemu motywowi nadrzędnemu możesz nadpisać dowolne funkcje znajdujące się w jego pliku functions.php.

Na przykład każda funkcja w Wiadomościach o misji jest owinięta [function_exists()](https://php.net/manual/en/function.function-exists.php)czekiem. Oznacza to, że możesz skopiować funkcję do pliku functions.php motywu potomnego. Następnie możesz tam wprowadzić dowolne zmiany w funkcji.

Zastąp szablony

Typowym dostosowaniem wymagającym motywu podrzędnego jest zmiana kolejności elementów. Na przykład możesz chcieć przenieść tytuł posta po wyróżnionym obrazie zamiast przed nim.

Możesz wziąć dowolny z plików szablonów znalezionych w motywie nadrzędnym i umieścić kopię w motywie potomnym. Zamiast tego zostanie załadowana wersja z motywu potomnego. Dzięki temu możesz dodawać, zmieniać kolejność i usuwać dowolne elementy z dowolnej części witryny.

Instalowanie motywu potomnego

Gdy będziesz zadowolony z wprowadzonych zmian, możesz zainstalować motyw podrzędny w swojej witrynie.

Motywy potomne można przesyłać tak samo, jak zwykłe motywy WordPress, więc aktywacja ich w witrynie zajmuje tylko minutę lub dwie. Postępuj zgodnie z tym samouczkiem, aby zainstalować motyw potomny:

Jak zainstalować motyw potomny WordPress?

Jeśli jesteś całkowicie nowy w tym wszystkim, oto kilka bezpłatnych narzędzi, które ci pomogą.

Po pierwsze, jeśli nie masz edytora kodu, zapoznaj się z Visual Studio Code. To proste, ale elastyczne. Jest również całkowicie darmowy i zawiera wiele profesjonalnego oprogramowania. To jest to, czego używam do tworzenia motywów tutaj w Compete Themes.

Po drugie, stworzenie lokalnej witryny WordPress (offline) to świetny sposób na wypróbowanie kodu bez wpływu na twoją prawdziwą witrynę. Podczas gdy w przeszłości używałem i polecałem MAMP, Local by Flywheel jest tak cholernie łatwy i prosty w użyciu, że go uwielbiam. To jest to, czego używam do tworzenia motywów, a także jest bezpłatne.

Twoje aktualizacje są bezpieczne

Wracając do wcześniejszego przykładu…

Podczas aktualizowania motywu Challenger (lub dowolnego motywu) cały katalog „challenger” zostaje zastąpiony, co nie ma wpływu na motyw potomny, ponieważ ma teraz swój własny katalog w folderze „challenger-child”.

Mając motyw podrzędny, możesz bezpiecznie wprowadzać dowolne dostosowania i aktualizować motyw nadrzędny.

Jeśli jesteś nowy w CSS i PHP, może zająć Ci trochę czasu, aby dostosować ustawienia tak, jak chcesz, ale dzięki motywowi potomnemu masz świetną podstawę do pracy. Pamiętaj, aby wykonać te kroki, aby znaleźć selektory CSS do użycia, a wszelkie dostosowania stylu, które wprowadzisz, będą dość proste.