Jak utworzyć motyw podrzędny WordPress (wideo)

Czy chcesz utworzyć motyw podrzędny w WordPress? Po zapoznaniu się z podstawami WordPress prawdopodobnie chcesz nauczyć się dostosowywać swoją witrynę WordPress. Uważamy, że motywy potomne są doskonałym punktem wyjścia dla każdego, kto chce dostosować motywy WordPress. W tym artykule pokażemy, jak utworzyć motyw podrzędny w WordPress.


Prosty motyw podrzędny WordPress oparty na Twenty Thirteen

Film instruktażowy:

Subskrybuj WPBeginner

Dla tych, którzy nie chcą oglądać wideo, możesz kontynuować czytanie poniższego artykułu.

Dlaczego musisz stworzyć motyw podrzędny?

Motywy potomne są uważane za najlepszy sposób dostosowania motywów WordPress. Motyw podrzędny dziedziczy wszystkie funkcje i wygląd motywu nadrzędnego. Możesz go dostosować bez wpływu na motyw nadrzędny. Umożliwia to łatwą aktualizację motywu nadrzędnego bez obawy o utratę zmian.

Więcej informacji na temat motywów podrzędnych można znaleźć w naszym artykule Co to jest motyw podrzędny WordPress? Plusy, minusy i więcej.

Wymagania

Wymagana jest podstawowa znajomość CSS / HTML, aby można było wprowadzać własne zmiany. Znajomość PHP z pewnością by pomogła. Jeśli jesteś dobry w kopiowaniu i wklejaniu fragmentów kodu z innych źródeł, to też działałoby.

Zalecamy ćwiczenie w lokalnym środowisku programistycznym. Możesz przenieść działającą witrynę WordPress na lokalny serwer w celach testowych lub użyć fikcyjnej zawartości do opracowania motywu.

Pierwsze kroki

Każdy dobry motyw WordPress może być używany jako motyw nadrzędny. Istnieje jednak wiele różnych rodzajów motywów i niektóre z nich mogą nie być najłatwiejsze w obsłudze. Na potrzeby tego samouczka będziemy używać Twenty Thirteen, która jest jednym z domyślnych motywów WordPress.

Tworzenie motywu pierwszego dziecka

Najpierw musisz otworzyć / wp-content / themes / w folderze instalacyjnym WordPress i utworzyć nowy folder dla swojego dziecka. Możesz nazwać ten folder, jak chcesz. W tym samouczku nazwiemy go wpbdemo.

Tworzenie nowego motywu podrzędnego WordPress

Otwórz edytor tekstu, taki jak Notatnik, i wklej ten kod:

/ *
Nazwa motywu: Motyw podrzędny WPB
Motyw URI: https://www.wpbeginner.com/
Opis: Motyw podrzędny Twenty Thirteen
Autor: WPBeginner
Autor URI: https://www.wpbeginner.com
Szablon: dwadzieścia trzynaście
Wersja: 1.0.0
* /

@import url ("../twentythirteen/style.css");

Teraz zapisz ten plik jako style.css w właśnie utworzonym folderze motywów podrzędnych.

Większość tego materiału w tym pliku jest oczywista. To, na co naprawdę chcesz zwrócić uwagę, to Szablon: dwadzieścia jeden.

Mówi to WordPressowi, że nasz motyw jest motywem potomnym i że nazwa naszego katalogu motywów nadrzędnych to dwadzieścia jeden. W nazwie folderu nadrzędnego rozróżniana jest wielkość liter. Jeśli dostarczymy WordPressowi Szablon: TwentyThirteen, to nie będzie działać.

Ostatni wiersz tego kodu importuje arkusz stylów motywu nadrzędnego do motywu podrzędnego.

Jest to minimalne wymaganie do stworzenia motywu potomnego. Możesz teraz przejść do Wygląd »Tematy gdzie zobaczysz motyw potomny WPB. Musisz kliknąć przycisk aktywacji, aby rozpocząć korzystanie z motywu podrzędnego w swojej witrynie.

Aktywowanie motywu podrzędnego WordPress

Ponieważ nie zmieniłeś jeszcze niczego w motywie podrzędnym, Twoja witryna będzie korzystać ze wszystkich funkcji i wyglądu motywu nadrzędnego.

Dostosowywanie motywu dziecka

Każdy motyw WordPress ma plik style.css w głównym katalogu. Najczęściej jest to główny arkusz stylów motywu, w którym znajduje się cały CSS. Jednak niektóre motywy mogą zawierać tylko informacje nagłówka motywu. Takie motywy zwykle mają pliki CSS umieszczone w osobnym katalogu.

W tej sekcji potrzebujesz trochę wiedzy CSS.

Google Chrome i Firefox są wyposażone we wbudowane narzędzia inspektora. Narzędzia te pozwalają spojrzeć na HTML i CSS za dowolnym elementem strony internetowej.

Jeśli chcesz zobaczyć CSS używany do menu nawigacji, po prostu najedź myszką na menu nawigacji i kliknij prawym przyciskiem myszy, aby wybrać Inspect Element.

Korzystanie z narzędzia Inspect Element w Google Chrome

Spowoduje to podzielenie ekranu przeglądarki na dwie części. W dolnej części ekranu zobaczysz HTML i CSS strony.

Inspektor Chrome pokazuje renderowane reguły stylu HTML i CSS

Gdy przesuwasz mysz po różnych wierszach HTML, inspektor Chrome podświetli je w górnym oknie. Jak widać, mamy wybrane menu nawigacyjne na zrzucie ekranu powyżej.

W oknie po prawej stronie zostaną również wyświetlone reguły CSS związane z podświetlonym elementem.

Możesz spróbować edytować CSS właśnie tam, aby zobaczyć, jak by to wyglądało. Spróbujmy zmienić kolor tła .navbar na # e8e5ce.

Gra CSS w Chrome Inspector

Zobaczysz, że kolor tła paska nawigacji zmieni się. Jeśli Ci się spodoba, możesz skopiować tę regułę CSS i wkleić plik style.css motywu podrzędnego.

.pasek nawigacyjny {
kolor tła: # e8e5ce;
}

Zapisz zmiany wprowadzone w pliku style.css, a następnie wyświetl podgląd swojej witryny.

Powtórz ten proces dla wszystkich elementów, które chcesz zmienić w arkuszu stylów motywu. Oto kompletny arkusz stylów, który stworzyliśmy dla motywu potomnego. Zapraszam do eksperymentowania i modyfikacji.

/ *
Nazwa motywu: Motyw podrzędny WPB
Motyw URI: https://www.wpbeginner.com
Opis: Motyw podrzędny Twenty Thirteen
Autor: WPBeginner
Autor URI: https://www.wpbeginner.com
Szablon: dwadzieścia trzynaście
Wersja: 1.0.0
* /

@import url ("../twentythirteen/style.css");

.Nazwa strony {
wypełnienie: 30px 0 30px;
}

.nagłówek witryny .home-link {
min-wysokość: 0px;
}

.pasek nawigacyjny {
kolor tła: # e8e5ce;
}

.widget {
kolor tła: # e8e5ce;
}
.stopka strony {
kolor tła: # d8cdc1;
}
.site-footer .sidebar-container {
kolor tła: # 533F2A
}

Edycja plików szablonów

Układ dwadzieścia trzynaście

Każdy motyw WordPress ma inny układ. Spójrzmy na układ motywu Dwadzieścia trzynaście. Masz nagłówek, menu nawigacyjne, pętlę treści, obszar widżetu stopki, obszar widżetu dodatkowego i stopkę.

Każda z tych sekcji jest obsługiwana przez różne pliki w folderze dwudziestym. Te pliki są nazywane szablonami.

Przez większość czasu szablony te są nazywane według obszaru, w którym są używane. Na przykład sekcja stopki jest zwykle obsługiwana przez plik footer.php, obszary nagłówka i nawigacji są obsługiwane przez plik header.php. Niektóre obszary, takie jak obszar zawartości, obsługiwane są przez wiele plików zwanych szablonami treści.

Najpierw musisz wybrać plik motywu, który chcesz zmodyfikować, a następnie skopiować go do motywu podrzędnego.

Na przykład chcesz usunąć link „powered by WordPress” z obszaru stopki i dodać tam informację o prawach autorskich. Po prostu skopiuj plik footer.php do motywu podrzędnego, a następnie otwórz go w zwykłym edytorze tekstowym, takim jak notatnik. Znajdź linie, które chcesz usunąć, i zastąp je własnymi. Lubię to:

<?php
/ **
* Szablon do wyświetlania stopki
*
* Zawiera zawartość stopki i zamknięcie elementów div #main i #page.
*
* @package WordPress
* @ subpackage Twenty_Thirteen
* @Od Twenty Thirteen 1.0
* /
?>

<?php get_sidebar (‘main’); ?>

© Copyright <?data echa php (Y); ?> <?php bloginfo („nazwa”); ?> Wszelkie prawa zastrzeżone.



<?php wp_footer (); ?>

W tym kodzie zastąpiliśmy Dwadzieścia Trzynaście kredytów informacją o prawach autorskich.

Rozwiązywanie problemów jest znacznie łatwiejsze podczas tworzenia motywów potomnych. 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.

Dodanie nowej funkcjonalności do motywu podrzędnego

Znajdziesz wiele samouczków WordPress z prośbą o skopiowanie i wklejenie fragmentu kodu w pliku functions.php motywu.

Dodanie fragmentów kodu do pliku functions.php motywu nadrzędnego oznacza, że ​​zmiany zostaną zastąpione za każdym razem, gdy pojawi się nowa aktualizacja motywu nadrzędnego. Dlatego zawsze zaleca się stosowanie motywu podrzędnego i dodawanie wszystkich niestandardowych fragmentów kodu do pliku functions.php motywu podrzędnego.

Utwórzmy nowy plik w folderze motywu dziecka i nazwij go functions.php. W tym przykładzie dodamy mały fragment kodu, który zmieni domyślny obraz nagłówka w nasz własny, niestandardowy obraz.

Utworzyliśmy już obraz nagłówka i miniaturę, edytując domyślny obraz nagłówka Twenty Thirteen. Następnie przesłaliśmy go do naszego motywu podrzędnego w folderze / images / headers /.

Następnie musimy powiedzieć WordPressowi, aby używał tego obrazu jako domyślnego obrazu nagłówka naszego motywu. Możemy to zrobić, dodając ten fragment kodu do pliku functions.php naszego motywu podrzędnego:

<?php
funkcja wpbdemo_custom_header_setup () {

add_theme_support (‘custom-header’, array (‘default-image’ => ‘% s / images / headers / circle-wpb.png’));

register_default_headers (tablica (
„karmel” => szyk(
„url” => ‘% 2 $ s / images / headers / circle-wpb.png’,
„thumbnail_url” => ‘% 2 $ s / images / headers / circle-wpb-thumbnail.png’,
„opis” => __ („Karmel”, „Nagłówek karmelu”, „dwadzieścia jeden”)
),
));

}
działanie dodatkowe („after_setup_theme”, „wpbdemo_custom_header_setup”);
?>

Teraz jeśli odwiedzisz Wygląd »Nagłówek, zobaczysz obraz, który dodaliśmy jako obraz domyślny.

Zmiana nagłówka motywu w motywie podrzędnym WordPress

Możesz dodać dowolny niestandardowy fragment kodu, który jest potrzebny w pliku functions.php motywu podrzędnego. Sprawdź te ponad 25 niezwykle przydatnych sztuczek dla pliku funkcji WordPress.

Rozwiązywanie problemów

Początkujący powinni popełniać błędy podczas pracy nad pierwszym motywem podrzędnym. Po prostu nie poddawaj się zbyt szybko. Sprawdź naszą listę najczęstszych błędów WordPress, aby znaleźć poprawkę.

Najczęstszym błędem, który można zobaczyć, jest prawdopodobnie błąd składniowy, który zwykle występuje, gdy brakuje czegoś w kodzie. Oto krótki przewodnik wyjaśniający, jak znaleźć i naprawić błąd składniowy w WordPress.

Ostateczny wynik

Prosty motyw podrzędny WordPress oparty na Twenty Thirteen

Pobierz motyw demonstracyjny

Możesz pobrać wynik końcowy naszego samouczka dotyczącego motywów podrzędnych WordPress, klikając tutaj. Pamiętaj, że jest to bardzo podstawowy motyw potomny oparty na Twenty Thirteen.

Inne tematy dziecięce na podstawie dwudziestu trzynastu

Oto kilka innych motywów potomnych WordPress opartych na Twenty Thirteen. Spójrz na nie i zobacz, jak twórcy motywów dostosowali Twenty Thirteen.

Holi

Holi - motyw potomny WordPress oparty na Twenty Thirteen

Kwiat Wiśni

Cherry Blossom - Twenty Thirteen Child Theme

2013 niebieski

2013 niebieski

Płaski portfel

Płaski portfel

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się tworzyć motyw podrzędny WordPress. Pamiętaj, że jest mnóstwo wsparcia dla tych, którzy go potrzebują.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me