W artykule:
Czy chcesz utworzyć motyw potomny w WordPress?
Gdy nauczysz się podstaw WordPress, prawdopodobnie chcesz dowiedzieć się, jak dostosować swoją witrynę WordPress. Motywy dziecięce to świetny punkt wyjścia dla każdego, kto chce dostosować motywy WordPress.
W tym artykule pokażemy, jak stworzyć motyw potomny w WordPress.
Dlaczego potrzebujesz motywu dziecięcego?
Motyw potomny to motyw WordPress, który dziedziczy funkcjonalność, funkcje i styl innego motywu WordPress, motywu nadrzędnego. Następnie można dostosować motyw potomny bez wprowadzania żadnych zmian do motywu nadrzędnego.
Motywy dziecięce to najlepszy sposób na dostosowanie motywu WordPress, ponieważ oszczędzają czas i wysiłek. Motyw nadrzędny zawiera już wiele formatowania i funkcjonalności, więc nie musisz kodować wszystkiego od zera.
Zapewniają również bezpieczną aktualizację motywów WordPress. Ponieważ zmodyfikowałeś motyw potomny, a nie rodzica, nie stracisz żadnych dostosowań po zaktualizowaniu motywu nadrzędnego.
Gdy będziesz zadowolony ze swojego motywu dziecka, możesz go nawet użyć w innej witrynie WordPress.
Zanim zaczniesz tworzyć motyw potomny
Aby utworzyć motyw potomny, musisz mieć świadomość, że będziesz pracować z kodem. Będziesz potrzebował podstawowej wiedzy na temat HTML i CSS, aby zrozumieć, jakie zmiany należy wprowadzić w kodzie, aby osiągnąć swoje cele.
Pomocna jest również znajomość PHP. Powinieneś przynajmniej znać się na kopiowaniu i wklejaniu fragmentów kodu z innych źródeł.
Zalecamy ćwiczenie w lokalnym środowisku programistycznym. Możesz przenieść witrynę WordPress na serwer lokalny w celach testowych lub użyć fałszywej treści do tworzenia motywów.
Na koniec musisz zdecydować się na temat rodzica. Powinieneś wybrać motyw nadrzędny, który ma podobny wygląd i funkcje do twojego celu końcowego. Celem jest wprowadzenie jak najmniejszej liczby zmian.
W tym artykule użyjemy motywu Twenty Twenty-One, który jest jednym z domyślnych motywów WordPress.
Tworzenie Pierwszego Motywu Potomnego
Motyw potomny można utworzyć ręcznie, tworząc folder i potrzebne pliki. Możesz też utworzyć motyw potomny za pomocą wtyczki.
Metoda ręczna jest pomocna, ponieważ pomoże Ci zapoznać się z plikami, z którymi musisz pracować w dalszej części samouczka. Metoda wtyczki może być używana, jeśli masz trudności z tworzeniem tych plików.
Wystarczy użyć tylko jednej metody i możesz przejść do wybranej metody, korzystając z poniższych linków.
- Metoda 1: tworzenie motywu potomnego za pomocą kodu
- Metoda 2: tworzenie motywu potomnego za pomocą wtyczki
Metoda 1: tworzenie motywu potomnego za pomocą kodu
Najpierw musisz otworzyć / wp-content / themes / w folderze instalacyjnym WordPress i utworzyć nowy folder dla motywu podrzędnego. Możesz nazwać ten folder, co chcesz. W tym samouczku nazwiemy go wpbdemo.
Następnie musisz utworzyć dwa pierwsze pliki dla motywu podrzędnego. Zacznij od otwarcia edytora tekstu, takiego jak Notatnik. Następnie musisz wkleić następujący kod do pustego dokumentu.
Nazwa tematu: WPB Child Theme Temat URI: https://www.wpbeginner.com/ Opis: a Twenty Twenty-One child theme Autor: WPBeginner Autor URI: https://www.wpbeginner.com Szablon: twentytwentyone Wersja: 1.0.0 Domena tekstowa: twentytwentyonechild
Ten kod zawiera informacje na temat motywu podrzędnego, więc możesz go zmienić, aby spełnić swoje potrzeby. Teraz zapisz ten plik jako styl.css w folderze motywu podrzędnego, który właśnie utworzyłeś. To jest główny arkusz stylów motywu podrzędnego.
Następną rzeczą, którą musisz zrobić, to utworzyć drugi plik, który zaimportuje lub zapyta arkusze stylów z motywu nadrzędnego. Aby to zrobić, utwórz nowy dokument w edytorze tekstu i skopiuj poniższy kod.
/ * enqueue scripts and style from parent theme */
function twentytwentyone_styles () {
wp_enqueue_style ('child-style', get_stylesheet_uri (),
array ('twenty-twenty-one-style' ), wp_get_theme () - >get('Version') );
}
add_action ('wp_enqueue_scripts', 'twentytwentyone_styles');
Ten kod będzie działał, gdy użyjesz Twenty Twenty-One jako motywu nadrzędnego. Jeśli używasz innego motywu nadrzędnego, musisz użyć innego kodu, jak opisano w podręczniku motywów WordPress.
Jeśli masz trudności z modyfikacją kodu dla innego motywu nadrzędnego, możesz zamiast tego użyć metody wtyczki.
Teraz zapisz ten plik jako funkcje.php w folderze motywu podrzędnego. Wrócimy do tego pliku później, aby dodać funkcjonalność do motywu podrzędnego.
Uwaga: W przeszłości motyw nadrzędny był importowany za pomocą polecenia @ import w stylu.css. Nie zalecamy już tej metody, ponieważ zwiększy ona czas potrzebny na załadowanie arkuszy stylów.
Utworzyłeś teraz bardzo podstawowy motyw potomny i po przejściu do Wygląd ” Tematy powinieneś zobaczyć motyw potomny WPB. Musisz kliknąć przycisk Aktywuj, aby rozpocząć korzystanie z motywu podrzędnego w swojej witrynie.
Ponieważ nie zmieniłeś jeszcze niczego w swoim motywie podrzędnym, Twoja witryna będzie korzystać z funkcjonalności i wyglądu motywu nadrzędnego. Możesz teraz przejść do następnej sekcji, w której dostosujesz motyw potomny.
Metoda 2: tworzenie motywu potomnego za pomocą wtyczki
Konfigurator motywów potomnych to łatwa w użyciu Wtyczka WordPress, która pozwala szybko tworzyć i dostosowywać motywy potomne bez użycia kodu.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Child Theme Configurator. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz przejść do Narzędzia ” Motywy Dziecięce w panelu WordPress.
Na karcie rodzic / dziecko zostaniesz poproszony o wybranie motywu rodzica z rozwijanego menu. Wybierzemy motyw Twenty Twenty-One.
Po kliknięciu przycisku Analizuj wtyczka upewni się, że motyw jest odpowiedni do użycia jako motyw nadrzędny. Dwadzieścia dwadzieścia jeden to OK.
Następnie zostaniesz poproszony o nazwanie folderu, w którym zostanie zapisany motyw potomny i wybranie miejsca zapisania stylów. Zostawimy domyślne ustawienia.
W poniższej sekcji zostaniesz poproszony o wybranie sposobu dostępu do arkusza stylów motywu nadrzędnego. Ponownie, przejdziemy z domyślnym ustawieniem.
Gdy przejdziesz do sekcji 7, musisz kliknąć przycisk oznaczony „Kliknij, aby edytować atrybuty motywu podrzędnego”. Następnie możesz wypełnić szczegóły swojego motywu podrzędnego.
Podczas ręcznego tworzenia motywu podrzędnego tracisz menu i widżety motywu nadrzędnego. Konfigurator motywów potomnych może skopiować je z motywu nadrzędnego do motywu potomnego. Zaznacz pole sekcja 8 pole, jeśli chcesz to zrobić.
Na koniec kliknij przycisk, aby utworzyć nowy motyw potomny. Wtyczka utworzy folder dla motywów podrzędnych i doda styl.css i funkcje.Pliki php, których później użyjesz do dostosowania motywu.
Zanim aktywujesz motyw, powinieneś kliknąć link u góry ekranu, aby wyświetlić podgląd i upewnić się, że wygląda dobrze i nie psuje witryny.
Jeśli wszystko wydaje się działać, kliknij przycisk Aktywuj i Publikuj, a motyw potomny zostanie uruchomiony.
Na tym etapie motyw potomny będzie wyglądał i zachowywał się dokładnie tak, jak motyw rodzica. Następnie zaczniemy go dostosowywać.
Dostosowywanie Motywu Dziecka
Teraz dostosujemy motyw potomny, aby wyglądał nieco inaczej niż motyw nadrzędny. Robimy to poprzez dodanie kodu do stylu.pliku css, a to wymaga pewnej znajomości CSS.
Proces można uprościć, kopiując i modyfikując istniejący kod z motywu nadrzędnego. Możesz znaleźć ten kod za pomocą Inspektora Chrome lub Firefox lub kopiując go bezpośrednio ze stylu motywu nadrzędnego.plik css.
Metoda 1: kopiowanie kodu z Inspektora Chrome lub Firefox
Najprostszym sposobem na odkrycie kodu CSS, który musisz zmodyfikować, jest użycie narzędzi Inspektora dostarczanych z Google Chrome i Firefox. Te narzędzia pozwalają spojrzeć na HTML i CSS za każdym elementem strony internetowej.
Na przykład, jeśli chcesz zobaczyć CSS używany do treści posta, po prostu najedź myszą na post i kliknij prawym przyciskiem myszy, aby wybrać Inspect.
Spowoduje to podzielenie ekranu przeglądarki na dwie części. U dołu ekranu zobaczysz HTML i CSS dla strony. W zależności od ustawień przeglądarki HTML i CSS mogą być wyświetlane po prawej stronie ekranu.
Gdy przesuniesz kursor myszy nad różnymi liniami HTML, Inspektor Chrome podświetli je w górnym oknie. Pokaże Ci również reguły CSS związane z podświetlonym elementem.
Możesz spróbować edytować CSS tutaj, aby zobaczyć, jak to będzie wyglądać. Spróbujmy zmienić kolor tła ciała na # fdf8ef.
Zobaczysz, że kolor tła strony zmieni się, ale zmiana jest tylko tymczasowa. Aby stała, musisz skopiować tę regułę CSS i wkleić w styl motywu podrzędnego.plik css.
body {
background-color: # fdf8ef;
}
Zapisz wprowadzone zmiany w stylu.plik css, a następnie podgląd witryny.
Możesz powtórzyć proces dla wszystkiego, co chcesz zmienić w arkuszu stylów szablonu. Oto kompletny arkusz stylów, który stworzyliśmy dla motywu podrzędnego. Możesz eksperymentować i modyfikować.
Nazwa tematu: WPB Child Theme
Temat URI: https://www.wpbeginner.com/
Opis: a Twenty Twenty-One child theme
Autor: WPBeginner
Autor URI: https://www.wpbeginner.com
Szablon: twentytwentyone
Wersja: 1.0.0
Domena tekstowa: twentytwentyonechild
*/
.site-title {
kolor: # 7d7b77;
}
.opis strony {
kolor: # aba8a2;
}
body {
background-color: # fdf8ef;
kolor: # 7d7b77;
}
.entry-footer {
kolor: # aba8a2;
}
.entry-title {
kolor: # aba8a2;
font-weight: bold;
}
.widget-area {
kolor: # 7d7b77;
}
Metoda 2: kopiowanie kodu ze stylu motywu nadrzędnego.plik css
Możesz również skopiować kod bezpośrednio ze stylu motywu nadrzędnego.plik css. Następnie możesz wkleić go do stylu motywu podrzędnego.pliku css, a następnie zmodyfikować go.
Jest to szczególnie pomocne przy użyciu Twenty Twenty-One jako motywu nadrzędnego, ponieważ w znacznym stopniu wykorzystuje zmienne CSS.
Na przykład, gdy zmieniliśmy kolor tła strony powyżej, oryginalny kod był:
background-color: var (--global -- color-background);
Tutaj’–global-color-background ’ jest zmienną. Zmienna może być używana w wielu lokalizacjach w całym motywie. Aby zmienić kolor we wszystkich tych miejscach na raz, wystarczy zmienić wartość zmiennej.
Musisz przejść do / wp-content / themes / twentytwentyone w folderze instalacyjnym WordPress, a następnie otworzyć styl.plik css w edytorze tekstu. Następnie można znaleźć, gdzie zdefiniowano-global-color-background.
-- global -- color-background: var (--global--color-green);
Odkrywamy, że zmienna jest zdefiniowana przez kolejną zmienną!
W rzeczywistości w sekcji: root stylu motywu nadrzędnego.css możemy znaleźć cały zakres zmiennych kolorów zdefiniowanych. Jest to paleta kolorów używana przez motyw Twenty Twenty-One.
: root {
-- global -- kolor-czarny: #000;
-- Globalny -- kolor-ciemnoszary: #28303d;
-- Globalny -- kolor-szary: #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;
}
Po wybraniu idealnego schematu kolorów dla witryny WordPress zmienne te pozwolą Ci szybko dostosować motyw potomny.
Wystarczy skopiować ten kod i wkleić go do stylu motywu podrzędnego.plik css. Następnie musisz zastąpić kody kolorów nowymi, które wybrałeś dla własnej palety kolorów.
Kolory te będą następnie automatycznie używane w wielu miejscach w ramach motywu podrzędnego. Jest nie tylko szybszy, ale sprawi, że kolory Twojego motywu będą bardziej spójne.
Bądź odważny. Zmienna green color nie musi być zielona.
To samo można zrobić dla innych zmiennych. Styl 221.css wyświetla zmienne dla rodzin i rozmiarów czcionek, nagłówków, odstępów między wierszami i innych. Możesz skopiować dowolny z nich do nowego stylu.plik css, w którym można je dostosować.
Edycja plików szablonów
Każdy motyw WordPress ma inny układ. Na przykład motyw Twenty Twenty-One ma nagłówek, pętlę zawartości, obszar widżetu stopki i stopkę.
Każda sekcja jest obsługiwana przez inny plik w folderze twentytwentyone. Pliki te nazywane są szablonami.
Szablony są zwykle nazywane po obszarze, do którego są używane. Na przykład sekcja stopki jest zwykle obsługiwana przez stopkę.plik php oraz nagłówek i obszary nawigacji są obsługiwane przez header.plik php.
Niektóre obszary, takie jak obszar zawartości, mogą być obsługiwane przez wiele plików zwanych szablonami zawartości.
Jeśli chcesz zmodyfikować szablon, najpierw znajdź plik w folderze motywu nadrzędnego i skopiuj go do folderu motywu podrzędnego. Następnie należy otworzyć plik w edytorze tekstu i wprowadzić żądane modyfikacje.
W tym samouczku skopiujemy stopkę.plik php z folderu motywu nadrzędnego do folderu motywu podrzędnego. Gdy to zrobisz, musisz otworzyć plik w zwykłym edytorze tekstu, takim jak Notatnik.
Na przykład usuniemy link „dumnie wspierany przez WordPressa” z obszaru stopki i dodamy tam informację o prawach autorskich. Aby to zrobić, należy usunąć wszystko pomiędzy znacznikami < div class=”powered-by”>.
< div class = "powered-by"> WordPress< / a>' ); ?> < / div>
Następnie musisz wkleić kod, który znajdziesz poniżej tych tagów w poniższym przykładzie.
< div class = "powered-by">© Copyright . Wszelkie prawa zastrzeżone.< / p> < / div>
Po zapisaniu pliku i odwiedzeniu witryny WordPress powinieneś być w stanie zobaczyć nową informację o prawach autorskich.
Dodawanie nowych funkcji do motywu podrzędnego
Funkcje.plik php w motywie używa kodu PHP, aby dodać funkcje lub zmienić domyślne funkcje w witrynie WordPress. Działa jak wtyczka dla Twojej witryny WordPress, która jest automatycznie aktywowana z bieżącym motywem.
Znajdziesz wiele samouczków WordPress, które wymagają skopiowania i wklejenia fragmentów kodu do funkcji.php. Ale jeśli dodasz go do motywu nadrzędnego, zostanie on nadpisany za każdym razem, gdy zainstalujesz nową aktualizację do motywu.
Dlatego zalecamy używanie motywu podrzędnego podczas dodawania niestandardowych fragmentów kodu. W tym samouczku dodamy nowy obszar widżetów do naszego motywu.
Możemy to zrobić, dodając ten fragment kodu do funkcji motywu potomnego.plik php.
'custom_sidebar',
'name' = > _ _ ('Custom Widget Area', 'text_domain'),
'description' = > _ _ ('Niestandardowy obszar widżetu', 'text_domain'),
'before_title' = > '',
'after_title' = > '
',
'before_widget' = >'',
'after_widget' = > ' < / a>',
);
register_sidebar ($args );
}
add_action ('widgets_init', 'custom_sidebars');
?>
Po zapisaniu pliku możesz odwiedzić Wygląd ” Widgety strona Pulpitu nawigacyjnego WordPress i zobaczysz nowy niestandardowy obszar widżetów.
Możesz dowiedzieć się więcej o dodawaniu obszarów widżetów w naszym przewodniku, jak dodawać dynamiczne obszary i paski boczne w WordPress.
Istnieje wiele innych funkcji, które możesz dodać do swojego motywu za pomocą niestandardowych fragmentów kodu. Sprawdź te niezwykle przydatne sztuczki 25+ dla pliku funkcji WordPress.
Rozwiązywanie problemów
Jeśli nigdy wcześniej nie tworzyłeś motywu podrzędnego, istnieje duża szansa, że popełnisz kilka błędów. Tylko nie poddawaj się zbyt szybko. Sprawdź naszą listę najczęstszych błędów WordPress, aby znaleźć poprawkę.
Najczęstsze błędy, które prawdopodobnie zobaczysz, to Błędy składniowe spowodowane przez coś, co przegapiłeś w kodzie. Pomoc w rozwiązaniu tych problemów znajdziesz w naszym krótkim przewodniku jak znaleźć i naprawić błąd składni w WordPress.
Zawsze możesz zacząć od nowa, jeśli coś pójdzie nie tak. Na przykład, jeśli przypadkowo usunąłeś coś, czego wymagał Twój motyw nadrzędny, możesz po prostu usunąć plik z motywu podrzędnego i zacząć od nowa.
Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się tworzyć motyw potomny WordPress. Możesz także dowiedzieć się, jak wybrać najlepszy kreator stron internetowych lub sprawdzić naszą listę wtyczek, które muszą mieć wtyczki, aby rozwijać swoją witrynę.
Jeśli podoba Ci się ten przewodnik, rozważ subskrypcję naszego kanału YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
