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

Wprowadzenie do tworzenia motywów w WordPressie: krok po kroku twórz swój pierwszy niestandardowy motyw.

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

Przygotowanie i konfiguracja środowiska

Przed rozpoczęciem pisania pierwszej linii kodu potrzebny jest odpowiedni środowisko do rozwoju. W skład tego środowiska wchodzą lokalny serwer oraz editor kodu. Zaleca się użyć narzędzi takich jak XAMPP, MAMP lub Laragon do uruchomienia lokalnego serwera – te programy umożliwiają jednorazową instalację i uruchomienie Apache, MySQL oraz PHP. Wybierz editor kodu, który ci odpowiada (np. Visual Studio Code, Sublime Text lub PHPStorm); ich funkcje podkreślania kodu i automatycznego dopowiadania znaków znacznie poprawią twoją efektywność pracy.

Następnie musisz utworzyć katalog dla twojego nowego tematu w lokalnej instalacji WordPress. Wszystkie tematy WordPress są przechowywane w określonym miejscu w systemie. /wp-content/themes/ W folderze znajdującym się w katalogu utwórz nowy folder dla tematu, który zamierzasz stworzyć. Na przykład, nazwij go „myNewTopicFolder”. my-first-themeNazwa tego foldera jest identyfikatorem twojego tematu i będzie wyświetlona w liście tematów w tle aplikacji.

W tym samym czasie musisz zrozumieć dwa fundamentalne elementy rozwoju tematów WordPress: pliki szablonów (templates) i pliki stylów (style sheets). Najprostszym temacie WordPress potrzebne są tylko dwa pliki:style.css 和 index.php。style.css Nie tylko kontroluje wizualny styl witryny, ale także blok komentarzy w nagłówku pliku stanowi “dowód tożsamości” tematu – zawiera informacje metadanych takie jak nazwa tematu, autor, opis itd.index.php To jest plik zdefiniowanego domyślnie szablonu głównego.

Polecamy lekturę. Kompletny przewodnik po tworzeniu motywów w WordPressie: budowanie niestandardowego motywu od podstaw.。

Tworzenie pliku z kluczowymi tematami

Definowanie stylu tematycznego oraz informacji

Wszystko zaczęło się od… style.css Zacznij. Utworź ten plik w katalogu głównym foldera z tematami (theme folder) i dodaj na początku pliku blok komentarza w ustalonym formacie. Ten blok komentarza jest kluczowy dla rozpoznawania i ładowania tematu przez WordPress. Poniższy kod pokazuje przykład nagłówka pliku zdefiniującego styl (style sheet header):

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://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Wśród nichText Domain Zastosowuje się to do celów internacjonalizacji (i18n) – aby przygotować się na przyszłe tłumaczenia w kilku językach. Po stworzeniu tego pliku loguj się do panelu administracyjnego WordPress i przejdź na stronę “Wygląd” → “Teme”. Powinienś tam zobaczyć swoje tema, chociaż na razie nie posiada ono żadnych funkcji.

Stworzenie struktury podstawowego szablonu

Następnie tworzymy plik szablonu dla tematu. index.phpTo najprostszy dostępny szablon. Gdy WordPress nie może znaleźć bardziej specyficznego pliku szablonu (np. single.php 或 page.phpGdy to jest konieczne, właśnie wtedy się to używa. Najprostszym przykładem jest… index.php Można zawierać tylko podstawowe funkcje, które służą do wywoływania nagłówka, cykli oraz zakończenia kodu w WordPress.

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </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>©</p>
    </footer>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

Ten plik wykorzystuje standardowe tagi szablonów WordPress. bloginfo() Zdobycie informacji o stronie internetowejthe_title() 和 the_content() W cyklu wyświetlać nagłówki i treści artykułów.wp_head() 和 wp_footer() To kluczowe elementy, które umożliwiają interakcję pomiędzy core’em WordPressa, pluginami oraz innymi skryptami a zawartością stron internetowych. <head> 和 <footer> Wstawianie kodu w określony obszar.

Rozdzielenie szablonów od funkcji implementowanych w aplikacji

Modułowe pliki szablonów

将 index.php Napisanie całego kodu w jednym pliku sprawia, że utrzymanie go staje się trudne. Dobrą praktyką jest rozdzielenie kodu na kilka części, które stanowią elementy szablonów (Template Parts). Stwórz następujące pliki, aby zorganizować strukturę kodu:
* header.phpZbieranie/wartość <head> Zawartość publicznej części strony, taką jak obszary, nawigacja na dole strony oraz nawigacja w górniej części witryny.
* footer.phpMiejsce na umieszczenie informacji o prawach autorskich oraz innych elementów ogólnego charakteru, znajdujących się na dole strony internetowej.
* sidebar.phpPrzestrzeń do umieszczenia narzędzi z bocowej nawigacji (opcjonalna).
* functions.phpPlik z funkcjami tematycznymi.

Polecamy lekturę. Od zera: Pokazujemy ci, jak tworzyć własną tematę dla WordPress.。

A potem, użyj… get_header()、get_footer() 和 get_sidebar() 等函数在 index.php Wprowadzono je w tę wersję. Po transformacji… index.php Podstawowa część zostanie bardzo uproszczonej.

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

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

Zwróć uwagę, że użyliśmy… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Tak, to standardowa praktyka w zakresie internacjonalizacji.

Ulepszenie funkcji tematycznych

functions.php Plik ten stanowi “centrum kontroli” twojego tematu. Służy do dodawania funkcji wspierających temat, konfiguracji menu i boku, a także do ładowania stylów i skryptów. Nie jest to plik szablonu – jest automatycznie pobierany podczas inicjalizacji tematu.

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

Poniżej znajduje się informacja o podstawowym… functions.php Przykład:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
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' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

W tym pliku definiujemy funkcję. my_first_theme_setupI poprzez… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Zainstaluj to w określonym punkcie hooka akcji tematy WordPress po jej uruchomieniu. Podobnie, używamy… register_sidebar Funkcja zarejestrowała obszar dla dodatkowych narzędzi („plug-inów”) i… wp_enqueue_style Funkcja poprawnie włączyła tabelę stylów tematyczną.

Tworzenie specjalnych szablonów i stylów

Dostosowanie szablonów do różnych typów stron

Struktura hierarchiczna szablonów w WordPress pozwala tworzyć specjalne pliki szablonów dla różnych typów stron. Na przykład:
* front-page.phpWykorzystuje się jako stała strona startowa.
* home.phpStrona z listą artykułów na blogu.
* single.phpStrona z informacjami o pojednym artykule.
* page.phpStrona jednostronicowa.
* archive.phpStrony archiwów zawierają informacje o kategoriach, tagach, autorach itd.
* search.phpStrona z wynikami wyszukiwania.
* 404.phpStrona błędu 404.

Polecamy lekturę. Praktyczny przewodnik po rozwoju tematów dla WordPressa: jak od zera stworzyć własną architekturę tematu i szablony。

Utworzyć page.php Można uzyskać możliwość niezależnego kontrolowania wyglądu wszystkich stron, bez wpływu na strony zawierające artykuły. Struktura tego systemu jest… index.php Podobnie, ale zwykle nie konieczne jest wyświetlanie metadanych dotyczących publikacji artykułu (np. daty, autora).

Projektowanie responsywnych rozwiązań graficznych i interaktywnych elementów użytkownika

Tematy WordPress w czasach współczesnych muszą być responsywne, czyli dostosowywać się do różnych rozmiarów ekranów – od telefonów po komputerów stacjonarne. W tym celu konieczne jest przygotowanie CSS, które będzie adekwatnie funkcjonować na wszystkich urządzeniach. Zaleca się stosowanie strategii „Mobile First”, czyli tworzenia najpierw podstawowych stylów dla ekranów małych, a dopiero potem dodawania ulepszeń za pomocą zapytań mediowych (Media Queries) dla większych ekranó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

W tym samym czasie twoje tematyczne rozwiązanie może wymagać użycia JavaScriptu, aby zapewnić interaktywność, np. w postaci rozwijanego menu lub slajdów. Poprawnym sposobem na to jest… functions.php Użyj tego w Chinach. wp_enqueue_script() Funkcja służy do rejestracji i ustawiania kolejki skryptów, a także do sprawdzenia, czy zależności (np. od jQuery) są poprawnie deklarowane. Dzięki temu unikają się konflikty pomiędzy skryptami oraz ich powtarzane ładowanie, a także zabezpieczona jest kompatybilność z funkcjami optimizacji skryptów w WordPress.

Podsumowanie.

Poprzez wykonywanie powyżej opisanych kroków udało ci się stworzyć najprostszą, działającą tematyczność dla WordPress. Nauczyłeś się, jak tworzyć i definiować informacje dotyczące tematy. style.css„Stworzenie podstawy…” index.php Ņabory – rozdzielanie nich na modułowe elementy oraz… functions.php Ulepszono funkcje tematyczne w WordPress. Ponadto zapoznałeś się z potężną strukturą wzorów (templates) w tym systemie, co otwiera drogę do tworzenia bardziej złożonych, specjalizowanych stron wzorowych.

Rozwoj tematów (tematów stron internetowych) to proces ciągłych iteracji i pogłębiania wiedzy. Następnie możesz zapoznać się z rozwojem podtematów (child themes), aby bezpiecznie modyfikować istniejące tematy, nauczyć się korzystać z API WordPress Customizer, dzięki czemu użytkownicy będą mogli w czasie rzeczywistym zmieniać ustawienia tematu w panelu administracyjnym, lub pogłębić swoje znajomości REST API WordPress, aby tworzyć tematy, które są zintegrowane z front-endowymi frameworkami. Kluczowym elementem dla dalszego rozwoju jest śledzenie oficjalnych dokumentacji dla programistów oraz aktywna uczestnictwo w społeczności WordPress.

FAQ – najczęściej zadawane pytania.

Czy aby rozwijać tematy dla WordPress, konieczne jest doskonałe poznanie PHP?

Tak, solidne znajomości PHP są konieczne do tworzenia tematów dla WordPress. WordPress jest bowiem napisany w języku PHP, więc wszystkie pliki szablonów (takie jak…) index.php、single.php) oraz pliki funkcjonalne (functions.phpWszystko to wymaga użycia kodu PHP do dynamicznego generowania treści, wywoływania funkcji WordPress oraz manipulacji danymi.

Dodatkowo musisz znać HTML i CSS, aby tworzyć struktury i stylowe elementy stron internetowych, a także mieć podstawową znajomość JavaScript (zwłaszcza jQuery, ponieważ jest on włączony do core’u WordPress), aby dodawać interaktywne funkcje.

Dlaczego zmiany w temacie nie są wyświetlone w panelu administracyjnym WordPress?

Zwykle to wynika z ustawie cache w przeglądarcu lub na serwerze. Najpierw spróbuj to naprawić w samym przeglądarcu. Ctrl + F5(Windows/Linux) albo Cmd + Shift + R(Aby na Macu wykonać forced refresh i usunąć cache w przeglądarce):

Jeśli problem nadal występuje, może to być spowodowane tym, że na stronie serwera lub w zainstalowanych w WordPress pluginach do cache’owania (np. W3 Total Cache, WP Super Cache) znajdują się stare pliki. Spróbuj usunąć wszystkie dane z cache’u w tych pluginach. Podczas etapu rozwoju zaleca się na czas wyłączyć te pluginy, aby uniknąć możliwych problemów z działaniem witryny.

Jak sprawić, by mój temat obsługiwał wiele języków?

Umożliwienie tematowi obsługi wielu języków (internacjonalizacja i lokalizacja, czyli i18n/l10n) jest w dużej mierze zależne od funkcji tłumaczeniowych dostępnych w WordPress. W temacie wszystkie teksty adresowane do użytkowników nie powinny być pisane wprostu, lecz muszą być umieszczone w zagnieżdżonych strukturach, wykorzystujących odpowiednie funkcje tłumaczeniowe.

Na przykład, używając… (‘文本’， ‘my-first-theme’) Przeprowadź tłumaczenie lub użyj… echo esc_html(‘文本’， ‘my-first-theme’) Wykonaj wydanie i escapeowanie. Musisz to zrobić… style.css „Góra” i „Czoło” load_theme_textdomain() Poprawne ustawienie w czasie wywołania funkcji Text Domain(W polu tekstowym) a potem użyć narzędzia takiego jak Poedit do tworzenia. .pot Szablon tłumaczeń oraz… .po/.mo Pliki językowe.

W jaki sposób różnią się funkcje znajdujące się w pliku functions.php tematu od funkcji dostępnych w pluginach?

functions.php Funkcje kodu zawartego w pliku są podobne do funkcji kodu wtyczki (pluginu) – oba mogą być użyte do rozszerzenia możliwości WordPress. Główna różnica polega na zasięgu działania i celu ich stosowania.

functions.php Funkcje zawarte w tym modułu są ściśle powiązane z aktualnym tematem. Gdy użytkownik zmienia temat, te funkcje zwykle przestają być dostępne. Jest to idealne miejsce na dodawanie elementów, które są bezpośrednio powiązane z wizualnym wyglądem tematu, jego układem oraz szablonami (np. pozycją formularza rejestracji lub opcjami wspierania danego tematu).

Funkcje dostępne w dodatkach (plug-inach) są niezależne od wybranego tematu – działają niezależnie od tego, jaki temat jest włączony. Dodatki są idealne do dodawania funkcji ogólnego zastosowania, które nie wpływają na wygląd witryny (np. formularze kontaktowe, funkcje SEO, funkcje e-handlu). Jeśli jakąś funkcję konieczne jest utrzymać po zmianie tematu, należy ją implementować w postaci dodatku.

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: