A theme.json kiterjesztése egyéni bejegyzéstípusokra és bővítménykimenetre: gyakorlati útmutató

Összefoglaló

Sok WordPress-fejlesztő készít egyéni bejegyzéstípusokat (CPT) vagy bővítményeket, amelyek tartalmat jelenítenek meg (pl. ajánlások, portfóliók). A theme.json – a globális stílusok központi konfigurációja – azonban alapértelmezés szerint gyakran figyelmen kívül hagyja ezeket az egyéni elemeket, ami inkonzisztens dizájnhoz vezet. Ez a cikk végigvezeti Önt az egyéni bejegyzéstípusok theme.json stílusok öröklésére való regisztrálásán, a beállítások felülírásán adott blokkok esetében, valamint a bővítménykimenet összekapcsolásán a magtervezési tokenekkel. Lépésről lépésre útmutatást, valós példákat (például egy „Csapattag” CPT stílusozása), valamint figyelmeztetéseket kap a teljesítményről és a harmadik féltől származó ütközésekről. A végére biztosíthatja, hogy minden egyéni tartalom megegyezzen a webhely szerkesztő által meghatározott dizájnrendszerével.

Előfordult már, hogy készített egy egyéni bejegyzéstípust vagy integrált egy harmadik féltől származó bővítményt, és kiderült, hogy a kimenete teljesen figyelmen kívül hagyja a gyönyörű dizájnrendszert, amelyet gondosan konfigurált a theme.json-ban? Nem vagy egyedül. Alapértelmezés szerint a theme.json csak a WordPress magblokkjaira és a regisztrált blokkstílusokra vonatkozik, az egyéni bejegyzéstípusok és a bővítmények által generált tartalom pedig magára van hagyva. Ez általában inline CSS-hez, duplikált betűtípuskészletekhez vagy eltérő színpalettához vezet, ami rontja a felhasználói élményt. De van jobb megoldás: kiterjesztheti a theme.json-t ezekre az egyéni elemekre, biztosítva ezzel egy konzisztens, karbantartható dizájnrendszert a teljes webhelyen. Ebben az útmutatóban négy gyakorlati lépést mutatunk be a megvalósításhoz, kódpéldákkal és valós figyelmeztetésekkel.

A theme.json hatókörének megértése

Mielőtt belemerülnénk, fontos megérteni, hogy a theme.json egy blokktéma-koncepció. Globális stílusokat, beállításokat (például színpaletták és betűméretek) és blokkspecifikus stílusokat határoz meg a blokkszerkesztőben és a front enden. Hatóköre azonban korlátozott: csak azokat a blokkokat vezérli, amelyek explicit módon deklarálják a theme.json tulajdonságok támogatását a register_block_type vagy a régebbi add_theme_support segítségével. A register_post_type-szal létrehozott egyéni bejegyzéstípusok nem öröklik automatikusan ezeket a stílusokat, hacsak nem blokkokkal készültek vagy explicit módon stílusozták őket.

1. lépés: Egyéni bejegyzéstípusok regisztrálása blokkszerkesztő támogatással

Az első lépés annak biztosítása, hogy az egyéni bejegyzéstípus a blokkszerkesztőt használja. A register_post_type hívásakor állítsa be a 'show_in_rest' => true értéket, és adja hozzá a 'editor' elemet a supports tömbhöz. Ezzel engedélyezi a blokkszerkesztőt az adott bejegyzéstípushoz, lehetővé téve a szerzők számára, hogy a theme.json blokkszintű stílusait használják. Például itt van egy „Csapattag” CPT:

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' );

Most, amikor szerkeszt egy csapattag bejegyzést, látni fogja a blokkszerkesztőt a témájának globális stílusaival alkalmazva a magblokkokra, mint a Bekezdés, Címsor és Kép. Ez önmagában gyakran megoldja a legtöbb stílusproblémát. Ha részletesebb vezérlésre van szüksége, folytassa a következő lépéssel. A blokktémák theme.json-nal való építésének mélyebb megismeréséhez lásd: Hogyan építsünk egyéni WordPress blokktémát theme.json-nal.

2. lépés: Egyéni blokkstílusok hozzáadása a theme.json segítségével

Néha szeretne specifikus stílusokat alkalmazni az egyéni bejegyzéstípus összes tartalmi példányára – például háttérszínt vagy speciális paddingot adni a teljes bejegyzésnek. Célozhatja a core/post-content blokkot, vagy becsomagolhatja a tartalmat egy egyéni csoportblokkba, és stílusozhatja azt a theme.json segítségével. Adja hozzá a következőket a theme.json fájl styles objektumához:

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

Ez világos háttérszínt és paddinget alkalmaz az összes bejegyzés tartalmi területére, beleértve a Csapattag CPT-t is. Meghatározhat blokkspecifikus variációkat a settings.blocks belsejében is, hogy stílusopciókat biztosítson a szerkesztőben.

3. lépés: theme.json egyéni tulajdonságok használata bővítménykimenethez

A bővítmények gyakran shortcode-ok, widgetek vagy egyéni blokkok segítségével jelenítenek meg tartalmat. A konzisztens stílusozáshoz használja ki a theme.json által generált CSS egyéni tulajdonságokat. Például, ha a témája egy elsődleges színt --wp--preset--color--primary-ként definiál, használhatja azt a bővítmény CSS-ében:

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

Ez biztosítja, hogy amikor a webhely rendszergazdája megváltoztatja a színpalettát a theme.json-ban, a bővítmény gombja automatikusan frissüljön. A robusztusság érdekében mindig az előre beállított CSS-változókat használja a keménykódolt értékek helyett. Továbbá, ha a bővítmény saját blokkokat regisztrál, örökölheti a theme.json beállításokat a useSetting használatával JavaScriptben vagy a $attributes átadásával PHP rendereléskor, ahogyan azt a WordPress dinamikus blokkok elsajátítása című cikkben ismertetjük.

4. lépés: Dinamikus blokkok kezelése

Azoknál az egyéni blokkoknál, amelyek dinamikus tartalmat jelenítenek meg (pl. ajánlás-csúszka), regisztrálnia kell a blokkot blokkszerkesztő támogatással, és explicit módon össze kell kötnie a theme.json-nal. PHP-ben használja a register_block_type függvényt $args paraméterrel, amely tartalmazza a 'render_callback' elemet, és győződjön meg arról, hogy a blokk block.json fájlja beállítja a 'supports' => array( 'color' => true, 'typography' => true ) értéket. Ezután a render visszahívásban elérheti a globális stílusokat a wp_get_global_styles() segítségével, és alkalmazhatja azokat. Például:

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>';
}

Ez a megközelítés biztosítja, hogy az egyéni blokk tiszteletben tartsa a téma dizájn tokenjeit. A blokkregisztrációról további információért lásd: Robusztus WordPress bővítmények építése.

Figyelmeztetések

Bár a theme.json kiterjesztése hatékony, ügyeljen az alábbi buktatókra:

1. Teljesítmény: Túl sok egyéni stílus hozzáadása a theme.json-ban felduzzaszthatja a fájlt és növelheti a CSS feldolgozási idejét. Ragaszkodjon a globális beállításokhoz, és takarékosan használja a blokkspecifikus stílusokat.
2. Bővítmény-ütközések: Egyes bővítmények visszaállítják vagy felülírják a theme.json beállításait. Mindig teszteljen minimális bővítménykészlettel, és fontolja meg az after_setup_theme akcióba való beakaszkodást a testreszabások újraalkalmazásához.
3. Klasszikus témák: Ha a témája nem használ blokkszerkesztőt (azaz klasszikus téma), a theme.json-nak korlátozott hatása van. Fontolja meg a blokktémára való áttérést vagy a wp_enqueue_global_styles függvény használatát a stílusok betöltéséhez.
4. Böngésző gyorsítótár: A theme.json módosításai a gyorsítótárazás miatt nem feltétlenül jelennek meg azonnal. Törölje a böngésző gyorsítótárát, és használjon verziószámozást a stíluslaphoz.

Következtetés

Mostanra világos útitervvel rendelkezik ahhoz, hogy az egyéni bejegyzéstípusok és bővítménykimenetek jól működjenek együtt a theme.json dizájnrendszerrel. A kulcs az, hogy regisztrálja a CPT-t blokkszerkesztő támogatással, definiáljon specifikus stílusokat a bejegyzés tartalmi blokkjához, használjon CSS egyéni tulajdonságokat a bővítménykimenetben, és regisztrálja az egyéni blokkokat megfelelő theme.json integrációval. Ez a megközelítés kiküszöböli az inkonzisztenciát, csökkenti a karbantartást, és lehetővé teszi a webhely rendszergazdái számára, hogy egyetlen forrásból irányítsák a megjelenést. Kezdje el alkalmazni ezeket a lépéseket még ma, hogy összhangot teremtsen WordPress-projektjeiben.