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

Rozwoj tematów WordPress: Pełny przewodnik po tworzeniu własnych tematów od zera

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

Podstawowa struktura temy WordPress składa się z kilku elementów:

Temat WordPress to w istocie plik, znajdujący się w określonym miejscu w strukturze witryny internetowej.wp-content/themes/W folderze znajdują się pliki, które służą do kontrolowania wyglądu i funkcji witryny internetowej. Zrozumienie roli tych kluczowych plików jest podstawą przy jej rozwoju.

Temat wymaga pliku szablonu.

Każdy temat musi zawierać dwa najbardziej podstawowe pliki:style.css和index.phpWśród nich jeststyle.cssNie służy tylko do przechowywania stylów CSS, ale także blok komentarzy w nagłówku pliku zawiera metadane tematu. WordPress korzysta z tych informacji, by rozpoznać temat.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpTo standardowy plik szablonu tematycznego w WordPressie; używany jest wtedy, gdy system nie może znaleźć bardziej specyficznego szablonu do renderowania strony. Stanowi “zabezpieczający element” dla wszystkich witryn.

Polecamy lekturę. Stworzenie wysokiej jakości witryny internetowej: szczegółowy przewodnik po personalizacji i optymalizacji tematów WordPress。

Inne często używane pliki szablonów:

Aby lepiej kontrolować wygląd różnych stron, potrzebujesz stworzyć więcej plików z wzorcami (templateów). Na przykład…header.phpZwykle zawiera deklarację typu dokumentu.<head>Nawigacyjna część witryny (zawierająca nazwę obszaru i witryny);footer.phpWtedy zawiera się treść nagłówka strony (footer) oraz zamykające tagi.sidebar.phpDo użycia w bocowym panelu. Można to zrobić za pomocą wewnętrznych funkcji WordPress.get_header()、get_footer()和get_sidebar()Możesz łatwo włączyć te elementy do innych szablonó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

Ponadto możesz też stworzyć…single.phpDo jednego artykułu.page.phpDo używania na osobnych stronach.archive.phpWykorzystywane do archiwacji list oraz…functions.phpTen specjalny plik umożliwia dodawanie funkcji i właściwości tematów.

Stworzenie szablonu dla strony głównej tematu

Strona główna to wizytówka witryny internetowej, dlatego wymaga najbardziej oryginalnego designu. Zacznijmy od jej budowy…index.phpZacznijmy od omówienia sposobów wprowadzania cykli w kod, aby wyświetlać treści.

Integracja nagłówka i stopki strony

Dobrą praktyką jest modularizacja części publicznych aplikacji. Najpierw utwórz moduły w folderze zawierającym tematyczną strukturę aplikacji („theme folder”).header.php和footer.php… w…header.phpW tym przypadku musisz uwzględnić<!DOCTYPE html>Oświadczenie,<html>Zaczęcie etykety…<head>Obszar (użytkowanie)wp_head()„Hooki” umożliwiają wstawianie kodu w pluginy i tematy, a także w elementy witryny takie jak logo i główny menu.

Następnie, windex.phpNa początku…<?php get_header(); ?>Aby wprowadzić ten nagłówek. Windex.phpNa końcu, użyj…<?php get_footer(); ?>Aby zainicjować…footer.phpW tym musi być zawarte:wp_footer()Wiązki („hooks”) są wykorzystywane do wywoływania funkcji oraz zamykania ich działania.<p>Nie mogę znaleźć mojego portfela.</p>Tagi.

Polecamy lekturę. Pełny przewodnik po tworzeniu tematów dla WordPress: budowanie wysokiej wydajności tematów dostosowanych od zera。

Użyjć cyklu do wyświetlania artykułów

Źródłem funkcjonalności WordPress jest “The Loop” – blok kodu w języku PHP, który sprawdza, czy istnieją artykuły, i w przypadku ich obecności wyświetla je po kolei.index.php的get_header()Później możesz wstawić następujący kod bazowego dla cyklu:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/pl/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    
    <p>Przepraszamy, ale nie znaleziono żadnego artykułu.</p>
<?php endif; ?>

W tym kodzie…have_posts()和the_post()Cykl wykonywany na podstawie funkcji.the_title()、the_permalink()和the_excerpt()Tagi szablonów, takie jak , są używane do wyświetlania szczegółowych treści artykułu. W ten sposób powstaje podstawowa strona z listą artykułów.

Dodać styl i skrypty do tematu

Tema bez żadnych stylów nie jest atrakcyjne. Konieczne jest poprawne dodanie plików CSS i JavaScript do kolejki zadań – tak postępuje WordPress, co zapewnia poprawne wykonywanie zależności pomiędzy nimi oraz unikanie konfliktów.

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

Poprawne włączenie pliku z zasadami stylu (style sheet)

Chociażstyle.cssTo konieczne, ale nie powinnoś robić linków do tego bezpośrednio w HTML. Poprawny sposób to…functions.phpWykorzystuje się w pliku.wp_enqueue_style()Funkcja. Najpierw utwórz ją w katalogu głównym tematu.functions.phpDodaj plik, a potem następujący kod:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Ten kod definiuje funkcję, która instruuje WordPressa, by używać głównego pliku stylu tematu.get_stylesheet_uri()Zdobyty adres ścieżki (path) jest dodawany do kolejki z użyciem “my-theme-style” jako identyfikatora (handle).add_action()Hook umożliwia montaż tej funkcji (zainstalowanie jej w odpowiednim miejscu w systemie).wp_enqueue_scriptsZadbaj o to, aby ten kod został wykonywany w momencie załadowania strony.

Wdrożenie własnego kodu JavaScript

Metody wprowadzania plików JavaScript są podobne, ale należy użyć odpowiednich narzędzi lub instrukcji.wp_enqueue_script()Funkcja. Załóżmy, że masz funkcję, która znajduje się w…js/script.jsAby dodać plik, możesz postąpić w następujący sposób:

Polecamy lekturę. Od poznania podstaw do osiągnięcia biegłości: Pełny przewodnik i praktyczne kursy rozwoju tematów dla WordPress。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

W tym przypadku parametry oznaczają: identyfikator skryptu, adres URL skryptu oraz array zależności (np. …).array('jquery')Numer wersji, a także informacja o tym, czy element jest wyświetlany w nagłówku strony (na dole strony – „footer”).trueOznacza „wyraża” lub „pokazuje”.(Techniczny termin: „prefetching”).

Rozszerzenie funkcji tematycznych

functions.phpTo “skrzynka narzędzi” tematu – możesz tu dodawać różne funkcje, aby ulepszyć wygląd tematu, bez konieczności modyfikacji głównych plików szablonów.

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

Dodaj funkcję obsługi tematów.

WordPress oferuje wiele włączonych funkcji, ale aby je uruchomić, temat musi wyraźnie zadeklarować ich wsparcie. To jest realizowane poprzez…add_theme_support()Implementacja funkcji. Na przykład, aby obsługiwać miniatury artykułów (specjalne zdjęcia), własne loga oraz elementy HTML5, można to zrobić w następujący sposób:functions.phpDodaj to do środka:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Upewnij się, że te ustawienia zostaną uruchomione jak najszybciej podczas inicjalizacji tematu.

Rejestracja menu nawigacyjnego

Aby użytkownicy mogli ustawić nawigację w sekcji “Wygląd – Menü” w backendzie, należy uprzednio zarejestrować położenie poszczególnych elementów menu.register_nav_menus()Funkcja:

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

Po rejestracji będziesz mógł korzystać z plików z szablonami (np.header.php) używa się wwp_nav_menu( array( 'theme_location' => 'primary' ) )Teraz menu zostało wyświetlone.

Podsumowanie.

Od momentu stworzenia…style.css和index.phpZaczynając od podstawowego foldera tematu WordPress, pozwoliłeś sobie stopniowo stworzyć pełną tematyczną strukturę. Poprzez zrozumienie hierarchii szablonów nauczyłeś się tworzyć specjalne pliki szablonów, aby precyzyjnie kontrolować różne typy stron.wp_enqueue_style()和wp_enqueue_script()Używanie narzędzi do zarządzania zasobami to najlepsza praktyka, aby zapewnić kompatybilność i wydajność aplikacji. Na koniec, warto skorzystać z dostępnych możliwości…functions.phpMożesz przekazać plik w następujący sposób:add_theme_support()和register_nav_menus()Funkcje takie jak „wait” umożliwiają bezpieczne dodawanie potężnych funkcji do tematów WordPress. Opanowanie tych kluczowych kroków zapewni ci solidną podstawę do samodzielnego tworzenia personalizowanych tematów WordPress.

FAQ – najczęściej zadawane pytania.

Jaki jest wymagany poziom wiedzy, by rozwijać tematy dla WordPress?

Konieczne jest posiadanie solidnych umiejętności w zakresie HTML i CSS, aby tworzyć struktury i stylizację stron internetowych. Ponadto należy znać podstawy języka PHP, ponieważ tematy WordPress są w większości przypadków realizowane przy użyciu tego języka. Podstawowe znania JavaScriptu pomogą w dodawaniu interaktywnych elementów na stronach. Dodatkowo znajomość podstawowych konceptów WordPress (artekle, strony, kategorie, tagi) ułatwi proces rozwoju aplikacji.

Dlaczego do wczytywania arkusza stylów należy użyć funkcji wp_enqueue_style, a nie po prostu linku?

Można to zrobić bezpośrednio.<link>Kodowanie w sposób stały (hardcoding) ścieżki do plików z wzorcami stylu (style sheets) powoduje kilka problemów. Po pierwsze, nie jest w stanie poprawnie obsługiwać zależności pomiędzy różnymi elementami projektu – na przykład twoje style mogą być zależne od stylów dostępnych w jakimś frameworku. Po drugie, taka metoda utrudnia aktualizację tych plików w razie potrzeby.wp_enqueue_styleDzięki temu rozwiązaniu pluginy lub inne elementy tematów mogą bezpiecznie przepisywać lub modyfikować Twoje ustawienia stylu. Najważniejsze jest to, że współpracuje lepiej z pluginami do cache’owania i optymalizacji wydajności, zapewniając właściwy kolejność i efektywność ładowania zasobów. Jest to standardowa praktyka w środowisku WordPress.

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

functions.phpKod zdefiniowany w temacie jest ściśle powiązany z jego wyglądem i funkcjonalnością; gdy użytkownik zmienia temat, te funkcje przestają być dostępne. Jest przeznaczony do przechowywania elementów bezpośrednio dotyczących wizualnego prezentowania i układu strony – np. menu rejestracji, obsługi specjalnych zdjęć, definiowania bocznych paneli itd. Natomiast funkcje dostępne w formatach pluginów są zwykle niezależne od tematu i są przeznaczone do dodania jakiejś ogólnej funkcjonalności do witryny (np. formularzy kontaktowych, optymalizacji pod kątem SEO). Dlatego, jeśli jakakaś funkcja nie wpływa na wygląd witryny, zwykle lepszym rozwiązaniem jest umieszczenie jej w formie pluginu, aby zachować jej dostępność nawet po zmianie tematu.

Jak zrobić, aby moja tematyczna strona obsługiwała tłumaczenie w kilku językach?

Rozszerzenie funkcjonalności tematów o wsparcie dla języków obcojęzycznych jest kluczowym krokiem na drodze do wejścia na globalny rynek. Najpierw we wszystkich miejscach, gdzie wyświetla się tekst z tematów, należy używać funkcji tłumaczenia dostępnych w WordPress.__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')W tym przypadkumy-custom-themeTo jest...style.cssTekst zdefiniowany w tym obszarze zostanie następnie skanowany za pomocą narzędzia takiego jak Poedit w celu generowania wymaganych plików tematycznych..potPliki szablonów, które umożliwiają twórcy tłumaczeń tworzenie tekstów w różnych językach..po和.moPlik. Na koniec…functions.phpNastępnie należy przejść przez kontrolę bezpieczeństwa.load_theme_textdomain()Funkcja załadowuje plik z tłumaczeniami.

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: