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

Pełny przewodnik po tworzeniu tematów dla WordPress: jak stworzyć własną tematę od zera

3 minuty na przeczytanie.
2026-03-13
2026-06-03
2,312
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 tematycznego niezbędne jest stworzenie stabilnego i wydajnego środowiska rozwoju lokalnego. Dzięki temu możesz szybko sprawdzić efekty wprowadzonych zmian oraz uniknąć negatywnych wpływów na witrynę internetową w publicznej sieci. Zaleca się użyć narzędzi takich jak Local by Flywheel, XAMPP lub MAMP, które umożliwiają łatwe uruchomienie lokalnego serwera z obsługą PHP i MySQL w jednym kroku.

Następnie należy ustalić strukturę katalogu tematu. Standardowe tematyczne rozwiązanie dla WordPressa zawiera zwykle następujące kluczowe pliki:style.css(Tabela stylów tematycznych i nagłówki informacyjne)index.php(Źródłowy plik szablonu głównego)functions.php(Fajl z funkcjami tematycznymi) orazheader.php、footer.php、sidebar.phpPliki dotyczące szablonów można znaleźć w katalogu instalacji WordPress.wp-content/themes/Utworz nowy folder, na przykład “my-custom-theme”, i w tym folderze zacznij tworzyć wymienione pliki.

Tworzenie pliku zagłówkowego z informacjami o temacie

“Twierdzość tematu” to…style.cssPlik. Ten plik nie tylko definiuje styl tematu, ale także blok komentarzy umieszczone na jego szczycie odgrywa kluczową rolę w identyfikacji tematu przez WordPress. Zawartość tego nagłówka musi być zgodna z określonym formatem.

Polecamy lekturę. Jak wybrać i dostosować temat WordPress odpowiedni dla twoich potrzeb?。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Wśród nichText DomainZastosowuje się do procesu internacionalizacji (i18n) i musi mieć identyczny nazwę jak folder tematyczny – to kluczowy element umożliwiający ładowanie plików z tłumaczeń. Po napisaniu tego pliku twoja tema będzie dostępna w panelu administracyjnym WordPress w sekcji “Wygląd” -> “Teme”, chociaż na razie nie będzie mieć żadnych funkcjonalnych zalet.

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

Stworzenie podstawowego pliku szablonu

WordPress wykorzystuje system poziomów szablonów, aby decydować, jaki plik szablonu ma zostać użyty w odpowiedzi na dane żądanie strony. Stworzenie podstawowego szablonu stanowi „kostrę” dla budowy tematu (tema w WordPress).

Najpierw…index.phpTo jest szablon odwołania („backtrack”) dla wszystkich stron – najprostszego z możliwych wariantów.index.phpMoże zawierać wywoły innych części szablonu.

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 包含文章内容模板
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

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

Tworzenie szablonów dla nagłówka i stopki strony

header.php Pliki zwykle zawierają deklarację typu dokumentu.Dziedziny oraz części wspólne w nagłówku witryny internetowej. Koniecznie użyj odpowiednich elementów graficznych i tekstowych.wp_head()Funkcja – ten „hak” umożliwia dodatkom (plug-inom) i tematom (tematom) wstawienie niezbędnego kodu w tym miejscu (np. stylów, skryptów, metatagó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>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的导航菜单、Logo等代码在这里 -->
</header>

W związku z tym,footer.phpPowinno zostać wyłączone.header.phpOtworzyć tag w środku i koniecznie wywołać funkcję.wp_footer()„Hak” (ang. hook) to element niezbędny w wielu wtyczkach (np. do analizy kodu) oraz w funkcjach podstawowych WordPress.

Polecamy lekturę. Przewodnik po tworzeniu najwyższej klasy tematów dla WordPress: od zera do mistrzostwa w budowaniu i personalizacji。

Ulepszenie funkcji tematycznych oraz możliwości personalizacji

functions.phpPlik stanowi “centrum kontroli” twojego tematu. Służy do dodawania funkcji wspierających temat, rejestracji menu, bocznych paneli, a także do włączenia stylów i skryptów.

Dodanie podstawowej obsługi tematów

przejść (rachunek lub inspekcję itp.)add_theme_support()Możesz deklarować w swoim temacie wsparcie dla różnych funkcji WordPress. Na przykład włączenie miniatur artykułów („Featured Images”) oraz możliwość personalizowania loga to standardowe elementy współczesnych tematów.

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 让WordPress生成和管理文档<title>标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Menu rejestracji i pasek boczny

Menü w WordPressu jest dostępne poprzez…register_nav_menus()Rejestracja funkcji. Możesz definiować kilka miejsc umieszczenia menu, na przykład “Główny nawigator” i “Nawigator w nagłówku 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 
function my_custom_theme_menus() {
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
            'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'my_custom_theme_menus' );

Boczna lista (zwana też “obszarem narzędzi”) umożliwia…register_sidebar()Rejestracja funkcji: Każdy boczny panel wymaga unikalnego ID oraz opisu.

function my_custom_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( 'Sidebar', 'my-custom-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( 'Add widgets here.', 'my-custom-theme' ),
            'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
            'after_widget' =&gt; '</section>',
            'before_title' =&gt; '<h2 class="widget-title">',
            'after_title' =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

Poziomy stylów, skriptów i szablonów

Aby upewnić się, że styl i skrypty tematu są poprawnie załadowane i nie powodują konfliktów z innymi pluginami, konieczne jest użycie funkcji obsługujących kolejki (queues) dostępnych w WordPress.

Poprawne włączenie stylów i skryptów

Nigdy nie używaj zasobów ani tagów bezpośrednio w plikach szablonów. Zamiast tego, należy korzystać z odpowiednich metod i procedur.wp_enqueue_style()和wp_enqueue_script()Funkcja.

Polecamy lekturę. Kompletny przewodnik po tworzeniu motywów w WordPressie: praktyczny poradnik od zera do publikacji.。

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 排入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果评论功能开启且是单篇文章/页面，排入评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Rozumienie i stosowanie struktury poziomów w szablonach

Struktura poziomów szablonów w WordPressie to wyjątkowo zaawansowany system. Na przykład, gdy odwiedzasz artykulik na blogu, WordPress wyszukuje odpowiedni szablon w następującym porządku:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

Możesz stworzyć specjalne pliki z wzorcami, aby zakryć standardowe wyświetlenie. Na przykład, możesz przygotować plik, który będzie definiować nowy format danych lub sposób prezentacji informacji.page-about.phpPlik ten będzie specjalnie używany do wyświetlania strony “O nas” (pod warunkiem, że alias tej strony to “about”). Kolejnym potężnym narzędziem jest…front-page.phpWykorzystuje się do definiowania stron przedniej prezentacji witryny internetowej; ma wyższy priorytet niż…home.php(Szuka strony indeksu artykułów na blogu.)

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

Podsumowanie.

Ten przewodnik systematycznie opisuje kluczowe kroki potrzebne do stworzenia własnego tematu dla WordPressa od zera. Zaczynamy od przygotowania lokalnego środowiska i tworzenia pliku zawierającego niezbędne informacje.style.cssOd… do budowy.index.php、header.php、footer.phpWiązując różne pliki z bazowych szablonów, udało się stworzyć „składankę” tematu (tj. jego strukturalną podstawę).functions.phpW odniesieniu do plików, ulepszyliśmy funkcjonalność tematów – dodaliśmy wsparcie dla tematów, możliwość ich rejestracji, a także integrację z menu nawigacyjnym i boczną ramką. Na koniec zaznaczyliśmy ważność stosowania standardowych metod WordPress do formatowania stylów i skryptów, a także wyjaśniliśmy zalety rozwiniętego systemu poziomów tematów, który umożliwia programistom tworzenie dokładnie dostosowanych wzorów wyświetlania dla różnych typów treści. Dodanie tych najlepszych praktyk nie tylko pomaga tworzyć tematy dobrze zorganizowane i łatwe w utrzymaniu, ale także gwarantuje ich kompatybilność z core’em WordPress oraz dodatkowymi modułami.

FAQ – najczęściej zadawane pytania.

###: Jak dodać własny szablon strony do mojego tematu?
Aby stworzyć własny szablon strony, najpierw należy utworzyć nowy plik w języku PHP w katalogu tematycznym (tematic directory). Na przykład:template-fullwidth.phpNa samym początku tego pliku należy dodać komentarz z nazwą określonej szablonu.

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

Następnie możesz zacząć pisać kod odpowiedzialny za layout całkowicie szerokiej strony w tym pliku, co zwykle jest realizowane w następujący sposób:get_header();Po zapisaniu zmian w WordPressie, podczas edycji lub tworzenia nowych stron w panelu administracyjnym, możesz znaleźć “Szablon strony całkowicie szerokiej” w rozwijającym się menu “Atrybuty strony” -> “Szablony”. Możesz go potem użyć w swoich projektach.

Dlaczego moje własne menu nie jest wyświetlone?

Można znaleźć kilka powodów, dla których menu nie jest wyświetlone. Najpierw upewnij się, że już włączyłeś odpowiednie elementy składające się na menu w temacie, którego używasz.functions.phpNastępnie należy przejść przez kontrolę bezpieczeństwa.register_nav_menus()Funkcja zarejestrowała położenie sekcji „Zupy”.

Następnie należy wejść do panelu administracyjnego WordPress, wybrać opcję “Wygląd” → “Menü”, stworzyć nowe menu, dodać do niego elementy (np. strony, artykuły, linki dowolne) i w obszarze “Ustawienia menu” przypisać to menu do odpowiedniej pozycji w temacie (na przykład “Główny menu”).

Na koniec należy uwzględnić fakt, że potrzebny jest dostęp do pliku szablonu (zwykle znajdującego się w określonym miejscu w strukturze projektu).header.phpMożna wywołać menu w kodzie za pomocą określonych funkcji lub metod. Konkretny sposób zależy od języka programowania i frameworku, w którym jest realizowana aplikacja.wp_nav_menu()Funkcja musi mieć wejście dla parametru “theme_location” z podaną poprawną wartością, na przykład:wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );Tylko po wykonaniu tych trzech kroków menu będzie wyświetlone poprawnie.

Jak zrobić, aby moja tematyczna strona była dostosowana do różnych języków (zrealizować jej internacjonalizację)?

Aby twoja tematyczna strona obsługiwała tłumaczenia, czyli była internationalizowana (ang. internationalization, skr. i18n), należy wykonać trzy podstawowe kroki. Pierwszy krok to “przygotowanie”: w miejscach, gdzie tekst musi zostać przetłumaczony, należy użyć funkcji dostępnych w WordPress. Najczęściej używana jest funkcja __translate().esc_html__( ‘文本’, ‘my-custom-theme’ )(Wyjście po dekodowaniu HTML) oraz_e( ‘文本’, ‘my-custom-theme’ )(Wykonaj translację i uwzględź escapeowanie znaków w drugim parametrze – polu tekstowym). Upewnij się, że tekst w tym polu jest dokładnie taki, jak chcesz, aby został wyświetlony.style.cssZdefiniowane w ChinachText DomainW pełni zgodne.

Kolejnym krokiem jest “generowanie”: za pomocą narzędzi takich jak Poedit skanujesz pliki PHP zawierające twoje tematy i generujesz nowy kod..pot(Portable Object Template) To plik z wzorcami, na którym można tworzyć dokumenty w odpowiednim języku. Tłumacz może korzystać z tego pliku do przygotowania tekstów w wymaganym formacie i języku..poI po skompilowaniu..moDokumenty.

Trzeci krok to “zwolnienie” (lub „zainstalowanie”) narzędzia: w twoim…functions.phpZ plikuafter_setup_themeW funkcji hook używa się…load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )Należy załadować plik z tłumaczeniami. Dzięki temu, gdy użytkownik zmieni język witryny, teksty w twoim temacie też będą automatycznie przekazane w nowym języku.

Jaki może być konsekwencja błędu w pliku functions.php?

functions.phpBłędy gramatyczne lub poważne błędy w tym pliku mogą doprowadzić do tego, że cała twoja strona internetowa będzie wyświetlać tylko pustą stronę (tzw. “white screen”) i na stronie serwera pojawi się informacja o poważnym błędzie. Jest tak, ponieważ ten plik jest ładowany w bardzo wczesnym etapie inicializacji WordPress, a błędy w nim mogą przerywać cały proces ładowania systemu.

Jeśli dojść do takiej sytuacji, masz kilka sposobów na jej naprawienie. Najprostszym jest korzystanie z protokołu FTP lub menadżera plików dostępnego na serwerze, aby zastąpić nieprawidłowe pliki.functions.phpPrzepisywanie nazwy pliku (na przykład na inną).functions.php.bakMożna to zrobić w następujący sposób: usunąć plik lub wypróżnić jego zawartość. Wtedy WordPress będzie go traktować jako pusty plik, co umożliwi ponowny dostęp do witryny, ale personalizacje tematu na chwilę utracą swoją skuteczność. Po tym można poprawić błędy w kodzie i przywrócić plik do stanu poprzedniego.functions.phpPrzed wykonaniem backupu oraz dokładnym testowaniem w lokalnym środowisku rozwoju jest to bardzo dobra zwykłość.

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: