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

Przewodnik po tworzeniu motywów w WordPressie: jak stworzyć spersonalizowaną stronę internetową od podstaw.

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

Podstawowe pojęcia dotyczące rozwoju tematów dla WordPressa

Przed rozpoczęciem pisania kodu istotne jest zrozumienie podstawowego składu tematy WordPress. Tema to w istocie folder zawierający serię plików, które razem decydują o wyglądzie witryny internetowej oraz o niektórych jej funkcjach. System WordPress renderuje treść stron internetowych poprzez odczytywanie tych plików.

Najprostszemu tematowi potrzebne są co najmniej dwa pliki:style.css和index.phpWśród nich jeststyle.cssNie tylko odpowiada za styl witryny, ale także blok komentarzy w nagłówku pliku zawiera metadane tematu, takie jak nazwa tematu, autor, opis, numer wersji itd. To jest punkt wyjścia dla WordPressa przy identyfikacji tematu.

WordPress używa systemu poziomów szablonów, aby określić, jaki plik szablonu ma zostać użyty na danej stronie. Na przykład, gdy odwiedzany jest pojedynczy artykuł, WordPress najpierw sprawdza, czy jest dostępny odpowiedni plik szablonu dla tego artykułu.single.phpGdy odwiedzasz stronę z listą artykułów na blogu, wyszukuje się…index.php或home.phpGdy odwiedzasz stronę internetową, wyszukuje się informacje na tej stronie.page.phpRozumienie tego związku hierarchicznego umożliwia składanie koda we właściwych miejscach.

Polecamy lekturę. Od zera do jednego: szczegółowe wyjaśnienia najważniejszych technologii i najlepszych praktyk w budowaniu stron internetowych w czasach współczesnych。

Rola kluczowych plików tematycznych

functions.phpPlik jest sercem funkcjonalności tematu. Nie jest on obowiązkowym elementem, ale niemal wszystkie współczesne tematy go wykorzystują. Można w nim dodawać funkcje wspierające temat, menu rejestracji i boczne menu, włączać skrypty i arkusze stylu, a także definiować różne własne funkcje. Ten plik jest automatycznie ładowany podczas inicjalizacji tematu i stanowi klucz do rozszerzania możliwości tematu.

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

Kolejnym kluczowym plikiem jest…header.phpZwykle zawiera deklarację typu dokumentu, obszary (w które są włączone pliki CSS i JS) oraz część wspólną dla wszystkich stron witryny.footer.phpWtedy zawierają wspólny tekst na dole strony (footer) oraz tagi zakończenia. Można to zrobić za pomocą funkcji dostępnych w WordPress.get_header()和get_footer()Możesz łatwo włączyć je do innych plików z wzorcami, zachowując modułarność i łatwość konserwacji kodu.

Utworzenie lokalnego środowiska rozwoju oraz struktury tematów

Przed wdrożeniem tematu na serwer online najefektywniejszym i najbezpieczniejszym sposobem jest stworzenie lokalnego środowiska rozwoju. Możesz użyć narzędzi takich jak XAMPP, MAMP, Local by Flywheel lub Docker, aby szybko zainstalować na swoim komputerze Apache, MySQL i PHP, a potem uruchomić WordPress.

Gdy środowisko zostanie przygotowane, możesz zacząć tworzyć swój pierwszy temat. Najpierw wejdź do katalogu z instalacją WordPress.wp-content/themesfolder. Utwórz tu nowy folder i nazwij go nazwą twojego tematu, na przykład “my-first-theme”. Wszystkie pliki związane z tematem będą umieszczone w tym folderze.

Następnie utwórz wymienione powyżej podstawowe pliki. Najpierw…style.cssW nagłówku pliku muszą znajdować się określone informacje o tabelce stylów.

Polecamy lekturę. Stwórz profesjonalną stronę internetową: kompleksowy przewodnik po tworzeniu i dostosowywaniu motywów WordPress.。

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

A potem stworzyć najprostszą wersję…index.phpPlik. Na początku może być bardzo prosty – wystarczy, aby temat został rozpoznany i aktywowany przez WordPress.

<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Witaj, WordPress Theme Development!</h1>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

W tym momencie wejdź do panelu administracyjnego WordPress i przejdź na stronę “Wygląd” → “Teme”. Twoje tema powinno już tam być widoczne. Aktywuj je, a potem odwiedź główną stronę witryny – powinna tam pojawić się informacja wygenerowana przez kod. Tym sposobem udało ci się stworzyć pierwszy „pusty” szablon tematu.

Budowanie szablonu motywu i pętli.

Głównym zadaniem tematu jest prezentacja treści, a prezentacja treści w WordPress bazuje na “cyklach”. Cykl jest strukturą kodu PHP w WordPress, która służy do pobierania artykułów (włącznie z stronami, typami artykułów dostosowanymi itd.) z bazy danych i wyświetlania ich na stronie.

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

Zrozumieć i zrealizować główny cyklus (main loop)

Najprostszowa struktura cyklu wygląda tak, jak pokazano poniżej, i zwykle jest umieszczana w…index.php或single.phpW plikach szablonów:

<!-- 在这里输出每篇文章的内容 -->
        <h2><?php the_title(); ?></h2>
        <div><p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p></div>
    
    <p>Nie znaleziono żadnego artykułu.</p>
<?php endif; ?>

have_posts()Funkcja sprawdza, czy są artykuły, które należy wyświetlić.the_post()Funkcja ustawia dane aktualnego artykułu, aby były dostępne dla elementów szablonu (np.…)the_title()、the_content()) wywołanie.

Utwórz plik szablonu, który często będziesz używać.

Aby temat mógł profesjonalnie obsługiwać różne strony, konieczne jest stworzenie serii plików szablonów.index.phpTen ostateczny szablon do wykonywania procedur odwrotowych („rollback”) powinien także umożliwić stworzenie:

Polecamy lekturę. Kompletny przewodnik po tworzeniu motywów w WordPressie: od podstaw do zaawansowanych technik.。

  • header.phpWykonaj wydobycie kodu z sekcji common headers.
  • footer.phpWykonaj extrakcję kodu znajdującego się w sekcji „public bottom”.
  • single.phpWykorzystuje się do wyświetlania pojednego artykułu.
  • page.phpWykorzystuje się do wyświetlania pojedynczej strony.
  • archive.phpWykorzystuje się do wyświetlania informacji o kategoriach, tagach, autorach itd. na stronach archiwów.

Następnie konieczne jest przebudowanie (rekonstrukcja) tego systemu.index.php，使用WordPress的函数来引入模块化的部分：

<main>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><a href="/pl/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </article>
        <?php endwhile; ?>
    </main>

Takim sposobem nagłówek i nagłówek strony są zarządzane przez oddzielne pliki, a główny plik szablonu skupia się wyłącznie na logice zawartości specyficznej dla tej strony. Dzięki temu struktura jest jasna i łatwa w utrzymaniu.

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

Użyj pliku functions.php do rozszerzenia funkcjonalności tematu.

functions.phpTo “skrzynka narzędzi” dotycząca twojego tematu. Tu możesz dodawać kod, który umożliwia bezpieczne modyfikowanie i rozszerzanie funkcji podstawowego WordPressa, bez konieczności edycji plików źródłowych.

Możliwości obsługiwanie przez system rejestracji tematów:

przejść (rachunek lub inspekcję itp.)add_theme_support()Możesz deklarować różne funkcje, które temat będzie obsługiwać. Na przykład możesz umożliwić tematowi wyświetlanie specjalnych zdjęć do artykułów, dostosowanego loga oraz ich opisów.

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Uwaga: Funkcję zainstalowaliśmy („mountowaliśmy”) na odpowiednim miejscu.after_setup_themeTa akcja jest powiązana z hookiem. Jest to standardowy hook wykonywany po załadowaniu tematy w WordPressie – to właśnie jest właściwe miejsce do inicjalizacji tematy.

Meniu rejestracji oraz skrypty stylizacyjne

Udostępnienie możliwości konfiguracji pozycji elementów menu umożliwia użytkownikom zarządzanie menu w zakładce “Wygląd” -> “Menu” w panelu administracyjnym.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

W pliku szablonu możesz używać…wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Aby wyświetlić ten menu…

Na koniec należy poprawnie włączyć pliki CSS i JavaScript – to najlepsza praktyka.

function my_first_theme_scripts() {
    // 引入主题的主要样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );

// 引入自定义的JavaScript文件
    wp_enqueue_script( ‘my-first-theme-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

Użyjwp_enqueue_style()和wp_enqueue_script()Funkcja, a potem jej montowanie…wp_enqueue_scripts„Hook” jest metodą zalecaną oficjalnie przez WordPress. Dzięki temu można zarządzać zależnościami pomiędzy elementami aplikacji, uniknąć ich powtarzalnego ładowania oraz zapewnić kompatybilność w różnych środowiskach, w tym w przypadku dodatków (pluginów).

Podsumowanie.

Od stworzenia czegoś, co zawiera…style.css和index.phpZaczynając od folderów, przechodząc do zrozumienia struktury szablonów i mechanizmów “cyklicznego działania”, a potem do ich wykorzystania…functions.phpDzięki dodaniu wielu funkcji temacie udało się rozwinić jego potencjał. Już przebyłeś kluczowe etapy rozwoju tematów w WordPress. Kluczowym elementem przy tworzeniu tematów jest podejście modułowe – części, które występują często (np. nagłówki, stopki), należy rozdzielić na odrębne pliki.functions.phpUmożliwia centralne zarządzanie funkcjami i organizację logiki prezentacji treści zgodnie z zasadami hierarchii szablonów WordPress. Po opanowaniu tych podstawowych znań masz już fundamenty do stworzenia własnej, personalizowanej strony internetowej. Możesz dalej eksplorować dodatkowe funkcje, takie jak obszary z dodatkowymi narzędziami, możliwości tworzenia własnych typów artykułów oraz API do dostosowywania tematów, wciąż pogłębiając swoje umiejętności programowania w WordPress.

FAQ – najczęściej zadawane pytania.

Co robić, jeśli po zmianie tematu strona internetowa nie aktualizuje się natychmiast?

Zwykle to wynika z ustawie cache w przeglądarcu lub z mechanizmu cache w WordPress. Najpierw spróbuj wykonać forced refresh w przeglądarcu, naciskając kombinację klawiszy Ctrl+F5 (lub Cmd+Shift+R). Jeśli problem nadal występuje, sprawdź, czy nie używasz jakichś wtyczek lub zasobów do zarządzania cache na stronie serwera, i spróbuj usunąć całą zawartość cache. W przypadku plików CSS i JS…wp_enqueue_style和wp_enqueue_scriptW funkcji można ustawić dynamiczne wartość dla parametru oznaczającego wersję (np.time()Podczas rozwoju należy unikać użycia mechanizmów cache’owania, ale przed wdrożeniem produktu należy zmienić wersję programu na stałą (z określonym numerem wersji).

Dlaczego moja tematyczna informacja nie jest wyświetlana w tle (w obszarze administracyjnym)?

Proszę najpierw sprawdzić, czy folder z tematami znajduje się w poprawnym miejscu.wp-content/themes/Następnie, upewnij się, że…style.cssBlok komentarzy na początku pliku ma właściwy format; szczególnie niezbędna jest linia “Theme Name:”. Na koniec upewnij się, że ustawienia uprawień foldera z tematem oraz plików w nim zawartych są poprawne, a serwer internetowy (np. Apache) ma dostęp do tych plików.

Jak dodać boczną nawigację do mojego tematu?

Dodanie boku bocznego składa się z dwóch kroków. Najpierw…functions.phpUżyj tego w Chinach.register_sidebar()Funkcja umożliwia rejestrację jednego lub kilku elementów interfejsu użytkownika (tzw. „widgetów”) do obszaru, w którym mają zostać wyświetlone. Następnie, w pliku szablonu, w którym chcesz zainstalować boczną panelę, należy użyć tej funkcji, aby te elementy zostały uwzględnione w wyglądzie strony.sidebar.phpW artykule wykorzystanodynamic_sidebar()Funkcja musi zostać wywołana w odpowiednim miejscu. Ponadto konieczne jest uwzględnienie tego w głównym pliku szablonu (na przykład: main_template.html).index.php) używa się wget_sidebar()Aby włączyć szablon boku.

Jak zapewnić kompatybilność tematu rozwojowego z dodatkami (plug-inami)?

Dodawanie plików konfiguracji do foldera „wp-config.php” w temacie WordPress jest standardowym sposobem na konfigurację tematu. Jeśli w temacie są dodatkowe pliki konfiguracji, upewnij się, że twoje rozszerzenie (plugin) korzysta z tych plików w odpowiedni sposób i nie wywołuje żadnych konfliktów z istniejącymi zasadami kodowania WordPressa. Dodatkowo, stosowanie standardów kodowania WordPressa jest kluczowym elementwp_head()和wp_footer()Funkcje, ponieważ wiele wtyczek używa tych dwóch „haków” (hooków) do wstawienia niezbędnego kodu (np. kodu statystycznego, CSS/JS). Ponadto, przy wyświetlaniu treści artykułów zawsze należy używać tych funkcji.the_content()Zamiast bezpośredniego dostępu do bazy danych, funkcja wykorzystuje wtyczki (plugi) do wdrożenia wszystkich zmian dokonanych za pomocą filtra “the_content”.

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: