Rozšíření theme.json na vlastní typy příspěvků a výstup pluginů: Praktický průvodce

Shrnutí

Mnoho vývojářů WordPressu vytváří vlastní typy příspěvků nebo pluginy, které generují obsah (např. reference, portfolia). Theme.json – centrální konfigurace globálních stylů – však tyto vlastní prvky často ignoruje, což vede k nejednotnému designu. Tento článek vás provede registrací vlastních typů příspěvků tak, aby dědily styly z theme.json, přepisováním nastavení pro konkrétní bloky a propojením výstupu pluginů s hlavními designovými tokeny. Získáte instrukce krok za krokem, reálné příklady jako stylování CPT 'Člen týmu' a upozornění na výkon a konflikty s třetími stranami. Na konci budete schopni zajistit, že jakýkoli vlastní obsah odpovídá designovému systému definovanému v editoru.

Stalo se vám někdy, že jste vytvořili vlastní typ příspěvku nebo integrovali plugin třetí strany, a jeho výstup zcela ignoroval krásný designový systém, který jste pracně nastavili v theme.json? Nejste sami. Ve výchozím nastavení se theme.json vztahuje pouze na základní bloky WordPressu a registrované styly bloků, zatímco vlastní typy příspěvků a obsah generovaný pluginy jsou ponechány svému osudu. To obvykle vede k inline CSS, duplicitním fontům nebo neshodující se paletě barev, což narušuje uživatelský zážitek. Existuje však lepší cesta: můžete rozšířit theme.json tak, aby pokrýval i tyto vlastní prvky, a zajistit tak konzistentní a udržovatelný designový systém na celém webu. V této příručce projdeme čtyři praktické kroky, jak toho dosáhnout, s ukázkami kódu a reálnými upozorněními.

Porozumění rozsahu theme.json

Než se ponoříme do detailů, je důležité pochopit, že theme.json je koncept blokových témat. Definuje globální styly, nastavení (jako palety barev a velikosti písma) a styly specifické pro bloky v editoru i na frontendu. Jeho dosah je však omezený: ovládá pouze bloky, které explicitně deklarují podporu vlastností theme.json prostřednictvím register_block_type nebo staršího add_theme_support. Vlastní typy příspěvků vytvořené pomocí register_post_type tyto styly automaticky nedědí, pokud nejsou postaveny na blocích nebo explicitně nastylovány.

Krok 1: Registrace vlastních typů příspěvků s podporou blokového editoru

Prvním krokem je zajistit, aby váš vlastní typ příspěvku používal blokový editor. Při volání register_post_type nastavte 'show_in_rest' => true a zahrňte 'editor' do pole supports. Tím se pro daný typ příspěvku povolí blokový editor, což autorům umožní používat styly bloků z theme.json. Například CPT "Člen týmu":

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'Team Members',
            'singular_name' => 'Team Member',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

Nyní, když upravujete příspěvek člena týmu, uvidíte blokový editor s globálními styly vašeho motivu aplikovanými na základní bloky jako Odstavec, Nadpis a Obrázek. To samo o sobě často řeší většinu problémů se stylováním. Pokud potřebujete jemnější kontrolu, přejděte k dalšímu kroku. Pro hlubší ponor do vytváření blokových témat s theme.json viz Jak postavit vlastní blokové téma WordPress s theme.json.

Krok 2: Přidání vlastních stylů bloků prostřednictvím theme.json

Někdy chcete aplikovat specifické styly na všechny instance obsahu vašeho vlastního typu příspěvku – například přidat celému příspěvku barvu pozadí nebo speciální odsazení. Můžete cílit na core/post-content nebo zabalit svůj obsah do vlastního skupinového bloku a stylovat jej přes theme.json. Přidejte následující do souboru theme.json pod objekt styles:

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

To aplikuje světlé pozadí a odsazení na oblast obsahu všech příspěvků, včetně vašeho CPT Člen týmu. Můžete také definovat varianty specifické pro bloky uvnitř settings.blocks, abyste v editoru poskytli možnosti stylů.

Krok 3: Použití vlastních vlastností theme.json pro výstup pluginů

Pluginy často generují obsah prostřednictvím shortcodes, widgetů nebo vlastních bloků. Pro konzistentní stylování využijte CSS vlastních proměnných, které theme.json generuje. Pokud například váš motiv definuje primární barvu jako --wp--preset--color--primary, můžete ji použít v CSS vašeho pluginu:

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

To zajistí, že když správce webu změní paletu barev v theme.json, tlačítko vašeho pluginu se automaticky aktualizuje. Pro robustnost vždy používejte přednastavené CSS proměnné místo pevně zakódovaných hodnot. Pokud váš plugin registruje vlastní bloky, můžete dědit nastavení theme.json pomocí useSetting v JavaScriptu nebo předáním $attributes v PHP renderování, jak je popsáno v Ovládnutí dynamických bloků WordPress.

Krok 4: Práce s dynamickými bloky

Pro vlastní bloky, které generují dynamický obsah (např. posuvník referencí), musíte zaregistrovat blok s podporou blokového editoru a explicitně jej propojit s theme.json. V PHP použijte register_block_type s $args, které obsahují 'render_callback', a ujistěte se, že soubor block.json vašeho bloku nastavuje 'supports' => array( 'color' => true, 'typography' => true ). Poté v renderovacím callbacku můžete přistupovat ke globálním stylům pomocí wp_get_global_styles() a aplikovat je. Například:

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

Tento přístup zajistí, že váš vlastní blok respektuje designové tokeny motivu. Více o registraci bloků najdete v Budování robustních WordPress pluginů.

Upozornění

I když je rozšiřování theme.json mocné, dejte si pozor na tyto nástrahy:

1. Výkon: Přidání příliš mnoha vlastních stylů do theme.json může nafouknout soubor a zvýšit čas parsování CSS. Držte se globálních nastavení a styly specifické pro bloky používejte střídmě.
2. Konflikty s pluginy: Některé pluginy resetují nebo přepisují nastavení theme.json. Vždy testujte s minimální sadou pluginů a zvažte použití háčku after_setup_theme pro opětovné aplikování vašich úprav.
3. Klasická témata: Pokud vaše téma nepoužívá blokový editor (tj. je to klasické téma), theme.json má omezený účinek. Zvažte migraci na blokové téma nebo použití funkce wp_enqueue_global_styles pro načtení stylů.
4. Cache prohlížeče: Změny v theme.json se nemusí projevit okamžitě kvůli cachování. Vymažte cache prohlížeče a použijte verzování pro váš stylesheet.

Závěr

Nyní máte jasný plán, jak přimět vlastní typy příspěvků a výstupy pluginů, aby spolupracovaly s vaším designovým systémem theme.json. Klíčem je registrovat CPT s podporou blokového editoru, definovat specifické styly pro blok obsahu příspěvku, používat CSS vlastní proměnné ve výstupu pluginů a registrovat vlastní bloky s řádnou integrací theme.json. Tento přístup eliminuje nesrovnalosti, snižuje údržbu a dává správcům webu možnost ovládat vzhled a dojem z jediného zdroje pravdy. Začněte implementovat tyto kroky ještě dnes, abyste přinesli soudržnost svým WordPress projektům.