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:
- 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.
- 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.
- Użyj lokalnej witryny lub witryny testowej do tworzenia motywów. Nie chcesz wprowadzać niezamierzonych błędów na swojej aktywnej witrynie.
- 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.
Wskazówka: Chcesz dostosować swój motyw bez tworzenia motywu potomnego? Użyj WPCode, aby bezpiecznie włączyć nowe funkcje za pomocą niestandardowych fragmentów kodu bez psucia Twojej witryny.
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.
Uwaga: Dla tej metody zalecamy zapoznanie się z oficjalną dokumentacją Motywy potomne i Dołączanie zasobów, aby upewnić się, że arkusze stylów motywu potomnego są ładowane poprawnie.
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:
Jak dostosować swój klasyczny motyw potomny
Uwaga: Ta sekcja jest przeznaczona dla użytkowników klasycznych motywów WordPress. Jeśli używasz motywu blokowego, przejdź do następnej sekcji.
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.
Uwaga: Jeśli używasz motywu potomnego Twenty Twenty-One i nie widzisz żadnych zmian, być może będziesz musiał zaktualizować część „Wersja” informacji o pliku motywu (na przykład z 1.0 do 2.0) za każdym razem, gdy aktualizujesz plik style.css.
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.
Mahesh Yadav
Jedna rzecz, którą chcę wiedzieć, jeśli tworzymy motyw potomny, to mamy 2 pliki CSS do załadowania: jeden CSS motywu nadrzędnego i drugi CSS motywu potomnego. Czy to nie zwiększy czasu ładowania strony i nie doda kolejnego CSS do załadowania?
Wsparcie WPBeginner
Chociaż czas ładowania technicznie by wzrósł, nie powinien być zauważalny.
Admin
Nadia Shaheen
Świetna robota!
Pozostań błogosławiony i nadal udostępniaj wspaniałe treści.
Wsparcie WPBeginner
Thank you, glad you liked our content
Admin
Fahad
Great Work !
This site is super helpful
Keep it up !!
Wsparcie WPBeginner
Thank you, glad our article was helpful
Admin
Daniel Waduka
Dopiero zaczynam używać motywów potomnych, a ten artykuł bardzo mi pomógł.
Bardzo dziękuję.
Wsparcie WPBeginner
Glad our guide could be helpful
Admin
Marcos Flores
Cześć! Czytam ten artykuł i działa! ale czytam też dokumentację WordPressa na ten temat i mówią, że
„Należy pamiętać, że poprzednia metoda polegała na importowaniu arkusza stylów motywu nadrzędnego za pomocą @import: nie jest to już najlepsza praktyka, ponieważ zwiększa czas ładowania arkuszy stylów. Prawidłową metodą kolejkowania arkusza stylów motywu nadrzędnego jest dodanie akcji wp_enqueue_scripts i użycie wp_enqueue_style() w pliku functions.php motywu potomnego.”
Czy powinienem użyć obu metod? Czy jeśli użyję pliku function.php, nie muszę pisać funkcji importującej w pliku style.css (znajdującym się w folderze mojego motywu potomnego)?
Khema
Twoje instrukcje pomijają krok tworzenia pliku functions.php. Powinno być wspomniane, że należy objąć cały plik tagiem
Dziękuję za artykuł. Jest bardzo, bardzo pomocny.
rReons
Więc pytanie. Używałem mojego motywu WordPress bez żadnego motywu potomnego i wprowadzałem wszystkie zmiany w nim. Utworzyłem motyw potomny dzięki Twojemu przewodnikowi i teraz używam go jako motywu strony internetowej.
Moje pytanie brzmi: czy oba motywy mają te same modyfikacje i zmiany. Jeśli teraz zaktualizuję główny motyw, czy zmiany wpłyną również na motyw potomny?
balu
Hej! wpbeginner. Oficjalna strona WordPressa tak mówi. Musisz zaktualizować wpis. Dziękuję!
Należy pamiętać, że poprzednią metodą było importowanie arkusza stylów motywu nadrzędnego za pomocą @import: nie jest to już najlepsza praktyka, ponieważ zwiększa czas ładowania arkuszy stylów. Prawidłową metodą kolejkowania arkusza stylów motywu nadrzędnego jest dodanie akcji wp_enqueue_scripts i użycie wp_enqueue_style() w pliku functions.php motywu potomnego. W związku z tym będziesz musiał utworzyć plik functions.php w katalogu swojego motywu potomnego. Pierwsza linia pliku functions.php motywu potomnego będzie otwierającym tagiem PHP (<?php), po którym możesz dodać do kolejki arkusze stylów motywu nadrzędnego i potomnego. Poniższa przykładowa funkcja zadziała tylko wtedy, gdy Twój motyw nadrzędny używa tylko jednego głównego pliku style.css do przechowywania wszystkich stylów CSS. Jeśli Twój motyw potomny ma więcej niż jeden plik .css (np. ie.css, style.css, main.css), będziesz musiał upewnić się, że zachowujesz wszystkie zależności motywu nadrzędnego.
Pat
Świetne informacje… trafiło na moją listę zapisanych!! Dzięki!
Alfonso de Garay
Mam motyw potomny z najnowszą wersją motywu zainstalowaną na mojej stronie. Wersja WP 4.7.5. Otrzymałem powiadomienie, że dostępna jest nowa wersja WP, proszę zaktualizować teraz.
1. Czy muszę ponownie wykonać kopię zapasową mojej strony przed aktualizacją?
2. Czy muszę utworzyć kolejny motyw potomny, używając wersji potomnej 1?
2. Jak mogę zmienić nazwę, adres e-mail i adres URL na wersję 1 Chile
Wsparcie WPBeginner
Cześć Alfonso,
Aktualizacje WordPress zazwyczaj nie wpływają na Twoje motywy, więc nie musisz tworzyć kolejnego motywu potomnego. Zawsze powinieneś tworzyć kopie zapasowe swojej witryny przed aktualizacją WordPress.
Admin
Lisa Bruce
Cześć, widzę, że ten film/post ma już kilka lat, więc trochę się spóźniłem, ale mam pytanie, z którym mam nadzieję, że pomożesz mi.
Jestem stosunkowo nowy w WP i dopiero zrozumiałem znaczenie motywów potomnych. Pracowałem nad tworzeniem strony dla przyjaciela i wprowadziłem kilka zmian w używanym motywie. Znalazłem błąd w motywie i skontaktowałem się z deweloperem motywu, a oni powiedzieli, że błąd został naprawiony w ostatniej aktualizacji.
Jeśli zainstaluję aktualizację, wierzę, że stracę wszystkie moje dostosowania. Czy jest za późno na utworzenie motywu potomnego? Czy można to zrobić teraz, a następnie zainstalować aktualizację? Wolę nie zaczynać od zera.
Wsparcie WPBeginner
Cześć Lisa,
Jeśli wiesz, jakie zmiany wprowadziłeś i w jakich plikach, najpierw pobierz kopię zapasową istniejącego motywu na swój komputer. Następnie zainstaluj zaktualizowaną wersję. Teraz możesz utworzyć motyw potomny, a następnie skopiować i wkleić kod z dostosowanej wersji do motywu potomnego.
Admin
Nell Yang
Dziękuję za ten pomocny post. Zawsze szukałem filmu, który pokazałby mi, jak dokładnie powinienem używać motywu potomnego. Jest to dość czasochłonne, że za każdym razem, gdy aktualizowałem mój motyw, wszystkie moje style znikały. Frustrujące jest robienie wszystkiego od nowa. Próbowałem czytać dokumenty z wordpress, ale nadal nie wiem, jak postępować po aktywacji motywu potomnego. Kontynuuj dobrą robotę! Jeszcze raz dziękuję!
Tony Agee
Dobry film instruktażowy. Większość samouczków, które oglądałem, każe wkleić kod do pliku, ale zapomina powiedzieć, do jakiego medium wkleić kod. Zamierzałem użyć Notepad++, ale myślę, że można użyć zwykłego Notatnika.
JP
Witam, chcę tylko powiedzieć, że jesteś bardzo dobrym pisarzem, bardzo jasnym i prostym. Spędziłem dużo czasu na Twoim artykule, aby nauczyć się WP.
Dziękuję!
Rob Brooks
Cześć. Dziękuję za bycie świetnym zasobem WP. Jestem nowy w WP i naprawdę doceniam Twoje wskazówki. Postępowałem zgodnie z artykułem co do joty, ale kiedy próbuję włączyć szablon potomny na stronie, otrzymuję błąd „Brakuje motywu nadrzędnego. Zainstaluj motyw nadrzędny „Real Estate Lite”. Jak widzisz, używam darmowego szablonu o nazwie Real Estate light. znajduje się w katalogu ../real-estate-lite/ w folderze wp-content/themes. Mój kod jest poniżej… czy zrobiłem coś źle?
Theme Name: Real Estate Lite Child Theme Theme URI: http://www.example.com/ Description: Real Estate Lite child theme Author: me Author URI: http://www.example.com Template: Real Estate Lite Version: 1.0.0 */ @import url("../real-estate-lite/style.css");1-click Use in WordPress
Dodatkowo wspomnę, że motyw był darmowy i działa na wersji WP 4.7.2 (działa na Plesk). Utworzyłem plik style.css bezpośrednio na serwerze, więc nie ma problemów z FTP.
Wprowadziłem już znaczące zmiany w pliku style.css motywu nadrzędnego, a także w pliku functions.php… Nie jestem pewien, czy miałoby to wpływ na to, ale przetestuję na nieedytowanej, pustej domenie, aby zobaczyć, czy otrzymam te same wyniki.
Będę wdzięczny za wszelkie wskazówki/pomoc, które możesz udzielić.
Wsparcie WPBeginner
Cześć Rob,
Aby zainstalować motyw nadrzędny na swojej stronie, wartość Template musi odpowiadać rzeczywistej nazwie motywu nadrzędnego, którą można zobaczyć w pliku style.css.
Admin
Carrie
Cześć! Świetny artykuł! Dzięki temu artykułowi w końcu zaczynam rozumieć, jak edytować CSS, aby uzyskać pożądany rezultat.
Wielkie dzięki za uproszczone wyjaśnienie!
Nalin
Stworzyłem motyw potomny i użyłem @import dla „style.css” w motywie potomnym. Teraz chcę zmienić w innym pliku CSS z folderu motywu nadrzędnego... /font_awesome/css/fontawesome.css
Teraz chcę wiedzieć, gdzie umieścić mój nowy fontawesome.css w motywie potomnym i jak użyć polecenia @import.
Lub jakikolwiek inny proces do użycia większej liczby plików CSS w motywie potomnym.
Rebecca
Więc nie mam folderu "wp-content" na swoim komputerze. Co powinienem zrobić?
Czy powinienem był to kiedyś pobrać?
Wsparcie WPBeginner
Cześć Rebecca,
Plik wp-content jest hostowany na Twoim koncie hostingowym, a nie na Twoim komputerze. Będziesz potrzebować klienta FTP, aby połączyć się z Twoim serwerem.
Admin
Brad
Używanie @ import nie jest już najlepszą praktyką
SAppa
Jaka jest zatem najlepsza praktyka teraz? Powinieneś mieć możliwość wykonania kopii zapasowej swojego komentarza.
Jual beli rumah
Dziękuję
Jean-philippe
Uczę się tak wiele od kilku godzin na Waszej stronie. Za każdym razem, gdy szukam czegoś w Google związanego z „jak” w WordPress, okazuje się, że najlepsze informacje są tutaj, na WPbeginner. Zawsze są dobrze wyjaśnione i łatwe do zrozumienia. Bez wątpienia zawsze będę wracać tutaj po informacje.
Wsparcie WPBeginner
Cześć Jean-philippe,
Thanks for the kind words, we are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Smart Rashed
To jest artykuł, którego szukałem, dzięki człowieku.
Kevin
Wiem, że to będzie głupie pytanie. Jestem w tym zupełnie nowy i nie mam żadnych umiejętności. Jeśli tworzę plik, arkusz stylów itp. w plikach instalacji mojego WP na moim lokalnym komputerze, jak to się dostaje na moją stronę internetową? Chyba czegoś mi brakuje? Używam około 3 różnych komputerów do pracy nad moją stroną internetową, a te lokalne pliki nie są dostępne na wszystkich z nich. Ponownie, jestem pewien, że czegoś bardzo prostego nie rozumiem. Nie widzę powiązania.
Wsparcie WPBeginner
Pliki, które edytujesz na swoim komputerze, muszą zostać przesłane na Twoją stronę internetową za pomocą klienta FTP. Zobacz nasz przewodnik po jak przesyłać pliki WordPress za pomocą FTP.
Admin
Kevin
Ok, rozumiem i utworzyłem motyw potomny, ale kiedy go aktywuję, formatowanie na stronie jest zupełnie inne niż w motywie nadrzędnym. Co zrobiłem źle?
Francesco
Cześć,
Śledzę Twój tutorial, ale WordPress (4.5.3) nie rozpoznaje nowego folderu na moim serwerze online. Jak mogę to obejść?
Dzięki,
F.
Muhammad Moosa
Pomocny artykuł rzeczywiście, zastosowałem się do niego i stworzyłem motyw potomny. Dziękuję.
Carolina
Cześć, dzięki za tutorial, bardzo pomocny. Ale mam pytanie. Czy mogę stworzyć motyw potomny z już istniejącej strony? Mam klienta, który zaprojektował swoją własną stronę, ale nie stworzył motywu potomnego. Jak się do tego zabrać?
Wsparcie WPBeginner
Jeśli ich obecny motyw jest zgodny ze standardami kodowania i najlepszymi praktykami WordPress, nie powinieneś mieć problemów z utworzeniem motywu potomnego.
Admin
Mike
Dziękuję bardzo za artykuł i film. Wygląda na to, że od czasu ich utworzenia WordPress ma nowe najlepsze praktyki wymienione w swoim kodeksie, co mnie myli.
„Ostatnim krokiem jest dodanie do kolejki arkuszy stylów motywu nadrzędnego i potomnego. Zauważ, że poprzednia metoda polegała na importowaniu arkusza stylów motywu nadrzędnego za pomocą @import: nie jest to już najlepsza praktyka.”
Czy mam się trzymać kroków, które szczegółowo opisałeś, czy mam pominąć funkcję importu i utworzyć plik PHP, czy mam zaimplementować oba?
Plik style.css mojego motywu zawiera tylko nagłówek, więc importowanie tego pliku wydaje się nieistotne, a istnieje wiele plików CSS, takich jak main.css, znajdujących się gdzie indziej w strukturze plików motywu nadrzędnego. Nie wiedząc nic lepszego jako początkujący, już wprowadziłem zmiany do main.css, aby osiągnąć niektóre z moich celów i dopiero teraz zdaję sobie sprawę, że motyw potomny jest konieczny.
Wszelkie rady są bardzo mile widziane.
Z poważaniem,
Mike
Wsparcie WPBeginner
Musisz zaimportować co najmniej plik style.css, który powinien znajdować się w głównym katalogu motywu nadrzędnego. Powinien on automatycznie importować inne pliki CSS.
Admin
Mike
Nawet jeśli style.css zawiera tylko nagłówek?
Jack
Jeśli Twój plik style.css nie zawiera importów do innych stylów CSS, możesz je zaimportować bezpośrednio, tak jak style.css.
Olamide
Dzień dobry. Kiedy zrobiłem podgląd na żywo motywu potomnego, zauważyłem, że nie miał on stylów CSS motywu nadrzędnego. Czy to może być wynikiem błędu w sposobie, w jaki wkleiłem kod?
Oto kod, który wkleiłem:
/*
Theme Name: sparkling child
Theme URI: https://www.wpbeginner.com/
Description: sparkling child theme
Author: djetlawyer
Author URI: http://www.example.com
Template: sparkling
Version: 1.0.0
*/
@import url(“../sparkling/style.css”);
Motywem nadrzędnym jest „sparkling”. Jeśli wystąpił błąd, proszę o poprawienie mnie.
Dziękuję.
Wsparcie WPBeginner
Kod jest poprawny.
Admin
lucia
Cześć,
Próbuję skonfigurować motyw potomny, aby aktywować mój stopkę w motywie dwadzieścia dwanaście, ale nie wiem, jakiego kodu użyć do jego skonfigurowania.
Próbowałem tej strony internetowej
z różnymi sugestiami i próbowałem zmienić twoją sugestię podaną w dwudziestu trzynastu, ale mi się nie udało.
Czy mógłbyś podać mi właściwy kod do ustawienia motywu potomnego dla dwunastu dwunastu.
Leigh
To było niezwykle pomocne – zwłaszcza Twój kod HTML do skopiowania. Nigdy wcześniej nie byłem tak podekscytowany widokiem zmieniających się kolorów na stronie internetowej. To zdecydowanie najlepszy poradnik dla tego motywu!
Bhautik Andhariya
Cześć, wypróbowałem ten sam przykład, który pokazałeś. Ale mój motyw potomny zastępuje cały styl motywu nadrzędnego.
Nie ma w nim żadnego stylu motywu nadrzędnego. Jakie jest rozwiązanie? Czy możesz mi pomóc? Jestem nowy w WordPress i uczę się go.
Angelo
Cześć!
Właśnie zainstalowałem szablon Bose i utworzyłem dla niego motyw potomny. Jednak na środku mojej strony internetowej pojawia się następujący komunikat o błędzie:
Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12
Jestem bardzo początkujący w tworzeniu stron internetowych, więc nie mam pojęcia, na czym polega problem. Czy ktoś mógłby mi pomóc?
Wielkie dzięki!
Wsparcie WPBeginner
Skontaktuj się z deweloperem motywu w celu uzyskania wsparcia.
Admin
Djamila
Cześć,
Dzięki za artykuł! Nie mogłem sprawić, by mój motyw potomny „pojawił się” w sekcji szablonów i okazało się, że faktycznie źle wpisałem nazwę oryginalnego szablonu. Jaka różnica, gdy jedna litera jest duża, co?
Jednak teraz, gdy mam swój motyw potomny, mogłem zaktualizować motyw nadrzędny i kiedy to zrobiłem, nagle pojawił się problem z bardzo ważną wtyczką (obecnie buduję blog recenzencki na lokalnej bazie danych i jest to wtyczka do podsumowania/oceniania należąca do projektantów szablonu).
W szablonie nadrzędnym „zaktualizowali” tę wtyczkę. Osobiście wolę starą, ale dobra… tak czy inaczej… pod moją recenzją widzę teraz *zarówno* stare podsumowanie z ocenami, jak i nowe, które też wygląda dziwnie. Deaktywowałem i reaktywowałem, ale tak pozostaje. Niezwykle irytujące i nie wiem, gdzie szukać, aby zachować starą (ładniejszą) lub tylko nową i uporządkować zgodnie z oczekiwaniami.
Od czego powinienem zacząć? Dziękuję za wszelką pomoc, jaką możesz mi udzielić.
Wsparcie WPBeginner
Skontaktuj się z pomocą techniczną wtyczki.
Admin
Amanda
Dzięki za świetny artykuł!
Jeśli użyję motywu potomnego, czy nadal będę mógł go dostosować za pomocą opcji Wygląd > Opcje motywu, które są dostępne w panelu administracyjnym, takie jak rozmiar czcionki, kolory tła itp., czy będę musiał przejść na ścieżkę kodu?
Jeśli aktywowałem motyw potomny i używam zakładki Wygląd do aktualizacji stylizacji zamiast kodu, czy w zasadzie nadal aktualizuję motyw nadrzędny, ponieważ powiązane pliki nie znajdują się w folderze motywu potomnego?
Wsparcie WPBeginner
Tak, Twój motyw potomny odziedziczy wszystkie te opcje.
Admin
Amanda
Dziękuję za odpowiedź.
Czyli jeśli aktywuję motyw potomny i użyję ustawień w zakładce Wygląd mojego panelu administracyjnego do zmiany stylizacji (zamiast pisania kodu CSS), moje zmiany nie zostaną nadpisane, gdy wykonam aktualizację motywu lub WordPressa na motywie nadrzędnym?
Czy nadal musiałbym kopiować arkusz stylów, pliki nagłówka, stopki itp. do folderu motywu potomnego, aby powyższy scenariusz zadziałał?
Laura
Postępowałem zgodnie z tymi (i innymi) krokami, aby utworzyć motyw potomny oparty na twentytwelve. Problem, z którym się borykam, polega na tym, że WordPress wydaje się ignorować tylko część arkusza stylów CSS, który zmieniłem w oryginalnym motywie, i doprowadza mnie to do szału. Na przykład, udało mi się zmienić kolor tła menu, ale po prostu nie pozwala mi zmienić kolorów tekstu czegokolwiek. Użyłem twojego podejścia polegającego na edycji w narzędziu do inspekcji kodu w Chrome (które działało świetnie, kolor został zmieniony, sugerując, że mój kod był poprawny) i wklejeniu zmienionego kodu do style.css motywu potomnego, ale wydaje się, że nie jest on w ogóle odbierany. Nie wiem, co z tym zrobić, wszelkie spostrzeżenia byłyby bardzo mile widziane!
Boyet
Dziękuję bardzo za ten tutorial. Nie mam problemu z edycją plików arkusza stylów, nagłówka i stopki mojego motywu potomnego.
Moje pytanie brzmi, co mam zrobić, jeśli chciałbym zmienić coś w pliku znajdującym się w folderze mojego motywu nadrzędnego, na przykład: public_html/wp-content/themes/shopera/woocommerce?
Czy muszę tworzyć tę samą ścieżkę w moim motywie potomnym?
Z góry dziękuję…
Wsparcie WPBeginner
Tak.
Admin
Tony Arnold
Bardzo pomocne i w dużej mierze zrozumiałe i wykonane.
Próbuję sprawić, aby mój obraz nagłówka był pełnej szerokości. Mój motyw standardowo na to nie pozwala, więc czy mam zmienić plik?
Dziękuję
Sohail Farooq
Uwielbiam ten artykuł, spróbowałem i zadziałało od razu.
Xander
Cześć!
Wydaje mi się, że trochę utknąłem. Wprowadziłem już pewne zmiany w niektórych plikach .php (np. header.php, footer.php itp.) mojego motywu nadrzędnego, nie mając zainstalowanego motywu potomnego.
Chcę teraz utworzyć motyw potomny, ponieważ pojawiają się aktualizacje motywu nadrzędnego. Co mam zrobić z tymi wszystkimi zmodyfikowanymi plikami? Czy powinienem je skopiować do katalogu motywu potomnego? Jakie foldery muszę tam mieć? Czy powinienem utworzyć te same foldery, które ma motyw nadrzędny, dla motywu potomnego?
Dziękuję,
Wsparcie WPBeginner
Nie potrzebujesz wszystkich folderów z motywu nadrzędnego. Musisz tylko odtworzyć pliki, w których dokonałeś zmian. Mamy tutorial na temat aktualizacji motywów bez utraty zmian. Zawiera on sekcję, w której możesz dowiedzieć się, które pliki zmodyfikowałeś w swoim motywie i jakie zmiany w nich wprowadziłeś.
Pobierz świeżą kopię swojego motywu nadrzędnego na swój komputer. Pobierz stary motyw na swój komputer, a następnie prześlij świeżą kopię. Po tym utwórz nowy motyw potomny. Skopiuj pliki, w których dokonałeś zmian, ze świeżego motywu do swojego motywu potomnego. Skopiuj zmiany, które wprowadziłeś w plikach starego motywu, do plików swojego nowego motywu potomnego.
Wymagałoby to pewnego rozwiązywania problemów, zanim uda Ci się to zrobić poprawnie. Dlatego zdecydowanie zalecamy najpierw wykonanie kopii zapasowej witryny. Jeśli to możliwe, najpierw przetestuj swoje zmiany na lokalnej instalacji WordPress.
Admin
Xander
Dziękuję. Czy możesz podać mi link do wspomnianego tutoriala?
Jest jeszcze jedna przeszkoda – zmieniłem plik functions.php, jak mogę pogodzić oba w motywach nadrzędnym i potomnym?
Chris
Czy mogę załadować i zainstalować mój nowy motyw potomny na innej witrynie? Jeśli tak, to jak?
Dzięki!
Wsparcie WPBeginner
Pobierz swój motyw potomny na swój komputer. Utwórz plik zip zawierający folder motywu. Przejdź do obszaru administracyjnego innej witryny, a następnie odwiedź Wygląd » Motywy. Kliknij przycisk dodaj nowy motyw, a następnie kliknij przycisk przesyłania. Prześlij wcześniej utworzony plik zip. WordPress rozpakuje i zainstaluje Twój motyw potomny.
Będziesz musiał również zainstalować motyw nadrzędny.
Admin
Kzain
to jest super pomocne, nie próbowałem używać motywu potomnego, nie wiedziałem, że można to pobrać, zawsze myślałem, że kodowanie i PHP to jedyna droga. Dzięki za ten szybki poradnik.
Daniel Garneau
Witam,
Uważam ten tutorial za bardzo pomocny w nauce tworzenia motywu potomnego. Ale w trakcie wprowadziłem następujące poprawki. W katalogu motywu potomnego muszą znajdować się dwa pliki. Muszą się nazywać style.css i functions.php.
style.css musi zawierać co najmniej (zakładając, że używasz motywu TwentyTen):
@import url(“../twentyten/style.css”);
Szablon: twentyten
Kiedy konsultowałem się z samouczkiem w dniu 2015-05-12, linia „template: twentyten” znajdowała się w bloku komentarza. Musi to być polecenie, które WordPress może odczytać.
Ponadto musi istnieć plik functions.php, a musi on zawierać co najmniej następującą linię polecenia:
<?php
Twój samouczek wraz z kodeksem WP pomógł mi w stworzeniu mojego pierwszego motywu potomnego. Dziękuję.
Maria
Czy można bezpiecznie powiedzieć, że zmiany, które wprowadziłem w polu niestandardowego CSS, można umieścić w pliku style.css mojego motywu potomnego?
Wsparcie WPBeginner
Tak.
Admin
Louise Mason
Potykam się na pierwszym płotku – jak znaleźć /wp-content/themes/? Gdzie właściwie znajduje się folder instalacyjny WordPressa? W filmie nie widzę, w co klikasz ani jak to otwierasz, menedżer plików pojawia się jak za dotknięciem czarodziejskiej różdżki!
Wsparcie WPBeginner
Dostęp do Menedżera plików uzyskasz, odwiedzając pulpit hostingu internetowego. Zaloguj się na swoje konto hostingowe i zlokalizuj Menedżer plików.
Admin
Sonam
kiedy wybieram menedżer plików mojego konta hostingowego, mam cztery opcje:
1) katalog główny
2) katalog główny strony internetowej
3) katalog główny ftp publiczny
4) katalog dokumentów
który mam wybrać do pracy.
Kylee
Cześć – ja wybieram Katalog główny. To prowadzi mnie do wszystkich plików. Klikam na Public HTML po lewej, aby uzyskać dostęp do moich różnych witryn. Prawdopodobnie już to odkryłeś na jakimś etapie, ale na wszelki wypadek, gdybyś tego nie zrobił...
Viju
Cześć,
Używam motywu potomnego dla mojej strony internetowej. Mam problem z nadaniem wersji mojemu plikowi style.css motywu potomnego. Wordpress wydaje się dodawać domyślną wersję wordpress na końcu pliku, na przykład /style.css?ver=4.1.1
Zwiększam wartość „version” w pliku style.css mojego motywu potomnego, ale WordPress tego nie wykrywa.
Z tego powodu moje zmiany w motywie potomnym nie są odzwierciedlane u użytkowników, którzy mają buforowaną wersję CSS.
czy możesz doradzić, jak sobie z tym poradzić?
Stephen James
Na samym początku jestem zagubiony. Skąd wziąłeś kod style css na początku???? Mówisz nam tylko, żeby go wkleić, ale nie skąd pochodzi. Z pewnością, jeśli używam innego motywu, będzie to inny kod.
Vatsal Savani
Hej Stephen,
Kod na początku to ogólne informacje o motywie, jest prawie taki sam dla każdego motywu, wystarczy zmienić zawartość po dwukropku, np. Jeśli nazwa Twojego motywu brzmiałaby stephenstheme, kod na początku mógłby wyglądać tak:
Nazwa motywu: stephenstheme
URI motywu: http://www.yourwebsite.com
Opis: Motyw potomny Twenty Thirteen stworzony przez stephen
Autor: Stephen James
URI autora: http://www.yourwebsite.com
Szablon: twentythirteen
Wersja: x.x.x
Mam nadzieję, że rozumiesz, co mam na myśli, powodzenia!
Ariz Khan
Witaj WPB, rozwiązałem problem, odnosząc się do mojego poprzedniego e-maila. Zgadnij co – to był błąd składni z mojej strony – przesłałem Style.css, który zmieniłem na style.css zgodnie z wymaganiami i voila, zadziałało. Dzięki.
Zespół WPBeginner
Czy zapisałeś plik szablonu jako style.css?
ada
Ja też miałem ten sam problem. Usunąłem liczby w Notatniku i mogłem zobaczyć szablon.
Kim
Próbuję stworzyć motyw potomny dla twentythirteen, postępując zgodnie z Twoimi powyższymi instrukcjami. Utworzyłem folder i skopiowałem kod, który podałeś powyżej, do pliku tekstowego. Zapisałem kod w nowym folderze. Nie mogę aktywować motywu potomnego, ponieważ „szablon jest brakujący”. Pomocy!?
canciller
Używanie @import dla „style.css” w motywie potomnym nie jest zalecane przez WordPress Codex.
http://codex.wordpress.org/Child_Themes
czy bezpiecznie jest go używać? jakie są wady używania @import?
Pat
Wadą używania @import zamiast wp_enqueue_script(), zgodnie z zaleceniami w codexie, jest wolniejsze ładowanie strony. Pracownik Automattic udziela wyjaśnień pod tym linkiem https://kovshenin.com/2014/child-themes-import/
Vatsal Savani
Krótko mówiąc, zmniejszy to wydajność Twojej witryny i spowolni ją.
Praveen Kumar
A co z tworzeniem motywów potomnych na Genesis Framework?