Zaczynasz pracę z motywami potomnymi WordPress?

W tym samouczku dowiesz się, jak stworzyć motyw potomny WordPress. Jeśli jesteś nowy w WordPressie i nie wiesz, co to jest motyw potomny WordPressa, wszystko wyjaśnię.

Motywy WordPress to zbiór plików PHP, JavaScript i CSS. Krótko mówiąc, dzięki motywom WordPress możesz zmienić wygląd swojego bloga. Motywy WordPress mogą być bardzo potężne.

Premium WordPress motywy oferują wiele zaawansowanych funkcji i funkcjonalności. Dostępne są tysiące darmowych i premium motywów WordPress.

Możesz utworzyć motyw WordPress od podstaw lub możesz utworzyć motyw WordPress na podstawie innego motywu. Każda wersja WordPressa zawiera preinstalowane motywy WordPress, a jeśli nie podoba Ci się preinstalowany motyw WordPress, możesz zainstalować inny motyw WordPress lub utworzyć motyw podrzędny.

Dlaczego motywy potomne WordPress?

Tworzenie motywu potomnego WordPress oznacza, że ​​bierzesz istniejący motyw i tworzysz własny, oparty na nim motyw. Motyw potomny dziedziczy większość funkcji motywu oryginalnego, znanego jako motyw nadrzędny.

Motyw potomny oszczędza dużo pracy i czasu. Tworzenie motywu WordPress od podstaw zajmuje dużo czasu i czasami wymaga zaawansowanej znajomości HTML, CSS, PHP i jest wymagane. Dzięki motywom potomnym możesz wprowadzić wiele modyfikacji.

Jeśli nie jesteś zadowolony z dostosowania, opcji i funkcji zapewnianych przez motyw WordPress, którego używasz, możesz utworzyć motyw podrzędny. Nawet jeśli chcesz wprowadzić jedną zmianę w swoim motywie WordPress, powinieneś utworzyć motyw potomny lub użyć wtyczki edytora CSS.

Możesz edytować istniejące pliki motywów WordPress bezpośrednio, ale wtedy, gdy dokonasz aktualizacji, utracisz wszystkie swoje dostosowania. Dlatego potrzebujesz motywu potomnego.

Co można zrobić z motywami potomnymi WordPress

Dzięki motywom potomnym WordPress możesz dodać tyle funkcji, ile chcesz. To zależy od Ciebie. Jeśli chcesz zmienić rozmiar lub kolor czcionki nagłówków lub linków, możesz to zrobić bardzo łatwo za pomocą CSS.

Możesz dodawać nowe menu nawigacyjne, rejestrować nowe paski boczne, tworzyć niestandardowe strony produktów lub dodawać obsługę niestandardowych czcionek internetowych.

Co będziesz potrzebował:

Teraz wiesz, co to jest motyw potomny WordPress i dlaczego powinieneś tworzyć motywy potomne. Czas nauczyć się tworzyć motyw potomny WordPress.

Nie jest to wymagane, ale zaleca się skonfigurowanie lokalnej instalacji WordPressa do celów programistycznych i edukacyjnych. Dzięki lokalnej instalacji WordPressa możesz szybko i bardzo łatwo testować nowe wtyczki i motywy.

Istnieje wiele sposobów na lokalną instalację WordPressa, jeśli jesteś użytkownikiem MAC, możesz użyć MAMP, użytkownicy Windows mogą użyć instalatora XAMPP, WAMP lub Bitnami WordPress.

• Jak zainstalować WordPress z serwerem WAMP
• Jak zainstalować WordPress z MAMP
• Jak zainstalować WordPress z Bitnami Stack

Jeśli jesteś absolutnie początkującym, możesz pobrać i zainstalować stos Bitnami WordPress, aby stworzyć w pełni funkcjonalną witrynę WordPress na komputerze Mac lub PC.

Osobiście wolę serwer WAMP do lokalnego rozwoju. Instalacja WordPressa na WAMP nie jest trudna, możesz przeczytać samouczek lub obejrzeć filmy, aby dowiedzieć się, jak zainstalować WordPress za pomocą WAMP, XAMPP lub MAMP.

Będziesz także potrzebował edytora kodu do edycji plików motywów. Sublimetext, Brackets, Atom to kilka popularnych edytorów kodu.

Jak stworzyć motyw potomny WordPress?

Gdy Twoja lokalna witryna WordPress będzie gotowa, możemy rozpocząć tworzenie naszego motywu potomnego. Jeśli używasz serwera WAMP, przejdź do katalogu instalacyjnego WAMP> WWW> WordPress> wp-content> folder motywy.

W folderze motywów WordPress utwórz nowy folder i nazwij go dwadzieścia szesnaście-dziecko lub jak chcesz, np. InstantShift. Jako motyw nadrzędny użyjemy dwudziestu szesnastego motywu. Oznacza to, że nasz motyw potomny będzie oparty na motywie TwentySixteen.

Dla każdego motywu potomnego potrzebujemy dwóch plików.

• functions.php
• style.css

W folderze z motywami dwudziestu szesnastu potomków utwórz te dwa pliki. Teraz otwórz swoje pliki w edytorze tekstu, aby uzyskać szybki dostęp, możesz przeciągnąć folder z dwudziestoma szesnastoma dziećmi na pasku bocznym edytora tekstu. Otwórz plik style.css i dodaj następujący kod.

[css]
/*
Nazwa motywu: InstantShift
Opis: Dwadzieścia szesnaście motywów potomnych dla InstantShift.
Autor: Tahir Taous
URI autora: http://www.instantshift.com
Szablon: dwadzieścia szesnaście
Wersja: 0.1
*/
[/css]

Powyższy znacznik jest wymagany dla motywu podrzędnego. Bez arkusza stylów z niezbędnymi znacznikami WordPress nie będzie w stanie rozpoznać Twojego motywu podrzędnego.

Myślę, że możesz wszystko zrozumieć. Nie ma nic do wyjaśnienia. Moja nazwa motywu potomnego to InstantShift, ale możesz nazwać swoje dziecko, jak chcesz. Najważniejszą rzeczą jest Szablon: dwadzieścia szesnaście . To jest nazwa naszego motywu rodzicielskiego. Upewnij się, że dobrze to przeliterowałeś.

Jeśli używasz innego motywu jako motywu nadrzędnego, po prostu zmień Szablon: dwadzieścia szesnaście na Szablon: nazwa-motywu-nadrzędnego .

W nagłówku arkusza stylów możemy również dodać więcej informacji, ale nie jest to wymagane. Teraz zaloguj się do swojego pulpitu WordPress. Przejdź do Wygląd > Motywy. Powinieneś zobaczyć motyw InstantShift bez zrzutu ekranu, ponieważ nie dodaliśmy żadnego zrzutu ekranu dla naszego motywu podrzędnego.

Najedź myszą na motyw InstantShift i kliknij przycisk Szczegóły motywu. Oto zrzut ekranu mojego motywu potomnego.

Jeśli widzisz ten ekran, oznacza to, że motyw potomny jest gotowy. Teraz możemy zacząć dostosowywać nasz motyw. Aktywuj ten nowy motyw i odwiedź frontend swojego bloga. Zobaczysz całą zawartość bez żadnego stylu.

Nie martw się. To normalne. Nie możemy zobaczyć żadnych stylów, ponieważ nie zawarliśmy pliku arkusza stylów motywów nadrzędnych. upewnijmy się, że arkusz stylów naszego motywu potomnego działa. W pliku style.css motywu potomnego dodaj następujący kod.

[css]
ciało{
kolor tła: #E7F5FB;
}
[/css]

zapisz plik style.css, odśwież stronę główną lokalnej witryny WordPress i powinieneś zobaczyć jasnoniebieski kolor tła.

Rejestrowanie arkusza stylów motywu nadrzędnego

Nie chcemy tworzyć wszystkich stylów od zera. Dodamy tylko kilka nowych stylów z plikiem style.css motywu potomnego. Teraz dodajmy plik stye.css motywu nadrzędnego w naszym motywie potomnym.

Otwórz plik functions.php i dodaj następujący kod w pliku functions.php motywu potomnego.

[php]
<?php

// Style motywów nadrzędnych //
// https://codex.wordpress.org/Child_Themes //

function theme_enqueue_styles() {
$parent_style = 'rodzic-styl';
ks29so_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
ks29so_enqueue_style( 'styl-dziecko',
get_stylesheet_directory_uri() . '/styl.css',
tablica ($styl_nadrzędny)
);
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );
[/php]

Teraz, jeśli przeładujesz lokalną witrynę WordPress, zobaczysz normalny motyw ze wszystkimi stylami TwentySixteen.

To wszystko. Pomyślnie utworzyłeś swój pierwszy motyw potomny. Dodałeś również nowy kolor tła dla ciała.

Ale nie stworzyliśmy naszego motywu potomnego, aby po prostu zmienić tło dla ciała. Zacznijmy dostosowywać nasz motyw.

Zastępowanie stylów motywów nadrzędnych

Dostosowywanie nagłówka:

Domyślnie nagłówek motywu Twenty Sixteen ma dużo dopełnienia. Zmieńmy wypełnienie i dodajmy nowy kolor tła dla nagłówka witryny. Dodaj następujący kod do pliku style.css motywu podrzędnego, zapisz plik i ponownie załaduj interfejs witryny, aby zobaczyć zmiany.

[css]
.nagłówek witryny {
wypełnienie: 0 4,5455%;
tło: #CDDC39;
margines-dolny: 2em;
}
[/css]

Tutaj możesz zobaczyć zrzut ekranu nagłówka witryny przed i po dodaniu naszych nowych stylów.

Dostosowywanie nawigacji głównej

Teraz zmieńmy kolor tła dla głównych elementów menu nawigacyjnego. Lubię używać narzędzi programistycznych Chrome do edytowania moich stylów CSS.

Po edycji stron internetowych za pomocą narzędzi programistycznych Chrome możesz skopiować nowy kod z narzędzi programistycznych Chrome i wkleić go do pliku style.css motywu podrzędnego.

Otwórz plik style.css motywu potomnego i dodaj do niego następujący kod.

[css]
#menu-header &gt; ja {
tło: rgba(185, 202, 22, 0,97);
margines-prawy: 4px !ważne;
promień obramowania: 5px;
}
[/css]

Tutaj możesz zobaczyć zrzut ekranu naszego nowego nagłówka. Bardzo łatwo dostosowaliśmy nasz motyw za pomocą motywu potomnego.

Ostatnie słowa

Teraz wiesz, jak tworzyć motywy potomne WordPress. To bardzo proste i łatwe. Dzięki podstawowej wiedzy na temat HTML i CSS możesz całkowicie zmienić wygląd swojej witryny.

Możesz także dodać nowe menu nawigacyjne, obszary widżetów, obsługę nowych czcionek we itp. z motywem potomnym. Ale nie możemy opisać wszystkiego w jednym artykule.

Jeśli chcesz nauczyć się tworzenia motywów WordPress, powinieneś zacząć od motywów potomnych WordPress. Poznaj podstawy dostosowywania motywów.