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

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

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

Przygotowanie i ustawienie środowiska

Przed rozpoczęciem pisania kodu potrzebny jest odpowiedni środowisko rozwoju. Składa się ono z lokalnego serwera (np. XAMPP, MAMP lub Local by Flywheel), edytora kodu (np. VS Code lub PhpStorm) oraz nowo instalowanego WordPressa. Upewnij się, że WordPress jest na najnowszej wersji, aby korzystać z najnowszych funkcji i API.

Następnie musisz to zrobić w WordPressie.wp-content/themesUtworz kopię foldera w katalogu o nazwie odpowiadającej “slugowi” twojego tematu. Na przykład:my-first-themeTen folder będzie stanowić „dom” dla wszystkich twoich plików tematycznych. Najbardziej podstawowe pliki tematu WordPress składają się z dwóch elementów:index.php和style.cssWśród nich jeststyle.cssNie jest to tylko plik z zasadami stylu, ale także “plik nagłówkowy” zawierający metadane tematu. Informacje umieszczone w komentarzach tego pliku są kluczowe dla WordPress, aby rozpoznać Twoje tema.

Stworzenie czegoś podstawowego…style.cssW nagraniu pliku informacje umieszczone w komentarzach na początku powinny zawierać następujące dane:

Polecamy lekturę. Stworzenie doskonałego tematu dla WordPress: pełny przewodnik po rozwoju, od zera do mistrzostwa。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainZawartość przeznaczona do internacionalizacji musi być zgodna z nazwą foldera zawierającego tematyczne materiały. Dodatkowo należy stworzyć najprostszą wersję tego zawartości (tj. taką, która nie wymaga dodatkowych dostosowań).index.phpPlik musi zawierać tylko jedno zdanie.<?php get_header(); ?>I z jednym.<h1>Hello World!</h1>W tym momencie w panelu administracyjnym WordPress, w zakładce “Wygląd” → “Teme”, powinno być widoczne twoje tema, a także możliwość jego aktywacji. Choć na razie nic nie jest wyświetlone (ponieważ jeszcze nie stworzyliśmy żadnego tematu).header.phpTo oznacza, że już udało ci się zrobić pierwszy krok na dobrym szlaku.

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

Rozumienie struktury plików szablonowych oraz poziomów hierarchii szablonów

WordPress wykorzystuje inteligentny system zwany “strukturą szablonów”, który decyduje, jaki plik szablonu ma zostać użyty do wyświetlenia treści na określonym żądaniu strony. Zrozumienie tej struktury jest kluczowe przy rozwijaniu tematów (temaów). System szuka plików szablonów od najbardziej specyficznych; jeśli takiego pliku nie znajduje, przechodzi do bardziej ogólnych plików.

Najprostszze pliki szablonów zawierają:
* index.phpOstateczny szablon rezerwowy, który jest używany we wszystkich przypadkach, gdy nie można znaleźć bardziej specyficznego szablonu dla danej żądania.
* header.phpZawierający dokument<head>Część witryny, w szczególności jej nagłówkowy obszar.get_header()Wprowadzenie funkcji.
* footer.phpZawiera obszar stopki witryny. Poprzez…get_footer()Wprowadzenie funkcji.
* sidebar.phpZawiera elementy bocznego menu. Poprzez…get_sidebar()Wprowadzenie funkcji.
* functions.phpTo nie jest plik szablonu, lecz “baza funkcji” twojego tematu, służąca do dodawania nowych funkcji, rejestracji menu, narzędzi itd.

Dla różnych typów stron dostępne są bardziej specyficzne szablony:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Wykonuj z dowolnym ustawionym szablonem) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Używane na stronie z listą artykułów blogu) -> front-page.php(Wykorzystywane przy ustawianiu witryny statycznej jako strony startowej) -> index.php。

Tworzenie szablonów dla nagłówka i nagłówka strony (header i footer)

Najpierw należy stworzyć…header.phpMusi zacząć się od…<!DOCTYPE html>Zacznij od wprowadzenia kluczowych funkcji WordPress, np.wp_head()。

Polecamy lekturę. Niestandardowe zaawansowane motywy WordPressa: kompleksowy przewodnik po projektowaniu, rozwoju i optymalizacji.。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <p><strong>Witaj na mojej stronie!</strong></p>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/pl/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Równie tak, stworzenie…footer.phpI upewnij się, że zostanie wywołane…wp_footer()Funkcja.

    <footer>
        <p>©  . Wszelkie prawa zastrzeżone.</p>
    </footer>
    <p><strong>WP_footer();</strong></p>

<p>Nie mogę znaleźć mojego portfela.</p>

Teraz możesz aktualizować swoje…index.phpWykorzystuj te elementy szablonów.

<p><strong>Witaj na mojej stronie!</strong></p>

<main>
    <h1>„Hello World” z modułu Main!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Ulepszenie funkcjonalności tematu poprzez plik functions.php

functions.phpPlik to “ mózg” twojego tematu – w nim dodajesz nowe funkcje, rejestrujesz komponenty podstawowego systemu WordPress (np. menu i obszary z dodatkowymi elementami), a także włączasz elementy stylu (style sheets) i skrypty.

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

Dodaj obsługę tematów oraz menu nawigacji do procesu rejestracji.

Najpierw uruchomimy kilka podstawowych funkcji tematycznych. Korzystaj z…add_theme_support()Funkcja służy do deklarowania funkcji obsługiwanych przez dany temat.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对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');

Następnie należy zarejestrować pozycję w menu nawigacyjnym. To umożliwia użytkownikom konfigurację menu w zakładce “Wygląd” -> “Menu” w panelu administracyjnym oraz jego wykorzystanie w szablonach.wp_nav_menu()Funkcja ją wywołuje.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Włączenie do pliku z definicjami stylu (style sheet) i skryptów

Poprawny sposób naładowania stylów i skriptów to…wp_enqueue_style()和wp_enqueue_script()Funkcje, które są montowane…wp_enqueue_scriptsNa haczu.

Polecamy lekturę. Kompleksowa analiza tworzenia motywów WordPress: praktyczny przewodnik od podstaw do zaawansowanych technik.。

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/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Tworzenie cykli i szablonów zawartości

“Cykł” to struktura kodu PHP w WordPressu, służąca do pobierania i wyświetlania artykułów z bazy danych. Jest ona istotą prawie wszystkich plików szablonów.

Zrozumienie struktury głównego cyklu

Nawyżejindex.phpW przykładzie już widzieliśmy podstawową cyklę. Rozbierzmy ją na części:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/pl/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

Stworzenie szablonu dla pojednego artykułu

Teraz stworzymy szablon przeznaczony wyłącznie do wyświetlania pojednego artykułu.single.phpJe jest bardziej szczegółowe niż iteracja na stronie z listą.

<p><strong>Witaj na mojej stronie!</strong></p>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><?php the_title(); ?></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <p><img src='https://images.wikimedia.org/wikipedia/commons/uploads/2015/08/Liz_Rice_2015.jpg' alt="Liz Rice" /></p>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

Podsumowanie.

Dzięki temu poradnikowi ukończyłeś podstawową podróż przy tworzeniu tematu WordPress od zera. Zaczęliśmy od przygotowania środowiska rozwojowego i tworzenia podstawowych plików, a potem stopniowo zagłębiliśmy się w zrozumienie systemu poziomów tematów w WordPressie, który stanowi klucz do tworzenia elastycznych i wygodnych w użyciu tematów. Nauczyłeś się, jak tworzyć elementy, które można powtórnie wykorzystać w innych tematach.header.php和footer.phpKomponenty szablonów, wykorzystujące potężne możliwości…functions.phpPlik dodaje twojemu tematowi kluczowe funkcje, takie jak menu nawigacyjne i ładowanie stylów. Na koniec sprawdziliśmy mechanizm “cyklicznego wykonywania” w WordPressie („loop”) i stworzyliśmy szablony do wyświetlania listy artykułów oraz pojednego artykułu.

To jest tylko początek. Dalej możesz eksplorować możliwości tworzenia kolejnych, specjalnych szablonów (np.…)page.php, archive.phpDodaj obszar do rejestracji dodatkowych narzędzi, umożliwij dodawanie własnych typów artykułów i kategorii, a także zrealizuj bardziej zaawansowany design responsywny oraz interakcje z użyciem JavaScript. Pamiętaj, że referowanie do oficjalnych dokumentacji dla programistów oraz ciągłe ćwiczenie to najlepsze sposoby na rozwój swoich umiejętności.

FAQ – najczęściej zadawane pytania.

Co robić, jeśli po aktywacji mojego tematu witryna wyświetla tylko pustą ekranę (biały ekran)?

Zwykle to wynika z poważnej błędy w PHP. Najpierw sprawdź swoje kodowe źródła.functions.phpCzy w pliku znajdują się błędy gramatyczne, np. brak znaków zakończenia zdania (semikolon) lub nawiasów? Otworzyć WordPress…WP_DEBUGMożliwości dostępne w tym modelu pomogą ci zobaczyć szczegóły informacji o błędach.wp-config.phpW dokumencie zostanie przedstawionydefine('WP_DEBUG', false);Zmień to na:define('WP_DEBUG', true);。

Jak dodać funkcję personalizowanego loga do mojego tematu?

W twoim…functions.phpDokumentyadd_theme_support„Część…” – dodać jeden wiersz:add_theme_support('custom-logo');Można również przekazać parametr w postaci arrayu, aby określić rozmiar logo oraz czy jego wysokość ma być elastyczna. Następnie użytkownik może załadować logo w zakładce “Wygląd” -> “Dostosowanie” -> “Identyfikator witryny” i użyć go w szablonie.the_custom_logo();Funkcja ją wywołuje.

Dlaczego menu nawigacyjne, które zarejestrowałem, nie jest wyświetlone w tle (w obszarze administracyjnym)?

Proszę sprawdzić następujące punkty: Po pierwsze, upewnij się, że twój kod rejestracji jest poprawny.functions.phpW środku, i zostało poprawnie montowane.initHak lub…after_setup_themeNa haczu. Po drugie, upewnij się, że dobrze zdefiniowałeś…theme_locationNa przykład'primary'Podczas wywoływania…wp_nav_menu()Czas musi dokładnie odpowiadać temu, co jest określone. Po trzecie, po stworzeniu menu należy w zakładce “Wygląd” -> “Menue” -> “Uprawianie pozycji” w backendzie przypisać to menu do wybranego przez ciebie miejsca.

Jak stworzyć obszar z małymi narzędziami (boczny panel)?

Najpierw…functions.phpUżyj tego w Chinach.register_sidebar()Funkcja umożliwia rejestrację elementów interfejsu użytkownika w formie małych narzędzi („tools”). Do tej funkcji należy przekazać parametr w postaci arrayu, zawierającego informacje o każdym z tych elementów, takie jak ID, nazwa, opis itd. Następnie te elementy będą wyświetlone w pliku szablonu, w którym chcesz zainstalować boczną panelę.sidebar.phpW artykule wykorzystanodynamic_sidebar()Funkcja przyjmuje ID narzędzia i wywołuje je na jego podstawie. Na koniec…index.php或single.phpW takich szablonach należy to używać.<?php get_sidebar(); ?>Wdroż wzór boku (sidebar template).

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: