Jak utworzyć motyw potomny w WordPress

Dostosowywanie istniejącego motywu WordPress jest powszechną potrzebą, ale bezpośrednia edycja motywu może powodować problemy.

Jeśli motyw zostanie zaktualizowany, Twoje zmiany zostaną nadpisane! Lepszym sposobem jest utworzenie motywu podrzędnego odziedziczonego z motywu nadrzędnego.

Motywy podrzędne umożliwiają bezpieczne modyfikowanie i rozszerzanie motywu.

W tym szczegółowym przewodniku omówimy tworzenie motywu podrzędnego w WordPress. Dowiesz się, do czego służą motywy potomne, jak je skonfigurować i jak dostosować, aby zastąpić projekt i funkcjonalność motywu nadrzędnego.

Za pomocą kilku metod możesz zbudować motyw podrzędny i rozpocząć stosowanie zmian bez dotykania plików motywu nadrzędnego.

Zatem bez zbędnych ceregieli zaczynajmy.

1 Co to jest motyw dziecięcy?

Motyw podrzędny to motyw WordPress, który dziedziczy funkcjonalność z motywu nadrzędnego. Pozwala modyfikować lub dodawać nowe funkcje bez zmiany nadrzędnych plików motywu.

Jest to przydatne, ponieważ jeśli bezpośrednio zmodyfikujesz pliki motywu nadrzędnego, zmiany zostaną utracone po aktualizacji motywu.

Dzięki motywowi podrzędnemu możesz wprowadzać zmiany bez wpływu na motyw nadrzędny i otrzymywać aktualizacje bez utraty modyfikacji.

W tej sekcji zauważysz, że wspominaliśmy o motywie nadrzędnym, ale co to właściwie jest?

2 Co to jest motyw nadrzędny?

Motyw nadrzędny to wstępnie zaprojektowany motyw, który służy jako podstawa witryny WordPress. Zapewnia podstawową strukturę, układ i funkcjonalność witryny.

Motyw nadrzędny można dostosować do potrzeb konkretnej witryny internetowej, dodając lub modyfikując jego funkcje.

Korzystanie z motywu nadrzędnego może zaoszczędzić czas i wysiłek podczas tworzenia witryny internetowej, zapewniając punkt wyjścia dla projektu i funkcjonalności.

W tym momencie możemy powiedzieć, że wszystkie motywy WordPress są technicznie motywami nadrzędnymi, chyba że zostały specjalnie zaprojektowane jako motyw podrzędny.

Oto kluczowa kwestia do zapamiętania: Motyw nadrzędny może istnieć i działać niezależnie, podczas gdy motyw podrzędny zawsze opiera się na motywie nadrzędnym , aby zapewnić podstawową funkcjonalność i funkcje.

3 Dlaczego warto używać motywu podrzędnego?

Istnieje kilka kluczowych powodów, dla których warto używać motywu podrzędnego zamiast bezpośrednio modyfikować motyw:

• Utworzenie motywu podrzędnego chroni Twoje modyfikacje przed nadpisaniem podczas aktualizacji motywu nadrzędnego.
• Oddziela pliki motywów nadrzędnych i podrzędnych. Pomaga to uniknąć nieporozumień, ponieważ pliki są uporządkowane.
• Wiele motywów podrzędnych można używać do różnych celów, takich jak zmiana stylów lub funkcjonalności. Należy jednak pamiętać, że witryna może mieć w danym momencie tylko jeden aktywny motyw.
• To także świetny sposób na rozpoczęcie tworzenia nowego, pełnego motywu WordPress.

Uwaga: Rozległe dostosowania motywu podrzędnego mogą prowadzić do problemów z zarządzaniem. W przypadku większych projektów utworzenie motywu pełnego/nadrzędnego w oparciu o motyw oryginalny jest często lepsze niż dalsze modyfikowanie motywu potomnego.

4 wymagania wstępne dotyczące tworzenia motywu podrzędnego

Przed utworzeniem motywu podrzędnego ważne jest, aby spełnić pewne wymagania.

Po pierwsze, potrzebujesz działającej instalacji WordPress i motywu nadrzędnego, dla którego chcesz utworzyć motyw podrzędny.

Pomocna jest również znajomość HTML, CSS i PHP, ponieważ będziesz zmieniać kod, aby dostosować motyw potomny.

Powinieneś także mieć możliwość kopiowania i wklejania fragmentów kodu z innych źródeł.

Zaleca się ćwiczenie w lokalnym środowisku programistycznym, korzystając z fikcyjnych treści lub przenosząc aktywną witrynę WordPress na serwer lokalny w celach testowych. Dzięki temu możesz przetestować motyw podrzędny przed wdrożeniem go w działającej witrynie.

Na koniec ważne jest, aby mieć kopię zapasową witryny na wypadek, gdyby coś poszło nie tak w trakcie procesu.

Po ustaleniu wszystkich tych wymagań możesz utworzyć motyw potomny. Wszystko, co musisz zrobić, to postępować zgodnie z procesem konfiguracji motywu podrzędnego opisanym w tym przewodniku.

Ale w tym przewodniku użyjemy domyślnego motywu WordPress Twenty Twenty-four.

5 Tworzenie motywu potomnego w WordPress

Teraz, gdy rozumiesz koncepcję motywów potomnych, przejdźmy do tworzenia motywu potomnego w WordPress.

Przyjrzymy się dwóm powszechnym metodom do wyboru, dostosowanym do różnych poziomów komfortu:

5.1 Tworzenie motywu potomnego za pomocą kodu

Najpierw uzyskaj dostęp do instalacji WordPressa za pośrednictwem FTP lub menedżera plików udostępnionego w panelu sterowania hostingu. Przejdź do katalogu wp-content/themes i utwórz nowy folder z unikalną nazwą motywu potomnego.

W tym samouczku użyjemy nazwy „mtschild” dla folderu motywu podrzędnego.

Katalog ten pełni rolę głównego miejsca przechowywania komponentów motywu podrzędnego.

W folderze motywu podrzędnego utwórz nowy plik o nazwie style.css . Ten plik będzie zawierał niezbędne szczegóły dotyczące rozpoznawania i aktywowania motywu potomnego. Otwórz plik style.css i wstaw kolejny kod:

 Theme Name: MTS Child Theme Theme URI: https://www.mythemeshop.com/ Description: Child theme for the Twenty Twenty-Four Theme Author: MyThemeShop Author URI: https://www.mythemeshop.com Template: twentytwentyfour Version: 1.0.0 Text Domain: mtschild

Ten kod powiadamia WordPress, że motyw podrzędny rozszerza określony motyw nadrzędny. Zastąp „Motyw potomny MTS” preferowaną nazwą motywu potomnego, a pole szablonu nazwą folderu motywu nadrzędnego.

Następny krok polega na upewnieniu się, że motyw podrzędny dziedziczy style z motywu nadrzędnego. Aby to osiągnąć, musisz umieścić w kolejce arkusz stylów motywu nadrzędnego.

Aby to zrobić, uzyskaj dostęp do plikufunctions.php w katalogu motywu podrzędnego (utwórz go, jeśli go nie ma) i zaimplementuj jeden z poniższych kodów.

Jeśli motyw nadrzędny nie ładuje żadnego arkusza stylów, użyj poniższego kodu, aby załadować plik style.css za pośrednictwem funkcji.php:

 <?php add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' ); function mts_child_theme_enqueue_styles() { wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() ); }

Ten kod może również działać, jeśli motyw nadrzędny ładuje wyłącznie swój arkusz stylów.

Jeśli jednak motyw nadrzędny ładuje wyłącznie arkusz stylów aktywnego motywu, musisz dodatkowo umieścić w kolejce arkusz stylów motywu nadrzędnego za pomocą functions.php , korzystając z poniższego kodu:

 <?php add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' ); function mts_child_theme_enqueue_styles() { wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) ); }

W przypadku motywu Twenty Twenty-Four użytego w tym przewodniku zastosujemy pierwszy kod, ponieważ motyw nie ładuje w ogóle żadnego arkusza stylów.

Pamiętaj, aby podczas dodawania kodu zacząć od tagu <?php . Zmodyfikuj te kody zgodnie ze swoimi wymaganiami, szczególnie tam, gdzie używana jest nazwa motywu mts_child_theme .

Po wykonaniu powyższych kroków zaloguj się ponownie do panelu WordPress i przejdź do Wygląd → Motywy . Najedź kursorem na motyw potomny i kliknij przycisk Aktywuj .

Ponieważ nie wprowadziłeś jeszcze żadnych zmian w motywie podrzędnym, Twoja witryna internetowa zachowa funkcjonalność i wygląd motywu nadrzędnego.

Pomożemy Ci jednak dostosować motyw potomny, aby przygotować Cię na dalsze modyfikacje.

Jest to ręczny proces tworzenia motywu podrzędnego przy użyciu kodu w WordPress. Jeśli ta metoda wydaje się skomplikowana, możesz zapoznać się z podejściem do wtyczek, które omówimy w następnej sekcji.

5.2 Tworzenie motywu potomnego za pomocą wtyczki

Tworzenie motywu podrzędnego za pomocą wtyczki jest proste i łatwe. Najpierw musisz zainstalować i aktywować wtyczkę Child Theme Configurator. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Po aktywowaniu wtyczki przejdź do panelu WordPress i przejdź do Narzędzia → Motywy potomne .

Na karcie Wybierz motyw nadrzędny wybierz motyw nadrzędny z menu rozwijanego umożliwiającego utworzenie motywu podrzędnego. Zazwyczaj aktywny motyw w Twojej witrynie jest wstępnie wybrany.

Następnie kliknij przycisk Analizuj . Wtyczka sprawdzi wybrany motyw nadrzędny, aby określić, czy może wygenerować motyw podrzędny i czy do wyglądu wymaga pliku style.css.

Następnie nadaj nazwę motywowi podrzędnemu. Możesz dostosować arkusz stylów, funkcje i inne konfiguracje według własnych upodobań.

Jednakże nie zmieniaj ustawień aż dojdziesz do sekcji 7.

W sekcji 7 kliknij przycisk Kliknij, aby edytować atrybuty motywu podrzędnego .

Stamtąd możesz wprowadzić szczegóły motywu potomnego.

Podczas ręcznego tworzenia motywu podrzędnego możesz utracić menu i widżety motywu nadrzędnego.

Jednakże wtyczka Child Theme Configurator może przenieść je z motywu nadrzędnego do motywu podrzędnego.

Jeśli chcesz kontynuować, zaznacz pole wyboru w Sekcji 8. Na koniec kliknij przycisk Utwórz nowy motyw potomny , aby utworzyć motyw potomny.

Po zakończeniu wtyczka utworzy folder dla motywu podrzędnego, zawierający niezbędne pliki style.css ifunctions.php do przyszłego dostosowania.

Przed aktywacją motywu wyświetl jego podgląd, klikając link „Wyświetl podgląd motywu podrzędnego” u góry ekranu, aby sprawdzić jego wygląd i upewnić się, że nie wpływa to negatywnie na Twoją witrynę.

Po sprawdzeniu, że wszystko działa poprawnie, kliknij przycisk Aktywuj i publikuj . Dzięki temu motyw potomny będzie widoczny w Twojej witrynie.

Po aktywowaniu motywu podrzędnego w swojej witrynie nadszedł czas, aby rozpocząć jego dostosowywanie. Omówimy to w następnej sekcji.

6 Jak dostosować motyw dziecięcy

Zanim zaczniesz dostosowywać, określ elementy swojej witryny, które chcesz zmodyfikować, takie jak style, szablony, funkcje, obszary widżetów lub niestandardowe szablony stron.

Posiadanie jasnej wizji celów usprawni proces dostosowywania. Istnieją różne metody dostosowywania motywu podrzędnego, w tym:

6.1 Dostosowywanie stylów za pomocą CSS

Plik style.css motywu podrzędnego służy jako platforma do poprawiania wyglądu Twojej witryny. Tutaj możesz wstawić niestandardowe reguły CSS, aby zmienić lub ulepszyć style motywu nadrzędnego.

Przed kontynuowaniem konieczna jest podstawowa znajomość HTML i CSS.

Możesz efektywnie wykorzystać narzędzie Inspect w przeglądarce lub bezpośrednio skopiować style z pliku style.css motywu nadrzędnego.

Aby uzyskać dostęp do kodów CSS strony internetowej za pomocą przeglądarki, po prostu kliknij stronę prawym przyciskiem myszy i wybierz opcję Sprawdź z wyświetlonych opcji. To narzędzie wyświetla kody stylów CSS, umożliwiając wskazanie elementów, które chcesz zmodyfikować.

Po kliknięciu prawym przyciskiem myszy i wybraniu opcji „Sprawdź” ekran przeglądarki rozwidla się, wyświetlając kod HTML i CSS strony.

W zależności od ustawień przeglądarki szczegóły HTML i CSS mogą pojawić się po prawej stronie lub na dole ekranu.

Gdy najedziesz kursorem na różne linie HTML, inspektor Chrome podświetli je na karcie Elementy i wyświetli odpowiednie reguły CSS powiązane z podświetlonym elementem.

Możesz eksperymentować, edytując bezpośrednio kod CSS, aby wyświetlić podgląd jego wyglądu. Na przykład, jeśli chcesz zmienić kolor tła domyślnej strony głównej motywu Twenty Twenty-Four z #f9f9f9 na #6841ea.

Po dostosowaniu koloru tła w inspektorze przeglądarki zmiana jest tymczasowa. Aby zachować tę regułę na stałe, musisz przenieść tę regułę CSS do pliku style.css motywu podrzędnego:

 body { background-color: #6841ea; }

Po wprowadzeniu kodu pamiętaj o zapisaniu modyfikacji. Możesz powtórzyć ten proces dla dowolnego innego elementu strony internetowej, który chcesz dostosować.

Załóżmy na przykład, że chcesz zmodyfikować kolory w swojej witrynie. Możemy dostarczyć Ci kody CSS, które Ci to umożliwią.

Aby zmienić kolor tekstu na ciemnoszary, dodaj następujący kod do swojego pliku CSS:

 body { color: #3b3b3b; }

Aby zmienić kolor nagłówka na niebieski, użyj następującego kodu:

 h1, h2, h3 { color: #007bff; }

Jako kolor tła nagłówka użyj następującego kodu:

 #header { background-color: #f5f5f5; } /* Light grey background for header */

W obszarze zawartości użyj tego kodu, aby ustawić kolor tła na biały:

 .site-container { background-color: #fff; }

Możesz skopiować te style CSS do pliku style.css motywu podrzędnego albo poprzez katalog motywów podrzędnych swojej witryny, albo z pulpitu nawigacyjnego WordPress.

Kiedy dodasz swój kod CSS, będzie on przypominał ten format:

Po zapisaniu zmian spróbuj odświeżyć stronę swojej witryny. Jeśli zmiany nie zostaną wyświetlone, wyczyść pamięć podręczną przeglądarki, aby mieć pewność, że przeglądasz najnowszą wersję CSS.

6.2 Zastępowanie plików szablonów

Podczas gdy dostosowywanie CSS kontroluje wygląd Twojej witryny, motywy podrzędne oferują bardziej niezawodną funkcję: zastępowanie plików szablonów.

Ta zaawansowana funkcja umożliwia zmianę układu i struktury stron i elementów witryny internetowej. Należy jednak zachować ostrożność, ponieważ wymaga to głębszego zrozumienia szablonów WordPress, HTML i PHP.

Aby zastąpić szablon, skopiuj oryginalny plik .php z folderu motywu nadrzędnego do motywu podrzędnego, zachowując dokładną nazwę pliku.

Na przykład, aby zastąpić plik header.php, musisz skopiować plik header.php z katalogu /parent-theme/ i wkleić go jako header.php w katalogu /child-theme/.

Możesz teraz edytować plik header.php w motywie potomnym.

Niektóre typowe szablony do zastąpienia:

• header.php – Zawiera tag <header> i branding witryny, nawigację itp.
• footer.php – Tag zamykający <footer> i znaczniki.
• page.php – Domyślny szablon stron.
• single.php – Szablon używany dla pojedynczych postów.
• indeks.php – Szablon strony głównej.

Na przykład możesz zmodyfikować plik footer.php, wyświetlając niestandardowe prawa autorskie do swojej witryny:

 <!-- Modified child footer.php --> <footer> <p>&copy; <?php echo date('Y'); ?> My Company</p> <?php if ( is_active_sidebar('footer-1') ) : ?> <?php dynamic_sidebar('footer-1'); ?> <?php endif; ?> </footer>

6.3 Rozszerzanie funkcjonalności

Plik functions.php w motywie potomnym umożliwia wprowadzenie nowych funkcji PHP, haków, filtrów i kodu w celu rozszerzenia domyślnych funkcji motywu nadrzędnego.

Ta elastyczność umożliwia rejestrowanie niestandardowych typów postów, dołączanie niestandardowych widżetów, tworzenie nowych krótkich kodów, kolejkowanie dodatkowych skryptów i wiele więcej.

Na przykład, jeśli chcesz mieć w swojej witrynie WordPress wydzieloną sekcję na niestandardowe widżety, użyj poniższego fragmentu kodu, aby utworzyć obszar widżetów o nazwie „Obszar niestandardowych widżetów”:

 function register_custom_widget() { register_sidebar( array( 'name' => 'Custom Widget Area', 'id' => 'custom_widget_area', 'description' => 'Add widgets here to appear in the custom widget area', 'before_widget' => '<div class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'register_custom_widget' );

Po zapisaniu tego kodu w plikufunctions.php motywu potomnego, wróć do swojej witryny WordPress i wejdź do Wygląd → Widżety . Zauważysz, że dostępny jest widżet „Niestandardowy obszar widżetów”.

7 najczęściej zadawanych pytań

8 Wniosek

Tworzenie motywu podrzędnego w WordPressie to cenna umiejętność, która może pomóc w dostosowaniu witryny internetowej bez ryzyka utraty zmian podczas aktualizacji motywu. Choć początkowo może się to wydawać zniechęcające, nie poddawaj się zbyt szybko, jeśli popełnisz błędy.

Najczęstsze błędy, jakie możesz napotkać, to błędy składniowe spowodowane brakiem jakiegoś elementu w kodzie. Jeśli coś pójdzie nie tak, zawsze możesz zacząć od nowa.

Na przykład, jeśli przypadkowo usuniesz coś, czego wymaga motyw nadrzędny, możesz po prostu usunąć plik z motywu podrzędnego i zacząć od nowa.

Pamiętaj, że przy odrobinie wytrwałości utworzenie motywu podrzędnego może zapewnić elastyczność w tworzeniu niepowtarzalnego wyglądu i stylu witryny internetowej, przy jednoczesnym zachowaniu stabilności i bezpieczeństwa motywu nadrzędnego.

Spróbuj więc i zobacz różnicę, jaką może wnieść do Twojej witryny WordPress.

Mamy nadzieję, że ten przewodnik pomógł Ci w stworzeniu motywu podrzędnego dla Twojej witryny. Jeśli tak, daj nam znać, tweetując @rankmathseo.