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

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

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

Przygotowania: Stworzenie kompletnego środowiska tematycznego

Przed napisaniem jakiegoś kodu kluczowym elementem do osiągnięcia sukcesu jest stworzenie dobrze zorganizowanego środowiska rozwoju. Najpierw należy zainstalować WordPress na lokalnym komputerze lub na serwerze zdalnym. Następnie należy utworzyć katalog, w którym będą przechowywane tematy (tzw. „tematy” w kontekście WordPressa), a ten katalog musi znajdować się w obrębie katalogu zainstalowanego WordPressa. /wp-content/themes/ Tak. Będziemy tworzyć coś o nazwie… my-first-theme Nowy folder to właśnie główny katalog naszego tematu dostosowanego.

Najprostszego tematu WordPress wystarczą dwa pliki, by został rozpoznany przez system. Pierwszy z nich to plik z definicjami stylów. style.cssNie tylko definiuje wygląd witryny, ale informacje umieszczone w jej nagłówku stanowią “dowód tożsamości” tematu – zawierają nazwę tematu, autora, opis oraz inne metadane. Drugi plik to plik zasadniczego szablonu. index.phpTo jest standardowa plikowa szablonowa strona startowa w WordPress.

Zacznijmy od stworzenia… style.css Plik, do którego należy wpisać niezbędne informacje nagłówkowe.

Polecamy lekturę. Rozwoj tematów WordPress: Pełny przewodnik po tworzeniu własnych tematów od zera。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是我开发的第一个 WordPress 主题，用于学习和实践。
Version: 1.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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

Następnie stworzymy najprostszą wersję tego produktu. index.php Może to być bardzo prosty plik, który służy wyłącznie do sprawdzenia, czy temat został poprawnie rozpoznany.

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 
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Cześć, światie! To moja pierwsza tematyczna strona („theme page”).</h1>
    <p><strong>WP_footer();</strong></p>
</body>
</html>

Po ukończeniu tych dwóch plików loguj się do panelu administracyjnego WordPress, przejdź na stronę “Wygląd” → “Teme” i powinno tam być widoczne właśnie stworzone przez nas tema “My First Theme”. Aktywuj je, a potem odwiedź główną stronę witryny – powinno pojawić się najprostszego możliwego wyglądu strony. To oznacza, że twoja struktura tematu została poprawnie przygotowana.

Zrozumienie kluczowego pliku szablonu oraz jego struktury hierarchicznej

WordPress korzysta z hierarchii szablonów (Template Hierarchy), aby ustalić, jakie pliki szablonów należy użyć do renderowania danej strony. Zrozumienie tych zasad jest kluczowe podczas tworzenia tematów (tematów). Prostym słowami, gdy użytkownik odwiedza określoną stronę, WordPress wyszukuje plik szablonu według określonego porządku priorytetów. Najpodstawniejszy element tego systemu to… index.phpTo jest opcja odwołania wszystkich zmian na wszystkich stronach.

Na przykład, gdy ktoś odwiedza pojedynczy tekst umieszczonego w blogu, WordPress najpierw sprawdza… single-post.phpJeśli nie ma, to trzeba go znaleźć. single.phpJeśli tego jeszcze nie ma, wtedy zostanie to użyte. index.phpNa stronie, która wyświetla listę artykułów, program będzie sprawdzać je po kolei. home.php、front-page.php、index.php。

Aby stworzyć pełnowartościowy temat bloga, potrzebne są przynajmniej kilka kluczowych plików szablonów:header.php(Nawigacja na stronie internetowej)footer.php(Nie ma tekstu do przekładu w tym miejscu – informacja „(Strona internetowa – nagłówek)” jest wyłącznie opisową informacją o strukturze witryny.)sidebar.php(Boczna lista, opcjonalna)index.php(Indeks głównego zawartości)single.php(Jedna artykuł)page.php(Jedna strona) i style.css(Zasady stylu).

Polecamy lekturę. Jak rozwijać własną tematę WordPress od zera?。

przejść (rachunek lub inspekcję itp.) get_header()、get_footer() 和 get_sidebar() Te funkcje szablonowe umożliwiają modularizację ogólnego kodu, co sprawia, że można go powtarznie używać. Główny plik z definicjami szablonów to… index.php Struktura stanie się wtedy bardzo jasna.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Taka koncepcja modułowa nie tylko ułatwia utrzymanie kodu, ale także umożliwia łatwe tworzenie specjalnych nagłówków i stopniek dla różnych typów stron.

Praktyczne programowanie: Tworzenie głównego cyklu i wywoływanie treści artykułu

Środkiem każdej tematy blogu jest “main loop” (główny cykl). To struktura kodu PHP w WordPress, która służy do pobierania treści artykułów z bazy danych i wyświetlania ich na stronie. W ramach tego cyklu można używać różnych znaków wzorcowych (template tags), aby wyświetlić nagłówek artykułu, treść, autora, datę itd.

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

Dajmy zbudować coś najprostszego.index.phpW głównym cyklu są wyświetlone listy artykułów.

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

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">Najnowsze artykuły</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/pl/</?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Opublikowano:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Przepraszamy, ale nie znaleziono żadnego artykułu.</p>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

W powyższym kodzie użyliśmy… have_posts() 和 the_post() Aby stworzyć cykl, należy użyć odpowiednich tagów w szablonie. the_title()、the_permalink()、the_excerpt() „It” jest używane do wyświetlania odpowiedniego zawartości.post_class() Funkcja automatycznie generuje dla kontenera artykułów serię bardzo przydatnych klas CSS, co ułatwia nam projektowanie stylu.

Jeśli chodzi o pojedynczy artykuł, musimy go stworzyć. single.phpJego struktura przypomina strony indeksowe, ale zwykle prezentuje tylko jeden tekst i wyświetla jego pełny zapis.the_content())。

Polecamy lekturę. Przewodnik po tworzeniu motywów w WordPressie: od zera do stworzenia własnego motywu.。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Zawarto tu mocniejszą funkcję. get_template_part()Wykorzystuje się do załadowania innego pliku z fragmentem szablonu, znajdującego się w katalogu tematycznym. Na przykład:get_template_part( 'template-parts/content', 'single' ); Będzie ładowane z najwyższym priorytetem. template-parts/content-single.php Jeśli plik nie istnieje, zostanie załadowany. template-parts/content.phpTo dalej poprawia strukturę i powtarzalność kodu.

Ulepszenie funkcji tematycznych oraz zalecenia dotyczące najlepszych praktyk

Po uformowaniu podstawowej tematy można ją ulepszyć i zrobić bardziej wydajną poprzez dodawanie plików z funkcjami tematycznymi oraz stosowanie najlepszych praktyk. Jednym z najważniejszych plików jest… functions.php。

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

Tematycznyfunctions.phpPlik nie jest konieczny, ale umożliwia dodawanie funkcji do twojego tematu, rejestrację specjalnych właściwości oraz interakcję z API serca WordPress. Jest coś w rodzaju “plugina” dla twojego tematu, ale jest powiązany z nim bezpośrednio. Tutaj należy wykonać czynności związane z rejestracją i deklaracją informacji, a nie bezpośrednie wyświetlanie treści.

Standardowyfunctions.phpPowinno zawierać następujące części:

1. 注册菜单：使用 register_nav_menus() Funkcja.
2. 注册侧边栏：使用 register_sidebar() Funkcja.
3. 添加主题支持：使用 add_theme_support() Funkcje służą do włączenia takich kluczowych funkcji, jak zdjęcia charakterystyczne dla artykułów lub własne loga.
4. 加载样式和脚本：使用 wp_enqueue_style() 和 wp_enqueue_script() Funkcje, i używać ich poprawnie. wp_enqueue_scripts Hak.

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

// 注册一个右侧边栏
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' );
?&gt;

Dodaj funkcje za pomocą „hooków”, prawidłowo ustawiaj kolejność ładowania zasobów oraz korzystaj z funkcji tłumaczeniowych. __() 和 _e() To umożliwia internacjonalizację tematów, co gwarantuje ich bezpieczeństwo, efektywność oraz zgodność z oficjalnymi standardami rozwoju WordPress.

Podsumowanie.

Od momentu stworzenia… style.css 和 index.php Zaczynając od podstawowych folderów, przeszliśmy przez cały proces tworzenia własnego tematu dla WordPress. Dokładnie sprawdziliśmy system hierarchii szablonów i zrozumieliśmy, jak WordPress inteligentnie wybiera odpowiednie pliki szablonów do renderowania różnych stron. Wykonaliśmy praktyczne ćwiczenia dotyczące budowy głównego cyklu wykonywania kodu (main loop) i nauczyliśmy się używać różnych tagów szablonowych do dynamicznego wyświetlania treści. Na koniec… functions.php Temat został wzbogcony o nowe funkcje i zwiększony poziom standardów. Choć to jest tylko początek, otwiera to przed Tobą wiele możliwości – możesz dalej eksplorować, dodawać kolejne pliki szablonów, ulepszać wygląd witryny oraz wdrożyć interaktywne elementy, aby w końcu stworzyć unikalną stronę internetową, która dokładnie odpowiada Twoim lub klientów wymaganiom.

FAQ – najczęściej zadawane pytania.

Czy aby rozwijać aplikacje tematyczne, konieczne jest znać PHP?

Tak, aby rozwijać tematy WordPress na poziomie zaawansowanym, konieczne jest posiadanie określonych znajomości PHP. WordPress jest bowiem zbudowany na bazie PHP, więc wszystkie pliki szablonów, wywołania funkcji oraz logika obsługi danych są zależne od tego języka programowania. Początkujący powinni opanować podstawy gramatyki PHP, zasady pracy z zmiannami, tablicami, pętłami, warunkowymi instrukcjami oraz funkcjami.

Jak dostosować moją tematyczną stronę do urządzeń mobilnych?

Umożliwienie odpowiedzialnego (responsywnego) projektowania tematów jest podstawowym wymogiem wobec współczesnych stron internetowych. Aby to osiągnąć, konieczne jest używanie zapytań mediów (Media Queries) w CSS, które umożliwiają dostosowanie układu i stylu strony według różnej szerokości ekranu. Podczas rozwoju należy zawsze stosować strategię “mobile first” – najpierw tworzyć stylizację przyjazną małym ekranom, a potem stopniowo dodawać lub modyfikować elementy wzoru dla większych ekranów za pomocą zapytań mediów.

Jaki jest najlepszy sposób na rozwój i testowanie tematów (tematów projektowych lub związanych z określoną funkcją w aplikacji)?

Należy mocno zalecać rozwój tematów w lokalnym środowisku rozwoju. Używanie narzędzi takich jak Local by Flywheel, XAMPP, MAMP lub Docker do uruchomienia lokalnego serwera pozwala szybko iterować i testować zmiany, bez wpływu na witrynę internetową w trybie online. Ponadto warto włączyć odpowiednie funkcje w WordPressie, aby ułatwić proces rozwoju. WP_DEBUG Układ (format) jest niezbyt ważny, ale może mieć wpływ na wyświetlanie błędów i ostrzeżzeń w PHP na ekranie, co pomaga w szybkim wykrywaniu i naprawianiu problemów w kodzie.

Jakie techniki front-end należy mi opanować?

Poza PHP konieczne jest też doskonałe opanowanie HTML i CSS – to podstawa budowy struktury i stylu stron internetowych. W przypadku bardziej złożonych interakcji oraz dynamicznych efektów ważne jest też znać JavaScript. Szczególnie istotne jest naukę bezpiecznego i poprawnego wprowadzania oraz używania plików JavaScript w WordPress. wp_enqueue_script），以及学习使用 WordPress 自带的 JavaScript 库。

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: