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

Przewodnik po rozwoju tematów dla WordPress: jak stworzyć swoją własną tematę od zera

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

Przewodnik po rozwoju tematów dla WordPress: jak stworzyć swoją własną tematę od zera

Co to tematy WordPressa i w jaki sposób są zbudowane?

Teme WordPress to nie tylko wygląd witryny – to zbiór plików, które współpracują, aby zapewnić jej treściom wizualny wygląd i interaktywność. Tema definiuje ogólny layout witryny, kolory, fonty i styl, a także kontroluje sposób wyświetlania różnych typów treści za pomocą plików szablonów. Zrozumienie składu temy to pierwszy krok w procesie jej tworzenia.

Standardowa tematyczna struktura WordPress składa się z co najmniej dwóch kluczowych plików:style.css和index.php。style.cssPlik zawiera nie tylko arkusz stylu tematu, ale co jest jeszcze ważniejsze, blok komentarzy umieszczone w jego górnej części – to kluczowy element, który umożliwia WordPressowi rozpoznanie tematu. Ten blok komentarzy musi zawierać metadane takie jak nazwa tematu, autor, opis, wersja itd.index.phpTo jest standardowy plik szablonu tematu; jeśli nie znajduje się żadnego bardziej specyficznego szablonu, WordPress użyje go do renderowania strony.

Polecamy lekturę. Od zera: Opanowanie kluczowych procesów i najlepszych praktyk w rozwoju tematów dla WordPressa。

Poza tymi dwoma koniecznymi plikami, pełnowartościowe tematyczne rozwiązanie („theme”) zawiera zwykle inne pliki szablonów, np. te używane do wyświetlania pojedynczych artykułów.single.phpWykorzystuje się do wyświetlania listy artykułów.archive.php…a także elementy potrzebne do wyświetlania strony.page.phpTemat może także zawierać coś dodatkowego.functions.phpPliki są używane do dodawania funkcji specyficznych dla danej tematy, rejestracji menu, bocznych paneli itd.header.php和footer.phpModuły kodu używane do tworzenia nagłówka i stopki witryny umożliwiają ich modularizację, co ułatwia konserwację i powtórną użyć.

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

Stworz swoją pierwszą podstawową tematyczną stronę („basic theme”).

Utworzenie katalogu tematycznego oraz kluczowych plików

Najpierw, w katalogu instalacji WordPress…wp-content/themes/Utworź nowy folder w tej ścieżce, który będzie stanowić katalog tematyczny. Nazwa foldera musi składać się z małych liter, cyfr i znaków podkreślenia („-”) i nie może zawierać przerw. Na przykład, możemy stworzyć folder o nazwie „my_project”.my-first-themefolderu.

Następnie, w tym folderze utwórz…style.cssDodaj plik do projektu i umieść na początku pliku niezbędne informacje tematyczne w postaci komentarzy. To jakby “dowód tożsamości” tematu.

/*
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: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Stworzenie podstawowego pliku szablonu

Następnie, stworz…index.phpTo jest najprostszzy szablon. Zacznemy od najbardziej podstawowej struktury HTML i włączymy kluczowe funkcje WordPress, aby dynamicznie załadować treść. Bardzo minimalistyczny.index.phpMoże to wyglądać w następujący sposób:

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

    <footer>
        <p>©</p>
    </footer>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

Ten plik wykorzystuje kilka kluczowych funkcji WordPress.wp_head()和wp_footer()Służy do wstawiania kodu (np. stylów, skryptów) do nagłówka i dołu strony przez własną stronę WordPress, pluginy itd.the_post()和the_content()Może być używany do wyświetlania danych artykułów w ramach cyklu. Teraz pozwol, aby folder z tym tematem został przesłany na serwer – po tym uda się go zobaczyć i włączyć w panelu administracyjnym WordPress w sekcji “Wygląd” -> “Teme”.

Polecamy lekturę. Przewodnik po całym procesie tworzenia stron internetowych: analiza wszystkich kroków potrzebnych do stworzenia profesjonalnej witryny od zera。

Używaj poziomów struktury szablonów oraz znaków rozróżniających poszczególne elementy szablonu.

Zrozumienie systemu hierarchii szablonów.

WordPress wykorzystuje złożony system hierarchii szablonów (Template Hierarchy), aby decydować, jaki plik szablonu ma zostać użyty do renderowania danej strony. Ten system opiera się na zasadach porównywania od najbardziej specyficznych do najbardziej ogólnych przypadków. Na przykład, przy wejściu na artykul o ID 123 WordPress sprawdza w następującym porządku:single-post-123.php -> single-post.php -> single.php -> singular.php -> index.phpProgramiści mogą wykorzystać tę funkcję, tworząc bardziej specyficzne pliki szablonów, aby precyzyjnie kontrolować wyświetlanie różnych elementów treści.

Opanowanie najczęściej używanych tagów w szablonach

Tagi szablonów (Template Tags) to wewnętrzne funkcje PHP w WordPress, które służą do dynamicznego wyświetlania różnych danych w szablonach tematów. Stanowią kluczowy element przy tworzeniu tematów. Poza tymi, które zostały użyte w powyżej przykładzie…the_title()和the_content()I są jeszcze wiele innych tagów.

Na przykład,the_permalink()Link stały, używany do wyświetlania aktualnego artykułu;the_post_thumbnail()Obraz charakterystyczny, używany do wyświetlania artykułów;the_category()Wykorzystuje się do wyświetlania listy kategorii, do których należy dany artykuł. Tagi służące do sprawdzania warunków są również niezbyt ważne, np.is_home()、is_single()、is_page()、is_category()Itp. Dzięki temu można wykonywać różną logikę kodu w zależności od typu aktualnej 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%
hosting.com LOGO strona dostępu 
<?php if ( is_single() ) : ?>
    <div class="post-meta">
        发布于： | 分类：
    </div>
<?php endif; ?>

Ten kod wyświetla datę publikacji artykułu oraz informacje o jego kategorii tylko na stronie pojednego artykułu.

Ulepszenie funkcji tematycznych oraz możliwości personalizacji

Dodaj plik z funkcją tematyczną.

functions.phpPlik stanowi “skrzynkę narzędzi” twojego tematu. Dodany tu kod zostanie włączony w momencie aktywacji tematu. Jeden z najczęściej używanych zadań tego kodu to rejestracja funkcji dostępnych w tym temacie, np. możliwości umieszczania specjalnych zdjęć do artykułów, personalizowania pozycji menu oraz dostosowania tła.

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

    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

    // 为文章摘要添加更多标签支持
    add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_excerpt_more( $more ) {
    return '...';
}
?>

Włączenie plików z wzorcami (style sheets) i skryptów

Aby zachować porządek w kodzie i stosować najlepsze praktyki, pliki z definicjami stylów (CSS) oraz skryptów JavaScript należy umieścić w osobnych folderach.functions.phpPliki są ładowane w kolejce, zamiast być używane bezpośrednio w plikach szablonów lub za pomocą określonych tagów. Dzięki temu zależności między plikami są poprawnie uwzględniane, a także unikается ich ponawne ładowanie.

Polecamy lekturę. Pełny przewodnik po tworzeniu tematów dla WordPress: praktyczny kurs budowania własnych tematów od zera。

Użyjwp_enqueue_style()Funkcja służy do załadowania twojego głównego pliku z stylami (stylesheetu). Zwykle takie pliki są umieszczone w specjalnej folderze w strukturze witryny.style.cssJako zależność. Do skryptów należy użyć tego elementu.wp_enqueue_script()Funkcja.

function my_first_theme_scripts() {
    // 加载主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );

    // 加载一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Podsumowanie.

Rozwoj tematów dla WordPress jest procesem łączenia kreatywności, designu i technologii. Poprzez zrozumienie struktury kluczowych plików tematu…style.css和index.phpUdzieliliście sobie pierwszy, solidny krok na drodze do osiągnięcia celu. Znajomość z systemem poziomów w szablonach umożliwia tworzenie precyzyznej logiki wyświetlania dla różnych części witryny, a zręczne używanie tagów szablonów pozwala dynamicznie generować cały treść.functions.phpMożesz bezpiecznie dodawać różne funkcje i wsparcia do tematów oraz zarządzać zasobami w standardowy sposób. Zaczynając od tej prostej podstawy, możesz stopniowo eksplorować bardziej zaawansowane możliwości tematów – np. tworzenie podtematów, dostosowywanie menu nawigacyjnego za pomocą klasy Walker, integrację API Customizer do realizacji rzeczywistych przeglądów, a nawet budowę tematów typu FSE (Full Site Editing) z użyciem edytora bloków (Gutenberg). Ciągłe ćwiczenie oraz odwoływanie się do oficjalnych dokumentacji i kodu wysokiej jakości tematów to najlepsze sposoby na rozwój swoich umiejętności programistycznych.

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

FAQ – najczęściej zadawane pytania.

Jaki jest poziom techniczny wymagany do tworzenia tematów dla WordPress?

Aby rozwijać tematy dla WordPress, konieczne jest posiadanie podstawowych znajomości HTML, CSS i PHP. HTML służy do budowy struktury stron, CSS do kontrolowania stylu i rozmiarowania elementów na stronie, a PHP to język programowania, który stanowi serce WordPress i jest używany do obsługi logiki, pobierania danych oraz generowania dynamicznego zawartości. Podstawowe znania JavaScriptu również mogą być przydatne przy dodawaniu interaktywnych elementów na stronach.

Jak testować rozwój tematów na swoim lokalnym komputerze?

Należy mocno zalecić rozpoczęcie pracy nad tematem w lokalnym środowisku. Możesz użyć pakietów oprogramowania do obsługi serwerów, takich jak XAMPP, MAMP, Local by Flywheel lub Laragon. Te narzędzia umożliwiają szybkie przygotowanie środowiska do działania WordPressu na twoim komputerze, w którym znajdują się Apache, MySQL i PHP, dzięki czemu możesz robić prace nad projektem i testy, nie wpływając na działanie witryny online.

W jaki sposób różnią się plik functions.php w temacie od wtyczek (pluginów)?

functions.phpFunkcje zawarte w pliku są aktywne tylko w aktualnie włączonym temacie. Jeśli zmienisz temat, te funkcje przestaną być dostępne. Natomiast funkcje dostępne w dodatkach (plug-inach) nie zależą od wybranego tematu – działają wciąż, dopóki są włączone. Funkcje, które są ściśle powiązane z wizualnym wyglądem i układem witryny, zwykle znajdują się w plikach tematów.functions.phpKod, który zapewnia niezależne, uniwersalne funkcje (jak formularze kontaktowe, optymalizacja SEO, cache), nadaje się lepiej do stworzenia w postaci pluginów.

Czym jest podtema (subtopic) i czemu warto z niej korzystać?

Podtema to temat, który jest zależny od innego tematu (nazywanego tematem rodzicim). Dzięki temu można modyfikować lub rozszerzać funkcje i wygląd tematu rodziciego, bez konieczności bezpośredniego edycji jego plików. Największym plusem tego jest to, że gdy temat rodzicowy zostanie aktualizowany, Twoje własne zmiany w wyglądzie i funkcjach (zawarte w podtemacie) nie zostaną utracone. Aby stworzyć podtemę, wystarczy tylko…style.cssW pliku używa się deklaracji “Template:” do określenia nazwy katalogu zawierającego tematy rodzicowe. Następnie można tworzyć tylko te pliki szablonów, które potrzebują zostać zmienione, lub dodawać nowe funkcje.

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: