theme.json uitbreiden naar aangepaste berichttypen en plugin-uitvoer: een praktische gids

Samenvatting

Veel WordPress-ontwikkelaars bouwen aangepaste berichttypen of plugins die inhoud weergeven (bijv. testimonials, portfolio's). theme.json—de centrale configuratie voor globale stijlen—negeert deze aangepaste elementen echter vaak standaard, wat leidt tot onsamenhangend ontwerp. Dit artikel begeleidt u bij het registreren van aangepaste berichttypen om theme.json-stijlen over te nemen, het overschrijven van instellingen voor specifieke blokken en het overbruggen van plugin-uitvoer met kerndesigntokens. U krijgt stapsgewijze instructies, praktijkvoorbeelden zoals het stylen van een 'Team Member' CPT en valkuilen met betrekking tot prestaties en conflicten met derden. Aan het einde kunt u ervoor zorgen dat alle aangepaste inhoud overeenkomt met het door de editor gedefinieerde ontwerpsysteem van uw site.

Hebt u ooit een aangepast berichttype gemaakt of een plugin van derden geïntegreerd, om er vervolgens achter te komen dat de uitvoer het prachtige ontwerpsysteem dat u nauwgezet in theme.json hebt geconfigureerd, volledig negeert? U bent niet de enige. Standaard is theme.json alleen van toepassing op kern-WordPress-blokken en geregistreerde blokstijlen, waardoor aangepaste berichttypen en door plugins gegenereerde inhoud aan hun lot worden overgelaten. Dit resulteert meestal in inline CSS, dubbele lettertypefamilies of een niet bij elkaar passend kleurenpalet dat de gebruikerservaring verstoort. Maar er is een betere manier: u kunt theme.json uitbreiden naar deze aangepaste elementen, zodat u een consistent, onderhoudbaar ontwerpsysteem op uw hele site kunt garanderen. In deze gids behandelen we vier praktische stappen om dit te realiseren, compleet met codevoorbeelden en praktische valkuilen.

Het bereik van theme.json begrijpen

Voordat we beginnen, is het cruciaal om te begrijpen dat theme.json een concept is van blokthema's. Het definieert globale stijlen, instellingen (zoals kleurenpaletten en lettergroottes) en blokspecifieke stijlen voor de blokeditor en de frontend. Het bereik is echter beperkt: het bestuurt alleen blokken die expliciet ondersteuning voor theme.json-eigenschappen aangeven via register_block_type of de oudere add_theme_support. Aangepaste berichttypen die zijn gemaakt met register_post_type erven deze stijlen niet automatisch, tenzij ze met blokken zijn gebouwd of expliciet zijn gestyled.

Stap 1: Aangepaste berichttypen registreren met ondersteuning voor de blokeditor

De eerste stap is ervoor te zorgen dat uw aangepaste berichttype de blokeditor gebruikt. Stel bij het aanroepen van register_post_type 'show_in_rest' => true in en neem 'editor' op in de supports-array. Dit schakelt de blokeditor in voor dat berichttype, zodat auteurs blokstijlen uit theme.json kunnen gebruiken. Hier is bijvoorbeeld een 'Team Member' 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' => 'Teamleden',
            'singular_name' => 'Teamlid',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

Wanneer u nu een teampost bewerkt, ziet u de blokeditor met de globale stijlen van uw thema, toegepast op kernblokken zoals Alinea, Kop en Afbeelding. Dit alleen al lost vaak de meeste stylingproblemen op. Als u meer gedetailleerde controle nodig hebt, gaat u verder met de volgende stap. Voor een diepere duik in het bouwen van blokthema's met theme.json, zie Een aangepast WordPress-blokthema bouwen met theme.json.

Stap 2: Aangepaste blokstijlen toevoegen via theme.json

Soms wilt u specifieke stijlen toepassen op alle exemplaren van de inhoud van uw aangepaste berichttype—bijvoorbeeld door het hele bericht een achtergrondkleur of speciale opvulling te geven. U kunt core/post-content targeten of uw inhoud in een aangepast groepsblok verpakken en dat stylen via theme.json. Voeg het volgende toe aan uw theme.json-bestand onder het styles-object:

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

Dit past een lichte achtergrond en opvulling toe op het inhoudsgebied van alle berichten, inclusief uw Team Member CPT. U kunt ook blokspecifieke variaties definiëren in settings.blocks om stijlopties in de editor te bieden.

Stap 3: Aangepaste eigenschappen van theme.json gebruiken voor plugin-uitvoer

Plugins geven vaak inhoud weer via shortcodes, widgets of aangepaste blokken. Gebruik CSS-eigen eigenschappen die theme.json genereert om deze consistent te stylen. Als uw thema bijvoorbeeld een primaire kleur definieert als --wp--preset--color--primary, kunt u deze in de CSS van uw plugin gebruiken:

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

Dit zorgt ervoor dat de knop van uw plugin automatisch wordt bijgewerkt wanneer de sitebeheerder het kleurenpalet in theme.json wijzigt. Gebruik altijd de vooraf ingestelde CSS-variabelen in plaats van vaste waarden om dit robuust te maken. Als uw plugin eigen blokken registreert, kunt u de theme.json-instellingen overnemen door useSetting in JavaScript te gebruiken of $attributes in PHP-rendering door te geven, zoals behandeld in WordPress-dynamische blokken beheersen.

Stap 4: Dynamische blokken afhandelen

Voor aangepaste blokken die dynamische inhoud weergeven (bijv. een testimonials-schuifregelaar), moet u het blok registreren met ondersteuning voor de blokeditor en expliciet koppelen aan theme.json. Gebruik in PHP register_block_type met $args die 'render_callback' bevatten en zorg ervoor dat het block.json-bestand van uw blok 'supports' => array( 'color' => true, 'typography' => true ) instelt. In uw rendercallback kunt u vervolgens de globale stijlen openen via wp_get_global_styles() en toepassen. Bijvoorbeeld:

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

Deze aanpak zorgt ervoor dat uw aangepaste blok de ontwerptokens van het thema respecteert. Zie voor meer informatie over blokregistratie Robuuste WordPress-plugins bouwen.

Valkuilen

Hoewel het uitbreiden van theme.json krachtig is, moet u letten op de volgende valkuilen:

1. Prestaties: Het toevoegen van te veel aangepaste stijlen in theme.json kan het bestand opblazen en de CSS-parsingtijd verlengen. Houd u aan globale instellingen en gebruik blokspecifieke stijlen spaarzaam.
2. Pluginconflicten: Sommige plugins herstellen of overschrijven theme.json-instellingen. Test altijd met een minimale set plugins en overweeg om een hook in after_setup_theme te gebruiken om uw aanpassingen opnieuw toe te passen.
3. Klassieke thema's: Als uw thema de blokeditor niet gebruikt (d.w.z. het is een klassiek thema), heeft theme.json beperkt effect. Overweeg te migreren naar een blokthema of de functie wp_enqueue_global_styles te gebruiken om de stijlen te laden.
4. Browsercache: Wijzigingen in theme.json worden mogelijk niet direct weergegeven vanwege caching. Wis de browsercache en gebruik versiebeheer voor uw stylesheet.

Conclusie

U hebt nu een duidelijke routekaart om aangepaste berichttypen en plugin-uitvoer goed te laten samenwerken met uw theme.json-ontwerpsysteem. De sleutel is om uw CPT te registreren met ondersteuning voor de blokeditor, specifieke stijlen voor het berichtinhoudblok te definiëren, CSS-eigen eigenschappen te gebruiken in plugin-uitvoer en uw aangepaste blokken te registreren met de juiste integratie van theme.json. Deze aanpak elimineert inconsistentie, vermindert onderhoud en geeft sitebeheerders de macht om het uiterlijk en gevoel te beheersen vanuit één enkele bron van waarheid. Begin vandaag nog met het implementeren van deze stappen om samenhang te brengen in uw WordPress-projecten.