Jak zbudować niestandardowy motyw blokowy WordPressa z theme.json: Przewodnik krok po kroku

Podsumowanie

Tworzenie niestandardowego motywu blokowego WordPressa z Full Site Editing (FSE) może być onieśmielające, ale theme.json upraszcza ten proces. Ten przewodnik przeprowadzi Cię przez konfigurację minimalnego motywu blokowego, definiowanie globalnych stylów, takich jak kolory i typografia w theme.json, oraz tworzenie niestandardowych szablonów przy użyciu znaczników blokowych. Nauczysz się dodawać wzorce blokowe i warianty stylów, umożliwiając w pełni projektowalną stronę bez plików PHP. Omówimy typowe błędy, takie jak mieszanie cech klasycznych i blokowych motywów, oraz pokażemy, jak testować swój motyw. Na koniec będziesz mieć nowoczesny, rozszerzalny motyw blokowy gotowy do produkcji. To podejście wykorzystuje najnowsze możliwości WordPressa dla szybszego i bardziej wizualnego rozwoju.

Wprowadzenie

Full Site Editing (FSE) zrewolucjonizowało tworzenie motywów WordPressa, pozwalając na wizualne projektowanie każdej części strony. Jednak wielu deweloperów wciąż polega na klasycznych motywach lub ma trudności z tworzeniem motywów blokowych od podstaw. Kluczem do odblokowania mocy FSE jest theme.json — plik konfiguracyjny, który kontroluje globalne style, ustawienia i szablony. Ten artykuł zawiera praktyczny, krok po kroku przewodnik po budowie niestandardowego motywu blokowego przy użyciu theme.json. Nauczysz się konfigurować strukturę folderów, definiować palety kolorów i ustawienia typografii, tworzyć niestandardowe szablony za pomocą znaczników blokowych i dodawać warianty stylów. Na koniec będziesz mieć gotowy do produkcji motyw blokowy, łatwy w utrzymaniu i rozszerzaniu. Zanurzmy się i odczarujmy rozwój FSE.

Aby spojrzeć szerzej na to, jak FSE kształtuje przyszłość projektowania WordPressa, sprawdź Gutenberg FSE: Przyszłość projektowania WordPressa w 2026.

1. Konfiguracja minimalnego motywu blokowego

Motyw blokowy wymaga co najmniej dwóch plików: style.css i index.html. Stwórzmy je.

Struktura folderów

Utwórz folder o nazwie my-block-theme w katalogu wp-content/themes/. Wewnątrz umieść:

• style.css
• index.html
• (opcjonalnie) theme.json

style.css

Mimo że motywy blokowe w mniejszym stopniu polegają na CSS, style.css jest nadal wymagany do identyfikacji motywu:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Wiersz Requires at least: 5.9 zapewnia, że motyw działa z funkcją FSE.

index.html

To jest Twój domyślny szablon. Musi zaczynać się od znaczników blokowych. Utwórz prosty układ:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

To używa składni bloków do dołączenia części nagłówka i stopki oraz wyświetla tytuł i treść wpisu.

Uwaga: Motywy blokowe nie mogą zawierać plików PHP, takich jak header.php czy footer.php. Mieszanie klasycznych i blokowych szablonów złamie FSE.

Aktywacja motywu

Prześlij folder za pomocą FTP lub zainstaluj jako archiwum zip, a następnie aktywuj. Powinieneś zobaczyć pustą witrynę z minimalną strukturą. Następnie nadamy jej styl za pomocą theme.json.

2. Opanowanie theme.json: Globalne style i ustawienia

theme.json centralizuje wszystkie elementy sterujące projektem. Znajduje się w katalogu głównym Twojego motywu. Stwórzmy jeden z ustawieniami kolorów i typografii.

Podstawowa struktura

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

To definiuje paletę kolorów, rodziny czcionek, rozmiary czcionek i globalne style. Funkcje var() odnoszą się do niestandardowych właściwości CSS automatycznie generowanych przez WordPressa. Użytkownicy mogą je następnie zmieniać w Edytorze strony.

Wskazówka: Używaj niestandardowych właściwości CSS dla spójności. Unikaj sztywnego kodowania wartości w plikach CSS; niech theme.json będzie jedynym źródłem prawdy.

3. Tworzenie niestandardowych szablonów

Szablony blokowe to pliki HTML ze znacznikami blokowymi. Mają hierarchię podobną do klasycznych plików szablonów. Na przykład utwórz single.html dla pojedynczych wpisów:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Podobnie utwórz page.html, archive.html itp. Możesz również tworzyć niestandardowe szablony, dodając blok wp:post-template w pętli zapytań.

Aby zaawansowane dostosowywanie, rozważ budowanie niestandardowych bloków. Dowiedz się, jak to zrobić w Poza podstawowymi blokami: Tworzenie niestandardowych bloków Gutenberga dla ulepszonej funkcjonalności WordPressa.

Części szablonów

Utwórz folder parts/ dla wielokrotnego użytku części. Na przykład header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

I footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. Dodawanie wzorców blokowych i wariantów stylów

Wzorce blokowe to gotowe układy. Zdefiniuj je w folderze patterns/. Utwórz patterns/hero.php:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Witamy</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">To jest niestandardowa sekcja hero</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Warianty stylów pozwalają użytkownikom przełączać całe wyglądy. Utwórz styles/default.json i styles/dark.json, które nadpisują ustawienia motywu.

5. Uwagi i najlepsze praktyki

• Wydajność: theme.json jest buforowany. Wyczyść pamięć podręczną po zmianach. Użyj hooka wp_register_theme_json, jeśli to konieczne.
• Wsteczna kompatybilność: Motywy blokowe działają tylko od WordPress 5.9. Jeśli Twoja witryna musi obsługiwać starsze wersje, rozważ podejście hybrydowe, ale unikaj mieszania plików szablonów.
• Motywy potomne: Motywy blokowe mogą być używane jako motywy nadrzędne dla klasycznych motywów potomnych, ale nie odwrotnie. Użyj template w style.css, aby zadeklarować nadrzędny motyw blokowy.
• Internacjonalizacja: Użyj funkcji __() wewnątrz części szablonów PHP dla ciągów znaków do przetłumaczenia. W znacznikach blokowych określ domenę tekstową za pomocą atrybutu textDomain.

Aby uzyskać więcej informacji na temat najlepszych praktyk tworzenia wtyczek, zobacz Budowanie solidnych wtyczek WordPress: Praktyczny przewodnik po najlepszych praktykach.

Podsumowanie

Tworzenie niestandardowego motywu blokowego z theme.json daje Ci możliwość stworzenia w pełni projektowalnej witryny bez dotykania PHP. Postępując zgodnie z tym przewodnikiem, skonfigurowałeś minimalny motyw, zdefiniowałeś globalne style, utworzyłeś niestandardowe szablony i dodałeś wzorce. Pamiętaj o dokładnym testowaniu, szczególnie w przypadku przypadków brzegowych, takich jak strony archiwum czy niestandardowe typy wpisów. W miarę ewolucji WordPressa motywy blokowe staną się standardem. Zacznij korzystać z FSE już dziś, aby usprawnić swój przepływ pracy i zaoferować klientom niezrównaną elastyczność.

Jeśli chcesz jeszcze bardziej przyspieszyć tworzenie motywu, rozważ użycie narzędzia, które generuje kompletną witrynę na podstawie opisu. Na przykład możesz opisać żądany układ i mieć gotowy do użycia motyw blokowy w ciągu kilku minut.

Gotowy, aby uruchomić swój motyw blokowy? Dzięki opisowi w postaci zwykłego tekstu możesz wygenerować w pełni funkcjonalną stronę docelową lub witrynę — bez potrzeby kodowania.