Jak stworzyć motyw potomny WordPress (przewodnik dla początkujących)

Motywy potomne to jeden z tych terminów WordPress, które są często używane i wprowadzają początkujących w zakłopotanie. Mogłeś nawet o nich słyszeć i zdecydować się na pominięcie ich tworzenia z powodu tego, jak skomplikowane wydają się.

Rozumiemy to. Ale z naszego doświadczenia wynika, że motywy potomne mogą zaoszczędzić Ci mnóstwo kłopotów w przyszłości. Chronią Twoje cenne modyfikacje, pozwalają eksperymentować bez psucia witryny i ułatwiają aktualizację motywu.

Jeśli jesteś zainteresowany, szczegółowo opisaliśmy, jak działa motyw potomny, jak go dostosować i jak wprowadzać w nim zmiany w tym przyjaznym dla początkujących przewodniku.

Jak działa motyw potomny i dlaczego go potrzebujesz?

Motyw potomny dziedziczy wszystkie funkcje, możliwości i style innego motywu WordPress. Kiedy tworzysz motyw potomny, oryginalny motyw nazywany jest motywem nadrzędnym.

Dziedziczenie obejmuje plik style.css motywu nadrzędnego, który definiuje główny styl motywu. Motyw potomny może nadpisać lub rozszerzyć odziedziczone właściwości, dodając własne pliki lub modyfikując istniejące.

Chociaż można dostosować swój motyw WordPress bez instalowania motywu potomnego, istnieje kilka powodów, dla których możesz go potrzebować:

• Motywy potomne chronią Twoje modyfikacje podczas aktualizacji motywu, zapobiegając ich nadpisaniu. Jeśli zmodyfikujesz motyw nadrzędny bezpośrednio, te zmiany mogą zniknąć po aktualizacji.
• Motywy potomne pozwalają bezpiecznie wypróbować nowe projekty lub funkcje bez psucia oryginalnego motywu witryny, podobnie jak środowisko stagingowe.
• Jeśli wiesz jak kodować, motywy potomne mogą usprawnić proces tworzenia. Pliki motywu potomnego są znacznie prostsze niż pliki motywu nadrzędnego. Możesz skupić się na modyfikowaniu tylko tych części motywu nadrzędnego, które chcesz zmienić lub rozszerzyć.

Co zrobić przed utworzeniem motywu potomnego WordPress

Widzieliśmy wielu użytkowników WordPressa podekscytowanych zagłębianiem się w techniczną stronę, tylko po to, by zniechęcić się, gdy pojawią się błędy. Rozumiemy to. Dlatego ważne jest, aby wiedzieć, w co się pakujesz, zanim utworzysz motyw potomny.

Oto kilka rzeczy, które zalecamy zrobić przed kontynuowaniem tego przewodnika krok po kroku:

1. Pamiętaj, że będziesz pracować z kodem. Przynajmniej będziesz potrzebować podstawowej wiedzy o HTML, CSS, PHP i, opcjonalnie, JavaScript, aby zrozumieć, jakie zmiany musisz wprowadzić. Więcej na ten temat możesz przeczytać w podręczniku motywów WordPress.
2. Wybierz motyw nadrzędny, który ma pożądaną konstrukcję strony internetowej i funkcje. Jeśli to możliwe, znajdź taki, w którym musisz wprowadzić tylko kilka zmian. W razie potrzeby możesz skorzystać z naszej listy kontrolnej rzeczy do zrobienia przed zmianą motywów WordPress.
3. Użyj lokalnej witryny lub witryny testowej do tworzenia motywów. Nie chcesz wprowadzać niezamierzonych błędów na swojej aktywnej witrynie.
4. Wykonaj kopię zapasową swojej witryny najpierw. Zalecamy użycie wtyczki do tworzenia kopii zapasowych, takiej jak Duplicator, jeśli robisz to po raz pierwszy.

Istnieje kilka sposobów na utworzenie motywu potomnego z istniejącego motywu. Jednym ze sposobów jest ręczne kodowanie, podczas gdy inne wymagają wtyczki, co jest znacznie bardziej przyjazne dla początkujących.

Pierwsza metoda może wydawać się onieśmielająca, jeśli brakuje Ci doświadczenia technicznego. Niemniej jednak, nawet jeśli wybierzesz jedną z metod z wtyczką, nadal zalecamy zapoznanie się z metodą ręczną, aby poznać proces i zaangażowane pliki.

Mając to wszystko na uwadze, przejdźmy do tego, jak utworzyć motyw potomny w WordPress. Możesz przejść do preferowanej metody, korzystając z poniższych linków:

• Metoda 1: Ręczne tworzenie motywu potomnego WordPress
• Metoda 2: Tworzenie klasycznego motywu potomnego za pomocą wtyczki
• Metoda 3: Tworzenie motywu potomnego bloku za pomocą wtyczki
• Dodatkowa wskazówka: Dowiedz się, czy Twój motyw ma generator motywów potomnych
• Jak dostosować swój klasyczny motyw potomny
• Jak dostosować swój motyw potomny Block
• Jak edytować pliki szablonu motywu potomnego
• Jak dodać nową funkcjonalność do swojego motywu potomnego
• Jak rozwiązać problemy z motywem potomnym WordPressa

Metoda 1: Ręczne tworzenie motywu potomnego WordPress

Najpierw musisz otworzyć folder /wp-content/themes/ w swojej instalacji WordPress.

Możesz to zrobić za pomocą menedżera plików hostingu WordPress lub klienta FTP. Uważamy, że pierwsza opcja jest znacznie łatwiejsza, więc z niej skorzystamy.

Jeśli jesteś klientem Bluehost, możesz zalogować się do panelu swojego konta hostingowego i przejść do zakładki „Websites”. Następnie kliknij „Settings”.

W zakładce Przegląd przewiń w dół do sekcji „Szybkie linki”.

Następnie wybierz „Menedżer plików”.

Na tym etapie musisz przejść do folderu public_html swojej witryny i otworzyć ścieżkę /wp-content/themes/.

Tutaj po prostu kliknij przycisk „+ Folder” w lewym górnym rogu, aby utworzyć nowy folder dla swojego motywu potomnego.

Możesz nazwać folder dowolnie.

W tym samouczku użyjemy nazwy folderu twentytwentyone-child, ponieważ jako motyw nadrzędny użyjemy Twenty Twenty-One. Po zakończeniu kliknij „Utwórz nowy folder”.

Następnie musisz otworzyć właśnie utworzony folder i kliknąć „+ Plik”, aby utworzyć pierwszy plik dla swojego motywu potomnego.

Jeśli używasz klienta FTP, możesz użyć edytora tekstu, takiego jak Notatnik, i przesłać plik później.

Nazwij ten plik „style.css”, ponieważ jest to główny arkusz stylów Twojego motywu potomnego i będzie zawierał informacje o motywie potomnym.

Następnie kliknij „Utwórz nowy plik”.

Teraz kliknij prawym przyciskiem myszy na plik style.css.

Następnie kliknij „Edytuj”, aby otworzyć nową kartę, jak pokazano na poniższym zrzucie ekranu.

W tej nowej karcie możesz wkleić poniższy tekst i dostosować go do swoich potrzeb:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

Po zakończeniu kliknij przycisk „Zapisz zmiany”.

Następną rzeczą, którą musisz zrobić, jest utworzenie drugiego pliku i nazwanie go functions.php. Ten plik zaimportuje lub doda arkusze stylów z plików motywu nadrzędnego.

Po utworzeniu dokumentu dodaj następujący kod wp_enqueue:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

Po zakończeniu zapisz plik, tak jak w poprzednim kroku.

Utworzyłeś teraz bardzo podstawowy motyw potomny. Kiedy przejdziesz do Wygląd » Motywy w panelu administracyjnym WordPress, powinieneś zobaczyć opcję Twenty Twenty-One Child.

Kliknij przycisk „Aktywuj”, aby zacząć używać motywu potomnego na swojej stronie.

Metoda 2: Tworzenie klasycznego motywu potomnego za pomocą wtyczki

Ta kolejna metoda wykorzystuje wtyczkę Child Theme Configurator. Ta łatwa w użyciu wtyczka WordPress pozwala szybko tworzyć i dostosowywać motywy potomne WordPress bez użycia kodu, ale działa dobrze tylko z klasycznym (nie blokowym) motywem.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki WordPress. Po aktywacji musisz przejść do Narzędzia » Motywy potomne w swoim panelu WordPress.

W zakładce Rodzic/Potomek zostaniesz poproszony o wybranie akcji. Po prostu wybierz „UTWÓRZ nowy motyw potomny”, aby rozpocząć.

Następnie wybierz motyw nadrzędny z menu rozwijanego. Wybierzemy motyw Hestia.

Następnie kliknij przycisk „Analizuj”, aby upewnić się, że motyw nadaje się do użycia jako motyw nadrzędny.

Następnie zostaniesz poproszony o nazwanie folderu, w którym zostanie zapisany motyw potomny. Możesz użyć dowolnej nazwy folderu.

Poniżej musisz wybrać, gdzie zapisać nowe style: w głównym arkuszu stylów czy w osobnym.

Główny arkusz stylów to domyślny arkusz stylów, który jest dostarczany z motywem potomnym. Po zapisaniu nowych niestandardowych stylów w tym pliku, bezpośrednio modyfikujesz główne style swojego motywu potomnego. Każda modyfikacja nadpisze styl oryginalnego motywu.

Oddzielna opcja pozwala zapisać nowy niestandardowy styl w osobnym pliku arkusza stylów. Jest to przydatne, jeśli chcesz zachować oryginalny styl motywu i go nie nadpisać.

Dla celów demonstracyjnych wybierzemy pierwszą opcję. Ale w miarę jak będziesz bardziej kreatywny w dostosowywaniu swojego motywu potomnego, zawsze możesz powtórzyć ten proces i wybrać drugą opcję.

Przesuwając się w dół, musisz wybrać, w jaki sposób będzie dostępny arkusz stylów motywu nadrzędnego.

Skorzystamy po prostu z domyślnej opcji „Użyj kolejki stylów WordPressa”, ponieważ pozwoli to wtyczce automatycznie określić odpowiednie działania.

Kiedy dojdziesz do kroku 7, będziesz musiał kliknąć przycisk zatytułowany „Kliknij, aby edytować atrybuty motywu potomnego”.

Następnie możesz wypełnić szczegóły swojego motywu potomnego.

Kiedy ręcznie tworzysz motyw potomny, stracisz menu i widżety motywu nadrzędnego. Konfigurator motywu potomnego może je skopiować z motywu nadrzędnego do motywu potomnego. Zaznacz pole wyboru w kroku 8, jeśli chcesz to zrobić.

Na koniec kliknij przycisk „Utwórz nowy motyw potomny”, aby utworzyć nowy motyw potomny.

Wtyczka utworzy folder dla Twojego motywu potomnego i doda pliki style.css oraz functions.php, których będziesz używać do późniejszego dostosowywania motywu.

Zanim aktywujesz motyw, powinieneś kliknąć link u góry ekranu, aby go podglądnąć i upewnić się, że wygląda dobrze i nie psuje Twojej witryny.

Jeśli wszystko wydaje się działać, kliknij przycisk „Aktywuj i publikuj”.

Teraz Twój motyw potomny zostanie uruchomiony.

Na tym etapie motyw potomny będzie wyglądał i zachowywał się dokładnie tak samo jak motyw nadrzędny.

Metoda 3: Tworzenie motywu potomnego bloku za pomocą wtyczki

Jeśli używasz motywu blokowego, WordPress oferuje łatwy sposób na stworzenie motywu potomnego za pomocą wtyczki Create Block Theme.

Najpierw musisz zainstalować i aktywować wtyczkę WordPress. Następnie przejdź do Wygląd » Utwórz motyw blokowy.

Tutaj po prostu wybierz „Utwórz motyw potomny [nazwa bieżącego motywu].”.

Następnie wypełnij informacje o swoim motywie potomnym. W tym przykładzie używamy Twenty Twenty-Four, więc nazwiemy go Twenty Twenty-Four Child.

Podaliśmy również opis i autora motywu potomnego. Po zakończeniu kliknij przycisk „Utwórz motyw potomny”.

Wtyczka utworzy i zainstaluje motyw WordPress w formacie zip w Twoim obszarze administracyjnym.

Po zakończeniu Twoja witryna automatycznie aktywuje ten nowo utworzony motyw potomny. Możesz to potwierdzić, przechodząc do Wygląd » Motywy.

Dodatkowa wskazówka: Dowiedz się, czy Twój motyw ma generator motywów potomnych

Jeśli masz szczęście, Twoja wtyczka WordPress może już mieć istniejącą funkcję tworzenia motywu potomnego.

Na przykład, jeśli używasz Astra, możesz przejść do strony Generatora motywów potomnych Astra. Następnie po prostu wpisz nazwę swojego motywu potomnego i kliknij przycisk „Generuj”.

Twoja przeglądarka automatycznie pobierze motyw potomny na Twój komputer, który następnie możesz samodzielnie zainstalować w WordPress.

Znaleźliśmy również inne popularne motywy WordPress, które posiadają generator motywów potomnych:

• OceanWP
• Ultra
• Nozama
• Eclipse

Jak dostosować swój klasyczny motyw potomny

Technicznie rzecz biorąc, możesz dostosować swój motyw potomny bez kodu, korzystając z Dostosowywania motywu. Zmiany, które tam wprowadzisz, nie wpłyną na Twój motyw nadrzędny. Jeśli nie czujesz się jeszcze komfortowo z kodowaniem, śmiało korzystaj z Dostosowywania.

Niemniej jednak zalecamy również dostosowywanie motywu potomnego za pomocą kodu.

Oprócz nauki o tworzeniu motywów WordPress, dostosowywanie kodu pozwala na dokumentowanie zmian w plikach motywu potomnego motywu potomnego, co ułatwia ich śledzenie.

Teraz najprostszym sposobem dostosowania motywu potomnego jest dodanie niestandardowego CSS do pliku style.css. Aby to zrobić, musisz wiedzieć, jaki kod chcesz dostosować.

Możesz uprościć proces, kopiując i modyfikując istniejący kod z motywu nadrzędnego. Kod ten można znaleźć za pomocą narzędzia Chrome lub Firefox Inspect lub kopiując go bezpośrednio z pliku CSS motywu nadrzędnego.

Metoda 1: Kopiowanie kodu z inspektora Chrome lub Firefox

Najprostszym sposobem na odkrycie kodu CSS, który musisz zmodyfikować, jest użycie narzędzi inspekcji dostępnych w Google Chrome i Firefox. Narzędzia te pozwalają na przeglądanie kodu HTML i CSS stojącego za każdym elementem strony internetowej.

Więcej o narzędziu inspektora możesz przeczytać w naszym przewodniku na temat podstaw narzędzia inspect element: dostosowywanie WordPressa dla użytkowników DIY.

Po kliknięciu prawym przyciskiem myszy na stronie internetowej i wybraniu opcji „Zbadaj element” zobaczysz kod HTML i CSS strony.

Gdy najeżdżasz kursorem myszy na różne linie HTML, inspektor podświetli je w górnym oknie. Wyświetli również reguły CSS związane z podświetlonym elementem, w następujący sposób:

Możesz spróbować edytować CSS bezpośrednio, aby zobaczyć, jak to będzie wyglądać. Na przykład, spróbujmy zmienić kolor tła ciała motywu na #fdf8ef. Znajdź linię kodu, która mówi `body {` i wewnątrz niej kod, który mówi `color:`.

Po prostu kliknij ikonę selektora kolorów obok `color:` i wklej kod HEX w odpowiednie pole, tak jak tutaj:

Teraz wiesz, jak zmienić kolor tła za pomocą CSS. Aby zmiany były trwałe, możesz otworzyć plik style.css w katalogu motywu potomnego (używając menedżera plików lub FTP).

Następnie wklej poniższy kod pod informacjami o motywie potomnym, w ten sposób:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

Tak to będzie wyglądać, jeśli przejdziesz do panelu administracyjnego WordPress i otworzysz Wygląd » Edytor plików motywu:

Jeśli jesteś początkującym i chcesz wprowadzić inne zmiany, zalecamy zapoznanie się z HTML i CSS, aby dokładnie wiedzieć, do którego elementu odnosi się każdy kod. W Internecie dostępnych jest wiele arkuszy ściągawkowych HTML i CSS, do których możesz się odwołać.

Oto kompletny arkusz stylów, który stworzyliśmy dla motywu potomnego. Zachęcamy do eksperymentowania i modyfikowania go:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Metoda 2: Kopiowanie kodu z pliku style.css motywu nadrzędnego

Być może w Twoim motywie potomnym jest wiele rzeczy, które chcesz dostosować. W takim przypadku może być szybciej skopiować fragment kodu bezpośrednio z pliku style.css motywu nadrzędnego, wkleić go do pliku CSS motywu potomnego, a następnie go zmodyfikować.

Trudna część polega na tym, że plik arkusza stylów motywu może wyglądać naprawdę długo i przytłaczać początkujących. Jednak po zrozumieniu podstaw nie jest to wcale takie trudne.

Użyjmy rzeczywistego przykładu z arkusza stylów motywu nadrzędnego Twenty Twenty-One. Musisz przejść do folderu /wp-content/themes/twentytwentyone w swojej instalacji WordPress, a następnie otworzyć plik style.css w menedżerze plików, przez FTP lub Edytorze plików motywu.

Zobaczysz następujące linie kodu:

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

Linie od 3 do 15 kontrolują typ kolorów (takich jak żółty, zielony, fioletowy), których cała motyw będzie używać w swoich specyficznych kodach HEX. A następnie, dla linii takich jak „global-color-primary” lub „global-color-secondary”, oznacza to, że są to kolory podstawowe i wtórne tego motywu.

Możesz skopiować te linie kodu do arkusza stylów swojego motywu potomnego, a następnie zmienić kody HEX, aby stworzyć idealną paletę kolorów.

Przewijając w dół arkusza stylów motywu nadrzędnego, zauważysz, że inne zmienne również mogą mieć te zmienne kolorów, tak jak tutaj:

/* Buttons */
--button--color-text: var(--global--color-background);

Oznacza to zasadniczo, że wszystkie teksty przycisków będą miały ten sam kolor, co zadeklarowano w --global--color-background:, czyli miętową zieleń (--global--color-green: #d1e4dd). Jeśli zmienisz HEX w --global--color-green:, tekst przycisku również będzie wyglądał inaczej.

Możesz również skorzystać z poniższych samouczków, aby poeksperymentować z dostosowaniami motywu potomnego:

• Jak zmienić kolor tekstu w WordPress
• Jak zmienić rozmiar logo WordPress (działa z każdym motywem)
• Jak dostosować styl cytatów w motywach WordPress
• Klasa body WordPress 101: Wskazówki i triki dla projektantów motywów
• Jak dodać efekt paralaksy do dowolnego motywu WordPress

Jak dostosować swój motyw potomny Block

Jeśli używasz potomnego motywu blokowego, większość Twoich dostosowań będzie dotyczyć pliku theme.json, a nie style.css.

Jednak podczas naszych testów uznaliśmy, że proces jest skomplikowany. W przeciwieństwie do klasycznych motywów potomnych, istnieje większa luka wiedzy, którą musisz wypełnić (zwłaszcza o JSON i sposobie obsługi CSS), jeśli jesteś nowy w tworzeniu motywów WordPress.

Niemniej jednak znaleźliśmy znacznie łatwiejszą alternatywę, korzystając z wtyczki Create Block Theme. To narzędzie może rejestrować wszelkie zmiany wprowadzone w pełnym edytorze witryny WordPress w pliku child theme.json. Dzięki temu nie będziesz musiał dotykać żadnego kodu, ponieważ wtyczka zajmie się tym za Ciebie.

Pokażmy przykład. Najpierw otwórz Edytor pełnej witryny WordPress, przechodząc do Wygląd » Edytor.

Zobaczysz kilka menu do wyboru.

Tutaj po prostu wybierz „Style”.

Na następnej stronie zobaczysz kilka wbudowanych kombinacji stylów do wyboru.

W naszym celu możesz po prostu pominąć wszystko i kliknąć ikonę ołówka.

Teraz spróbujmy zmienić niektóre części motywu potomnego, na przykład czcionki.

W tym przykładzie kliknij „Typografia” w prawym pasku bocznym.

Następnie zobaczysz kilka opcji zmiany globalnych czcionek motywu dla tekstu, linków, nagłówków, podpisów i przycisków.

Kliknijmy dla przykładu „Nagłówki”.

W menu rozwijanym Font zmień oryginalny wybór na dowolną dostępną czcionkę.

Dowolnie zmieniaj wygląd, wysokość linii, odstępy między literami i wielkość liter, jeśli jest to potrzebne.

Po zakończeniu kliknij „Zapisz”. Następnie możesz kliknąć przycisk Utwórz motyw blokowy (ikona klucza) obok opcji „Zapisz”.

Następnie kliknij „Zapisz zmiany w motywie”.

Następnie wybierz, jakie zmiany chcesz zapisać w motywie potomnym.

Przykłady obejmują czcionki, niestandardowe style, zmiany szablonu i inne.

Po zakończeniu po prostu przewiń pasek boczny do samego dołu.

Następnie kliknij „Zapisz zmiany”.

Teraz przyjrzyjmy się plikowi theme.json, aby zobaczyć zmiany odzwierciedlone w kodzie.

Aby to zrobić, kliknij ponownie przycisk Utwórz motyw bloku i wybierz „Wyświetl motyw.json”.

Po kliknięciu zobaczysz, że plik zawiera kilka nowych dodatków kodu.

W naszym przypadku plik zawiera kod wskazujący, że tagi nagłówków będą używać czcionki Inter o półgrubym kroju, wysokości linii 1,2, odstępie między liniami 1 piksel i małymi literami.

Dlatego, gdy edytujesz swój motyw potomny blokowy, pamiętaj, aby kliknąć ikonę klucza i zapisać zmiany, aby były dobrze udokumentowane.

Jak edytować pliki szablonów motywu potomnego

Większość motywów WordPress posiada szablony, które są plikami motywu kontrolującymi projekt i układ konkretnego obszaru wewnątrz motywu. Na przykład, sekcja stopki jest zazwyczaj obsługiwana przez plik footer.php, a nagłówek przez plik header.php.

Każdy motyw WordPress ma również inny układ. Na przykład motyw Twenty Twenty-One ma nagłówek, pętlę treści, obszar widżetów stopki i stopkę.

Jeśli chcesz zmodyfikować szablon, musisz znaleźć plik w folderze motywu nadrzędnego i skopiować go do folderu motywu potomnego. Następnie powinieneś otworzyć plik i dokonać pożądanych modyfikacji.

Na przykład, jeśli używasz Bluehost, a Twoim motywem nadrzędnym jest Twenty Twenty-One, możesz przejść do /wp-content/themes/twentytwentyone w swoim menedżerze plików. Następnie kliknij prawym przyciskiem myszy na plik szablonu, taki jak footer.php, i wybierz „Kopiuj”.

Następnie wprowadź ścieżkę pliku swojego motywu potomnego.

Po zakończeniu kliknij „Kopiuj pliki”.

Następnie zostaniesz przekierowany do ścieżki pliku.

Aby edytować plik footer.php, kliknij go prawym przyciskiem myszy i wybierz „Edytuj”.

Jako przykład usuniemy z obszaru stopki link „Z dumą zasilane przez WordPress” i dodamy tam informację o prawach autorskich.

Aby to zrobić, powinieneś usunąć wszystko między tagami <div class= "powered-by">:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Następnie musisz wkleić kod, który znajdziesz poniżej tych tagów w poniższym przykładzie:

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

Oto co powinieneś teraz zobaczyć w edytorze tekstu:

Zapisz plik, aby zmiany zostały oficjalnie wprowadzone.

Po tym odwiedź swoją stronę internetową, aby zobaczyć nowe powiadomienie o prawach autorskich.

Jak dodać nową funkcjonalność do swojego motywu potomnego

Plik functions.php w motywie używa kodu PHP do dodawania funkcji lub zmiany domyślnych funkcji na stronie WordPress. Działa jak wtyczka dla Twojej strony WordPress, która jest automatycznie aktywowana z Twoim aktualnym motywem.

Znajdziesz wiele samouczków WordPress, które proszą o skopiowanie i wklejenie fragmentów kodu do functions.php. Ale jeśli dodasz swoje modyfikacje do motywu nadrzędnego, zostaną one nadpisane przy każdej instalacji nowej aktualizacji motywu.

Dlatego zalecamy używanie motywu potomnego podczas dodawania niestandardowych fragmentów kodu. W tym samouczku dodamy nowy obszar widżetu do naszego motywu.

Możemy to zrobić, dodając ten fragment kodu do pliku functions.php naszego motywu potomnego. Aby proces był jeszcze bezpieczniejszy, zalecamy użycie wtyczki WPCode, aby nie edytować pliku functions.php bezpośrednio, zmniejszając ryzyko błędów.

Możesz przeczytać nasz poradnik na temat łatwego dodawania fragmentów niestandardowego kodu, aby uzyskać więcej informacji.

Oto kod, który musisz dodać do swojego pliku functions.php:

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

Po zapisaniu pliku możesz odwiedzić stronę Wygląd » Widżety w swoim panelu WordPress.

Tutaj zobaczysz swój nowy niestandardowy obszar widżetów, do którego możesz dodawać widżety.

Istnieje wiele innych funkcji, które można dodać do swojego motywu za pomocą niestandardowych fragmentów kodu. Sprawdź te niezwykle przydatne sztuczki dla pliku functions.php WordPress i przydatne fragmenty kodu WordPress dla początkujących.

Jak rozwiązać problemy z motywem potomnym WordPressa

Jeśli nigdy wcześniej nie tworzyłeś motywu potomnego, istnieje duża szansa, że popełnisz błędy, i to jest normalne. Dlatego zalecamy używanie wtyczki do tworzenia kopii zapasowych, tworzenie lokalnej witryny lub środowiska stagingowego oraz używanie przykładowej zawartości dla swojej witryny demonstracyjnej.

Biorąc to wszystko pod uwagę, nie poddawaj się zbyt szybko. Społeczność WordPressa jest bardzo zaradna, więc na każdy problem, z którym się borykasz, prawdopodobnie istnieje już rozwiązanie.

Na początek możesz zapoznać się z naszymi najczęstszymi błędami WordPress i sposobami ich naprawy.

Najczęstsze błędy, które prawdopodobnie zobaczysz, to błędy składni spowodowane czymś, co pominąłeś w kodzie. Pomoc w rozwiązaniu tych problemów znajdziesz w naszym szybkim przewodniku na temat jak znaleźć i naprawić błąd składni w WordPress.

Dodatkowo, zawsze możesz zacząć od nowa, jeśli coś pójdzie bardzo nie tak. Na przykład, jeśli przypadkowo usunąłeś coś, czego wymagał Twój motyw nadrzędny, możesz po prostu usunąć plik ze swojego motywu potomnego i zacząć od nowa.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć motyw potomny WordPress. Możesz również zapoznać się z naszym obszernym przewodnikiem na temat jak przetestować motyw WordPress pod kątem najnowszych standardów oraz naszym porównaniem darmowych i premium motywów WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.