Rozšírenie theme.json na vlastné typy príspevkov a výstup pluginov: Praktický sprievodca

Súhrn

Mnoho vývojárov WordPress vytvára vlastné typy príspevkov alebo pluginy, ktoré generujú obsah (napr. referencie, portfóliá). Avšak theme.json – centrálna konfigurácia pre globálne štýly – často tieto vlastné prvky predvolene ignoruje, čo vedie k nesúrodému dizajnu. Tento článok vás prevedie registráciou vlastných typov príspevkov, aby dedili štýly z theme.json, prepisovaním nastavení pre konkrétne bloky a prepojením výstupu pluginov s kľúčovými dizajnovými tokenmi. Získate podrobné inštrukcie, príklady z praxe ako štylovanie CPT „Člen tímu“ a upozornenia na výkon a konflikty s tretími stranami. Na konci budete schopní zabezpečiť, aby akýkoľvek vlastný obsah zodpovedal dizajnovému systému definovanému v editore vašej stránky.

Už ste niekedy vytvorili vlastný typ príspevku alebo integrovali plugin tretej strany, len aby ste zistili, že jeho výstup úplne ignoruje krásny dizajnový systém, ktorý ste starostlivo nakonfigurovali v theme.json? Nie ste sami. Predvolene sa theme.json vzťahuje len na základné bloky WordPress a registrované štýly blokov, pričom vlastné typy príspevkov a obsah generovaný pluginmi sú ponechané napospas. To zvyčajne vedie k inline CSS, duplicitným fontom alebo nezhodnej farebnej palete, čo narúša používateľský zážitok. Existuje však lepšia cesta: môžete rozšíriť theme.json, aby pokrýval tieto vlastné prvky, čím zabezpečíte konzistentný a udržiavateľný dizajnový systém na celom webe. V tomto sprievodcovi prejdeme štyri praktické kroky, ako to dosiahnuť, spolu s príkladmi kódu a reálnymi upozorneniami.

Pochopenie rozsahu theme.json

Predtým, než sa ponoríme, je dôležité pochopiť, že theme.json je koncept blokových tém. Definuje globálne štýly, nastavenia (ako farebné palety a veľkosti písma) a štýly špecifické pre bloky pre blokový editor aj frontend. Jeho dosah je však obmedzený: ovláda len bloky, ktoré explicitne deklarujú podporu vlastností theme.json prostredníctvom register_block_type alebo staršieho add_theme_support. Vlastné typy príspevkov vytvorené pomocou register_post_type tieto štýly automaticky nededí, pokiaľ nie sú postavené na blokoch alebo explicitne štylované.

Krok 1: Registrácia vlastných typov príspevkov s podporou blokového editora

Prvým krokom je zabezpečiť, aby váš vlastný typ príspevkov používal blokový editor. Pri volaní register_post_type nastavte 'show_in_rest' => true a zahrňte 'editor' do poľa supports. Tým sa pre daný typ príspevku aktivuje blokový editor, čo autorom umožní používať štýly na úrovni blokov z theme.json. Napríklad tu je 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' );

Teraz pri úprave príspevku člena tímu uvidíte blokový editor s globálnymi štýlmi vašej témy aplikovanými na základné bloky ako Odsek, Nadpis a Obrázok. Toto samo o sebe často rieši väčšinu problémov so štylovaním. Ak potrebujete detailnejšie ovládanie, prejdite na ďalší krok. Pre hlbší ponor do budovania blokových tém s theme.json pozrite Ako vytvoriť vlastnú blokovú tému WordPress s theme.json.

Krok 2: Pridávanie vlastných štýlov blokov cez theme.json

Niekedy chcete aplikovať špecifické štýly na všetky inštancie obsahu vášho vlastného typu príspevkov – napríklad dať celému príspevku farbu pozadia alebo špeciálne odsadenie. Môžete zacieliť na core/post-content alebo zabaliť obsah do vlastného skupinového bloku a štylovať ho cez theme.json. Pridajte nasledujúce do súboru theme.json pod objekt styles:

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

Toto aplikuje svetlé pozadie a odsadenie na oblasť obsahu všetkých príspevkov vrátane vášho CPT Člen tímu. Môžete tiež definovať variácie špecifické pre blok v rámci settings.blocks, aby ste poskytli možnosti štýlov v editore.

Krok 3: Použitie vlastných vlastností theme.json pre výstup pluginov

Pluginy často generujú obsah pomocou shortcodov, widgetov alebo vlastných blokov. Aby ste tieto prvky jednotne štylovali, využite CSS custom properties, ktoré theme.json generuje. Napríklad, ak vaša téma definuje primárnu farbu ako --wp--preset--color--primary, môžete ju použiť v CSS svojho pluginu:

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

To zaisťuje, že keď správca stránky zmení farebnú paletu v theme.json, tlačidlo vášho pluginu sa automaticky aktualizuje. Aby to bolo spoľahlivé, vždy používajte predvolené CSS premenné namiesto pevne zakódovaných hodnôt. Okrem toho, ak váš plugin registruje vlastné bloky, môžete dediť nastavenia theme.json pomocou useSetting v JavaScripte alebo odovzdaním $attributes pri renderovaní v PHP, ako je popísané v Zvládnutie dynamických blokov WordPress.

Krok 4: Spracovanie dynamických blokov

Pre vlastné bloky, ktoré generujú dynamický obsah (napr. posúvač referencií), musíte blok zaregistrovať s podporou blokového editora a explicitne ho pripojiť k theme.json. V PHP použite register_block_type s $args, ktoré obsahujú 'render_callback', a zaistite, aby súbor block.json vášho bloku nastavil 'supports' => array( 'color' => true, 'typography' => true ). Potom vo svojom renderovacom callbacku môžete pristupovať ku globálnym štýlom pomocou wp_get_global_styles() a aplikovať ich. Naprí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 prístup zabezpečuje, že váš vlastný blok rešpektuje dizajnové tokeny témy. Viac o registrácii blokov nájdete v Vytváranie robustných pluginov WordPress.

Upozornenia

Aj keď je rozširovanie theme.json silné, dávajte si pozor na tieto nástrahy:

1. Výkon: Pridanie príliš veľa vlastných štýlov do theme.json môže nafúknuť súbor a zvýšiť čas parsovania CSS. Držte sa globálnych nastavení a používajte štýly špecifické pre bloky striedmo.

2. Konflikty s pluginmi: Niektoré pluginy resetujú alebo prepisujú nastavenia theme.json. Vždy testujte s minimálnou sadou pluginov a zvážte pripojenie sa na after_setup_theme na opätovné aplikovanie vašich úprav.

3. Klasické témy: Ak vaša téma nepoužíva blokový editor (t. j. je to klasická téma), theme.json má obmedzený účinok. Zvážte migráciu na blokovú tému alebo použitie funkcie wp_enqueue_global_styles na načítanie štýlov.

4. Vyrovnávacia pamäť prehliadača: Zmeny v theme.json sa nemusia prejaviť okamžite kvôli ukladaniu do vyrovnávacej pamäte. Vyčistite vyrovnávaciu pamäť prehliadača a používajte verzovanie pre váš štýlový súbor.

Záver

Teraz máte jasný plán, ako dosiahnuť, aby vlastné typy príspevkov a výstupy pluginov dobre spolupracovali s vaším dizajnovým systémom theme.json. Kľúčom je zaregistrovať váš CPT s podporou blokového editora, definovať špecifické štýly pre blok obsahu príspevku, používať CSS custom properties vo výstupe pluginov a zaregistrovať vlastné bloky so správnou integráciou theme.json. Tento prístup odstraňuje nekonzistentnosť, znižuje údržbu a dáva správcom stránok možnosť ovládať vzhľad a dojem z jedného zdroja pravdy. Začnite implementovať tieto kroky ešte dnes, aby ste priniesli súdržnosť do svojich WordPress projektov.