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

Motywy potomne to jeden z tych terminów WordPressa, które są często używane i wprawiają początkujących w zakłopotanie. Być może nawet słyszałeś o nich i zdecydowałeś się pominąć ich tworzenie ze względu na to, jak skomplikowane się wydają.

Rozumiemy to. Ale z naszego doświadczenia wynika, że motywy potomne mogą zaoszczędzić mnóstwo bólu głowy w przyszłości. Zabezpieczają one twoje cenne konfiguratory, pozwalają eksperymentować bez niszczenia witryny i sprawiają, że aktualizacja motywu jest dziecinnie prosta.

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

Jak działa motyw potomny i dlaczego jest potrzebny?

Motyw potomny dziedziczy wszystkie funkcje, funkcje i style innego motywu WordPress. Podczas tworzenia motywu potomnego, 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 zastąpić lub rozszerzyć odziedziczone właściwości, dodając własne pliki lub modyfikując istniejące.

Chociaż możliwe jest dostosowanie własnego motywu WordPress bez instalowania motywu potomnego, istnieje kilka powodów, dla których i tak możesz go potrzebować:

• Motywy potomne chronią twoje konfiguratory podczas aktualizacji motywu, zabezpieczając je przed nadpisaniem. W przypadku bezpośredniej modyfikacji motywu nadrzędnego, modyfikacje te mogą zniknąć podczas aktualizacji.
• Motywy potomne pozwalają bezpiecznie wypróbować nowe projekty lub funkcje bez zakłócania oryginalnego motywu witryny, podobnie jak środowisko przejściowe.
• Jeśli wiesz , jak kodować, motywy potomne mogą usprawnić proces rozwoju. 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 należy zrobić przed utworzeniem motywu potomnego WordPress?

Widzieliśmy wielu użytkowników WordPressa, którzy byli podekscytowani zagłębieniem się w kwestie techniczne, ale zniechęcali się, gdy pojawiały się błędy. Rozumiemy to. Dlatego ważne jest, aby wiedzieć, w co się pakujesz przed utworzeniem motywu potomnego.

Oto kilka rzeczy, które zalecamy zrobić w pierwszej kolejności przed kontynuowaniem tego przewodnika krok po kroku:

1. Pamiętaj, że będziesz pracować z kodem. Będziesz potrzebował przynajmniej podstawowej znajomości HTML, CSS, PHP i opcjonalnie JavaScript, aby zrozumieć, jakie zmiany musisz wprowadzić. Dowiedz się więcej na ten temat w podręczniku motywów WordPress.
2. Wybierz motyw nadrzędny, który ma twój pożądany wygląd i funkcje witryny internetowej. Jeśli to możliwe, znajdź taki, w którym będziesz musiał wprowadzić tylko kilka zmian. W razie potrzeby możesz skorzystać z naszej listy kontrolnej rzeczy do zrobienia przed zmianą motywu WordPress.
3. Do tworzenia motywów używaj witryny regionalnej lub witryny przejściowej. Nie chcesz tworzyć niezamierzonych błędów na twojej witrynie.
4. Najpierw wykonajkopię zapasową swojej witryny internetowej. Zalecamy użycie wtyczki do tworzenia kopii zapasowych, takiej jak Duplicator, jeśli jest to twój pierwszy raz.

Istnieje kilka sposobów na utworzenie motywu potomnego z twojego istniejącego motywu. Jednym z nich jest ręczne tworzenie kodu, podczas gdy inne wymagają wtyczki, która jest znacznie bardziej przyjazna dla początkujących.

Pierwsza metoda może wydawać się onieśmielająca, jeśli nie masz doświadczenia technicznego. Niemniej jednak, nawet jeśli wybierzesz jedną z metod wtyczek, nadal zalecamy zapoznanie się z metodą ręczną, aby zapoznać się z procesem i biorącymi w nim udział plikami.

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 odnośników:

Metoda 1: Ręczne tworzenie potomnego motywu WordPress

Najpierw musisz otworzyć /wp-content/themes/ w twoim katalogu instalacyjnym WordPress.

Możesz to zrobić za pomocą menedżera plików twojego 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 logować się do kokpitu swojego konta hostingowego i przejść do karty „Witryny internetowe”. Następnie kliknij „Ustawienia”.

Na karcie Przegląd przewiń w dół do sekcji „Szybkie odnośniki”.

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

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

Tutaj wystarczy kliknąć przycisk „+ Folder” w lewym górnym rogu, aby utworzyć nowy katalog dla twojego motywu potomnego.

Katalogowi można nadać dowolną nazwę.

W tym poradniku użyjemy tylko nazwy katalogu twentytwentyone-child, ponieważ użyjemy Twenty Twenty-One jako naszego motywu nadrzędnego. Po zakończeniu kliknij „Utwórz nowy katalog”.

Następnie musisz otworzyć katalog, który właśnie utworzyłeś i kliknąć „+ Plik”, aby utworzyć pierwszy plik dla twojego motywu potomnego.

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

Śmiało nazwij ten plik „style.css”, ponieważ jest to główny arkusz stylów twojego dziecka i będzie zawierał informacje o motywie potomnym.

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

Teraz wystarczy kliknąć prawym przyciskiem myszy plik style.css.

Następnie kliknij „Edytuj”, aby otworzyć nową kartę, jak 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 „Zapisz zmiany”.

Następną rzeczą, którą musisz zrobić, jest utworzenie drugiego pliku i nadanie mu nazwy functions.php. Plik ten będzie importował 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.

Stworzyłeś już bardzo podstawowy motyw potomny. Kiedy przejdziesz do Wygląd ” Motywy w twoim panelu administracyjnym WordPress, powinieneś zobaczyć opcję Twenty Twenty-One Child.

Kliknij przycisk „Włącz”, aby rozpocząć korzystanie z motywu potomnego na twojej witrynie.

Metoda 2: Tworzenie klasycznego motywu potomnego za pomocą wtyczki

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

Pierwszą rzeczą, którą należy zrobić, jest zainstalowanie i włączanie wtyczki WordPress. Po włączeniu należy przejść do Narzędzia ” Motywy potomne w twoim kokpicie WordPress.

Na karcie Parent/Child zostaniesz poproszony o wybranie działania. Aby rozpocząć, wystarczy wybrać opcję „UTWÓRZ nowy motyw potomny”.

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

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

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

Poniżej należy wybrać miejsce zapisania nowych stylów: w głównym arkuszu stylów lub w osobnym.

Podstawowy arkusz stylów to domyślny arkusz stylów dostarczany z twoim motywem potomnym. Kiedy zapisujesz nowe konfiguratory do tego pliku, bezpośrednio modyfikujesz główne style twojego motywu potomnego. Każda modyfikacja spowoduje nadpisanie oryginalnego stylu motywu.

Opcja oddzielna umożliwia zapisanie nowego stylu własnego w oddzielnym pliku arkusza stylów. Jest to przydatne, jeśli chcesz zachować oryginalny styl motywu i nie nadpisywać go.

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

Przechodząc w dół, należy wybrać sposób dostępu do arkusza stylów motywu nadrzędnego.

Po prostu wybierzemy domyślną opcję „Użyj kolejki stylów WordPress”, ponieważ pozwoli to wtyczce automatycznie określić odpowiednie działania.

Po przejściu do kroku 7 należy kliknąć przycisk „Kliknij, aby edytować atrybuty motywu potomnego”.

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

Ręczne utworzenie motywu potomnego powoduje utratę menu i widżetów motywu nadrzędnego. Konfigurator motywu dziecka może skopiować je z motywu nadrzędnego do motywu potomnego. Jeśli chcesz to zrobić, zaznacz pole w kroku 8.

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

Wtyczka utworzy katalog dla twojego motywu potomnego i doda pliki style.css i functions.php, których użyjesz do późniejszego konfiguratora motywu.

Przed włączaniem motywu należy kliknąć odnośnik w górnej części ekranu, aby wyświetlić podgląd i upewnić się, że wygląda on dobrze i nie zepsuje twojej witryny.

Jeśli wszystko wydaje się działać, kliknij przycisk „Włączanie i publikowanie”.

Teraz twój motyw potomny zostanie uruchomiony.

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

Metoda 3: Tworzenie motywu potomnego za pomocą wtyczki

Jeśli korzystasz z motywu blokowego, WordPress oferuje łatwy sposób na utworzenie motywu potomnego za pomocą wtyczki Create Block Theme.

Najpierw należy zainstalować i włączyć wtyczkę WordPress. Następnie przejdź do Wygląd ” Utwórz motyw blokowy.

Tutaj wystarczy wybrać opcję „Utwórz element potomny [aktualna nazwa motywu]”.

Następnie wypełnij informacje o twoim 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 teraz i zainstaluje plik zip motywu WordPress w twoim obszarze administracyjnym.

Gdy to zrobisz, twoja witryna internetowa automatycznie włączy nowo utworzony motyw potomny. Możesz to potwierdzić przechodząc do Wygląd ” Motywy.

Dodatkowa wskazówka: Sprawdź, czy twój motyw ma generator motywów potomnych

Jeśli masz szczęście, to twój motyw WordPress może już mieć istniejącą funkcję tworzenia motywu potomnego.

Na przykład, jeśli korzystasz z Astry, możesz przejść do witryny internetowej Astra Child Theme Generator. Następnie wystarczy wpisać nazwę twojego motywu potomnego i kliknąć przycisk „Generuj”.

Przeglądarka automatycznie pobierze wtedy twój motyw potomny na komputer, który możesz następnie samodzielnie zainstalować na WordPressie.

Znaleźliśmy również kilka innych popularnych motywów WordPress, które mają generator motywów potomnych:

• OceanWP
• Ultra
• Nozama
• Eclipse

Jak dostosować twój klasyczny motyw potomny?

Technicznie rzecz biorąc, możesz dostosować swój motyw potomny bez kodu, korzystając z konfiguratora motywu. Wprowadzone tam zmiany nie będą miały wpływu na twój motyw nadrzędny. Jeśli nie masz jeszcze wprawy w kodowaniu, możesz skorzystać z konfiguratora.

To powiedziawszy, zalecamy również dostosowanie motywu potomnego za pomocą kodu.

Oprócz dowiedzenia się więcej na temat tworzenia motywów WordPress, konfigurator kodu pozwala na udokumentowanie zmian w plikach motywu potomnego, co ułatwia ich śledzenie.

Najbardziej podstawowym sposobem dostosowania motywu potomnego jest dodanie własnego kodu CSS do pliku style.css. Aby to zrobić, musisz wiedzieć, jaki kod musisz dostosować.

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

Metoda 1: Kopiowanie kodu z inspektora Chrome lub Firefox

Najłatwiejszym sposobem na znalezienie kodu CSS, który należy zmodyfikować, jest użycie narzędzi inspektora dostarczanych z przeglądarkami Google Chrome i Firefox. Narzędzia te pozwalają zajrzeć do kodu HTML i CSS dowolnego elementu strony internetowej.

Dowiedz się więcej o narzędziu inspektora w naszym przewodniku na temat podstaw elementu inspect: konfigurowanie WordPressa dla majsterkowiczów.

Po kliknięciu prawym przyciskiem myszy na twoją stronę internetową i użyciu elementu inspect, zobaczysz HTML i CSS dla tej strony.

Gdy przesuniesz kursor myszy nad różnymi liniami HTML, inspektor podświetli je w górnym oknie. Pokaże również reguły CSS związane z podświetlonym elementem, na przykład:

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

Wystarczy kliknąć ikonkę wyboru koloru obok koloru: i wkleić kod HEX w odpowiednie pole, jak poniżej:

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

Następnie wklej następujący kod poniżej informacji o motywie potomnym, tak jak poniżej:

/*
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
}

Oto jak 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 jakiego elementu odnosi się każdy kod. W Internecie dostępnych jest wiele ściągawek HTML i CSS, do których można 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 szybszym rozwiązaniem może być skopiowanie kodu bezpośrednio z pliku style.css motywu nadrzędnego, wklejenie go do pliku CSS motywu potomnego, a następnie zmodyfikowanie go.

Najtrudniejsze jest to, że plik arkusza stylów motywu może wydawać się naprawdę długi i przytłaczający dla początkujących. Jednak po zrozumieniu podstaw, nie jest to takie trudne.

Posłużmy się prawdziwym przykładem z arkusza stylów motywu nadrzędnego Twenty Twenty-One. Musisz przejść do katalogu /wp-content/themes/twentytwentyone w katalogu instalacyjnym WordPress, a następnie otworzyć plik style.css w menedżerze plików, 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ą rodzaj kolorów (takich jak żółty, zielony, fioletowy), których cały motyw będzie używał w określonych kodach HEX. W przypadku linii takich jak „global-color-primary” lub „global-color-secondary” oznacza to, że są to podstawowe i drugorzędne kolory tego motywu.

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

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

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

Zasadniczo oznacza to, że wszystkie teksty przycisków będą miały ten sam kolor, co zadeklarowany w --global--color-background:, czyli miętowy zielony(--global--color-green: #d1e4dd). Jeśli zmienisz HEX w –global–color-green :, tekst przycisku również będzie wyglądał inaczej.

Możesz także skorzystać z tych poradników, aby poeksperymentować z własnymi konfiguratorami motywu potomnego:

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

Jak dostosować swój blokowy motyw potomny?

Jeśli korzystasz z motywu potomnego, większość twoich konfiguratorów zostanie wykonana w pliku theme.json, a nie style.css.

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

To powiedziawszy, znaleźliśmy znacznie łatwiejszą alternatywę przy użyciu wtyczki Create Block Theme. Narzędzie to może rejestrować wszelkie zmiany wprowadzone w pełnym edytorze witryny WordPress w pliku motywu potomnego.json. Nie będziesz więc musiał w ogóle dotykać żadnego kodu, ponieważ wtyczka zajmie się tym za Ciebie.

Pokażemy to na przykładzie. Najpierw otwórz pełny edytor witryny WordPress, przechodząc do Wygląd ” Edytor.

Pojawi się kilka menu do wyboru.

Tutaj wystarczy wybrać „Style”.

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

Dla naszych celów możesz po prostu pominąć to wszystko i po prostu kliknąć ikonkę ołówka.

Spróbujmy teraz zmienić niektóre elementy motywu potomnego, takie jak czcionki.

W tym przykładzie kliknij „Typografia” na prawym panelu bocznym.

Następnie wyświetlone zostaną opcje umożliwiające zmianę globalnego kroju pisma motywu dla tekstu, odnośników, nagłówków, podpisów i przycisków.

Kliknijmy „Nagłówki” dla celów demonstracyjnych.

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

W razie potrzeby można zmienić wygląd, wysokość linii, odstępy między literami i wielkość liter.

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

Następnie kliknij „Zapisz zmiany w motywie”.

Następnie wybierz zmiany, które mają zostać zapisane w motywie potomnym.

Przykłady obejmują czcionki, własne style, zmiany szablonów i wiele innych.

Po zakończeniu przewiń cały panel boczny w dół.

Następnie kliknij „Zapisz zmiany”.

Zobaczmy teraz twój plik theme.json, abyś mógł zobaczyć zmiany, które mają wpływ na kod.

Aby to zrobić, kliknij ponownie przycisk Utwórz motyw blokowy i wybierz opcję „Zobacz theme.json”.

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

W naszym przypadku plik zawiera kod, który wskazuje, że tagi nagłówków będą używać czcionki Inter o wyglądzie półgrubym, wysokości wiersza 1,2, odstępie między wierszami 1 piksel i małymi literami.

Dlatego za każdym razem, gdy edytujesz swój motyw potomny, upewnij się, że kliknąłeś ikonkę klucza i zapisałeś zmiany, aby były dobrze udokumentowane.

Jak edytować pliki szablonów motywu potomnego?

Większość motywów WordPress ma szablony, które są plikami motywu kontrolującymi projekt i układ określonego obszaru wewnątrz motywu. Na przykład sekcja stopki jest zwykle obsługiwana przez plik footer.php, a nagłówek jest obsługiwany 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 katalogu motywu nadrzędnego i skopiować go do katalogu motywu potomnego. Następnie należy otworzyć plik i wprowadzić żądane modyfikacje.

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

Następnie wpisz ścieżkę do pliku twojego motywu potomnego.

Gdy skończysz, po prostu kliknij „Kopiuj pliki”.

Nastąpi przekierowanie do ścieżki pliku.

Aby edytować plik footer.php, wystarczy kliknąć go prawym przyciskiem myszy i wybrać opcję „Edytuj”.

Jako przykład usuniemy odnośnik „Proudly powered by WordPress” z obszaru stopki i dodamy tam powiadomienie o prawach autorskich.

W tym celu należy usunąć wszystko pomię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 należy wkleić kod, który znajduje się pod tymi tagami 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:

Śmiało zapisz plik, aby zmiany stały się oficjalne.

Następnie przejdź na twoją witrynę internetową, aby zobaczyć nowe powiadomienie o prawach autorskich.

Jak utworzyć nową funkcjonalność w twoim motywie potomnym?

Plik functions.php w motywie wykorzystuje kod PHP do dodawania funkcji lub zmiany domyślnych funkcji witryny WordPress. Działa jak wtyczka dla twojej witryny WordPress, która jest automatycznie włączana z twoim obecnym, aktualnym motywem.

Znajdziesz wiele poradników WordPress, które proszą o skopiowanie i wklejenie fragmentów kodu do functions.php. Jeśli jednak dodasz swoje modyfikacje do motywu nadrzędnego, zostaną one nadpisane za każdym razem, gdy zainstalujesz nową aktualizację motywu.

Dlatego zalecamy korzystanie z motywu potomnego podczas dodawania własnych fragmentów kodu. W tym poradniku dodamy nowy obszar widżetów do naszego motywu.

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

Więcej informacji można znaleźć w naszym przewodniku na temat dodawania własnych fragmentów kodu.

Oto kod, który musisz dodać do twojego 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 przejść na stronę Wygląd ” Widżety w twoim kokpicie WordPress.

W tym miejscu zobaczysz swój nowy konfigurator widżetów, do którego możesz dodawać widżety.

Istnieje wiele innych funkcji, które można dodać do twojego motywu za pomocą własnych 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 kilka błędów i jest to normalne. Dlatego zalecamy użycie wtyczki do tworzenia kopii zapasowych, utworzenie witryny regionalnej lub środowiska przejściowego i użycie fikcyjnej treści dla twojej witryny demonstracyjnej.

Biorąc to wszystko pod uwagę, nie poddawaj się zbyt szybko. Społeczność WordPress jest bardzo zasobna, więc niezależnie od tego, jaki masz problem, rozwiązanie prawdopodobnie już istnieje.

Na początek możesz sprawdzić nasze najczęstsze błędy WordPress, aby znaleźć rozwiązanie.

Najczęstszymi błędami, które prawdopodobnie zobaczysz, są błędy składni spowodowane przez coś, co przeoczyłeś w kodzie. Pomoc w rozwiązaniu tych problemów znajdziesz w naszym krótkim przewodniku, jak znaleźć i poprawić błąd składni w WordPress.

Ponadto zawsze możesz zacząć od nowa, jeśli coś pójdzie nie tak. Na przykład, jeśli przypadkowo usuniesz coś, czego wymagał twój nadrzędny motyw, możesz po prostu usunąć plik z motywu potomnego i zacząć od nowa.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak stworzyć motyw potomny WordPress. Warto również zapoznać się z naszym przewodnikiem na temat testowania twojego motywu WordPress pod kątem najnowszych standardów oraz naszym porównaniem darmowych i premium motywów WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.