Jak stworzyć motyw potomny WordPress (2021)

Czy wiesz, jak zrobić? motyw potomny WordPress ?

Oczywiście Twój motyw będzie pasował do Twojej witryny, ale w niektórych momentach będziesz musiał je edytować. Dokonywanie zmian w motywie podrzędnym jest preferowanym sposobem edycji witryny. Ponadto nauka o motywie potomnym jest jedną z podstawowych rzeczy WordPress, które powinieneś wiedzieć. Tutaj możesz zacząć uczyć się o WordPressie.

Przejdźmy przez proces tworzenia motywu potomnego WordPress.

Dlaczego powinieneś używać motywów potomnych dla WordPressa?

W WordPressie motyw potomny przejmuje wszystkie cechy, funkcje i inne cechy motywu nadrzędnego. Z drugiej strony możliwa jest edycja motywu potomnego bez zmiany motywu nadrzędnego. Skróci to czas i wysiłek związany z edycją strony. Ponadto aktualizacje motywu WordPress są bezpieczniejsze i bardziej stabilne. Po dostosowaniu dziecka wszystkie zmiany i dostosowania rodzica pozostaną takie same. Użytkownicy mogą używać tego motywu potomnego również w innych witrynach WordPress.

Uwagi przed zrobieniem motywu potomnego

Aby stworzyć motyw potomny WordPress , wymagana jest umiejętność kodowania, ponieważ będziesz pracować z HTML i CSS. Wiedza o tym, co zmienić, jest bardzo ważna. Poza tym będziesz potrzebować podstawowej znajomości PHP, przynajmniej kopiowania/wklejania fragmentów kodu z innych źródeł.

Szczerze radzimy ćwiczyć w środowisku programistycznym. To miejsce, w którym możesz to zrobić bez obawy, że zepsujesz swoją główną stronę. To tak, jakbyś zabił 2 ptaki jednym kamieniem: jeden przenosi go na pole testowe, a drugi służy do rozwijania motywu.

Jeszcze jedno, motyw nadrzędny powinien pasować wyglądem i funkcjonalnościami do Twoich celów. Rzeczywiście, im mniej zmian dokonasz, tym lepsza będzie Twoja witryna.

W poniższych częściach użyjemy motywu LearnPress jako przykładu, aby lepiej zilustrować motyw potomny WordPress .

Budowanie pierwszego motywu potomnego

Masz 2 opcje podczas tworzenia motywów podrzędnych WordPress. Możesz skorzystać z ręcznego sposobu, aby zapoznać się ze wszystkimi plikami. W przeciwnym razie zastosowanie wtyczki będzie działać ze skomplikowanymi plikami i folderami.

Teraz rozpoczniemy dostosowywanie.

Korzystanie z kodu

Na początek otworzysz /wp-content/themes/ w instalacji WordPressa i utworzysz nowy folder dla motywu podrzędnego. Nazwij to, jak chcesz.

Następnie musisz utworzyć pierwsze 2 pliki dla swojego motywu podrzędnego. Otwórz edytor tekstu i wklej poniższy kod do pustego dokumentu:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Możesz zmienić informacje zgodnie z planem i zapisać ten plik w pliku style.css w folderze ostatniego motywu potomnego. Cóż, właśnie stworzyłeś główny arkusz stylów motywu potomnego.

Następnie ^utworzysz drugi plik, aby zaimportować arkusze stylów z motywu nadrzędnego. Utwórz nowy dokument w edytorze tekstu i skopiuj ten kod:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Gdy użyjesz LearnPress jako motywu nadrzędnego, ten kod zacznie działać. Dlatego większość motywów będzie działać w ten sposób. Zapisz ten plik, a stanie się on folderem functions.php motywu podrzędnego.

Po tych krokach będziesz mieć podstawowy motyw potomny. W „Wyglądzie” wybierz „Motywy” i „Aktywuj”. Dlatego Twoja witryna zacznie używać motywu potomnego. Jeśli chcesz dostosować, przejdź do następnej części.

Korzystanie z wtyczek

Sugerujemy użycie wtyczki Child Theme Configurator. Ponieważ nie wymaga kodowania, możesz łatwo wprowadzać zmiany i dostosowania.

Najpierw zainstaluj wtyczkę na swojej stronie. Aby uzyskać więcej przewodników na temat instalacji wtyczki, kliknij tutaj.

Podczas aktywacji przechodzisz do „Narzędzia” -> „Tematy podrzędne” i wybierasz LearnPress w wyskakującym okienku z pytaniem o motyw nadrzędny. Wybierz „Analizuj”, aby sprawdzić zgodność jako motyw nadrzędny. Następnie będziesz musiał nazwać folder motywu potomnego do zapisywania plików i gdzie je zapisać. W ustawieniu domyślnym wybierz „Kliknij, aby edytować atrybuty motywu podrzędnego”. Następnie uzupełnisz informacje o motywie potomnym.

Podczas ręcznego tworzenia motywu potomnego motyw potomny nie odziedziczy menu i narzędzi z motywu nadrzędnego. Aby go rozwiązać, użyj Konfiguratora motywów potomnych. Na koniec wybierz „Utwórz nowy motyw podrzędny”, aby zakończyć. Na tym etapie Twój motyw potomny będzie miał plik functions.php i style.css do dalszego rozwoju. Najwyraźniej pamiętaj o podglądzie wtyczki podrzędnej. Następnie wybierz „Aktywuj i opublikuj”, aby opublikować motyw podrzędny.

Teraz zaczniemy dostosowywać motyw potomny.

Dostosowanie motywu potomnego WordPress

Stworzymy motyw potomny WordPress trochę inaczej niż motyw nadrzędny, dodając kod do pliku „style.css”.

Skopiuj kod z inspektora Firefox/Chrome

Możesz użyć widżetów Inspector w przeglądarkach Chrome i Firefox, aby odkryć potrzebny kod CSS. Poza tym możesz użyć tych narzędzi, aby uzyskać dostęp do wszystkich elementów CSS i HTML witryn.

Aby zobaczyć plik CSS postu lub witryny, kliknij prawym przyciskiem myszy i wybierz „Sprawdź”. Twój ekran podzieli się na dwie połowy i zobaczysz CSS i HTML strony. Gdy najedziesz myszą na wiersze HTML, narzędzie inspektora pokaże Ci się w górnym oknie. Robi również reguły CSS.

Z tyłu nastąpi tymczasowa zmiana koloru. Aby było to trwałe, skopiuj ten wiersz reguły CSS i wklej w pliku style.css motywu potomnego:

 1 body { 2 background-color: #fdf8ef; 3 )

Zapisz zmiany i wyświetl podgląd witryny. Poza tym możesz ponownie uruchomić to dla dowolnego elementu w arkuszu stylów motywu. Cóż, dajemy tutaj pełny arkusz stylów dla motywu potomnego:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Skopiuj kod z pliku style.css motywu nadrzędnego

Jak widać, możliwe jest skopiowanie z pliku nadrzędnego theme'style.css i wklejenie go do motywu potomnego i dostosowanie.

Na przykład kod koloru tła strony to:

 1 background-color: var(--global--color-background);

„–global–kolor-tło” to zmienna używana w różnych miejscach motywu. Będziesz musiał zmienić wartość zmiennej, jeśli chcesz zmienić kolor w tych miejscach w tym samym czasie. Przejdź do /wp-content/themes/learnpress w folderze instalacyjnym WordPressa i otwórz plik style.css w edytorze tekstu, aby poszukać miejsca –global-color-background. Ta zmienna może być zmieniona inną zmienną. Wiele zmiennych kolorów można znaleźć w pliku style.css motywu nadrzędnego. Po wybraniu odpowiednich opcji kolorystycznych, kopiujesz i wklejasz tę linię kodu do pliku style.css motywu potomnego i zastępujesz stare wybranymi nowymi dla swojej tendencji kolorystycznej. Następnie kolory zostaną podzielone na podstawie zaplanowanych schematów kolorystycznych. Ten proces sprawi, że schematy kolorów będą spójne i szybko edytowane.

Dostosowywanie plików szablonów

W motywie obszary obsługujące pliki w witrynie nazywane są szablonami. Szablony są zwykle nazywane po sekcji, którą obsługują. Dlatego niektóre ważne sekcje są zarządzane przez różne pliki lub szablony treści.

Aby dostosować szablon, znajdź ten plik w motywie nadrzędnym i skopiuj go do motywu podrzędnego. Następnie otwórz go w edytorze tekstu i zacznij go modyfikować.

Pokażemy Ci samouczek dotyczący tego procesu z plikiem footer.php. Skopiuj go do folderu motywu potomnego i otwórz w edytorze zwykłego tekstu. Na przykład usuńmy link „Proudly powered by WordPress” w stopce i dodajmy informację o prawach autorskich. Aby rozpocząć, usuń wszystkie między tagami <div class=”powered-by”>.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Następnie wkleisz kod, który znajdziesz poniżej tych tagów w poniższym przykładzie.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Wybierz „Zapisz zmiany”, a po powrocie na stronę zobaczysz nową informację o prawach autorskich.

Dodawanie funkcji do motywu potomnego WordPress

Aby zmienić lub dodać funkcję do swojej witryny, będziesz musiał poszukać pliku functions.php. Ten plik używa kodu PHP do uruchomienia tego procesu.

Zwykle prowadzi Cię polecenie skopiowania i wklejenia fragmentów kodu do pliku function.php, ale zostaną one usunięte podczas aktualizacji PHP lub motywu. Dlatego sugerujemy, aby dodać fragmenty kodu za pomocą motywu podrzędnego. Cóż, przejdźmy do procesu dodawania widżetów. Dodaj fragment kodu do pliku functions.php motywu potomnego.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Zapisz i przejdź do „Wygląd” -> „Widżety”, aby zobaczyć nowe narzędzie. Dodatkowo możesz poszukać więcej informacji o dodawaniu obszaru funkcji. Możesz dodać wiele funkcji, dodając fragmenty kodu do pliku functions.php witryny.

To wszystko o tym, jak stworzyć motyw podrzędny w WordPress . Przejdźmy do części błędu naprawy.

Naprawianie błędów

W każdej chwili możesz spotkać się z każdym problemem przy tworzeniu motywu potomnego. Dlatego nie powinieneś się łatwo poddawać.

Problemy ze składnią mogą być spowodowane brakami w procesie kodowania. Jest to również najpopularniejszy błąd, z którym mogą się spotkać wszyscy użytkownicy. Poza tym, jeśli coś nie pójdzie dobrze, zawsze możesz go usunąć i zacząć od nowa.

Jak stworzyć motyw potomny WordPress: Wnioski

Mamy nadzieję, że dzięki naszemu artykułowi zdobędziesz wiedzę na temat tworzenia motywu dziecięcego. Dzięki za odczyty!

Czytaj więcej: Jak naprawić błąd HTTP 500 WordPress (2021)