Przewodnik po rozpoczęciu tworzenia motywów w WordPressie: budowanie swojego pierwszego podmotywu od podstaw.

WordPress, jako najpopularniejszy na świecie system do zarządzania treścią, dzięki swej wielkiej dostosowalności jest wyjątkowo popularny. Wielka część tej dostosowalności wynika z jego systemu tematów (templates). Dla programistów, którzy chcą personalizować wygląd witryny, ale nie chcą dotykać kodu źródłowego, tematy dziecięce (Child Themes) stanowią doskonałe rozwiązanie. Pozwalają bezpiecznie przejąć wszystkie funkcje tematu rodzinnego (Parent Theme) i dokonać tylko tych zmian, które są konieczne, aby uzyskać pożądany wygląd, a przy tym aktualizacje tematu rodzinnego nie niszczą Twoich prac. Ten tekst pokazać ci, jak od zera stworzyć własną, pełnowartościową temat dziecięcą dla WordPress.

Co to jest podtema (subtopic) i w czym tkwi jej główna zaleta?

Podtema to niezależna tema WordPress, która do działania wymaga innej temy (nazywanej temą matczą). Istotą podtemy jest zasada “dziedziczenia i modyfikacji” – podtema po prostu „dziedziczy” elementy wyglądu i funkcjonalności od temy matczyni, ale potem może je dostosować według swoich potrzeb. Zwykle składa się z jednego pliku z definiciami stylu (style sheet) i jednego pliku z dodatkowymi funkcjami, które umożliwiają dokładną personalizację temy matczyni.

Wykorzystanie podtematów oferuje kilka niezastępnych zalet. Najważniejsza z nich to bezpieczeństwo aktualizacji. Gdy modyfikujesz bezpośrednio pliki głównego tematu, wszystkie Twoje zmiany zostaną przywróczone po opublikowaniu nowej wersji tematu, co może doprowadzić do niewłaściwego wyglądu witryny lub awarii jej funkcjonalności. Z kolei zmiany wprowadzone w podtemacie są izolowane w jego katalogu, więc aktualizacje głównego tematu nie wpływają na nie.

Polecamy lekturę. Przewodnik po wtyczce WooCommerce: jak zbudować swój sklep internetowy od podstaw.。

Następnie jest efektywność rozwoju. Nie musisz od zera tworzyć wszystkich plików szablonów tematu – wystarczy, abyś zmienił tylko te części, które chcesz. Na przykład, jeśli chcesz zmienić nagłówek strony witryny, to musisz to zrobić wyłącznie w ramach odpowiedniego tematu podstawowego. header.php Pliki, wszystkie inne szablony (np.) single.php、page.phpWszystkie elementy będą automatycznie używać wersji tematu rodzinnego, co znacząco poprawia efektywność rozwoju.

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

Na koniec należy zaznaczyć jasną strukturę i łatwość przenoszenia kodu. Wszystki elementy kodu dostosowanego do potrzeb użytkownika znajdują się w osobnej folderze tematycznej, co ułatwia jego organizację. Gdy potrzebujesz przenieść witrynę na nowy serwer lub podzielić się swoimi zmianami z członkami zespołu, wystarczy skopiować tę folderę – co znacznie ułatwia zarządzanie kodem.

Stworz swoją pierwszą podkatalogówkę i plik związany z tematem.

Stworzenie podtematu nie stanowi żadnego trudności technicznej – wystarczy tylko stosować określonyą strukturę plików oraz zasady nazawania. Najpierw należy utworzyć odpowiedni folder w katalogu tematów w WordPress. /wp-content/themes/ Utworz nowy folder. Nazwa tego foldera powinna odpowiadać nazwie twojego podtematu; zaleca się używać małych liter, kresków i cyfr, na przykład: my-first-child-theme。

W tym folderze pierwszym i najważniejszym plikiem, który musisz stworzyć, jest plik z definicjami stylów (stylesheet). style.cssTen plik nie tylko zawiera zasady stylu, ale także komentarze w nagłówku pliku, które są kluczowe dla rozpoznawania podtematów w WordPress. Te komentarze muszą zawierać określone informacje.

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

Prosz o uwagę.Template: Ta linia jest niezbyt ważna, ale musi dokładnie odpowiadać nazwie folderu matczego tematu, z uwzględnieniem rozróżnienia między małymi i wielkimi literami. Na przykład, jeśli używasz standardowego tematu WordPressa „Twenty Twenty-Six”, nazwa jego folderu to… twentytwentysixW takim przypadku konieczne jest napisanie tego tutaj. twentytwentysixDzięki temu oświadczeniu WordPress umożliwia ustanowienie relacji dziedziczenia pomiędzy podtematami a tematami rodzinnymi.

Polecamy lekturę. Światowy przewodnik po tworzeniu tematów dla WordPressa: jak stworzyć profesjonalną tematę dla witryny internetowej od zera。

Aby tematy podstawne mogły poprawnie odczytywać style, zwykle konieczne jest także stworzenie drugiego pliku centralnego – pliku funkcjonalnego. functions.phpFunkcja tego pliku jest identyczna z funkcją pliku związanego z głównym tematem (parent theme). functions.php Zawartość jest ładowana równolegle, zamiast być nadpisywana. Można w niej dodać własny kod PHP; najważniejsze jest to, aby dzięki temu strefy stylu tematu rodzicowego i tematów podległych zostały poprawnie dodane do kolejki ładowania.

Stylów należy poprawnie załadować za pomocą pliku z funkcjami.

W podtematach…functions.php Głównym zadaniem pliku jest zwykle zarządzanie procesem ładowania tabelek stylu. Choć w przypadku podtematów… style.css Będzie automatycznie rozpoznany przez WordPress, ale aby upewnić się, że styl matczego tematu zostanie naładowany zgodnie z zasadami i we właściwym porządku, najlepszą praktyką jest użycie hooka akcji (action hook) w WordPressie do wyraźnego zarządzania kolejności naładowania elementów.

Musisz to zrobić w ramach podtematu. functions.php Napisz funkcję w pliku i użyj jej. wp_enqueue_scripts Ten „hook” akcyjny służy do wywołania odpowiedniej funkcji. Dzięki temu stylowe arkusze są korrektnie i efektywnie ładowane w górnej części strony.

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

Poniżej znajduje się standardowy przykład implementacji:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_theme_enqueue_styles() {
    // 首先加载父主题样式表
    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'), // 声明依赖关系，确保父主题样式先加载
        wp_get_theme()->get('Version') // 使用主题版本号作为缓存破坏参数
    );
}
add_action( 'wp_enqueue_scripts', 'my_first_child_theme_enqueue_styles' );

W powyższym kodzie…get_template_directory_uri() Funkcja powraca URI katalogu tematycznego rodziców. get_stylesheet_directory_uri() Funkcja powraca URI katalogu aktualnego tematu aktywnego (tj. tematu podstawowego). Poprzez ustawienie zależności między arkuszem stylu tematu podstawowego a arkuszem stylu tematu podstawowego, zapewniamy poprawny porządek nakładania się stylów w CSS: najpierw są aplikowane style tematu podstawowego, a potem style tematu podstawowego są nadpisywane i uzupełniane.

Implementacja dostosowań dla typowych podtematów

Gdy już zostanie ustawiona podstawa, możesz zacząć prace nad personalizacją. Najczęściej modyfikacje dotyczą plików z stylami i szablonami.

Polecamy lekturę. Dokładny przegląd rozwoju pluginów dla WordPress: budowanie własnych funkcji od zera。

Jeśli chodzi o personalizację stylu, wystarczy tylko w subtemacie… style.css Dodaj nowe zasady CSS do pliku. Ponieważ zostaną załadowane po stylach tematu rodzicowego, te zasady będą miały wyższy priorytet (pod warunkiem, że specyfika selektorów jest identyczna). Na przykład, jeśli chcesz zmienić kolor wszystkich linków na stronie, możesz dodać następujący kod:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

Aby zrealizować bardziej złożone zmiany w układzie lub funkcjonalnościach, konieczne jest przepisanie pliku szablonu tematu rodzinnego. To jedna z najpotężniejszych funkcji tematów podstawowych. Sposob działania jest następujący: weź plik szablonu tematu rodzinnego, który chcesz zmienić, i… header.php、footer.php 或 page.phpKopiej to do katalogu z tematami podziałowymi (subthemes). Następnie WordPress automatycznie użyje tej kopii z tego katalogu, ignorując oryginalny plik z katalogu tematów głównych (parent themes).

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

Na przykład, jeśli chcesz dostosować nagłówek strony (footer), możesz skorzystać z zasobów dostępnych w matrycznym temacie (parent theme). footer.php Kopij kopię do foldera związanego z danym tematem, a potem otwórz tę kopię i edytuj ją. Możesz zmienić informacje o autorskich prawach, usunąć lub dodać elementy w obszarze z dodatkowymi funkcjami (tzw. „gadżetów”). Pamiętaj, że należy skopiować tylko pliki, które wymagają modyfikacji – nie konieczne jest kopiowanie całego tematu rodzinnego.

Ponadto możesz też korzystać z podtematów… functions.php Dodaj nowe funkcje do swojego tematu. Na przykład: zarejestruj nową obszarę dla dodatków na bocowej panelu, włącz obsługę własnych typów artykułów lub uruchom dodatkowe skrypty dla określonych stron. Te kody będą bezpiecznie przechowywane w twoim temacie.

Podsumowanie.

Poprzez wykonanie kroków opisanych w tym tekście, już opanowałeś cały proces: od tworzenia struktury katalogów, pisania niezbędnych informacji w nagłówkach plików z stylami, poprzez prawidłowe ich ładowanie za pomocą specjalnych plików funkcjonalnych, aż po modyfikację istniejących stylów i szablonów. Subtematy są podstawową i kluczową zasadą rozwoju w WordPressie – dzięki nim Twoje własne modyfikacje są wyraźnie oddzielone od kodu standardowego tematu, co gwarantuje długoterminową łatwość konserwacji i bezpieczeństwo witryny. Niezależnie od tego, czy chcesz tylko dokonać prostych zmian kolorów, czy zainicjować gruntowną rekonstrukcję layoutu, rozpoczęcie od subtematu to najrozsądniejszy i najprofesjonalniejszy sposób postępowania.

FAQ – najczęściej zadawane pytania.

Czy można stworzyć podtematę dla dowolnego tematu WordPress?

Teoretycznie każdy temat, który spełnia wymogi standardów pisania kodu WordPress, może być użyty do stworzenia tematu podstawowego („parent theme”). Musisz tylko upewnić się, że temat podstawowy nie ma żadnych sprzeciwnych zasad lub ograniczeń, które mogłyby przeszkadzać tworzeniu tematów podstawowych. style.css 的 Template: W polu wystarczy poprawnie wpisać nazwę foldera zawierającego temat rodziców (parent topic).

Jednak niektóre tematy o bardzo prostym designie lub z nietypową strukturą (na przykład takie, których styl nie jest ładowany w standardowy sposób) mogą powodować problemy z działaniem podtematów. Podczas wyboru tematu rodzicowego zwykle lepszym wyborem jest temat popularny, stale aktualizowany i dobrze dokumentowany.

Czy plik functions.php podmotywu nadpisuje plik functions.php motywu nadrzędnego?

Nie. To jeden z najpowszechniejszych mitów dotyczących subtematów. Subtematy… functions.php Plik nie będzie przepisywał pliku o tym samym nazwieniu w temacie rodzinnym, ale będzie dodany do niego. functions.php Później zostało załadowane.

To oznacza, że kod z obu plików zostanie wykonywany. Możesz to zrobić w ramach podtematu… functions.php Można dodawać nowe funkcje lub modyfikować istniejące zachowania w temacie matczym za pomocą “hooków” w WordPress, ale nie można bezpośrednio „przezpisywać” funkcji znajdujących się w temacie matczym, tworząc funkcję o takim samym nazwisku – to może doprowadzić do poważnych błędów w PHP. Aby zmienić działanie funkcji z tematu matczym, zwykle konieczne jest użycie „action hooków” lub „filter hooków”.

Co robić, jeśli po aktywacji podtematów styl witryny zostaje uszkodzony?

Jeśli po aktywacji podtematu wygląd witryny stanie się całkowicie nietypowy, to zwykle wynika z tego, że arkusz stylów nie został poprawnie załadowany. Prosz o sprawdzenie następujących kroków:

Najpierw sprawdź podtematy. style.css W nagłówku pliku Template: Uwzględnij, że wartość tego pola musi dokładnie odpowiadać nazwie foldera w temacie rodzinnym (włącznie z wielkimi i małymi literami). To najczęstsza przyczyna występowania problemów.

Następnie sprawdź swoje… functions.php Kod znajdujący się w pliku, zwłaszcza… wp_enqueue_style Podczas wywoływania funkcji upewnij się, że ścieżka i ustawienia zależności są poprawne, a także że nie występują błędy gramatyczne w kodzie PHP. Możesz sprawdzić, czy są jakieś powiadomienia o błędach, w sekcji “Pilota -> Narzędzia -> Stan witryny” w WordPress.

Na koniec usunąć wszystkie dane cache z Twojego witryny internetowej oraz przeglądarcy, a potem odświeżyć stronę, by zobaczyć efekty zmian.

Jak dodać własną szablon stronę w podtemacie?

Dodawanie własnego szablonu strony w podtemacie jest identyczne z dodawaniem go w zwykłym temacie. Musisz tylko stworzyć nowy plik PHP w katalogu podtematu i dodać w jego nagłówku specjalny blok komentarzy, aby oznaczyć, że jest to szablon strony.

Na przykład, stworzenie elementu o nazwie… my-full-width.php Plik ten powinien zawierać na początku następujące elementy:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

Następnie możesz zapisać swój kod szablonu w tym pliku. Po ukończeniu pracy, przy tworzeniu lub edycji strony w panelu administracyjnym WordPress, w rozwijającym się menu “Atrybuty strony” znajdziesz opcję “Moja pełnoekranowa strona”.