Od zera do jednego: pokazujemy ci, jak opanować kluczowe umiejętności w rozwoju tematów dla WordPressa.

Podstawowe zasady rozwoju tematów dla WordPressa w erze nowoczesnej

Architektura tematów w najnowszych wersjach WordPressu znacząco różni się od tradycyjnych rozwiązań. Główną zmianą jest wdrożenie blokowych tematów (Block Themes) oraz funkcji edycji całego witryny (Full Site Editing – FSE). Dzięki temu wygląd i układ witryny – od nagłówków, stopniek po treść artykułów – można tworzyć i modyfikować za pomocą edytora Gutenberg, bez konieczności pisania złożonych szablonów w języku PHP.

Struktura kluczowych plików w temacie modernistycznym została znacząco uproszczena. Najważniejszym z tych plików jest szablon.theme.jsonDefinuje globalne ustawienia tematu, takie jak styl, paleta kolorów, formatowanie itd. Drugim niezbyt istotnym plikiem jest…index.htmlZastąpiło tradycyjne rozwiązanie.index.phpJako standardowy szablon używaj statycznych, zinterpretowanych przez edytor bloków HTML do budowy struktury strony.style.cssPlik nadal istnieje i jest używany głównie do określania informacji o temacie strony, ale większość definic stylów CSS została przeniesiona do innych plików.theme.jsonLub jest zarządzany przez edytora.

Aby zachować kompatybilność z wcześniejszymi wersjami, WordPress sprawdza, czy w katalogu głównym tematu znajduje się…block-templates或templatesfoldery. Te foldery są używane do przechowywania plików z szablonami HTML zbudowanymi na bazie bloków.single.html或page.htmlBędą używane z przewagą nad plikami szablonów PHP. Ponadto metody obsługi stylów i zasobów front-end pochodzących z tematów zależą od…wp_enqueue_style和wp_enqueue_scriptFunkcje są zwykle umieszczone w głównym pliku.functions.phpMożna zarejestrować się i stać się częścią kolejki w tym procesie.

Polecamy lekturę. Rozwój tematów WordPress od poznania podstaw do osiągnięcia biegłości: pokazujemy ci, jak tworzyć własne witryny internetowe krok po kroku。

Zrozumienie tego zmiany w podejściu do programowania – od pisania stałych szablonów w PHP do definiowania stylu i struktury za pomocą JSON oraz znaków blokowych – to pierwszy krok na drodze do opanowania współczesnego rozwoju tematów (tema-based development).

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.

strona dostępu

Tworzenie i konfiguracja kluczowych plików tematycznych

Aby stworzyć nowoczesną tematę dla WordPress, najpierw należy…wp-content/themesUtworz nową folderę tematyczną w katalogu. To odnosi się nawet do tematów typu „block”.style.cssPlik nadal musi spełniać wymogi pliku identyfikacyjnego; blok komentarzy umieszczonej na jego początku musi zawierać określone informacje.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Następnie należy stworzyć “umysł” w stylu modernistycznym.theme.jsonTo plik JSON, znajdujący się w głównym katalogu tematu, służący do centralnego zarządzania globalnymi stylami i ustawieniami tematu. Za pomocą tego pliku można określić system formatowania (np. wielkość i rodzaj fontów), paletę kolorów, standardowe style bloków itd. Dodatki i podtematy mogą dalej modyfikować te ustawienia, umożliwiając dostosowanie wyglądu według potrzeb. Plik jest bardzo podstawowy i nie zawiera zbyt wielu zaawansowanych funkcji.theme.jsonStruktura jest następująca:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Główny szablon tematuindex.htmlZdefiniowano standardową strukturę strony. Składa się wyłącznie z elementów HTML, otoczonych komentarzami, które są rozpoznawane przez edytor. Przykład:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Taka struktura jasno oddziela nagłówek, główną część treści oraz stopkę strony, a przy tym…wp:post-contentZawartość artykułów jest dynamicznie ładowana w blokach. Na koniec należy utworzyć katalog „Template Parts” w korzeniu katalogu tematu.partsI umieść to w środku.header.html和footer.htmlPliki z elementami konstrukcyjnymi.

Polecamy lekturę. Popularny przewodnik dla początkujących z 2026 roku: Jak stworzyć swoją pierwszą tematę dla WordPress od zera。

Tworzenie stron z użyciem szablonów i elementów szablonowych

W tematach blokowych struktura rozładunku strony jest tworzona głównie za pomocą szablonów (Templates) i elementów szablonowych (Template Parts). Szablony służą do określenia ogólnej struktury określonych typów stron (np. pojednego artykułu, strony archiwu), natomiast elementy szablonowe to moduły wielokrotnie używalne, takie jak nagłówki i stopki strony.

Pliki szablonów zwykle są przechowywane w folderze tematycznym (tematic folder).templatesW folderze znajdują się pliki szablonów. WordPress automatycznie dobiera odpowiednie pliki szablonów dla różnych typów zapytań. Na przykład…single.htmlWykorzystywany do prezentacji pojednego artykułu.page.htmlWykorzystywane dla stron statycznych.home.html或index.htmlDo używania na główniej stronie bloga. Możesz…theme.json的customTemplatesZnajdują się tu definicje niektórych dostosowanych szablonów, które użytkownicy mogą wybrać w edytorze stron.

Komponenty szablonów są przechowywane w…partsW folderze znacznie zwiększyło się stopień powtarzalności kodu oraz ułatwiło się jego utrzymanie. Utworzono plik z nagłówkami (header file).header.htmlGórny obszar można zbudować za pomocą bloku z tytułem witryny, bloku nawigacji itd. Do tworzenia pliku z nagłówkiem strony (footer) należy użyć odpowiedniego formatu.footer.htmlMożna umieścić informacje o autorskich prawach oraz obszar z dodatkowymi funkcjami („widgetami”).

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%

strona dostępu

Typowy…header.htmlMoże to wyglądać następująco:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

W tym przykładzie…wp:navigationBlok jest identyfikowany poprzez swoje… („The block is identified by its…”).refAtrybut wykorzystuje menu nawigacyjne, które zostało stworzone i zapisane w opcji “Wygląd” -> “Edytor” (jego ID to 4). To pokazuje wielką zaletę rozdzielania edycji treści od edycji struktury całego witryny. Poprzez wykorzystanie tych elementów w głównym szablonie…Można je wtedy wklecić na stronę.

Dla bardziej złożonych układów można skorzystać z różnych narzędzi i technik.wp:group、wp:columns、wp:queryMożna używać bloków do budowy linii, kolumn oraz elementów cyklicznych. Na przykład:wp:queryBloki mogą dynamicznie wyświetlać najnowsze artykuły – to co w tradycyjnych tematach nazywano głównym cyklem wyświetlania treści – ale teraz wszystko to jest konfigurowane w pełni za pomocą edytora wizualnego.

Polecamy lekturę. Od zera do biegłości: kompletny przewodnik po tworzeniu motywów WordPress wraz z praktycznymi poradami.。

Dodawanie funkcji i stylów za pomocą plików z funkcjami

Choć tematy bloków dużo się opierają na…theme.jsonW połączeniu z szablonami HTML…functions.phpPliki wciąż stanowią element kluczowy w funkcjonalności tematów. Jest to plik PHP, który nie wraca żadnych wartości i służy do dodawania nowych funkcji, rejestracji skryptów stylowych, definiowania obsługi tematów itd.

Podstawową operacją jest rejestracja i umieszczenie w kolejce plików z definicjami stylu (style sheets) oraz skryptów dotyczących tematu. Nawet jeśli styl jest głównie…theme.jsonMożliwe, że potrzebujesz dodatkowych, dostosowanych elementów CSS do zarządzania systemem.

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.

strona dostępu

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpTo również doskonałe miejsce do dodawania własnych, funkcjonalnych elementów. Na przykład, możesz użyć…register_block_styleFunkcja umożliwia zarejestrowanie własnej wizualnej wersji istniejącego elementu strukturalnego (np. akapitu), aby ta pojawiła się w panelu “Styl” edytora i była dostępna do wyboru przez użytkownika.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Ponadto możesz też używać haków (hooków).wp_head、wp_footerWklej własny kod lub użyj innych dostępnych metod.add_filterMożna zmienić standardowe zachowanie wyszukiwania, treść wyświetlaną itp. W przypadku złożonych wymagań dotyczących personalizacji stworzenie małego dodatku (pluginu) może być bardziej modularnym rozwiązaniem.

Tematy dotyczące testowania i debugowania

Po zakończeniu rozwoju jest niezbyt ważne przeprowadzić gruntowne testy tematu. Najpierw należy aktywować temat w środowisku lokalnym lub tymczasowym i sprawdzić, czy podstawowy layout witryny, jej responsywny design, a także styl wszystkich kluczowych elementów (tytuły, akapity, zdjęcia, galerie, przyciski itd.) są poprawnie wyświetlone. Ponadto należy sprawdzić, czy menu nawigacyjne i linki działają bez problemów.

Następnie konieczne jest dokładne testowanie edytora Gutenberg. Stwórz nowe strony i artykuły, sprawdź, jak można tworzyć złożone układy za pomocą różnych bloków, a także sprawdź, czy narzędzia i panele ustawień działają poprawnie. Można też tworzyć własne style (na przykład poprzez odpowiednie modyfikacje w kodzie edytora).theme.jsonSprawdź, czy ustalone kolory, palety kolorów lub wielkość fontów są poprawnie wdrożone do poszczególnych elementów strony. Szczególnie sprawdź funkcję edycji całego witryny (“Wygląd” -> “Edytor”) i próbuj zmieniać nagłówki, stopki, szablony strony głównej itd., aby upewnić się, że po zapisaniu zmian te zmiany będą wyświetlone korrektnie na stronie internetowej.

Debugging jest kluczowym elementem w procesie rozwoju oprogramowania w czasach współczesnych. Odkryj narzędzia dewelopera w swoim browserze (naciskając klawiszę F12) i sprawdź, czy nie występują błędy w JavaScriptie lub konflikty pomiędzy elementami CSS.wp-config.phpUstawienia w aplikacji mobilnejdefine('WP_DEBUG', true);Można wyświetlać na stronie ostrzeżenia i błędy PHP, co pomaga szybko lokalizować problemy w kodzie. Ponadto upewnij się, że temat używany w WordPressie spełnia standardy kodowania, a także sprawdź w narzędziu W3C Validator w konsoli, czy nie występują błędów w strukturze HTML.

Na koniec należy przeprowadzić testy zgodności pomiędzy różnymi przeglądaczami (Chrome, Firefox, Safari, Edge) oraz urządzeniami (komputerem stacjonarnym, tabletem, smartfonem), aby upewnić się, że wszyscy użytkownicy mogą korzystać z identycznego doświadczenia.

Podsumowanie.

Rozwój współczesnych tematów dla WordPress stanowi rewolucję w podejściu do ich tworzenia – przeszedł się od pisania proceduralnych szablonów w PHP do modelu bazowanego na zasadach projektowania interfejsów użytkownika.theme.jsonDeclaratywny rozwój, oparty na znakach blokowych i możliwościach edycji całego witryny. Programiści muszą doskonale opanować te elementy.theme.jsonUżyj konfiguracji, by określić globalny styl, a następnie wykorzystaj szablony bloków HTML do budowy struktury strony.functions.phpWdrożono ulepszenia funkcjonalne. Ten model znacząco obniża barierę wejścia do tworzenia własnych rozwiązań graficznych, dając twórcom treści dużą swobodę w projektowaniu, ale wymaga też od programistów głębokiej znajomości systemu edycji bloków. Poprzez stosowanie powyżej opisanej ścieżki rozwoju umiejętności, będziesz w stanie stworzyć wydajne, elastyczne i przyjazne dla przyszłości tematy do WordPress.

FAQ – najczęściej zadawane pytania.

Czy do tworzenia tematów w bloku rozwoju #### są potrzebne dodatkowe znajomości PHP?
Tak, to nadal jest konieczne. Choć główną strukturę strony definiują szablony HTML,functions.phpPliki są nadal niezbędne do dodawania funkcji tematycznych, rejestracji skryptów stylowych, a także do dokładnej personalizacji za pomocą haków (hooks) i filtrów. Ponadto wiedza o PHP jest kluczowa przy tworzeniu dynamicznych elementów szablonów opartych na kwerzach dostosowanych do potrzeb użytkownika oraz przy obsłudze złożonej logiki biznesowej.

Czy tematy typu „block” mogą istnieć obok tradycyjnych tematów?

Możliwe. WordPress inteligentnie rozpoznaje typ tematu. Jeśli katalog źródłowy twojego tematu zawiera…theme.jsonFile andtemplates/partsW przypadku plików z wzorami bloków znajdujących się w folderze WordPress rozpozna je jako tematy bloków i włączy funkcję edycji na poziomie całego witryny. Nawet gdy takie pliki są obecne, system nadal zachowuje dostęp do tradycyjnego systemu szablonów PHP jako rezerwę. Jeśli plik z wzorem bloku nie zostanie znaleziony podczas obsługi żadnego żądania, system automatycznie przechodzi na używanie odpowiedniego szablonu PHP.single.php）。

Jak dodać własny kod CSS do tematu blokowego?

W istocie są trzy główne sposoby. Najbardziej rekomendowany to sposób, który polega na…theme.jsonDokumentystylesCzęść z dodanych elementów ma wpływ na całość witryny („globalnie”) lub na określone bloki jej struktury. Ponadto można to zrobić w ramach ustawie tematu („theme settings”).style.cssW pliku można napisać dodatkowe zasady stylu. Jeśli chodzi o styl bardziej dynamiczny lub specyficzny dla określonych stron, można to zrobić również w innych miejscach.functions.phpUżyj tego w Chinach.wp_add_inline_styleMożna dodawać własne style wewnątrz funkcji lub bezpośrednio przypisywać je określonym blokom kodu.

Czy tryb edycji całego witryny stanowi ryzyko dla istniejącego witrynu internetowego?

Jeśli chodzi o witryny internetowe, które już zawierają treści, konieczne jest zachowanie ostrożności przy zmianie tematyki całego witrynu na nową. Zaleca się najpierw dokonać pełnego testowania nowej tematyki w środowisku testowym (na przykład w lokalnym środowisku rozwoju lub na tymczasowej stronie), aby upewnić się, że wszystkie istniejące treści będą wyświetlone poprawnie i że nie wystąpią żadne problemy z rozstawem elementów na stronie. Przed przeprowadzeniem zmian konieczne jest wykonanie kopii całej witryny, włącznie z plikami i bazą danych. Funkcje edycji całego witrynu są dosyć rozwinięte, ale zmiany wprowadzane są bezpośrednio w szablony, więc niewłaściwe działanie może wpłynąć na wszystkie strony, które korzystają z tego samego szablonu.