Strona główna/Wiedza/WordPress/Szczegóły dotyczące treści

Przewodnik po tworzeniu motywów w WordPressie: stwórz swój pierwszy motyw od podstaw.

3 minuty na przeczytanie.
2026-03-14
2026-06-05
2,370
Zarabiam prowizję, gdy robisz zakupy poprzez poniższe linki, bez żadnych dodatkowych kosztów dla Ciebie.

Zrozumienie podstawowej struktury tematów w WordPressie

Przed rozpoczęciem pisania kodu istotne jest zrozumienie struktury tematy WordPress. Najprostszą tematę składają co najmniej dwa pliki: jeden zawierający informacje o temacie w postaci arkusza stylu, a drugi – plik szablonu PHP, który wyświetla treść witryny. Te pliki razem tworzą „składankę” tematy i muszą spełniać określone wymogi struktury katalogów oraz zasad nazewania.

Podstawowym plikiem jest…style.cssNie zawiera tylko stylów CSS – blok komentarzy w nagłówku pliku stanowi w istocie “dowód tożsamości” tematu. Ten blok informuje system WordPress o nazwie tematu, autorze, opisie, wersji oraz innych metadanych. Jeśli nie jest poprawnie sformatowany, może powodować problemy z działaniem tematu.style.cssWordPress nie będzie w stanie rozpoznać i aktywować twoj temat.

Kolejnym niezbędnym plikiem jest…index.phpTo jest główny plik szablonu tematu; używa się go w przypadku, gdy WordPress nie może znaleźć bardziej specyficznego pliku szablonu (np.single.php或page.phpGdy nie jest określony żaden inny format, automatycznie użyje się tego formatu do renderowania strony. Jest to opcja rezerwowa dla wszystkich plików z wzorcami (templates).

Polecamy lekturę. Odkryj tajniki rozwoju tematów WordPress: kluczowe techniki do budowy dostosowanych stron internetowych od zera。

Dokument z informacjami na temat zagadnienia

Szablon stylu tematustyle.cssNa początku muszą znajdować się określone komentarze. Poniżej jest przykład najprostszego możliwego przypadku:

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.
LOGO UltaHost strona dostępu 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Wśród nichText DomainZnaczek używany do celów internacjonalizacji, służyć jako identyfikator podczas dalszych procesów tłumaczenia. Ten plik zawiera zwykle cały kod stylu CSS.

Podstawowy plik szablonu

index.phpPlik jest wejściem do tematu. Najprostszym przykładem…index.phpMożna użyć tylko prostych cykli, które wywołują funkcje core WordPress, aby uzyskać i wyświetlić listę artykułów.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Witaj na mojej stronie!</strong></p>
</head>
<body no numeric noise key 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

W tym kodzie…wp_head()和wp_footer()To dwa kluczowe elementy, które umożliwiają wstawianie niezbędnego kodu – w tym stylów, skryptów oraz metatagów – na początku i na końcu strony przez core WordPress, pluginy oraz inne skrypty.

Ustawienie lokalnego środowiska rozwoju

Przed wdrożeniem tematu na serwer online najefektywniejszym i najbezpieczniejszym sposobem jest stworzenie lokalnego środowiska rozwoju. Lokalne środowisko umożliwia swobodne testowanie kodu oraz wykrywanie i naprawianie błędów, bez wpływu na działanie witryny online.

Polecamy lekturę. Pełna kontrola nad tworzeniem motywów w WordPressie: kompletny przewodnik od podstaw do zaawansowanych technik.。

Wybierz oprogramowanie do obsługi lokalnego serwera.

Dla początkujących najlepszym wyborem jest software do obsługi lokalnych serwerów, który integruje w sobie Apache/Nginx, PHP oraz bazę danych MySQL – po jednym kliknięciu można wszystko zainstalować i uruchomić. Popularnymi opcjami są XAMPP, Local by Flywheel oraz DevKinsta. Te narzędzia simulują środowisko prawdziwego serwera internetowego, dzięki czemu możesz uruchomić WordPress na swoim komputerze.

Zainstaluj WordPress i utwórz katalog z tematami („themes”).

Po uruchomieniu na lokalnym serwerze konieczne jest instalowanie nowego WordPressa. Skopiuj najnowszy plik WordPressa w formie kompresowanej, a następnie rozpakuj go do korzennej katalogu witryny na lokalnym serwerze (na przykład do foldera htdocs w XAMPP). Po tym uruchom przeglądarkę i odwiedź lokalną adresę (np. http://localhost), by dokonać procedury instalacji, która zajmuje zwykle około pięciu minut.

Po zakończeniu instalacji wejdź do witryny WordPress.wp-content/themesKatalog. Tu możesz stworzyć nową folderę dla tematu, który zamierzasz rozwijać, na przykład nazwą “my-first-theme”. Folder, który już wcześniej utworzyłeś…style.css和index.phpPliki powinny znajdować się w tej folderze. Teraz możesz się logować do panelu administracyjnego WordPress i w zakładce “Wygląd” -> “Teme” sprawdzić, czy twoje tema jest dostępne – choć na razie ma bardzo ograniczone funkcje.

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%
hosting.com LOGO strona dostępu

Stworzenie systemu bazowych plików szablonów

Tylkoindex.phpTemat sam w sobie nie wystarczy do stworzenia funkcjonalnego tematu. Aby temat był pełnowartościowy, konieczne jest posiadanie zestawu plików szablonów, które umożliwiają odpowiednie przygotowanie strony pod różne scenarii wyświetlania – np. pojedynczy artykuł, osobna strona, archiw artykułów itd. System poziomów szablonów w WordPressu automatycznie wybierze najbardziej odpowiedni plik szablonu do renderowania żądanego fragmentu strony.

Artykuły i szablony stron

single.phpSzablon służy do wyświetlania pojedynczych postów na blogu. Gdy użytkownik kliknie, aby przeczytać cały post, WordPress użyje tego szablonu. Zwykle zawiera on bardziej szczegółowe informacje o poście, takie jak kategoria, tagi, autor oraz sekcja komentarzy.

page.phpSzablony są używane do wyświetlania niezależnych, statycznych stron (np. “O nas” lub “Kontakt”). Różnica pomiędzy nimi a szablonami artykułów polega na tym, że w szablonach stron nie są wyświetlone informacje takie jak data publikacji czy kategoria, które są typowe dla artykułów na blogu.

Polecamy lekturę. Szczegółowe wyjaśnienie tworzenia motywów w WordPressie: kompletny przewodnik od podstaw do zaawansowanych technik.。

Szablony dla części górnej i dolnej strony (header i footer)

Aby stosować zasadę DRY („Don’t Repeat Yourself” – „Nie powtarzaj się”), tematy WordPressa zwykle rozdzielają części nagłówka (Header) i nagłówka (Footer) strony na osobne pliki.

header.phpPlik zawiera cały kod od początku do obszaru zawierającego główną treść strony, wliczając różne elementy takie jak sekcje, identyfikator witryny oraz główny menu nawigacyjne.index.php、single.phpW innych szablonach również można to użyć.get_header()Funkcja jest potrzebna, aby to wdrożyć.

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.
LOGO InterServer strona dostępu

Podobnie.footer.phpPlik zawiera wszystkie elementy nagłówka strony, takie jak informacje o autorskich prawach, pomocne menu nawigacyjne itd., i jest dostępny poprzez…get_footer()Wiązanie funkcji. Ponadto…sidebar.php(Boczna lista) Często też jest oddzielana i używana oddzielnie.get_sidebar()Wywołanie.

Zrekonstruowanyindex.phpBędzie to bardzo zwięzłe.

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Integracja stylów i skryptów

W tematach modernych istotne jest prawidłowe i efektywne ładowanie plików z stylami CSS oraz skryptów JavaScript. WordPress oferuje specjalne funkcje do zarządzania tymi zasobami, aby zapewnić, że będą ładowane w odpowiedniej kolejności zależności i uniknąć ich powtórnego wprowadzania lub konfliktów.

Dodawanie stylów za pomocą kolejki funkcji

Poprawny sposób to…wp_enqueue_style()Funkcja dodaje arkusz stylów do kolejki. Musisz utworzyć w temacie element o nazwie…functions.phpTo plik, który stanowi serce funkcjonalności tematu; służy do dodawania różnych właściwości, funkcji oraz modyfikacji standardowego zachowania.

在functions.phpMożesz przypiąć („mount”) funkcję do…wp_enqueue_scriptsNa tym „haku akcji”:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()Funkcja automatycznie pobierze temat (tema) odległego elementu.style.cssŚcieżka pliku. Dzięki temu sposobowi ładowania WordPress może lepiej zarządzać zasobami.

Dodawanie skryptów za pomocą kolejki funkcji

Aby naładować skrypty JavaScript, również potrzebna jest kolejka (queue). Funkcja odpowiedzialna za to to…wp_enqueue_script()Możesz dodać je do tej samej funkcji.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Tutaj,array( 'jquery' )Zadeklarowano, że ten skrypt jest zależny od podstawowej biblioteki jQuery, więc WordPress zadba o to, aby jQuery zostało wcześniej naładowane. Ostatni parametr…trueOznacza to umieszczenie skriptu na dole strony (przed pozostałym treściem), co pomaga zwiększyć szybkość jej ładowania.

Podsumowanie.

Rozwoj tematu WordPress od zera to proces uczenia się, który obejmuje wiele kluczowych kroków, od zrozumienia podstawowej struktury plików, budowania lokalnego środowiska, tworzenia systemu szablonów po poprawne integrowanie różnych elementów. Poprzez samodzielne tworzenie…style.css、index.php、header.php、footer.phpteżfunctions.phpWiązując się z tymi kluczowymi plikami, nie tylko stworzyłeś temat, który jest gotowy do działania, ale także lepiej zrozumiałeś zasady działania struktury tematów w WordPress oraz systemu hooków. Pamiętaj, że istotą rozwoju tematów jest stosowanie zgodnych z WordPress ustalonych zasad i standardów – to gwarantuje ich kompatybilność, wydajność oraz łatwość konserwacji. Od tego punktu możesz dalej eksplorować zaawansowane funkcje, takie jak dostosowanie typów artykułów, narzędzia do personalizacji tematów czy obszary z dodatkowymi elementami, tworząc w ten sposób tematy o dużych możliwościach.

FAQ – najczęściej zadawane pytania.

Czy aby rozwijać tematy (tj. aplikacje lub elementy interfejsu użytkownika), konieczne jest opanowanie PHP?

Tak, znajomość PHP jest konieczna do tworzenia tematów dla WordPress. WordPress jest bowiem napisany w języku PHP, a wszystkie pliki z wzorami (takie jak…)index.php、single.phpWszystkie te pliki są w formacie PHP i wykorzystują kod PHP do wywoływania coreowych funkcji WordPress, aby dynamiczzo generować treść stron. Ponadto są one używane do dodawania nowych funkcjonalności.functions.phpPlik jest w całości składany z kodu PHP. HTML i CSS służą do definiowania struktury i stylu, natomiast PHP stanowi „dušę” aplikacji, odpowiedzialną za realizację dynamicznych funkcji oraz interakcję z danymi.

Co robi plik functions.php w temacie?

functions.phpPlik jest “centrum funkcjonalnym” twojego tematu. Nie jest to plik szablonu, który bezpośrednio generuje jakąś część strony. Zamiast tego służy do przechowywania wszystkiego kodu PHP potrzebnego do modyfikacji i rozszerzania funkcji tematu. Najczęściej używa się go do: ustawiania pozycji elementów nawigacyjnych, definiowania obszaru z dodatkowymi elementami (tzw. „widgetów”) itd.wp_enqueue_scriptsW tym pliku są dodawane pliki CSS i JavaScript, a także funkcje wspierające wybrany temat (np. miniatury artykułów, dostosowane tła), a także definiowane są różne własne funkcje. Ten plik jest automatycznie ładowany w momencie aktywacji wybranego tematu.

Jak zrobić, aby moja tematyczna strona obsługiwała kilka języków?

Aby temat był wsparzony wieloma językami (internacjonalizacja i lokalizacja), należy wykonać dwa głównych kroki. Pierwszy krok polega na użyciu specjalnych funkcji tłumaczeniowych WordPress w miejscach, gdzie teksty wymagają tłumaczenia.__('文本', 'text-domain')或_e('文本', 'text-domain')W tym przypadkutext-domainMusi być w zgodzie z…style.cssUdokumentowane w…Text DomainZgodnie z informacją podaną wcześniej, drugim krokiem jest użycie narzędzia takiego jak Poedit do skanowania kodu tematu w celu generowania niezbędnych danych..potPliki szablonów – na ich podstawie tłumacz tworzy odpowiednie wersje tekstu w innym języku (np. polskim)..poI po skompilowaniu..moPliki należy umieścić w folderze związanym z tematem./languages/Znajdują się w katalogu. WordPress automatycznie pobierze odpowiednie tłumaczenia w zależności od ustawie języka witryny.

W czym różnica między tematami („themes”) a wtyczkami („plugins”)?

Tematy i pluginy w WordPress pełnią zupełnie różne role. Tematy odpowiadają za wygląd witryny pod względem wizualnym – to, co użytkownik widzi: układ, styl oraz struktura szablonów. One decydują, “jak witryna wygląda”. Pluginy z kolei służą do dodawania określonych funkcji do witryny; te funkcje działają niezależnie od wybranego tematu – na przykład do tworzenia form kontaktowych, optymalizacji SEO lub dodawania koszyków zakupów. Właściwą zasadą jest umieszczanie kodu dotyczącego wizualnego wyglądu i układu w temacie, a kodu związanego z core funkcjami w pluginach. Dzięki temu, gdy zmienimy temat, istotne funkcje witryny nie zostaną utracone.

Następny krok, co dalej?

Jeśli budujesz lub optymalizujesz witrynę WordPress, zalecamy, abyś zapoznał się z dalszymi informacjami na temat optymalizacji wydajności, konfiguracji wtyczek i dostosowywania motywów.

Dalsze lektury i praktyczna wiedza.

Poniższe treści są powiązane z tematem tego artykułu i warto je przeczytać. Zwykle lepiej zacząć od artykułu, który najbardziej odpowiada aktualnemu problemowi, a potem stopniowo przechodzić do tematów pokrewnych.

Etykiety: