Razširitev theme.json na prilagojene vrste objav in izhod vtičnikov: Praktični vodnik

Povzetek

Številni razvijalci WordPressa ustvarjajo prilagojene vrste objav ali vtičnike, ki izpisujejo vsebino (npr. pričevanja, portfelje). Vendar theme.json – osrednja konfiguracija za globalne sloge – pogosto privzeto ignorira te prilagojene elemente, kar vodi v nepovezano oblikovanje. Ta članek vas vodi skozi registracijo prilagojenih vrst objav, da podedujejo sloge theme.json, preglasitev nastavitev za posamezne bloke in povezovanje izhoda vtičnikov z osrednjimi oblikovnimi žetoni. Dobili boste navodila po korakih, primere iz resničnega sveta, kot je oblikovanje CPT-ja 'Član ekipe', ter opozorila o zmogljivosti in konfliktih s tretjimi osebami. Na koncu lahko zagotovite, da se vsaka prilagojena vsebina ujema z oblikovnim sistemom, ki ga je določil urejevalnik vašega spletnega mesta.

Ste kdaj ustvarili prilagojeno vrsto objave ali integrirali vtičnik tretje osebe, le da ste ugotovili, da njegov izhod popolnoma ignorira čudovit oblikovni sistem, ki ste ga skrbno konfigurirali v theme.json? Niste sami. Privzeto theme.json velja le za osrednje WordPress bloke in registrirane sloge blokov, prilagojene vrste objav in vsebino, ki jo ustvarijo vtičniki, pa prepusti samim sebi. To običajno povzroči inline CSS, podvojene sklade pisav ali neusklajeno barvno paleto, kar kvari uporabniško izkušnjo. Vendar obstaja boljši način: theme.json lahko razširite, da zajame te prilagojene elemente, s čimer zagotovite dosleden in vzdržljiv oblikovni sistem na celotnem spletnem mestu. V tem vodniku bomo obravnavali štiri praktične korake za uresničitev tega, skupaj s primeri kode in opozorili iz resničnega sveta.

Razumevanje obsega theme.json

Preden se poglobimo, je ključnega pomena razumeti, da je theme.json koncept blokovne teme. Določa globalne sloge, nastavitve (kot so barvne palete in velikosti pisav) ter sloge, specifične za bloke, za urejevalnik blokov in čelni del. Vendar je njegov doseg omejen: nadzoruje le bloke, ki izrecno deklarirajo podporo za lastnosti theme.json prek register_block_type ali starejšega add_theme_support. Prilagojene vrste objav, ustvarjene z register_post_type, teh slogov ne podedujejo samodejno, razen če so zgrajene z bloki ali izrecno oblikovane.

1. korak: Registracija prilagojenih vrst objav s podporo urejevalnika blokov

Prvi korak je zagotoviti, da vaša prilagojena vrsta objave uporablja urejevalnik blokov. Pri klicu register_post_type nastavite 'show_in_rest' => true in vključite 'editor' v polje supports. To omogoči urejevalnik blokov za to vrsto objave, kar avtorjem omogoča uporabo slogov na ravni blokov iz theme.json. Na primer, tukaj je CPT "Član ekipe":

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

Zdaj, ko urejate objavo člana ekipe, boste videli urejevalnik blokov z globalnimi slogi vaše teme, uporabljenimi za osrednje bloke, kot so odstavek, naslov in slika. To samo po sebi pogosto reši večino težav s slogom. Če potrebujete natančnejši nadzor, nadaljujte z naslednjim korakom. Za poglobljen vpogled v gradnjo blokovnih tem z theme.json glejte Kako zgraditi prilagojeno blokovno temo WordPress z theme.json.

2. korak: Dodajanje prilagojenih slogov blokov prek theme.json

Včasih želite uporabiti določene sloge za vse primerke vsebine vaše prilagojene vrste objave – na primer dodati celotni objavi barvo ozadja ali poseben odmik. Ciljate lahko na core/post-content ali svojo vsebino ovijete v prilagojen blok skupine in ga oblikujete prek theme.json. V datoteko theme.json dodajte naslednje pod objekt styles:

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

To bo uporabilo svetlo ozadje in odmik za območje vsebine vseh objav, vključno z vašim CPT-jem Član ekipe. Prav tako lahko znotraj settings.blocks določite variacije, specifične za bloke, da v urejevalniku zagotovite možnosti sloga.

3. korak: Uporaba prilagojenih lastnosti theme.json za izhod vtičnikov

Vtičniki pogosto izpisujejo vsebino prek kratkih kod, gradnikov ali prilagojenih blokov. Za dosledno oblikovanje uporabite prilagojene lastnosti CSS, ki jih ustvari theme.json. Na primer, če vaša tema določa primarno barvo kot --wp--preset--color--primary, jo lahko uporabite v CSS-ju vašega vtičnika:

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

To zagotavlja, da se gumb vašega vtičnika samodejno posodobi, ko skrbnik spletnega mesta spremeni barvno paleto v theme.json. Da bo to robustno, vedno uporabite vnaprej določene spremenljivke CSS namesto trdo kodiranih vrednosti. Poleg tega, če vaš vtičnik registrira svoje bloke, lahko podeduje nastavitve theme.json z uporabo useSetting v JavaScriptu ali posredovanjem $attributes v PHP prikazu, kot je obravnavano v Obvladovanje dinamičnih blokov WordPress.

4. korak: Ravnanje z dinamičnimi bloki

Za prilagojene bloke, ki izpisujejo dinamično vsebino (npr. drsnik pričevanj), morate blok registrirati s podporo urejevalnika blokov in ga izrecno povezati s theme.json. V PHP-ju uporabite register_block_type z $args, ki vključujejo 'render_callback', in zagotovite, da datoteka block.json vašega bloka nastavi 'supports' => array( 'color' => true, 'typography' => true ). Nato lahko v povratnem klicu za prikaz dostopate do globalnih slogov prek wp_get_global_styles() in jih uporabite. Na primer:

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

Ta pristop zagotavlja, da vaš prilagojeni blok upošteva oblikovne žetone teme. Za več informacij o registraciji blokov glejte Gradnja robustnih vtičnikov WordPress.

Opozorila

Čeprav je razširitev theme.json zmogljiva, bodite pozorni na naslednje pasti:

1. Zmogljivost: Dodajanje preveč prilagojenih slogov v theme.json lahko napihne datoteko in poveča čas razčlenjevanja CSS. Držite se globalnih nastavitev in uporabljajte sloge, specifične za bloke, redko.
2. Konflikti vtičnikov: Nekateri vtičniki ponastavijo ali preglasijo nastavitve theme.json. Vedno testirajte z minimalnim naborom vtičnikov in razmislite o vpetju v after_setup_theme, da ponovno uporabite svoje prilagoditve.
3. Klasične teme: Če vaša tema ne uporablja urejevalnika blokov (tj. gre za klasično temo), ima theme.json omejen učinek. Razmislite o selitvi na blokovno temo ali uporabi funkcije wp_enqueue_global_styles za nalaganje slogov.
4. Predpomnilnik brskalnika: Spremembe v theme.json se zaradi predpomnilnika morda ne bodo takoj prikazale. Počistite predpomnilnik brskalnika in uporabite različico za svojo slogovno predlogo.

Zaključek

Do zdaj imate jasen načrt, kako uskladiti prilagojene vrste objav in izhode vtičnikov z vašim oblikovnim sistemom theme.json. Ključno je, da registrirate svoj CPT s podporo urejevalnika blokov, določite posebne sloge za blok vsebine objave, uporabite prilagojene lastnosti CSS v izhodu vtičnikov in registrirate svoje prilagojene bloke s pravilno integracijo theme.json. Ta pristop odpravlja neskladnost, zmanjšuje vzdrževanje in daje skrbnikom spletnega mesta moč, da nadzorujejo videz in občutek iz enega samega vira resnice. Začnite izvajati te korake že danes, da prinesete skladnost svojim WordPress projektom.