Jak stworzyć motyw potomny w WordPress

Dostosowywanie witryny WordPress jest dość prostym procesem, ale kryje w sobie również pewne ryzyko. Zazwyczaj osoby, które nie są zbyt zaznajomione ze sposobem działania motywów WordPress, zaczynają bezpośrednio dostosowywać główny motyw witryny zamiast tworzyć motyw podrzędny .

Czym jest motyw potomny?

Krótko mówiąc, motyw potomny jest zastępczym miejscem zastępczym głównego motywu. Działa jednocześnie i dokładnie w taki sam sposób, jak motyw główny, i możesz wprowadzać tam wszystkie dostosowania i modyfikacje, zamiast robić je bezpośrednio w rdzeniu głównego motywu.

Dlaczego nie edytować motywu bezpośrednio?

Bezpośrednie dostosowywanie motywu wiąże się z pewnym ryzykiem. Jeśli wprowadzisz zmiany w kodzie w motywie innej firmy, przy następnej aktualizacji zmiany te zostaną utracone. Nie tylko Twoja witryna powróci do pierwotnego stanu, ale cała Twoja praca zniknie. Istnieją trzy główne sposoby dostosowania witryny:

Jak dostosować WordPressa?

Bezpośrednia edycja motywu

Jeśli Twoja witryna korzysta z niestandardowego motywu WordPress, opracowanego specjalnie dla Ciebie, możesz go bezpiecznie edytować bez ryzyka utraty wszystkich zmian przy następnej aktualizacji motywu.

Jeśli Ty lub programista pracujący nad Twoją witryną wprowadzisz jakiekolwiek przyszłe zmiany, będziesz edytować wersję dostosowaną, a nie oryginalną przed zmianami.

To oczywiście nie oznacza, że ​​nie ma żadnego ryzyka. Jeśli nie masz doświadczenia w kodowaniu, bezpieczniejszym sposobem może być stworzenie motywu potomnego.

Jeśli zdecydujesz się edytować motyw bezpośrednio, wykonaj kopię zapasową oryginalnego motywu i nie edytuj go w działającej witrynie. Zamiast tego możesz po prostu użyć witryny testowej lub deweloperskiej. Użyj także kontroli wersji, aby śledzić wszystkie wprowadzone do tej pory zmiany.

Jeśli pracujesz z motywem innej firmy, nigdy nie edytuj go bezpośrednio, ale zamiast tego utwórz motyw podrzędny lub użyj wtyczki.

Zainstaluj wtyczkę

Drugą opcją podczas dostosowywania WordPressa jest użycie kodu lub zainstalowanie wtyczki.

Jeśli jesteś bardziej zainteresowany bardziej funkcjonalnymi zmianami, prawdopodobnie najlepszym sposobem na to jest wtyczka.

Nie ma potrzeby, aby wtyczki były zbyt skomplikowane. Jeśli wszystko, czego potrzebujesz, to dodać dodatkowy kod do pliku functions.php , możesz utworzyć prostą wtyczkę, aby dodać kilka linijek kodu do swojej witryny. Dobrym przykładem jest zarejestrowanie niestandardowego typu wpisu.

Dodanie niestandardowego typu postu jest zmianą funkcjonalną w witrynie, a nie zmianą projektową. Jeśli zdecydujesz się zmienić motywy w przyszłości, nie chcesz stracić wszystkich typów postów i postów, które utworzyłeś. Zamiast tego zainstaluj lub utwórz wtyczkę.

W niektórych przypadkach możesz znaleźć już istniejącą wtyczkę, która spełnia Twoje potrzeby, ale czasami będziesz musiał sam ją zakodować.

Jeśli zastanawiasz się, czy powinieneś dostosować motyw, czy utworzyć wtyczkę, zadaj sobie następujące pytania: Czy gdybym chciał dokonać przyszłych zmian w projekcie mojej witryny i zainstalować nowy motyw, czy chciałbym, aby zmiany pozostały? Jeśli odpowiedź brzmi tak, to zmiana, którą chcesz, jest funkcjonalna i nie jest związana z projektem, co oznacza, że ​​należy to zrobić za pomocą wtyczki.

Motywy potomne

Trzecią dostępną opcją podczas dostosowywania motywu WordPress jest utworzenie motywu podrzędnego.

Niektóre z przypadków, w których użyjesz motywu potomnego, to:

• Interesuje Cię wprowadzanie zmian dotyczących funkcjonalności, a nie designu
• Witryna korzysta z motywu innej firmy lub motywu, którego chcesz ponownie użyć w swoim obecnym projekcie.
• Rozsądnie jest nie edytować aktualnego motywu w przypadku wystąpienia problemów.
• Na Twojej stronie działa motyw, który ma być motywem nadrzędnym. Dostępne są motywy z wieloma opcjami dostosowywania.

Dlatego motywy potomne są bezpieczną i skuteczną metodą dostosowywania witryny.

Czym jest motyw potomny WordPress?

Motyw potomny to w zasadzie motyw, który współpracuje z innym motywem, określanym jako motyw nadrzędny.

Zawiera kilka szczegółowych wskazówek, które informują WordPress, który jest motywem potomnym, a który motywem nadrzędnym. WordPress następnie pobiera kod z motywu nadrzędnego i nadpisuje go kodem z motywu potomnego.

Dlaczego powinieneś używać motywu potomnego

Ponieważ motyw potomny przejmuje cechy motywu nadrzędnego lub motywu głównego, kod można dostosować bez ingerencji w funkcjonalność oryginału. W ten sposób wszystkie zmiany zostaną zapisane po aktualizacji.

Innym dobrym powodem używania motywu potomnego jest to, że masz opcję bezpieczną w przypadku awarii na wypadek, gdybyś kiedykolwiek zepsuł wprowadzone zmiany. Możesz także łatwo śledzić wszystkie zmiany, ponieważ pliki są oddzielone od motywu nadrzędnego.

Jak działa motyw potomny?

Jak wspomniano powyżej, motyw potomny jest przechowywany oddzielnie od motywu nadrzędnego, z własnymi plikami functions.php i style.css . W razie potrzeby można dodać inne, ale te dwa pliki stanowią minimum wymagane do prawidłowego działania motywu potomnego.

Za pomocą odpowiednich plików .php i .css . Możesz modyfikować w zasadzie wszystko, od parametrów układu, stylizacji, po rzeczywiste kodowanie i skrypty używane przez motyw potomny, nawet jeśli wspomniane atrybuty nie są obecne w motywie nadrzędnym.

Gdy użytkownik odwiedza Twoją witrynę, WordPress najpierw ładuje motyw podrzędny, a następnie, wraz z niektórymi częściami z motywu głównego, uzupełnia brakujące style i funkcje.

Tworzenie motywu potomnego

W tym przykładzie użyjemy Twenty Seventeen jako motywu bazowego.

1. Przejdź do hPanel i kliknij Menedżer plików
2. Teraz przejdź do public_html – wp-content – ​​motyw
3. Utwórz nowy folder , klikając ikonę górnego menu
4. Wpisz nazwę motywu podrzędnego i kliknij Utwórz . Zalecamy użycie nazwy motywu nadrzędnego i sufiksu -child .
5. Gdy znajdziesz się w folderze, utwórz plik style.css . Dodaj następujący kod, aby wypełnić jego zawartość:

 /* Nazwa motywu: Twenty Seventeen Child Theme URL: http://twojadomena.comOpis: Twenty Seventeen Child Theme Autor: Twoje imięAdres URL autora: http://twojadomena.comSzablon: dwadzieścia siedemnaście Wersja: 1.0.0 Domena tekstu: dwadzieścia siedemnaście-dzieci

6. Zmień odpowiednio wartości. Szablon jest najważniejszym polem, ponieważ określa dla WordPress, który motyw nadrzędny jest oparty na motywie potomnym. Kliknij Zapisz i zamknij.

7. Utwórz w folderze plik functions.php, po czym skopiuj poniższy kod i wklej go do pustego pliku:

 <!--?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?-->

8. Teraz przejdź do swojej witryny i wejdź w Wygląd – Motyw. Aktywuj motyw potomny – zauważysz, że wygląda tak samo jak motyw nadrzędny.

Dostosowywanie motywu potomnego

Jeśli chcesz spersonalizować motyw potomny, potrzebna jest podstawowa znajomość reguł CSS. Musisz także wiedzieć, jak sprawdzać elementy, aby zlokalizować ich kod CSS i klasę, do której są przypisane.

Kliknij Dostosuj – Dodatkowy CSS z aktywnego motywu podrzędnego.

Zmień kolor tła

Zmieniając kolor tła motywu potomnego WordPress, wstaw następujące informacje:

 .site-content-contain {background-color: #DEF0F5;pozycja: względna;}

Wartość, która znajduje się obok background-color: odpowiada kodowi szesnastkowemu wybranego koloru. Na przykład przy zmianie z białego na niebieski otrzymasz następujący wynik:

Zmiana koloru paska bocznego

Osiągnij to za pomocą następującego kodu CSS:

 .widget {tło: #B9EBFA; dopełnienie: 25px;

Powinieneś otrzymać ten wynik:

Zmiana koloru, rozmiaru i rodzaju czcionki

Wstaw następujący kod, jeśli chcesz dokonać zmian w rozmiarze, kolorze i typie czcionki:

 p {kolor: turkusowy;}p {rodzina czcionek: Georgia;rozmiar czcionki: 18px;}

Litera P oznacza akapit. Reguła zmieniła wygląd czcionek na podstawie określonej wartości.

Jeśli chcesz wprowadzić zmiany w innych częściach związanych z tekstem, takich jak nagłówek lub tytuł, najpierw sprawdź element, aby zobaczyć jego parametry CSS. W naszym przypadku zmienimy kolor czcionki tytułu.

1. Kliknij tekst prawym przyciskiem myszy i wybierz Sprawdź. Znajdź link stylu CSS i otwórz go.

2. Za pomocą CTRL+F zlokalizuj dokładnie szukaną część, po czym skopiuj kod do zakładki Dodatkowe CSS. Zmień potrzebne wartości.

To samo można zrobić z dowolnym innym elementem, w którym chcesz wprowadzić zmiany.

Zmiana układu postów i stron

Pliki szablonów dają możliwość tworzenia własnych układów poprzez unieważnienie domyślnych.

Nowy szablon musi mieć taką samą nazwę pliku i dokładnie w folderze, który odpowiada oryginałowi.

Główne pliki szablonów znajdują się w głównym folderze motywu. Na przykład szablon dla pojedynczego posta to single.php, a szablonem dla stron jest page.php.

W przypadku motywu Twenty Seventeen szablony są podzielone na części-szablonów, do których odwołuje się główny szablon za pomocą funkcji get_template_part(). Jeśli chcesz edytować page.php, zacznij od znalezienia części szablonu, aby sprawdzić, czy istnieją części, które wymagają edycji. W naszym przypadku mamy linię 28, która brzmi:

 get_template_part( 'części-szablonu/strona/treść', 'strona' );.

Template-parts/pages/ to ścieżka folderu. Z drugiej strony „treść” odnosi się do znaku przed myślnikiem, a „strona” po myślniku.

Tworzą one ścieżkę wp-content/themes/twentyseventeen/template-parts/page/content-page.php.

Jeśli podążasz za tą strukturą, podczas zmiany układu content-page.php, po prostu skopiuj go do folderu motywu potomnego i wklej tutaj: wp-content/themes/twentyseventeen-child/template-parts/page/content-page. php.

Dodawanie lub usuwanie funkcji

Jedną z zalet korzystania z motywu potomnego jest możliwość posiadania oddzielnego pliku functions.php, który podobnie jak wtyczki, służy do dodawania lub usuwania niektórych funkcji podczas korzystania z kodu PHP.

Następujące wiersze kodu usuną funkcje dostępne po kliknięciu prawym przyciskiem myszy w motywie:

 function twoja_funkcja() {?><script>jQuery(dokument).ready(function(){jQuery(dokument).bind("menu kontekstowe",function(e){return false;});});</script> <!--?php}add_action('wp_footer', 'twoja_funkcja');

Wniosek

Motywy potomne dla witryn WordPress oferują sposób na stworzenie nowego projektu od podstaw na podstawie już istniejącego motywu nadrzędnego bez naruszania jego podstawowej funkcji. Za pomocą prostego kodowania i zarządzania katalogami możesz wprowadzać dowolne zmiany w motywie potomnym, co daje mnóstwo opcji do projektowania.

Nie wahaj się rzucić komentarza poniżej i daj nam swoją myśl!