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

Kompletny przewodnik po tworzeniu motywów w WordPressie: od podstaw do zaawansowanych technik tworzenia niestandardowych interfejsów.

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

Przygotowanie środowiska i podstawowe pojęcia

Przed rozpoczęciem pracy nad rozwojem jest niezbyt ważne stworzenie efektywnego środowiska pracy oraz zrozumienie architektury tematów WordPress.

Ustawienie środowiska rozwoju lokalnego

Stabilne środowisko lokalne stanowi podstawę efektywnego rozwoju oprogramowania. Zaleca się jego używanie.Local(Rozwinięte przez Flywheel) lubMAMP、XAMPPNie ma dostępnych informacji na temat wymaganych narzędzi lub środowisk integracyjnych. Po zakończeniu instalacji upewnij się, że w środowisku znajdują się PHP w wersji 7.4 lub wyższej, MySQL/MariaDB, a także serwery Apache/Nginx. Następnie pobierz najnowsze pliki core’a WordPress i zainstaluj je. Ponadto konieczny jest dobry editor kodu.Visual Studio Code或PhpStormNiezbytowe są również narzędzia deweloperskie, które pomagają w debugowaniu w przeglądarcach.

Zrozumienie struktury katalogu tematycznego

Standardowa tematyczna struktura WordPress składa się z serii obowiązkowych oraz opcjonalnych plików. Najważniejszym plikiem jest…style.css和index.php。style.cssNie tylko dostarcza wzory, ale także komentarze w nagłówku pliku definiują metadane tematu, takie jak nazwa tematu, autor, opis i numer wersji. Inne ważne pliki szablonów to te, które są używane do jednej strony artykułu.single.phpWykorzystywane dla jednej strony witryny.page.phpWykorzystywane w liście archiwów artykułówarchive.phpA także te, które są używane do wyświetlania strony z wynikami wyszukiwania.search.phpNie są to pliki szablonowe, np. te używane do realizacji funkcji tematycznych.functions.phpI ten, który jest używany do prezentacji zdjęć zrzutów ekranu tematów.screenshot.pngTo również ważna część tematu. Zrozumienie tej struktury jest podstawą organizacji kodu.

Polecamy lekturę. Rozwoj tematów WordPress: Stworzenie swojego własnego designu witryny od zera。

Stworz swoją pierwszą tematyczną publikację.

Zacznijmy od zera i stworzymy najprostszą tematę typu “Hello World”, aby zrozumieć funkcję poszczególnych kluczowych plików.

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

Definiowanie informacji w nagłówku pliku z wzorcami stylu tematycznego

Pierwszy krok w tworzeniu tematu to utworzenie foldera w katalogu głównym tematu.style.cssPlik. Blok komentarzy umieszczonego na jego szczycie stanowi “dowód tożsamości” tematu, który WordPress używa do jego identyfikacji. Ta informacja jest niezbyt ważna i musi zostać wpisana poprawnie.

/*
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.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
*/

Wśród nichText DomainWykorzystuje się to do internacionalizacji – jest to identyfikator tekstów tłumaczonych, które są ładowane później. Po stworzeniu tego pliku w panelu administracyjnym WordPress w sekcji “Wygląd” -> “Teme” pojawi się tema o nazwie “Moje pierwsze tema” („My First Theme”).

Tworzenie podstawowych, kluczowych plików szablonów

Tylko dzięki…style.cssTemat nadal nie funkcjonuje poprawnie. Następnie należy stworzyć najprostszą, najbazową wersję tego tematu.index.phpTo plik zawierający alternatywny szablon tematu. WordPress używa tego szablonu, gdy nie są dostępne inne, bardziej specyficzne wersje tego tematu.

在index.phpMożesz zacząć od najprostszego struktury HTML oraz funkcji dostępnych w jądrze WordPress.

Polecamy lekturę. Szczegółowa analiza tworzenia motywów w WordPressie: podręcznik dotyczący kluczowych technik, od podstaw do zaawansowanych zagadnień.。

<!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>
    <header>
        <h1>Moja pierwsza tema dla WordPress.</h1>
    </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>© Podstawa strony</p>
    </footer>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

Ten plik zawiera kilka kluczowych funkcji:wp_head()和wp_footer()To konieczny hook, który umożliwia dodawanie niezbędnego kodu (takiego jak style i skrypty) przez pluginy oraz core WordPressa do nagłówka i dołu strony.the_title()和the_content()Znajduje się tu informacja o tym, w jaki sposób wyświetla się nagłówek i treść artykułu.

Wprowadź plik z funkcjami i uruchom ich inicjalizację.

functions.phpTwój temat “Brain” służy do przechowywania wszystkich dostosowanych funkcji, zarejestrowanych elementów (np. menu i bocznych paneli), a także do włączenia wsparcia dla tematów oraz do importowania skryptów i stylów. Ten plik jest automatycznie ładowany podczas inicjalizacji tematu.

<?php
// 主题初始化函数
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的Feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册并加载样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Poziomy tematycznych szablonów oraz zaawansowane funkcje

Po opanowaniu podstaw należy dogłębnie zrozumieć, jak w WordPressie wybierać pliki szablonów, a także nauczyć się implementować zaawansowane funkcje, takie jak dostosowane menu czy boczne menu.

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

Zrozumienie struktury hierarchicznej szablonów

Struktura poziomów szablonów w WordPressie to wyjątkowo skuteczny system, który według typu aktualnie wyświetlonej strony wyszukuje najbardziej odpowiednią plikę szablonu w określonym porządku. Na przykład, gdy odwiedzasz artykul w blogu, WordPress sprawdza kolejno:single-post-{slug}.php、single-post-{id}.php、single-post.php、single.phpI dopiero w końcu cofnął się do wcześniejszego punktu.index.phpZrozumiejąc ten proces, możesz stworzyć wyjątkowo atraktywne szablony dla określonych kategorii, stron lub nawet autorów. Można to zrobić za pomocą dostępnych narzędzi i zasad projektowania.get_template_part()Można modularnie organizować fragmenty szablonów w funkcjach – na przykład oddzielić nagłówek (header), stopkę (footer) oraz elementy cyklu artykułów (loop) do osobnych plików. To sprawia, że kod jest bardziej wykorzystywalny (można go powtórnie zastosować w innych projektach).

Implementowanie menu nawigacyjnego i obszaru z dodatkowymi funkcjami („gadżetów”)

Aby dodać menu nawigacyjne do tematu, musisz wykonać dwa kroki: pierwszy krok to…functions.phpUżyj tego w Chinach.register_nav_menus()Zarejestruj lokalizację restauracji, jak pokazano wcześniej. Następnie, w pliku z szablonem (np.…)header.phpW miejscu, gdzie należy wyświetlić menu, należy wywołać odpowiedni kod.wp_nav_menu()Funkcja jest przeznaczona do jej wyświetlania.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
    'container'      => 'nav',
) );

Obszar dla widgetów, zwany też boczną ramką (sidebar), umożliwia użytkownikom dostosowanie modułów na stronie poprzez przeciąganie elementów w tle. Aby zarejestrować obszar dla widgetów, należy użyć…register_sidebar()Funkcja.

Polecamy lekturę. Kompleksowy przewodnik po tworzeniu strony internetowej: szczegółowy opis kroków, jak stworzyć profesjonalną stronę firmową, od zera do publikacji online.。

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此处添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget' =&gt; '</section>',
        'before_title' =&gt; '<h3 class="widget-title">',
        'after_title' =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Po rejestracji możesz zobaczyć “Główną boczną nawigację” w sekcji “Wygląd” -> “Dodatki” w panelu administracyjnym i dodać je do swojego projektu. W szablonach należy używać tych elementów według odpowiednich instrukcji.dynamic_sidebar( 'sidebar-1' )Funkcja umożliwia wyświetlenie zawartości obszaru z gadżetami w wskazanym miejscu.

Dostosowanie tematów oraz optymalizacja wydajności

Wysokiej jakości temat nie tylko musi mieć pełną funkcjonalność, ale także musi być łatwy w dostosowaniu i efektywny pod względem działania.

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

Tworzenie własnych opcji i paneli kontrolnych

Wraz z rosnącą liczba funkcji tematycznych integracja elementów konfiguracyjnych w panel administracyjny WordPress stanowi wyraz profesjonalizmu. Możesz użyć API ustawień WordPress, aby stworzyć bezpieczne i standardowe strony z opcjami konfiguracyjnymi. W przypadku bardziej złożonych konfiguracji wielu programistów preferuje inne rozwiązania.KirkiMożna użyć różnych frameworków do tworzenia elementów personalizacji lub zintegrować te funkcje bezpośrednio w panelu “Wygląd” -> “Dostosowanie”.

Poniżej jest przykład prostego sposobu dodania obsługi dodatkowego logo (custom logo). Najpierw…functions.phpW oświadczeniu podkreślono, że temat wyposażony jest w funkcję dostosowywania loga:

add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

A potem, w szablonie nagłówka tematu, użyj…the_custom_logo()Funkcja służy do wyświetlania logo przesłanego przez użytkownika.

Techniki dla optymalizacji wydajności tematów

Wydajność jest kluczową elementem doświadczenia użytkownika. Podczas procesu rozwoju należy kształtować dobre nawyki. Najpierw upewnij się, że wszystkie skrypty i style są poprawnie zainstalowane i działają bez problemów.wp_enqueue_script()和wp_enqueue_style()Poprawnie zarejestruj się i wejdź do kolejki, a następnie używaj tych informacji w odpowiednich miejscach.wp_dequeue_script()Usun niepotrzebne zasoby. Jeśli chodzi o zdjęcia, użyj…add_image_size()Zarejestruj odpowiednie wymiary miniatur i użyj ich na stronie klienta (w frontendzie).srcsetAtrybuty umożliwiają implementację zdjęć responsywnych (dostosowanych do różnych rozdzielczości ekranów). Wykorzystanie API cache WordPress oraz cache obiektowego może znacząco poprawić efektywność wykonywania zapytań do bazy danych. Na koniec, po zakończeniu rozwoju, należy użyć narzędzi do testowania szybkości witryny (np. GTmetrix, Google PageSpeed Insights) do analizy tematu (tema WordPress), a także skompresować pliki CSS i JavaScript. Można zastanowić się nad wdrożeniem funkcji łagodnego ładowania (Lazy Load) zdjęć.

Podsumowanie.

Rozwoj tematów dla WordPress jest procesem systematycznym, który zaczyna się od zrozumienia ich architektury, a potem przechodzi do analizy poziomu szablonów, rozszerzania funkcji oraz optymalizacji wydajności. Poprzez budowę prostego tematu od zera, programiści mogą nabrać praktycznych umiejętności w tej dziedzinie.style.css、index.php和functions.phpZadania tych trzech kluczowych plików… Następnie, za pomocą hierarchii szablonów, można stworzyć dokładne szablony stron, a interaktywność tematu można zwiększyć poprzez dodanie menu rejestracyjnego oraz obszaru z dodatkowymi funkcjami. W końcu, poprzez wdrożenie dostosowanych opcji oraz stosowanie najlepszych praktyk dotyczących wydajności, można zwykły temat przekształcić w profesjonalny, wydajny i przyjazny użytkownikowi produkt. Ciągłe uczenie się i stosowanie tych podstawowych zasad jest konieczne, jeśli chcesz stać się doświadczonym developerem tematów dla WordPress.

FAQ – najczęściej zadawane pytania.

Aby rozwijać tematy dla WordPress, należy opanować następujące języki programowania:

Aby rozwijać tematy dla WordPress, należy opanować języki PHP, HTML, CSS oraz podstawy JavaScriptu. PHP służy do obsługi logiki na stronie serwera i generowania dynamicznego zawartości; HTML stanowi „kostrę” witryny internetowej; CSS odpowiada za styl i układ witryny; JavaScript umożliwia realizację interaktywnych elementów na stronie klienta. Podstawowe znania SQL również pomagają zrozumieć zapyty do bazy danych.

Jak zrobić, aby moja tematyczna strona była wsparzona w kilku językach (internacjonalizowana)?

Musisz skorzystać z funkcji internacionalizacji (i18n) w WordPress. W kodzie należy używać funkcji tłumaczeniowych dla wszystkich tekstów przeznaczonych dla użytkowników.__('文本', 'text-domain')或_e('文本', 'text-domain')… w…style.css„Prawidłowa definicja” w języku polskim to „Poprawna i dokładna definicja”.Text DomainNastępnie, użyj narzędzi takich jak Poedit do generowania wymaganych plików..potPliki szablonów, a także pliki w różnych językach..po和.moPlik tekstowy do tłumaczenia został umieszczony w folderze związanym z tematem./languages/W katalogu.

Czym jest temat dziecinny (child theme) i czemu należy go używać?

Podtema to temata, która dziedziczy wszystkie funkcje i wzory od innej tematy (tematy matczyniej). Dzięki temu możesz modyfikować lub ulepszać temat matczyną, bez konieczności edycji jej kodu. Korzyść z tego rozwiązania polega na tym, że gdy temat matczyna zostanie aktualizowany, twoje własne zmiany (zawarte w podtemacie) nie zostaną utracone, co gwarantuje bezpieczeństwo aktualizacji. Aby stworzyć podtemę, wystarczy skorzystać z specjalnych komentarzy (zwanych „Header comments”) umieszczone w kodzie tematy.style.cssPlik i jeden…functions.phpDokumenty.

Jak dodać własny typ posta (Custom Post Type) do swojego tematu?

Możesz dodać własne typy artykułów poprzez pisanie kodu lub używanie wtyczek. Zaleca się to robić w ramach tematów podstawowych (subtematów).functions.phpWykorzystuje się w pliku.register_post_type()Aby zarejestrować funkcję, należy określić odpowiednie parametry dla tego typu artykułu, takie jak tagi, obsługiwanie funkcji (np. tytuł, edytor, miniatura), a także informacje o dostępności artykułu (czy jest on publiczny itd.). To często wiąże się z tworzeniem własnej kategorii klasyfikacyjnej.register_taxonomy()Można je łączyć ze sobą, aby stworzyć złożone struktury treści, takie jak opisy produktów lub portfolio.

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: