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

Pierwsze kroki w tworzeniu motywów WordPress: tworzenie pierwszego niestandardowego motywu od podstaw

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

Podstawowe przygotowawcze działania

Przed rozpoczęciem pisania kodu istotne jest posiadanie odpowiedniego środowiska i podstawowej znajomości tematu, które stanowią klucz do sukcesu. Najpierw potrzebujesz lokalnego środowiska rozwoju. Możesz wybrać zintegrowane pakety, takie jak XAMPP, MAMP lub Local by Flywheel, które szybko przygotują dla ciebie środowisko z PHP, MySQL i serwerem web. Oczywiście, możesz też samodzielnie skonfigurować środowisko na swoim komputerze. Upewnij się, że twoja wersja PHP to 7.4 lub wyższa, a MySQL to 5.6 lub wyższa.

Następnie musisz stworzyć osobne katalogu dla swojego ustawionego tematu. Ten katalog musi znajdować się w katalogu zainstalowanego WordPress. wp-content/themes/ W folderze. Na przykład, możesz stworzyć plik o nazwie… my-first-theme foldera. Aby system rozpoznał temat WordPress, wystarczą dwa pliki.index.php 和 style.cssWśród nich jeststyle.css Nie tylko są to pliki z definicjami stylów, ale także nagłówki plików zawierające metadane tematu – to właśnie “dowód tożsamości” tematu.

Tworzenie kluczowego pliku tematycznego

Napisanie nagłówka pliku z definicjami stylów tematycznych (stylesheet header)

style.css Na początku pliku musi znajdować się zformatowany blok komentarzy w języku CSS, zawierający wszystkie informacje niezbędne dla WordPress, aby rozpoznać temat. To element, który musi zostać poprawnie konfigurowany we wszystkich tematach.

Polecamy lekturę. Od zera do jednego: kompletny przewodnik po tworzeniu motywów WordPress wraz z praktycznymi poradami.。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://yourwebsite.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 tym kontekście “Text Domain” służy do realizacji procesów internacionalizacji (przekładu treści na różne języki). Później użyjemy funkcji do realizacji tego celu. __() 或 _e() Aby tekst w temacie był dostępny w kilku językach, należy zainstalować odpowiednie moduły tłumaczeniowe.

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

index.php To standardowa szablonka tematu, a także najważniejsza alternatywa w przypadku braku dostępnych plików szablonów. Gdy WordPress nie może znaleźć żadnego bardziej specyficznego pliku szablonu… single.phpGdy to jest konieczne, właśnie wtedy się to używa. Jeden z najprostszych przykładów… index.php Musi zawierać „cykl” (The Loop) z WordPressa – to kluczowy mechanizm umożliwiający wyświetlanie treści artykułów.

<!DOCTYPE html>
<html no numeric noise key 1022>
<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 1019>
    <?php wp_body_open(); ?>
    <header id="site-header">
        <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
                    <h2><a href="/pl/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry-content">
                        <p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

<?php get_sidebar(); ?>

<footer id="site-footer">
        <p>©</p>
    </footer>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

Ten szablon wykorzystuje kilka kluczowych funkcji WordPress. wp_head(), the_title(), the_content()funkcja get_sidebar() Będzie próbować załadować plik o nazwie… sidebar.php Plik szablonu.

Rozwijanie struktury i funkcjonalności szablonów

WordPress używa zasady zwanej “hierarchią szablonów” (template hierarchy), aby ustalić, jaki plik szablonu ma zostać użyty dla danej strony. Zrozumienie tej hierarchii jest kluczowe przy tworzeniu elastycznych tematów (tematów do adaptacji do różnych potrzeb). Na przykład, gdy ktoś odwiedza artykulik na blogu, WordPress sprawdza w następującym porządku:single-post.php -> single.php -> singular.php -> index.phpMożesz dostosować wygląd różnych stron, tworząc te specjalne pliki.

Dodano wsparcie dla umieszczania specjalnych zdjęć („elementów charakterystycznych”) w artykułach.

Tematy współczesne często obsługują funkcję “miniatury artykułu” (Post Thumbnail). Aby włączyć tę funkcję, należy to zrobić w ustawieniach tematu. functions.php Wykorzystuje się w pliku. add_theme_support() Funkcja. Najpierw utwórz ją w katalogu tematycznym. functions.php Dokumenty.

Polecamy lekturę. Praktyczny przewodnik: Pełna instrukcja po tworzeniu tematów dla WordPress od zera do mistrzostwa。

<?php
/**
 * 我的第一个主题的功能函数文件
 */

if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让 WordPress 管理标题标签
        add_theme_support( 'title-tag' );

// 启用文章特色图像支持
        add_theme_support( 'post-thumbnails' );
        // 为文章和页面设置默认特色图像尺寸
        set_post_thumbnail_size( 1200, 800, true );

// 注册一个导航菜单位置
        register_nav_menus( array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
        ) );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Włączenie plików z stylami i skryptami

Poprawne dodawanie plików CSS i JavaScript do kolejki jest najlepszą praktyką w rozwoju WordPress, ponieważ zapobiega konfliktom zasobów i powtarzającemu się ich ładowaniu. Robimy to poprzez… wp_enqueue_style() 和 wp_enqueue_script() Funkcja jest realizowana w taki sposób… functions.php Dodaj nową funkcję do kodu.

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

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-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_first_theme_scripts' );

Dziennik tematyczny: Rozwój wiedzy i najlepsze praktyki

Całościowa tematyczna struktura nie polega tylko na prezentacji treści – należy także uwzględnić dostępność, wydajność oraz organizację treści. Rozdzielanie różnych elementów strony (takich jak nagłówki, stopki, boczne menu) na osobne pliki z wzorcami (templates) ułatwia utrzymanie kodu.

Rozdzielenie szablonów nagłówka i stopki strony

Utworzyć header.php 和 footer.php Plik. index.php 中 <body> Wszystkie elementy znajdujące się przed etykietą należy przenieść… header.php\n, będzie Wszystkie elementy znajdujące się przed etykietą należy przenieść… footer.phpA potem… oryginalny… index.php Zredukuj to do:

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 
<p><strong>Witaj na mojej stronie!</strong></p>

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
                    <?php if ( has_post_thumbnail() ) : ?>
                        <div class="post-thumbnail">
                            <?php the_post_thumbnail(); ?>
                        </div>
                    <?php endif; ?>
                    <h2><a href="/pl/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry-content">
                        <p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

Tworzenie szablonu dla boku strony (sidebar)

Podobnie, stwórz jednego. sidebar.php Plik, w którym używamy funkcji dynamicznego boku strony (dynamic sidebar function). dynamic_sidebar()Najpierw musisz… functions.php Użyj tego w Chinach. register_sidebar() Funkcja umożliwia rejestrację elementów interfejsu użytkownika (np. dodatkowych narzędzi) w obszarze bocowej nawigacji.

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

Następnie, w sidebar.php Można go wywołać w środku:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Podsumowanie.

Poprzez wykonanie kroków opisanych w tym tekście, udało ci się skutecznie stworzyć od zera podstawową, ale funkcjonalną tematę dla WordPress. Nauczyłeś się tworzyć kluczowe pliki, zrozumiałeś strukturę szablonów oraz umiejętność ich używania. functions.php Dodaj funkcję tematów oraz stosuj najlepsze praktyki przy organizacji i ładowaniu zasobów. Ten temat zawiera już podstawowe elementy, takie jak wyświetlanie artykułów, obsługa specjalnych zdjęć, menu rejestracji oraz boczna lista. Od tego punktu możesz dalej eksplorować bardziej złożone pliki szablonów (np. szablony stron, kategorii), dostosowywać typy artykułów oraz korzystać z API do personalizacji tematów, aby stworzyć wydajny i profesjonalnie zaprojektowany temat WordPress. Pamiętaj, że praktyka jest kluczową częścią nauki – próbuj modyfikować kod i obserwuj wynikające zmiany, to najlepszy sposób na utrzymywanie wiedzy.

Polecamy lekturę. Przewodnik po rozwoju tematów dla WordPress: jak stworzyć własną tematę od zera。

FAQ – najczęściej zadawane pytania.

Co robić, jeśli moja tematyczna informacja nie jest wyświetlana w tle (w obszarze niektórych elementów interfejsu)?

Proszę najpierw sprawdzić, czy folder z tematami znajduje się w prawidłowym miejscu. wp-content/themes/ W katalogu. A potem sprawdź, czy wszystko jest w porządku. style.css Czy nagłówek informacyjny tematu znajdujący się na początku pliku (komentarz CSS) ma poprawny format? Szczególnie ważne jest, aby linia “Theme Name:” była obecna i miała poprawny format. Błędy ortograficzne lub problemy z formatowaniem mogą sprawić, że WordPress nie będzie mogły rozpoznać twojego tematu.

Co zrobić, jeśli zmiany w pliku functions.php sprawiły, że witryna internetowa wyświetla tylko białą stronę?

“Biały ekran i awaria systemu” to zwykle sytuacja, gdy ekran komputera pokazuje tylko białą powierzchnię bez żadnego obrazu, a system nie reaguje na żadne komendy. functions.php W pliku występują błędy gramatyczne (np. brak znaków zakończenia zdania, nawiasów) lub błędy poważne, które uniemożliwiają poprawne działanie programu. Najszybszym sposobem na rozwiązanie problemu jest korzystanie z protokołu FTP lub menadżera plików, aby uzyskać dostęp do serwera i wymienić niepoprawne elementy pliku. functions.php Przepisywanie nazwy pliku (na przykład na inną). functions.php.bakW ten sposób WordPress ignoruje ten plik, co umożliwia ponowny dostęp do witryny. Następnie możesz sprawdzić i poprawić błędy w kodzie.

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

Jak dodać szablon strony do mojego tematu?

Aby stworzyć własny szablon strony, najpierw utwórz nowy plik w języku PHP w katalogu tematycznym (theme directory). Na przykład: template-fullwidth.phpNa samym początku tego pliku dodaj następujące specjalne komentarze dotyczące struktury pliku:

<?php
/**
 * Template Name: 全宽页面
 */

Następnie możesz napisać swój kod HTML i PHP w tym pliku. Pamiętaj, aby używać… get_header(), get_footer() Funkcje takie jak “full-width page” są dostępne po ich zapisaniu. Gdy edytujesz lub tworzysz nową stronę w panelu administracyjnym WordPress, możesz znaleźć tę opcję w rozwijanym menu “Szablony” (“Templates”) w zakładce „Atrybuty strony” („Page Attributes”). Po wybraniu tej opcji twoja strona będzie miała całkowicie szeroką rozmiarową.

主题开发中 get_template_part() 函数有什么用？

get_template_part() Funkcje to przydatne narzędzia w rozwoju tematów WordPress, które umożliwiają modułową strukturę kodu. Ich zadanie polega na ładowaniu określonej części szablonu w twoim temacie. Na przykład, w cyklu można użyć funkcji do wyświetlenia danych w odpowiednim miejscu szablonu. get_template_part( 'content', get_post_format() ); Zapraszamy do pobrania. content.php Albo, jeśli chodzi o coś konkretniejszego, na przykład: content-video.php To znacznie poprawia powtarzalność i łatwość konserwacji kodu, umożliwiając łatwe tworzenie różnych szablonów wyświetlania dla różnych typów treści artykułów.

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: