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

Pełny przewodnik po tworzeniu tematów dla WordPress: jak zbudować wygląd swojej strony internetowej od zera

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

Zrozumienie podstawowej struktury tematu oraz kluczowych plików

Śródkowym elementem standardowego tematu WordPress jest folder zawierający określone pliki, który znajduje się w określonym miejscu w strukturze plików witryny./wp-content/themes/Każdy temat musi zawierać co najmniej dwa kluczowe pliki, aby został rozpoznany i aktywowany przez WordPress.

Najpierw…style.cssTo nie tylko plik z definicjami stylu tematu, ale także plik zawierający informacje o tym temacie. Blok komentarzy na początku pliku określa podstawowe dane tematu, takie jak nazwa tematu, autor, opis oraz wersja. Bez poprawnie formatowanego bloku komentarzy na początku WordPress nie będzie w stanie wyświetlić twojego tematu w liście tematów w panelu administracyjnym.

Kolejnym niezbędnym plikiem jest…index.phpTo jest standardowy plik szablonu tematu. Gdy WordPress nie może znaleźć bardziej specyficznego szablonu do wyświetlenia treści, używa tego pliku.

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

Ponadto temat wyposażony we wszystkie niezbędne funkcje zawiera zwykle następujące pliki:header.php、footer.php、sidebar.php和functions.phpplikfunctions.phpNajważniejsze jest to, że stanowi “ mózg” tematu – umożliwia dodawanie funkcji, konfigurację bocznej nawigacji, definiowanie menu nawigacyjnego itd., bez konieczności modyfikacji kodu źródłowego.

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

Jak zaprojektować standardowy nagłówek tematycznego informatora?

在style.cssW pliku format informacji umieszczonej w nagłówku musi być ścisło stosowany. Poniżej znajduje się standardowy przykład:

/*
Theme Name: 我的第一个主题
Theme URI: https://www.example.com/my-first-theme/
Author: 你的名字
Author URI: https://www.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
*/

Te informacje będą wyświetlone na stronie “Wygląd” -> “Teme” w panelu administracyjnym WordPress.Text DomainNiezbędne jest przygotowanie aplikacji z myślą o internacionalizacji, szczególnie w momencie, gdy planujesz tłumaczyć jej elementy na inne języki.

Stworzenie struktury szablonu podstawowej strony

Pliki szablonów stanowią „kostrę” tematów WordPress i decydują o tym, w jaki sposób będą wyświetlone różne typy treści. Zrozumienie i skuteczne wykorzystanie struktury hierarchicznej szablonów w WordPress jest kluczowym elementem efektywnego rozwoju aplikacji.

Tworzenie plików zawierających elementy nagłówka (header) i nagłówka końcowego (footer) strony

Rozdzielanie części tekstu, które pojawiają się kilka razy na stronie, do osobnych plików jest najlepszą praktyką, aby utrzymać kód w porządku i ułatwić jego konserwację.header.phpPliki zwykle zawierają deklarację typu dokumentu.<head>\nWszystkie elementy opisujące daną obszar (takie jak nagłówki, referencje do plików CSS i JS), a także elementy nagłówkowe strony witryny (jak logo i główny menu).

Polecamy lekturę. Uczenie się tworzenia tematów dla WordPressa od zera: pełny przewodnik po tworzeniu własnych tematów dla stron internetowych。

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

W związku z tym,footer.phpPlik zawiera informacje umieszczone w nagłówku strony (np. informacje o autorskich prawach) i kończy się w tym miejscu.header.phpHTML tagi otwarte w tym dokumencie są wykorzystywane jednocześnie (zwane „simultaneous invocation”).wp_footer()Funkcja.

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

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

wp_head()和wp_footer()Te dwa „hakówki” (ang. hooks) są konieczne, ponieważ umożliwiają dodawanie kodu przez pluginy oraz samej podstawie WordPressa (core) w części nagłówka (header) i nagłówka strony (footer).

Implementowanie szablonów dla strony głównej i stron artykułów

Jako ogólny kontener dla tematów…index.phpPlik wykorzystuje tagi szablonów WordPress do włączenia innych części szablonu oraz do wyświetlania artykułów w cyklu.

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">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
                <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>
        
</main>

Dla strony jednego artykułu należy stworzyć…single.phpJego struktura jest podobna do…index.phpPodobnie, ale zwykle jest wykonywane wywołanie…the_post_thumbnail()Aby wyświetlić specjalne obrazy, należy użyć odpowiednich narzędzi lub funkcji.the_category()和the_tags()Aby wyświetlić kategorie i tagi.

Rozszerz funkcjonalność w pliku z funkcjami tematycznymi.

functions.phpPlik to miejsce, w którym dodajesz wszystkie własne funkcje i ustawienia do tematy WordPress. Jest to jakby kolejny plugin, ale przeznaczony wyłącznie dla twojej tematy.

Podstawowe funkcje obsługi ustawień tematu

Użyjadd_theme_support()Funkcje mogą deklarować różne funkcje dostępne w danym temacie, np. specjalne obrazy do artykułów, dostosowane loga, markery HTML5 itd. To zwykle umieszczone jest w specjalnym dokumencie lub instrukcji dotyczących obsługi tego tematu.after_setup_themeWypełnienie zostanie dokonane w funkcji uruchomionej przez haczą.

Polecamy lekturę. Pełny przewodnik po tworzeniu tematów dla WordPress: budowanie profesjonalnych, responsywnych stron internetowych od zera。

function my_theme_setup() {
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );

// 支持HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Implementowanie boku nawigacyjnego i obszaru z dodatkowymi elementami („gadżetami”)

Dodatki to ważna część WordPressa. Aby stworzyć obszar dla dodatków (boczny panel) dla danej temy, musisz…functions.phpUżyj tego w Chinach.register_sidebar()Funkcja.

function my_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_theme_widgets_init' );

Po rejestracji będziesz mógł korzystać z…sidebar.phpWykorzystuje się w plikach szablonów.dynamic_sidebar( ‘sidebar-1’ )Nadchodzi czas na wezwanie tej obszaru.

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

Integracja plików z wzorcami stylu (style sheets) i skryptów

Poprawne włączenie pliku z stylami CSS oraz skryptów JavaScript do tematu jest kluczowym elementem gwarantującym dobrą wydajność i kompatybilność strony. Zawsze unikaj bezpośredniego wpisywania linków do tych plików w arkuszkach szablonów; zamiast tego używaj systemu obsługi kolejek (enqueue) dostępnego w WordPress.

Główny plik zdefiniujący styl tematu

Chociażstyle.cssTo konieczne, ale zwykle zachowujemy tylko informacje zawarte w jego nagłówku, aby identyfikować temat, a same style umieszczamy w innym pliku CSS.wp_enqueue_style()Wczytywanie funkcji.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载一个自定义样式表
    wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Funkcja automatycznie będzie odnosić się do katalogu głównego tematu (root directory of the topic).style.cssPliki. Używanie systemu kolejek pozwala wtyczkom (plug-inom) lub podtematom (subtopics) łatwo korzystać z twoich stylów lub zastępiać je.

Dodawanie i integracja własnych skryptów

W przypadku plików JavaScript procedura jest podobna, ale należy użyć odpowiednich narzędzi lub metod.wp_enqueue_script()Funkcje. Dobrą praktyką jest pobieranie skryptów podczas ładowania strony w jej nagłówku (footer), aby przyspieszyć proces renderowania witryny.

function my_theme_scripts() {
    // ... 样式加载代码 ...

// 在页脚加载一个自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Zwróć uwagę na ostatni parametr.trueInformuje WordPress, by umieścić skrypt w nagłówku strony (footer). Jeśli twój skrypt wymaga dostępu do danych z innych części strony, należy to uwzględnić przy jego implementacji.<head>\nJeśli zostanie załadowane, to ustawimy je w taki sposób…false。

Podsumowanie.

Rozwoj tematów dla WordPressu to proces łączenia wiedzy o projektowaniu, HTML, PHP oraz funkcjonalnościach core’u WordPressu. Aby skutecznie stworzyć nowy temat, należy najpierw zrozumieć, w jaki sposób działają poszczególne elementy tego systemu.style.css和index.phpZaczynając od tych dwóch najbardziej podstawowych plików, budujemy strukturę strony poprzez tworzenie oddzielnych plików z szablonami, a potem wykorzystujemy potężne narzędzia do dalszej edycji i rozwoju tej strony.functions.phpPliki w temacie dodają różne funkcje, a następnie styl i skrypty są zarządzane za pomocą standardowych metod kolejki oczekiwania. Dodróżowanie standardów kodowania i struktury szablonów WordPress umożliwia tworzenie tematów z jasną strukturą i łatwą konserwacją, a także gwarantuje ich kompatybilność z całym ekosystemem WordPress. Najlepszym sposobem na opanowanie tej umiejętności jest zacząć od stworzenia najprostszego foldera tematu i stopniowo dodawać kolejne funkcje.

FAQ – najczęściej zadawane pytania.

Aby stworzyć temat dla WordPress, należy opanować następujące języki:

Aby stworzyć podstawową tematę dla WordPress, konieczne jest opanowanie języków HTML, CSS i PHP. HTML służy do budowy struktury strony, CSS do kontrolowania stylu i rozmiarów elementów na stronie, a PHP to język skryptów serwerowych w WordPress, który umożliwia realizację wszystkich dynamicznych funkcji. W przypadku bardziej złożonych, interaktywnych tematów niezbędne jest też znajomość JavaScriptu.

Jak zrobić, aby moja tematyczna strona obsługiwała kilka języków?

Proces przygotowania twojego tematu do obsługi kilku języków nazywa się internacjonalizacją. Musisz…style.cssUstawienie informacji w nagłówku jest poprawne.Text DomainI…functions.phpUżyj tego w Chinach.load_theme_textdomain()Funkcja załadowuje plik językowy.

Później, w pliku PHP dotyczącym tego tematu, wszystkie teksty, które wymagają tłumaczenia, powinny być zastąpione odpowiednimi tłumaczonymi wersjami.__('Hello World', 'my-theme-text-domain')Taką funkcję tłumaczeniową należy „zawinąć” (czyli umieścić w odpowiedniej strukturze programu), a następnie użyć narzędzi typu Poedit do generowania kodu..po和.moPliki językowe są przeznaczone dla tłumaczy.

Czy projektowanie responsywne jest konieczne przy tworzeniu tematów?

Dziś, w 2026 roku, projektowanie responsywne nie jest już tylko dodatkowym atutem, lecz koniecznym wymogiem w rozwoju stron internetowych. Ponad połowa ruchu internetowego pochodzi z urządzeń mobilnych, więc temat (layout strony) nieodpowiadający wymogom projektowania responsywnego może znacząco pogorszyć użytkownicze doświadczenie oraz negatywnie wpłynąć na pozycję witryny w wynikach wyszukiwania na urządzeniach mobilnych.

Powinnoś używać takich technik jak CSS media queries, aby zapewnić, że layout twojego tematu będzie dostosowywał się do różnych rozmiarów ekranów – od komputerów stacjonarnych po smartfony – i aby zapewnić dobrą jakość oglądania. Wiele współczesnych frameworków CSS (np. Tailwind CSS) ułatwia szybkie tworzenie responsywnych interfejsów.

Jak mogą użytkownicy dostosować moją tematyczną treść w panelu administracyjnym?

Dostęp do opcji personalizacji w tle dla użytkowników jest realizowany głównie za pomocą API “Customizer” w WordPress. Możesz to zrobić…functions.phpUżyj tego w Chinach.$wp_customize->add_setting()和$wp_customize->add_control()Metody do dodawania ustawień i kontrolerów.

Na przykład można dodać opcję, aby użytkownik mógł zmienić kolor nagłówka witryny. Wartości tych ustawień można zdefiniować w pliku szablonu tematycznego.get_theme_mod()Funkcja umożliwia pobieranie i wyświetlanie odpowiednich danych, co daje użytkownikom możliwość personalizowania wyglądu tematów bez konieczności edycji kodu. To znacznie poprawia wygodę i profesjonalność obsługi tych temató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: