Utwórz motyw podrzędny w samouczku WordPress krok po kroku

W tym poście dowiesz się, jak krok po kroku tworzyć motywy potomne w WordPress, Wszystkie podstawy motywów potomnych WordPress.

Dowiesz się, jak importować style CSS motywu nadrzędnego, jak zastępować style motywu nadrzędnego i dlaczego warto tworzyć motywy potomne WordPress.

Aby dowiedzieć się, dlaczego motywy potomne WordPress są ważne, przeczytaj nasz Przewodnik dla początkujących dotyczący tworzenia motywów WordPress dla rodziców i dzieci

Co można zrobić z motywami potomnymi WordPress?

Dzięki motywom potomnym WordPress możesz bardzo łatwo dostosować domyślny aktywny motyw WordPress. Nie musisz znać zaawansowanego HTML, CSS, PHP czy JavaScript, aby tworzyć motywy potomne.

Podstawowa lub dobra znajomość HTML, CSS i PHP może być bardzo pomocna.

Dalsza lektura: Jak wybrać idealny darmowy lub premium motyw WordPress?

Możesz użyć motywu potomnego WordPress, aby zmodyfikować swoją witrynę za pomocą CSS, dodać nowe obszary widżetów, dodatkowe menu nawigacyjne, edytować niestandardowe pliki, aby tworzyć nowe strony z niestandardowym stylem.

Dzięki motywom potomnym możesz również zmienić kolejność elementów witryny, dodać nową zawartość/elementy i zmienić dowolną funkcjonalność.

Dlaczego powinieneś stworzyć motyw potomny WordPress

Powodem istnienia motywów potomnych jest możliwość dostosowania motywu „nadrzędnego” (twojego istniejącego/aktywnego) bez utraty zmian i modyfikacji po aktualizacji motywu nadrzędnego.

Na przykład, jeśli bezpośrednio zmodyfikowałeś plik single.php, twoje dostosowania będą na początku działać dobrze.

Jednak po zaktualizowaniu motywu do nowszej wersji zmodyfikowanego motywu utracisz wszystkie zmiany i nie będzie możliwości przywrócenia dostosowania.

Czego potrzebujesz

Możesz szybko utworzyć motyw podrzędny i przesłać go na swój serwer, ale zaleca się zainstalowanie WordPressa lokalnie na komputerze.

Dzięki lokalnej instalacji WordPressa możesz szybko stworzyć i przetestować swój motyw, Nie potrzebujesz przez cały czas połączenia z Internetem.

Dzięki lokalnej witrynie WordPress możesz popełniać błędy bez wpływu na swoją witrynę na żywo i jest to znacznie szybszy i lepszy sposób.

Istnieje wiele sposobów na lokalną instalację WordPressa w systemie Windows, MAC lub Linux. Przeczytaj ten samouczek, aby dowiedzieć się, jak zainstalować WordPress na lokalnym komputerze ze stosem Bitnami WordPress.

Opublikowaliśmy już samouczek krok po kroku dla początkujących.

Jak zainstalować WordPress na serwerze WAMP w systemie Windows 8?

Jak zainstalować WordPress w systemie Windows 8 za pomocą stosu Bitnami?

jak stworzyć motyw potomny w WordPress przewodnik krok po kroku?

Dla każdego motywu potomnego w WordPressie wymagane są dwa pliki.

• funkcje.php
• styl.css

W pliku style.css możemy dodać informacje o naszym motywie potomnym, np. nazwę motywu, opis motywu, nazwisko autora, szczegóły motywu nadrzędnego, tagi itp.

Potrzebujemy również pliku functions.php do zarejestrowania arkusza stylów motywu nadrzędnego i podrzędnego. Za pomocą pliku functions.php możemy również dodawać nowe funkcje, rejestrować nowe menu nawigacyjne, obszary widżetów itp.

Zacznijmy więc tworzyć twój pierwszy motyw potomny. W tym motywie potomnym nie będziemy dodawać nowych obszarów widżetów, menu nawigacyjnych itp. Użyjemy naszego motywu potomnego, aby wprowadzić kilka prostych zmian CSS. Zastąpimy domyślne style CSS.

Możesz użyć dowolnego motywu WordPress jako motywu nadrzędnego, w tym samouczku zamierzam utworzyć motyw potomny dla motywu TwentySixteen.

Utwórz nowy folder i zapisz go jako dwadzieścia szesnaście-dziecko lub możesz nadać mu dowolną nazwę, np. projekt.

Utwórz dwa nowe pliki i zapisz je jako functions.php i style.css w naszym folderze motywów potomnych. Nazwa mojego folderu motywu potomnego to designbomb.

Teraz dodaj następujące informacje w pliku style.css motywu potomnego i zapisz plik.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Teraz zaloguj się do swojego pulpitu WordPress. Przejdź do Wygląd > Motywy > Dodaj nowy i prześlij ten nowy motyw podrzędny. Zobaczysz nowy motyw bez zrzutu ekranu. Najedź myszą na motyw i kliknij przycisk Szczegóły motywu.

Zobaczysz następujące szczegóły dotyczące nowego motywu potomnego.

Na powyższym zrzucie ekranu możesz zobaczyć wszystkie podstawowe informacje o naszym motywie potomnym. Nazwa naszego motywu potomnego, który jest autorem tego motywu, opis motywu potomnego, a także można zobaczyć To jest motyw potomny z Dwudziestu Szesnastu. wiadomość.

Dodaliśmy Szablon: dwadzieścia szesnaście w pliku style.css naszego motywu potomnego. Ten wiersz mówi WordPressowi, że motywem nadrzędnym jest dwadzieścia szesnaście.

Jeśli używasz innego motywu, zastąp TwentySixteen nazwą motywu nadrzędnego.

Teraz aktywuj nowy motyw potomny i odśwież swoją stronę główną. Powinieneś zobaczyć całą zawartość bez żadnych stylizacji. Nie martw się, to normalne. Dzieje się tak, ponieważ nie uwzględniliśmy pliku style.css motywu nadrzędnego i podrzędnego

Po aktywowaniu nowego motywu potomnego Przejdź do Wygląd > Edytor i wybierz plik functions.php (Funkcje motywu), dodaj następujący kod w pliku functions.php i kliknij przycisk Aktualizuj plik, aby zapisać zmiany.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Teraz odwiedź fronton witryny WordPress i przeładuj stronę. Powinieneś zobaczyć normalną witrynę ze wszystkimi stylami TwentySixteen.

Modyfikowanie istniejących stylów

Oznacza to, że nasz motyw potomny jest gotowy. Czas dostosować motyw nadrzędny za pomocą nowych stylów CSS. Teraz w obszarze Wygląd > Edytor wybierz plik style.css. Zamierzamy dodać kilka nowych stylów.

Dodaj następujący styl do pliku style.css motywu podrzędnego i zapisz plik.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

przeładuj frontend swojej witryny i otwórz dowolną stronę. Zmodyfikowaliśmy domyślne style dla bieżącego elementu menu. Zobacz zrzut ekranu poniżej.

Do bieżącego elementu menu dodałem nowy kolor tła, promień obramowania, kolor i cień pola. Zmiana stylów za pomocą narzędzi Chrome Dev była bardzo prosta i łatwa.

To wszystko

Teraz wiesz, jak stworzyć motyw potomny. To nie było takie proste i łatwe. Dzięki motywom potomnym WordPress możesz dostosować prawie każdy plik motywu nadrzędnego, ale nie zaleca się modyfikowania każdego pliku motywu nadrzędnego.

Zawsze używaj motywów potomnych, aby dodać niezbędne funkcje, funkcje lub niestandardowe strony.

Pobierz motyw potomny Projektów