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

Podróż po świecie tworzenia tematów dla WordPressa: jak stworzyć własną tematę od zera

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

Aby stworzyć własną tematę dla WordPress, należy najpierw zrozumieć jej podstawową strukturę. Najuproszczonej tematycznej strukturze WordPress to plik, który znajduje się w folderze `themes` w katalogu `wp-content`. Ten plik zawiera kilka kluczowych elementów, które definiują wygląd i funkcjonalność tematy./wp-content/themes/W folderze znajdują się dwa niezbędne pliki:style.css和index.phpPierwszy element nie tylko definiuje styl tematu, ale co więcej, jego sekcja komentarzy w nagłówku pliku zawiera metadane tematu, takie jak nazwa tematu, autor, opis itd. Drugi element to plik szablonu standardowy, który jest używany przez WordPress, gdy nie znajduje żadnego bardziej specyficznego szablonu.

Poza tymi dwoma plikami temat wyposażony w pełne funkcje zawiera zwykle inne pliki szablonów, np. te używane do wyświetlania pojedynczych artykułów.single.phpWykorzystuje się do wyświetlania listy artykułów.archive.php…a także elementy potrzebne do wyświetlania strony.page.phpRozumienie i tworzenie tych plików szablonów stanowi kluczową część rozwoju tematów (tematów w kontekście programów lub aplikacji).

Przed rozpoczęciem kodowania zaleca się przygotować lokalne środowisko rozwoju, na przykład używając XAMPP, MAMP lub Local by Flywheel. Dzięki temu będzie można swobodnie testować i debugować aplikację, nie wpływając na działanie witryny online. Ponadto upewnij się, że twoj edytor tekstu lub środowisko integracyjne (IDE) – np. VS Code lub PhpStorm – jest przygotowane do pracy, a także że znasz podstawy języków PHP, HTML, CSS i JavaScript.

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

Tworzenie podstawowych plików i struktury tematu

Utworzenie foldera tematycznego oraz pliku z definicjami stylów

Najpierw…/wp-content/themes/Utworź nową folderę w katalogu i nazwij ją na przykład „new_folder”.my-first-themeA potem utwórz w tym folderze kolejne foldery.style.cssZawierz kopię pliku i wprowadź następujące informacje o nagłówku pliku:

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.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Ten komentarz jest kluczowy dla rozpoznawania tematów w WordPressie. Następnie możesz dodać kilka podstawowych stylów do tego pliku CSS.

Tworzenie kluczowego pliku szablonu

Następnie należy utworzyćindex.phpPlik. To szablon rezerwowy dla wszystkich stron – najprostszego z możliwych.index.phpMożna zawrzeć tylko podstawową strukturę, która składa się z elementów umieszczonego na początku witryny („head”), treści wyświetlanych w cyklu, oraz elementów umieszczonego na końcu witryny („foot”).

<!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>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

Ten plik wykorzystuje kilka funkcji core’owych WordPress.wp_head()、body_class()、the_content()Itp. Są niezbędne dla normalnego funkcjonowania tematu.

Zrozumienie i wdrożenie hierarchii szablonów.

WordPress używa zasady zwanej “hierarchią szablonów” (template hierarchy), aby określić, jaki plik szablonu ma zostać użyty w odpowiedzi na dane żądanie strony. Zrozumienie tej hierarchii jest kluczowe dla efektywnego tworzenia tematów (templetów) do WordPressa.

Polecamy lekturę. Niezbędne elementy do stworzenia profesjonalnego witryny internetowej: pełny przewodnik po rozwoju i personalizacji tematów WordPress。

Zwykle używane pliki szablonów i ich funkcje

Gdy odwiedzasz główną stronę witryny, WordPress wyszukuje elementy w określonym porządku.front-page.php、home.phpI wreszcieindex.phpNa stronie z listą artykułów bloga program będzie wyszukiwać…home.phpW przypadku pojednego artykułu preferuje się pierwszą dostępną metodę lub narzędzie do jego przetłumaczenia.single-post.phplub standardowysingle.phpW przypadku stron statycznych używa się…page.phpStrona katalogu klas.category.phpStrona wyszukiwania odpowiada…search.phpStrona błędu 404 odpowiada na sytuację, gdy żaden wymagany plik nie może zostać znaleziony na serwerze.404.php。

Poprzez tworzenie tych specjalnych plików szablonów możesz zaprojektować zupełnie różne układy i stylizacje dla różnych części witryny.

Rozdzielenie kodu za pomocą elementów szablonowych

Aby zachować czystość i powtarzalność kodu, części, które występują w kilku miejscach, należy rozdzielić na osobne pliki zawierające “elementy szablonów”. Najczęściej robi się to poprzez oddzielenie nagłówka (Header), stopki (Footer) i boku strony (Sidebar).

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

Utworzyćheader.phpPlik, zostanie…index.php中Zaczęcie etykety do…Przenieś wszystki kod znajdujący się przed tagiem wewnątrz niego. Następnie użyj tego kodu w oryginalnym miejscu.get_header()Wywołanie funkcji.

// 在 index.php 中替换原来的代码
<?php get_header(); ?>

Podobnie, stworzyć…footer.phpKod do umieszczenia nagłówka i nagłówka strony jest umieszczony w pliku, a następnie używany w aplikacji.get_footer()Możesz też tworzyć…sidebar.phpI użyj tego.get_sidebar()Taki sposób wywoływania funkcji znacząco poprawia modularność kodu.

Integracja core funkcji WordPress

Wdrożenie cyklu artykułów oraz wyjątkowych zdjęć

“Cykliczne pobieranie” to kluczowy mechanizm w WordPressie, który umożliwia pobieranie i wyświetlanie artykułów z bazy danych.index.php或single.phpW tym przypadku używamy…if ( have_posts() ) : while ( have_posts() ) : the_post();Aby uruchomić cyklus, należy wykonać odpowiednie kroki. Wewnątrz cyklu można używać różnych znaków szablonów do wyświetlania informacji o artykułach.

Polecamy lekturę. Pełny praktyczny przewodnik po tworzeniu pluginów dla WordPress – jak stworzyć swój pierwszy plugin od zera.。

Na przykład, używając…the_title()Tytuł artykułu:the_permalink()Nie ma dostępnych informacji na temat linków do wydanego tekstu. Prosz o uzupełnienie danych lub sprawdzenie, czy link został umieszczony w odpowiednim miejscu.the_content()Zawartość artykułu:the_excerpt()Aby umożliwić wyświetlanie charakterystycznych zdjęć z artykułu, należy najpierw…functions.phpDodano do pliku deklarację wsparcia tematów:

add_theme_support( 'post-thumbnails' );

A potem, w ramach cyklu w pliku z szablonem, można to wykorzystać.the_post_thumbnail()Wyświetl specjalne obrazy.

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

Utworzenie pliku functions.php w celu ulepszenia tematu.

functions.phpPlik jest “centrum kontroli” twojego tematu – nie jest konieczny, ale niemalże każdy temat go wykorzystuje. W tym pliku możesz dodawać nowe funkcje, tworzyć menu, definiować obszary z pomocniczymi elementami („widgetami”), włączać skrypty oraz style.

Bazowyfunctions.phpMoże zawierać następujące elementy:

__( '顶部菜单', 'my-first-theme' ),
            'footer-menu' =&gt; __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

// 添加小工具区域支持
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' );

// 引入主题样式表和脚本
function mytheme_enqueue_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 引入主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()-&gt;get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
?&gt;

Dodanie stylów oraz realizacja projektu zgodnego z zasadami responsywnego designu

Stworzenie podstawowego frameworku CSS

从style.cssZacznij tworząc podstawowy wygląd wzorców wizualnych dla twojego tematu. Najpierw możesz ustawić globalne właściwości modelu kontenera („box model”), typy fontów oraz kolory.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Realizacja responsywnego layoutu z priorytetem dla urządzeń mobilnych

Tematyki modernistyczne muszą być responsywne, czyli dostosowują się do różnych rozmiarów ekranów. Zaleca się stosować strategię, która daje priorytet urządzeniom mobilnym – najpierw projektować elementy interfejsu pod małe ekrany, a potem używać zapytań mediowych (Media Queries) do dodawania lub modyfikowania stylów dla większych ekranów.

/* 移动端基础样式 */
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}
.main-navigation li {
    border-bottom: 1px solid #ddd;
}

/* 平板及以上设备 */
@media (min-width: 768px) {
    .main-navigation ul {
        flex-direction: row;
    }
    .main-navigation li {
        border-bottom: none;
        margin-right: 2rem;
    }
    .content-area {
        width: 70%;
        float: left;
    }
    .widget-area {
        width: 28%;
        float: right;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}

Aby upewnić się, że obrazy są też responsywne, można to zrobić za pomocą ustawień w CSS.max-width: 100%; height: auto;A lub użyć funkcji dostępnych w WordPress.srcsetAtrybuty (the_post_thumbnail()Warto zaznaczyć, że wynik zostanie wyświetlony automatycznie (długość tekstu nie ma wpływu na to).

Podsumowanie.

Rozwoj tematu WordPress od zera to proces uczenia się, który obejmuje wiele aspektów – od tworzenia podstawowej struktury plików, po zrozumienie hierarchii szablonów, rozdzielanie ich elementów oraz implementację kolejnych funkcji.functions.phpIntegracja kluczowych funkcji, a potem projektowanie stylu i dostosowanie witryny do różnych urządzeń (responsywność) – to proces, który nie tylko pozwoli ci dogłębnie zrozumieć, jak działa WordPress, ale także da ci pełną kontrolę nad wyglądem i funkcjonalnością twojej strony internetowej. Pamiętaj: zaczynaj od najprostszego rozwiązania…style.css和index.phpZacząć od dodawania kolejnych funkcji po kolei i testowania ich jest bezpiecznym i skutecznym sposobem uczenia się. Twój pierwszy projekt może być bardzo prosty, ale to zapewni ci solidną podstawę do budowania w przyszłości bardziej złożonych i profesjonalnych aplikacji.

FAQ – najczęściej zadawane pytania.

Jaki język programowania jest potrzebny do tworzenia motywów WordPress?

Aby stworzyć pełnowartościowy temat dla WordPress, konieczne jest opanowanie języków PHP, HTML, CSS i JavaScript. PHP odgrywa kluczową rolę w obsłudze logiki i wywoływaniu funkcji dostępnych w WordPress; HTML służy do budowy struktury strony internetowej; CSS odpowiada za styl i rozkład elementów na stronie; JavaScript umożliwia realizację interaktywnych elementów i dynamicznych funkcji. Podstawowe znania z SQL również pomogą zrozumieć, jak WordPress przetwarza dane i wykonawać odpowiednie operacje.

Dlaczego mój niestandardowy motyw nie wyświetla się w tle?

To zwykle wynika z…style.cssProblem wynika z błędnych lub brakujących informacji w komentarzach na początku pliku. Upewnij się, że plik znajduje się w katalogu tematycznym w folderze głównym, a blok komentarzy na początku pliku ma poprawny format i zawiera wymagane informacje, np. “Theme Name”. Ponadto sprawdź, czy uprawnienia do katalogu tematycznego są poprawne.style.cssSam plik nie zawiera błędów gramatycznych.

Jak dodać własny szablon strony do mojego tematu?

Najpierw utwórz w katalogu tematycznym nowy plik w formacie PHP, na przykład:template-fullwidth.phpNa samym początku tego pliku dodaj specjalny komentarz, w którym określisz nazwę szablonu. Następnie możesz w tym pliku pisać dowolny PHP i HTML kod, pamiętając o tym, że należy go używać we współpracy z innymi plikami szablonów (np.page.phpTworząc takie elementy jak cykły kopiowania, zapewnia się stosowanie podstawowych struktur. Po ukończeniu procesu tworzenia, w panelu administracyjnym WordPressu, w sekcji “Atrybuty strony” i w rozwijanym menu “Szablony”, będzie można zobaczyć i wybrać własną stworzoną szablon.

Jak bezpiecznie debugować błędy w PHP podczas rozwoju?

Zaleca się korzystać z lokalnego środowiska rozwoju.wp-config.phpWłącz tryb debugowania WordPressa w pliku.WP_DEBUGKonstanta ustawiona jest na…trueTo umożliwi wyświetlenie wszystkich błędów, ostrzeżeń i powiadomień PHP na ekranie. Do dokładniejszego debugowania można użyć…WP_DEBUG_LOGZapisuj błędy do…/wp-content/debug.logW pliku. Pamiętaj, że przed uruchomieniem witryny konieczne jest wyłączenie trybu debugowania.

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: