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

Wprowadzenie do tworzenia motywów w WordPressie: budowanie swojego pierwszego niestandardowego motywu od podstaw.

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

Przygotowanie i ustawienie środowiska

Przed rozpoczęciem pisania kodu potrzebny jest odpowiedni środowisko rozwoju. Składa się ono z lokalnego serwera (np. XAMPP, MAMP lub Local by Flywheel) oraz edytora kodu (np. VS Code, PhpStorm lub Sublime Text). Upewnij się, że twoje lokalne środowisko obsługuje PHP w wersji 7.4 lub wyższej, a także bazy danych MySQL/MariaDB.

Następnie musisz wejść do katalogu instalacji WordPress.wp-content/themesW folderze utworzysz nowy folder, który będzie twoim katalogiem tematycznym. Na przykład możesz stworzyć folder o nazwie…my-first-themefoldera. To “dom” wszystkich twoich plików tematycznych.

Najbardziej podstawowe pliki tematu WordPress składają się z dwóch elementów:style.css和index.phpWśród nich jeststyle.cssNie tylko jest to plik z zasadami stylu, ale także “dowód tożsamości” tematu. Za pomocą informacji umieszczonej w komentarzach na początku pliku temat wyraźnia swoje nazwę, autora, opis oraz inne metadane dla WordPress.

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

Tworzenie pliku z informacjami o temacie

W folderze z tematami twójymi stwórz…style.cssPlik, a następnie wprowadź następujące podstawowe informacje:

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习WordPress主题开发的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Ten komentarz jest konieczny. WordPress właśnie dzięki temu, że czyta…Theme NameTa linia służy do identyfikacji i wyświetlania twojego tematu w liście tematów w tle (w obszarze zarządzania systemem). Dodatkowe informacje…Text DomainTo przygotowanie do procesu internacjonalizacji (tj. przekładu tekstu na różne języki).

Tworzenie kluczowego pliku szablonu

Następnie stworzymy najprostszą wersję tego produktu.index.phpPlik. Nawet jeśli ten plik jest na razie pusty, to wystarczy…style.cssInformacje są kompletnie, więc twoja tematyczna opcja pojawi się w menu “Wygląd” -> “Tematy” w panelu administracyjnym WordPress i będzie mogła zostać aktywowana. Teraz możemy…index.phpNapisz najprostszą strukturę HTML, która umożliwi wyświetlenie nagłówka bloga oraz treści artykułu.

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <header>
        <h1><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                ?>
                <article>
                    <h2><a href="/pl/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p></div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_foot(); ?>
</body>
</html>

Ten kod wykorzystuje kilka funkcji zbudowanych w samym jądrze WordPress.模板标签Na przykładbloginfo()、the_title()、the_content()funkcjawp_head()和wp_foot()To kluczowe elementy, które umożliwiają wprowadzenie niezbędnego kodu do nagłówka i nagłówka strony przez core WordPress, pluginy oraz inne skrypty.

Zrozumienie poziomów struktury szablonów oraz tworzenie kluczowych szablonów

WordPress używa zestawu narzędzi zwanego…模板层级Zasady decydują, jakie pliki szablonów należy użyć do renderowania określonego żądania strony. To jeden z najważniejszych elementów w procesie rozwoju tematów (tematów WordPress). Prostymi słowami, WordPress szuka plików szablonów od najbardziej specyficznych; jeśli takiego pliku nie znajduje, przechodzi do bardziej ogólnych plików, aż w końcu do najbardziej podstawowych.index.php。

Polecamy lekturę. Przewodnik po tworzeniu motywów w WordPressie: jak stworzyć swój pierwszy niestandardowy motyw od podstaw.。

Stworzenie szablonu dla strony z informacjami o artykule

Gdy użytkownik odwiedza pojedynczą artykulikę, WordPress najpierw sprawdza, czy jest dostępna w bazie danych.single-post.phpJeśli nie istnieje, użyjsingle.phpI wreszcieindex.phpDajmy zrobić to…single.phpSłuży do specjalnego kontrolowania wyświetlania pojednego artykułu.

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

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                <p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p>
            </div>
            <footer class="entry-footer">
                分类：
            </footer>
        </article>
        <?php
        // 上一篇/下一篇导航
        the_post_navigation();
        // 评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>

Ten szablon zawiera trzy istotne elementy składowe:get_header()、get_sidebar()和get_footer()Są używane do wprowadzania różnych elementów.header.php、sidebar.php和footer.phpPliki to klucz do powtórnego wykorzystania kodu oraz do realizacji modularnego projektowania.

Tworzenie szablonów stron

W przypadku statycznych stron (np. “O nas”) WordPress będzie szukać odpowiednich elementów kodu, które umożliwią ich wyświetlenie.page.phpUtworzyćpage.phpJego struktura jest podobna do…single.phpPodobnie, ale zwykle nie wyświetla się metadanych takich jak kategorie, tagi i data publikacji.

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="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
            </header>
            <div class="entry-content">
                <p><strong>Treść artykułu</strong>: <p><strong>Dzięki za komentarz!</strong></p>
            </div>
        </article>
        <?php
    endwhile;
    ?>
</main>

Rozwijanie funkcji tematycznych oraz stylizacji

Aby temat był kompletny, nie wystarczy tylko pliku szablonu – są również inne elementy, które muszą zostać uwzględnione.functions.phpPlik służy do dodawania funkcji, rejestracji menu, obszaru z narzędziami pomocniczymi oraz do realizacji innych wymaganych działań.style.cssDodaj styl.

Plik z funkcjami tematycznymi

Utworź folder w korzeniu katalogu zawierającego twoje tematy (tj. w najwyższym poziomie struktury katalogu).functions.phpTen plik jest automatycznie ładowany podczas inicjalizacji tematu i służy do przechowywania wszystkich dostosowanych funkcji PHP oraz hooków.

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

// 添加主题支持功能
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像（缩略图）功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus(
        array(
            'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
        )
    );
    // 添加HTML5标记支持
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册小工具侧边栏
function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( '在此添加小工具。', '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' );

// 加载主题样式表和脚本
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 加载通用CSS
    wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
    // 加载通用JavaScript
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Dodanie podstawowych stylów

Teraz, powiedzmy…style.cssPo nagłówku komentarza dodaj kilka zasadniczych zapisów CSS, aby ulepszyć wygląd twojego tematu.

Polecamy lekturę. Pełny przewodnik po tworzeniu motywów w WordPressie: tworzenie niestandardowego motywu witryny WordPress od podstaw.。

/* 基础重置与排版 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

header {
    border-bottom: 2px solid #0073aa;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.entry-title {
    color: #222;
}

.site-main {
    float: left;
    width: 70%;
}

/* 侧边栏样式 */
.widget-area {
    float: right;
    width: 25%;
    padding-left: 5%;
}

/* 页脚样式 */
footer {
    clear: both;
    border-top: 1px solid #ddd;
    margin-top: 60px;
    padding-top: 20px;
    text-align: center;
    color: #666;
}

Modularność i elementy szablonowe

Aby poprawić łatwość utrzymania i powtórnego użycia kodu, WordPress zaleca rozdzielanie części stron, które występują w kilku miejscach (takich jak nagłówki, stopki, boczne menu), na osobne pliki z elementami szablonów.

Tworzenie elementów nagłówka (header) i nagłówka strony (footer)

Utworzyćheader.phpzawiera od…<!DOCTYPE html>„Zacząć do otwarcia”<main>Wszystkie elementy znajdujące się przed etykietą.

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 
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <p><strong>Witaj na mojej stronie!</strong></p>
</head>
<body no numeric noise key 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary">Przejść do głównego zawartości</a>
    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php
            if ( is_front_page() && is_home() ) :
                ?>
                <h1 class="site-title"><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                <?php
            else :
                ?>
                <p class="site-title"><a href="/pl/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php
            endif;
            $my_first_theme_description = get_bloginfo( 'description', 'display' );
            if ( $my_first_theme_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
            <?php endif; ?>
        </div>
        <nav id="site-navigation" class="main-navigation">
            'primary',
                    'menu_id'        =&gt; 'primary-menu',
                )
            );
            ?&gt;
        </nav>
    </header>
    <div id="content" class="site-content">

W związku z tym, należy stworzyć…footer.phpzawiera</div><!-- #content -->Wszystko, co następuje.

    </div><!-- #content -->
    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <p>&lt;?php printf( esc_html__( &#039;主题：%1$s&#039;, &#039;my-first-theme&#039; ), &#039;<a href="https://example.com/">我的第一个主题</a>' ); ?&gt;</p>
        </div>
    </footer>
</div><!-- #page -->
<p><strong>WP_footer();</strong></p>

<p>Nie mogę znaleźć mojego portfela.</p>

Utworzyćsidebar.phpAby wyświetlić obszar z gadżetami.

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

Po zakończeniu montażu tych elementów będziesz mógł je użyć.get_header()、get_footer()和get_sidebar()Funkcje są wykorzystywane w sposób zwięzły we wszystkich plikach szablonów.

Podsumowanie.

Przez ten przewodnik udało ci się dokonać całego procesu budowy podstawowej tematy WordPress od zera. Nauczyłeś się, jak skonfigurować środowisko rozwoju oraz jak stworzyć niezbędne pliki tematy.style.css和index.phpZrozumiałeś strukturę systemu szablonów w WordPress i na jej podstawie stworzyłeś specjalne szablony dla różnych typów stron (np. artykułów, witryn).single.php， page.phpZyskałeś umiejętność korzystania z…functions.phpPlik zawiera funkcje kluczowe dla tematu, takie jak menu rejestracji, narzędzia pomocnicze oraz specjalne obrazy. Na koniec zastosowałeś koncepcję rozwoju modułowego, rozdzielając nagłówek, stopkę i boczną panelę na elementy szablonowe, które można powtórnie użyć w innych projektach.header.php， footer.php， sidebar.phpTo znacznie poprawiło łatwość konserwacji kodu. To jest tylko początek – na tej podstawie możesz dalej eksplorować możliwości tworzenia własnych typów artykułów, zaawansowanych opcji tematycznych, projektowania responsywnego oraz interakcji z JavaScriptem, aby stopniowo stworzyć wyjątkowo funkcjonalny i profesjonalnie zaprojektowany temat dla WordPress.

FAQ – najczęściej zadawane pytania.

Dlaczego moja tematyczna informacja nie jest wyświetlana w tle (w obszarze administracyjnym)?

Upewnij się, że folder z tematami znajduje się we właściwym miejscu.wp-content/themes/znajduje się w katalogu, a w nim…style.cssZawartość nagłówka pliku zawiera blok komentarzy w poprawnym formacie, szczególnie…Theme Name:Ta linia musi być obecna i poprawna. Kodowanie pliku powinno być UTF-8 bez znaku BOM (Byte Order Mark).

Jak dodać mojemu tematowi wsparcie dla kustomowego loga?

W twoim…functions.phpDokumentymy_first_theme_setupDodaj jeden wiersz kodu do funkcji:add_theme_support( 'custom-logo' );Po dodaniu tego elementu użytkownicy będą mogli załadować i ustawić logo w panelu administracyjnym WordPressa, w sekcji “Wygląd” -> “Dostosowanie” -> “Tożsamość witryny”. Musisz to zrobić…header.phpUżyj tego w Chinach.the_custom_logo()Funkcja służy do wyświetlania loga.

Co robić, jeśli po zmianach w pliku functions.php witryna wyświetla tylko białą stronę?

To zwykle oznacza…functions.phpW pliku występują błędy gramatyczne w języku PHP. WordPress przestanie się wykonywać ze względu na tę poważną ошибkę. Musisz uzyskać dostęp do serwera za pomocą FTP lub menadżera plików i usunąć błędy.functions.phpPrzepisywanie nazwy (na przykład na inną)functions.php.bakAby przywrócić dostęp do witryny, należy naprawić błędy w kodzie i ponownie załadować poprawione pliki. Testowanie w środowisku rozwoju lokalnym jest dobrym nawykiem, który pomaga uniknąć takich problemów.

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

You have already…style.cssUstawione w…Text Domain(W polu tekstowym) i…functions.phpW tym stringu został użyty…esc_html__( ‘文本’， ‘my-first-theme’ )Taka funkcja tłumaczeniowa. Następnie należy użyć narzędzia typu Poedit, by skanować teksty do tłumaczenia znajdujące się w plikach tematycznych i wygenerować potrzebne pliki z tłumaczeniami..potNastępnie należy utworzyć plik szablonu i odpowiednio go dostosować dla każdego języka..po和.moNależy przygotować dokumenty i umieścić je w odpowiedniej sekcji./languagesW folderze znajdują się pliki tłumaczeń. WordPress automatycznie załaduje odpowiednie tłumaczenia w zależności od ustawień języka witryny.

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: