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

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

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

Podstawy rozwoju tematów dla WordPressa oraz przygotowanie środowiska do pracy

Aby zacząć rozwijać tematy dla WordPressa, należy najpierw zrozumieć jego podstawową strukturę. Najprostszego tematu musi składać się z co najmniej dwóch plików:style.css 和 index.phpWśród nich jeststyle.cssNie tylko zawierają arkusze stylu, ale także metadane tematu, takie jak nazwa tematu, autor, opis itd. Te informacje są definiowane za pomocą bloków komentarzy w CSS i są kluczowe dla identyfikacji tematu w WordPress.

Utworzenie lokalnego środowiska rozwoju

Przed rozpoczęciem pisania kodu istotne jest stworzenie efektywnego środowiska rozwoju lokalnego. Zaleca się używać pakietów, które integrują Apache/Nginx, PHP i MySQL, np. Local by Flywheel, XAMPP lub MAMP. Te narzędzia umożliwiają łatwe uruchomienie lokalnego serwera w jednym kroku, simulując w ten sposób warunki działania w środowisku online. Ponadto konieczne jest instalowanie edytora kodu na miejscu, np. Visual Studio Code lub PhpStorm, które oferują wyjątkowe funkcje podkreślania gramatycznego oraz sugestji kodu dla języków PHP, HTML, CSS i JavaScript.

Po przygotowaniu środowiska rozwoju konieczne jest uruchomienie odpowiednich procedur w katalogu instalacji WordPress.wp-content/themesUtworź w folderze folder z twoimi tematami. Na przykład, stwórz folder o nazwie „my Themes”.my-first-themeKatalogu, a potem w tym katalogu utworzyć niezbędne pliki.style.cssDokumenty.

Polecamy lekturę. Pełny przewodnik po tworzeniu tematów dla WordPress: jak stworzyć własną, personalizowaną stronę internetową od zera。

Napisanie informacji w nagłówku tematu

style.cssKomentarze umieszczone w nagłówku pliku stanowią “dowód tożsamości” tematu. Poniżej jest przykład podstawowych informacji zawartych w nagłówku:

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 
/*
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
Text Domain: my-first-theme
*/

Wśród nichText DomainWykorzystywane do internacionalizacji (i18n) – służą do dalszego stosowania funkcji tłumaczeniowych.__()或_e()To identyfikator, który musi zostać użyty w określonym momencie. Po stworzeniu tego pliku twoja tematyczna szablonka pojawi się w meniu “Wygląd” -> “Tematy” w panelu administracyjnym WordPress, chociaż na razie nie będzie mieć żadnych funkcji.

Podstawowe pliki szablonów oraz struktura hierarchii szablonów

WordPress używa systemu poziomów szablonów, aby określić, w jaki sposób mają być wyświetlone różne typy treści. Zrozumienie tego systemu stanowi podstawę dla tworzenia elastycznych tematów. Gdy użytkownik odwiedza stronę, WordPress wyszukuje odpowiedni plik szablonu według określonego porządku priorytetów.

Zrozumienie struktury poziomów w szablonach

Na przykład, gdy odwiedzasz tekst blogowego (jedno postanie), WordPress sprawdza kolejno:single-post-{post-id}.php -> single-post-{post-type}.php -> single.php -> singular.php -> index.phpProgramiści muszą tylko stworzyć wymagane pliki szablonów, a WordPress automatycznie wybierze ten, który najbardziej pasuje do potrzeb.

Tworzenie pliku z bazowym szablonem

Oprócz tegoindex.phpTemat pełnowartościowy zawiera zwykle następujące kluczowe pliki szablonów:
* header.phpNawigacja na stronie internetowej, zawierająca:<head>Nazwy obszarów i witryn, menu nawigacyjne.
* footer.phpNiezawodna część strony internetowej – nagłówek (footer) zawierający informacje o autorskich prawach itp.
* sidebar.phpObszar z dodatkowymi narzędziami w panelu boczym.
* functions.phpPlik funkcjonalny dotyczący tematu, służący do dodawania nowych funkcji, rejestracji elementów menu, narzędzi itd.
* style.cssGłówny plik z definicjami stylu.
* page.phpWykorzystuje się do wyświetlania stron statycznych.
* single.phpWykorzystuje się do wyświetlania pojednego artykułu z blogu.
* archive.phpWykorzystuje się do wyświetlania listy archiwów artykułów (np. kategorii, tagów, stron autorów).

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

Za pomocą tagów szablonów można włączyć inne części do różnych plików szablonów. Na przykład:index.phpWłącz element nagłówka na szczycie:<?php get_header(); ?>Ta funkcja automatycznie dokona ładowania wymaganych elementów.header.phpDokumenty.

Możliwości tematów są integrowane z core’em WordPress.

functions.phpPlik ten stanowi “umysł” tematu – umożliwia rozszerzenie funkcji tematu oraz głębokie integracje z core’em WordPress, bez konieczności modyfikacji plików znajdujących się w tym core’ie. Ten plik jest automatycznie ładowany po aktywacji tematu.

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

Użyjadd_theme_support()Funkcje mogą określać, które funkcje WordPress są obsługiwane przez twoją tematyczną stronę. To powinno być uwzględnione w dokumentacji lub instrukcjach dotyczących instalacji i konfiguracji tej tematy.after_setup_themeDziałanie jest wykonywane w związku z hookami („action hooks”). Na przykład, kod umożliwiający włączenie specjalnego obrazu do artykułu oraz ustawienie własnego loga wygląda tak:

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 mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 支持HTML5标记（用于评论列表、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Zarejestruj menu nawigacyjne oraz obszar z pomocniczymi narzędziami.

Menü nawigacyjne i dodatki to istotne elementy, które umożliwiają interakcję między tematem a użytkownikiem. Najpierw należy…functions.phpTrzeba je zarejestrować, a dopiero potem można je wykorzystać w szablonach.

Użyjregister_nav_menus()Miejsce rejestracji funkcji:

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

Po rejestracji użytkownicy mogą zarządzać menu w tych miejscach w panelu administracyjnym, w zakładce “Wygląd” -> “Menü”. W szablonach (np.header.php(...) przy użyciuwp_nav_menu()Funkcja wyświetlająca menu.

Polecamy lekturę. Uczenie się tworzenia tematów dla WordPressa od zera: tworzenie personalizowanych stron internetowych。

Użyjregister_sidebar()Obszar do rejestracji funkcji:

function mytheme_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; '<h2 class="widget-title">',
        'after_title' =&gt; '</h2>'add_action( 'widgets_init', 'mytheme_widgets_init' );

W szablonie (na przykład…)sidebar.php(...) przy użyciudynamic_sidebar( 'sidebar-1' )Aby wyświetlić tę obszarę z pomocnymi narzędziami.

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

Uprawianie stylów, skriptów oraz personalizacja tematów

W dzisiejszym rozwoju tematów dla WordPressu istnieje wymóg standardowego zarządzania plikami z stylami (CSS) i skryptami (JavaScript), a także wykorzystywania w pełni API narzędzia do personalizacji (Customizer) w celu oferowania użytkownikom możliwości przeglądania konfiguracji w czasie rzeczywistym.

Poprawne włączenie CSS i JavaScript

Nigdy nie używaj tego bezpośrednio w plikach z wzorcami (templates).<link>或<script>Ressursy związane z tagami powinny być zapisane w sposób stały (hardcoded). W tym celu należy używać odpowiednich technik i procedur programowania.wp_enqueue_style()和wp_enqueue_script()Funkcja, poprzez…wp_enqueue_scriptsZawarto elementy typu „hook” służące do ładowania wymaganych elementów. Dzięki temu są zapewnione poprawne zależności pomiędzy różnymi komponentami, a także unikane jest ich powtarzane ładowanie.

function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 引入Google Fonts
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主JavaScript文件，依赖jQuery，并在页脚加载
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Integracja z WordPress Customizerem

Dzięki narzędziu do personalizacji użytkownicy mogą w czasie rzeczywistym zmieniać ustawienia tematu, takie jak kolory, logo, tekst na nagłówku itd. Możesz go używać według swoich potrzeb.WP_Customize_ManagerMożna dodawać ustawienia, elementy kontrolne (kontrole) oraz obszary (zony) za pomocą obiektów.

Poniżej jest prosty przykład funkcji umożliwiającej dostosowanie tekstu na dole strony (tzw. nagłówka strony):

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“页脚设置”区域
    $wp_customize->add_section( 'mytheme_footer_options', array(
        'title'    => __( '页脚设置', 'my-first-theme' ),
        'priority' => 160,
    ) );

// 添加一个“页脚版权文本”设置
    $wp_customize->add_setting( 'mytheme_footer_copyright', array(
        'default'           => __( '© 2026 我的网站。保留所有权利。', 'my-first-theme' ),
        'sanitize_callback' => 'sanitize_text_field', // 数据清理回调函数
        'transport'         => 'refresh', // 或 ‘postMessage’ 用于无需刷新的实时预览
    ) );

// 为这个设置添加一个文本输入控件
    $wp_customize->add_control( 'mytheme_footer_copyright', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'mytheme_footer_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

在footer.phpW szablonie możesz używać…get_theme_mod()Funkcja służy do pobrania i wyświetlenia tego wartości:<?php echo get_theme_mod( 'mytheme_footer_copyright' ); ?>。

Podsumowanie.

Rozwoj tematów dla WordPress to proces złożony i systematyczny, który polega na zrozumieniu podstawowych plików szablonów oraz struktury hierarchicznej, a potem na dalszym rozwoju tematu poprzez dodawanie nowych funkcji i elementów interfejsu.functions.phpIntegracja kluczowych funkcji, standardowa administracja skryptów zasobów oraz dostosowanie interfejsu konfiguracji pod potrzeby użytkowników to elementy, które sprawiają, że temat WordPress jest łatwy w obsłudze. Dodanie tych elementów do tematu zgodnie z zasadami programowania i najlepszymi praktykami WordPressu nie tylko sprawia, że temat jest bardziej stabilny i bezpieczny, ale także ułatwia jego konserwację i kompatybilność z innymi pluginami. Opanowanie tych podstawowych umiejętności daje ci możliwość stworzenia profesjonalnego, dostosowanego tematu WordPressu, który spełnia aktualne standardy internetu.

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ć cztery kluczowe technologie: PHP, HTML, CSS i JavaScript. PHP stanowi element podstawowy, służy do obsługi dynamicznych danych i logiki. HTML umożliwia budowę struktury stron internetowych. CSS odpowiada za styl i rozkład elementów na stronie. JavaScript jest używany do realizacji interaktywnych elementów na stronie. Ponadto znajomość podstaw SQL pomoże zrozumieć procesy wywoływania danych.

Jak sprawić, aby mój temat spełniał wymogi oficjalnych standardów sprawdzania przez WordPress?

Aby temat spełniał wymogi sprawdzania przez katalog tematów na stronie WordPress.org, konieczne jest ścisłe stosowanie instrukcji zawartych w podręczniku do rozwoju tematów. Kluczowe zasady to: bezpieczny kod (wszystkie dynamicznie wyświetlające się elementy muszą być odpowiednio zabezpieczone przed atakami), stosowanie hierarchii szablonów, poprawne używanie funkcji hooków, obsługa dostępności (WCAG), responsywny design, unikanie wykorzystywania funkcji już wycofanych oraz dostępna pełna integracja z mechanizmami lokalizacji.

Czym jest temat dziecinny (child theme) i dlaczego powinienem go używać?

Podtema to niezależna temata, która jest zależna od tematy matcznej i pochłania wszystkie jej funkcje, style oraz pliki szablonów. Największym plusem stosowania podtemat jest to, że gdy temat matczna zostanie aktualizowana, Twoje własne zmiany (np. modyfikacje stylów lub zastąpienie plików szablonów) nie zostaną utracone. To najbezpieczniejszy i najzaleczeńszy sposób na dostosowanie lub aktualizację jakiejkolwiek istniejącej tematy.

Jakie funkcje należy użyć w temacie, aby uzyskać ścieżkę do pliku tematycznego lub jego URL?

Konieczne jest używanie funkcji adresowania dostępnych w WordPressie, aby zapewnić poprawność działania systemu.get_template_directory_uri()URL do uzyskania katalogu tematycznego rodziców (np. adresy plików CSS/JS).get_stylesheet_directory_uri()URL do uzyskania katalogu aktualnego tematu aktywnego (jeśli jest to podtema, to wskazuje na ten podtemat).get_template_directory()和get_stylesheet_directory()Wykorzystuje się do uzyskania fizycznego adresu na serwerze.

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: