Utvide theme.json til egendefinerte innleggstyper og plugin-utdata: En praktisk guide

Sammendrag

Mange WordPress-utviklere bygger egendefinerte innleggstyper eller plugins som viser innhold (f.eks. attester, porteføljer). Imidlertid ignorerer theme.json—den sentrale konfigurasjonen for globale stiler—ofte disse egendefinerte elementene som standard, noe som fører til uensartet design. Denne artikkelen leder deg gjennom registrering av egendefinerte innleggstyper for å arve theme.json-stiler, overstyre innstillinger for spesifikke blokker, og koble plugin-utdata med kjernedesign-tokens. Du får steg-for-steg-instruksjoner, virkelige eksempler som styling av en 'Team Member'-innleggstype, og forbehold om ytelse og tredjepartskonflikter. Til slutt kan du sikre at alt egendefinert innhold matcher sidens redaktørdefinerte designsystem.

Har du noen gang bygget en egendefinert innleggstype eller integrert en tredjeparts plugin, bare for å oppdage at utdataene fullstendig ignorerer det vakre designsystemet du omhyggelig konfigurerte i theme.json? Du er ikke alene. Som standard gjelder theme.json bare for kjernens WordPress-blokker og registrerte blokkstiler, og etterlater egendefinerte innleggstyper og plugingenerert innhold til seg selv. Dette resulterer typisk i innebygd CSS, dupliserte fontstakker, eller en mismatchet fargepalett som bryter brukeropplevelsen. Men det finnes en bedre måte: du kan utvide theme.json til å dekke disse egendefinerte elementene, og sikre et konsistent, vedlikeholdbart designsystem på hele nettstedet ditt. I denne guiden vil vi dekke fire praktiske trinn for å få det til, komplett med kodeeksempler og virkelige forbehold.

Forstå theme.json-omfang

Før vi dykker inn, er det avgjørende å forstå at theme.json er et blokktema-konsept. Det definerer globale stiler, innstillinger (som fargepaletter og skriftstørrelser), og blokkspesifikke stiler for blokkeditoren og frontenden. Imidlertid er rekkevidden begrenset: det kontrollerer bare blokker som eksplisitt erklærer støtte for theme.json-egenskaper via register_block_type eller den eldre add_theme_support. Egendefinerte innleggstyper opprettet med register_post_type arver ikke automatisk disse stilene med mindre de er bygget med blokker eller eksplisitt stylet.

Trinn 1: Registrere egendefinerte innleggstyper med blokkeditorstøtte

Det første trinnet er å sikre at din egendefinerte innleggstype bruker blokkeditoren. Når du kaller register_post_type, sett 'show_in_rest' => true og inkluder 'editor' i supports-arrayet. Dette aktiverer blokkeditoren for den innleggstypen, slik at forfattere kan bruke blokknivåstiler fra theme.json. For eksempel, her er en "Team Member"-innleggstype:

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

Når du redigerer et team-medlem-innlegg, vil du nå se blokkeditoren med dine temas globale stiler brukt på kjernelblokker som Avsnitt, Overskrift og Bilde. Dette alene løser ofte de fleste stilproblemer. Hvis du trenger mer detaljert kontroll, gå til neste trinn. For en dypere gjennomgang av å bygge blokktemaer med theme.json, se Hvordan bygge et tilpasset WordPress-blokktema med theme.json.

Trinn 2: Legge til egendefinerte blokkstiler via theme.json

Noen ganger vil du bruke spesifikke stiler på alle forekomster av din egendefinerte innleggstypes innhold—for eksempel, gi hele innlegget en bakgrunnsfarge eller spesiell polstring. Du kan målrette core/post-content eller pakke innholdet ditt i en egendefinert gruppeblokk og style den via theme.json. Legg til følgende i din theme.json-fil under styles-objektet:

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

Dette vil bruke en lys bakgrunn og polstring på innholdsområdet til alle innlegg, inkludert din Team Member-innleggstype. Du kan også definere blokkspesifikke varianter inne i settings.blocks for å gi stilalternativer i editoren.

Trinn 3: Bruke theme.json-egendefinerte egenskaper for plugin-utdata

Plugins viser ofte innhold via kortkoder, widgets eller egendefinerte blokker. For å style disse konsekvent, utnytt CSS-egendefinerte egenskaper som theme.json genererer. For eksempel, hvis temaet ditt definerer en primærfarge som --wp--preset--color--primary, kan du bruke den i pluginens CSS:

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

Dette sikrer at når nettstedsadministratoren endrer fargepaletten i theme.json, oppdateres pluginens knapp automatisk. For å gjøre dette robust, bruk alltid de forhåndsdefinerte CSS-variablene i stedet for å hardkode verdier. I tillegg, hvis pluginen din registrerer egne blokker, kan du arve theme.json-innstillinger ved å bruke useSetting i JavaScript eller sende $attributes i PHP-gjengivelse, som dekket i Mestring av WordPress-dynamiske blokker.

Trinn 4: Håndtere dynamiske blokker

For egendefinerte blokker som viser dynamisk innhold (f.eks. en attester-skyveknapp), må du registrere blokken med blokkeditorstøtte og eksplisitt knytte den til theme.json. I PHP, bruk register_block_type med $args som inkluderer 'render_callback' og sørg for at blokkens block.json-fil setter 'supports' => array( 'color' => true, 'typography' => true ). Deretter, i din render-callback, kan du få tilgang til de globale stilene via wp_get_global_styles() og bruke dem. For eksempel:

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

Denne tilnærmingen sikrer at din egendefinerte blokk respekterer temaets designtokens. For mer om blokkregistrering, se Bygge robuste WordPress-plugins.

Forbehold

Selv om utvidelse av theme.json er kraftig, pass på følgende fallgruver:

1. Ytelse: Å legge til for mange egendefinerte stiler i theme.json kan blåse opp filen og øke CSS-tolkningstiden. Hold deg til globale innstillinger og bruk blokkspesifikke stiler sparsomt.
2. Plugin-konflikter: Noen plugins tilbakestiller eller overstyrer theme.json-innstillinger. Test alltid med et minimalt pluginsett og vurder å koble til after_setup_theme for å legge til dine tilpasninger på nytt.
3. Klassiske temaer: Hvis temaet ditt ikke bruker blokkeditoren (dvs. det er et klassisk tema), har theme.json begrenset effekt. Vurder å migrere til et blokktema eller bruk wp_enqueue_global_styles-funksjonen for å laste stilene.
4. Nettleserbuffer: Endringer i theme.json kan ikke vises umiddelbart på grunn av bufring. Tøm nettleserbuffer og bruk versjonering for stilarket ditt.

Konklusjon

Nå har du en klar veikart for å få egendefinerte innleggstyper og plugin-utdata til å spille godt med ditt theme.json-designsystem. Nøkkelen er å registrere din innleggstype med blokkeditorstøtte, definere spesifikke stiler for innholdsblokken, bruke CSS-egendefinerte egenskaper i plugin-utdata, og registrere dine egendefinerte blokker med riktig theme.json-integrasjon. Denne tilnærmingen eliminerer inkonsekvens, reduserer vedlikehold, og gir nettstedsadministratorer kraften til å kontrollere utseende og følelse fra en enkelt sannhetskilde. Begynn å implementere disse trinnene i dag for å skape sammenheng i dine WordPress-prosjekter.