Proširivanje theme.json na vrste prilagođenih postova i izlaz dodataka: Praktični vodič

Sažetak

Mnogi WordPress programeri grade prilagođene vrste postova ili dodatke koji izlaze sadržaj (npr. izjave, portfelji). Međutim, theme.json—središnja konfiguracija za globalne stilove—često ignorira ove prilagođene elemente prema zadanim postavkama, što dovodi do neujednačenog dizajna. Ovaj članak vas vodi kroz registraciju prilagođenih vrsta postova kako bi naslijedili stilove theme.json, nadjačavanje postavki za određene blokove, te povezivanje izlaza dodataka s osnovnim dizajnerskim tokenima. Dobit ćete upute korak po korak, primjere iz stvarnog svijeta poput stiliziranja CPT-a 'Član tima', te upozorenja o performansama i sukobima s trećim stranama. Na kraju, možete osigurati da se bilo koji prilagođeni sadržaj podudara s vašim uređivački definiranim sustavom dizajna.

Jeste li ikada izgradili prilagođenu vrstu posta ili integrirali dodatak treće strane, samo da biste otkrili da njegov izlaz potpuno ignorira prekrasan sustav dizajna koji ste mukotrpno konfigurirali u theme.json? Niste sami. Prema zadanim postavkama, theme.json se primjenjuje samo na osnovne WordPress blokove i registrirane stilove blokova, ostavljajući prilagođene vrste postova i sadržaj generiran dodacima da se sami snađu. To obično rezultira inline CSS-om, dupliciranim stackovima fontova ili neusklađenom paletom boja koja narušava korisničko iskustvo. Ali postoji bolji način: možete proširiti theme.json da pokrije ove prilagođene elemente, osiguravajući dosljedan, održiv sustav dizajna na cijeloj vašoj stranici. U ovom vodiču, pokrit ćemo četiri praktična koraka kako to postići, s primjerima koda i stvarnim upozorenjima.

Razumijevanje dosega theme.json

Prije nego što zaronimo, ključno je razumjeti da je theme.json koncept blok tema. On definira globalne stilove, postavke (poput paleta boja i veličina fontova) i stilove specifične za blokove za uređivač blokova i front end. Međutim, njegov doseg je ograničen: kontrolira samo blokove koji izričito deklariraju podršku za svojstva theme.json putem register_block_type ili starijeg add_theme_support. Prilagođene vrste postova stvorene s register_post_type ne nasljeđuju automatski ove stilove osim ako su izgrađene s blokovima ili izričito stilizirane.

Korak 1: Registrirajte prilagođene vrste postova s podrškom za uređivač blokova

Prvi korak je osigurati da vaša prilagođena vrsta posta koristi uređivač blokova. Prilikom poziva register_post_type, postavite 'show_in_rest' => true i uključite 'editor' u niz supports. To omogućuje uređivač blokova za tu vrstu posta, dopuštajući autorima da koriste stilove na razini blokova iz theme.json. Na primjer, evo CPT-a "Član tima":

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

Sada, kada uređujete post člana tima, vidjet ćete uređivač blokova s globalnim stilovima vaše teme primijenjenim na osnovne blokove poput Paragraph, Heading i Image. To samo po sebi često rješava većinu problema sa stiliziranjem. Ako trebate precizniju kontrolu, prijeđite na sljedeći korak. Za dublji uvid u izgradnju blok tema s theme.json, pogledajte Kako izgraditi prilagođenu WordPress blok temu s theme.json.

Korak 2: Dodavanje prilagođenih stilova blokova putem theme.json

Ponekad želite primijeniti specifične stilove na sve instance sadržaja vaše prilagođene vrste posta—na primjer, dati cijelom postu boju pozadine ili posebne margine. Možete ciljati core/post-content ili zamotati svoj sadržaj u prilagođeni group blok i stilizirati ga putem theme.json. Dodajte sljedeće u vašu theme.json datoteku pod objektom styles:

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

Ovo će primijeniti svijetlu pozadinu i padding na područje sadržaja svih postova, uključujući vaš CPT Član tima. Također možete definirati varijacije specifične za blok unutar settings.blocks kako biste pružili opcije stiliziranja u uređivaču.

Korak 3: Korištenje prilagođenih svojstava theme.json za izlaz dodataka

Dodaci često izlaze sadržaj putem shortcodeova, widgeta ili prilagođenih blokova. Da biste ih dosljedno stilizirali, iskoristite CSS prilagođena svojstva koja generira theme.json. Na primjer, ako vaša tema definira primarnu boju kao --wp--preset--color--primary, možete je koristiti u CSS-u vašeg dodatka:

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

Ovo osigurava da kada administrator stranice promijeni paletu boja u theme.json, gumb vašeg dodatka se automatski ažurira. Da biste ovo učinili robusnim, uvijek koristite unaprijed postavljene CSS varijable umjesto tvrdokodiranja vrijednosti. Dodatno, ako vaš dodatak registrira vlastite blokove, možete naslijediti postavke theme.json korištenjem useSetting u JavaScriptu ili prosljeđivanjem $attributes u PHP renderiranju, kako je obrađeno u Ovladavanje WordPress dinamičkim blokovima.

Korak 4: Rukovanje dinamičkim blokovima

Za prilagođene blokove koji izlaze dinamički sadržaj (npr. klizač izjava), trebate registrirati blok s podrškom za uređivač blokova i izričito ga povezati s theme.json. U PHP-u, koristite register_block_type s $args koji uključuju 'render_callback' i osigurajte da vaša block.json datoteka postavlja 'supports' => array( 'color' => true, 'typography' => true ). Zatim, u vašem povratnom pozivu za renderiranje, možete pristupiti globalnim stilovima putem wp_get_global_styles() i primijeniti ih. Na primjer:

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

Ovaj pristup osigurava da vaš prilagođeni blok poštuje dizajnerske tokene teme. Za više o registraciji blokova, pogledajte Izgradnja robusnih WordPress dodataka.

Upozorenja

Iako je proširenje theme.json moćno, pazite na ove zamke:

1. Performanse: Dodavanje previše prilagođenih stilova u theme.json može napuhati datoteku i povećati vrijeme parsiranja CSS-a. Držite se globalnih postavki i koristite stilove specifične za blokove štedljivo.
2. Sukobi s dodacima: Neki dodaci poništavaju ili nadjačavaju postavke theme.json. Uvijek testirajte s minimalnim skupom dodataka i razmislite o povezivanju na after_setup_theme kako biste ponovno primijenili svoje prilagodbe.
3. Klasične teme: Ako vaša tema ne koristi uređivač blokova (tj. klasična je tema), theme.json ima ograničen učinak. Razmislite o migraciji na blok temu ili korištenju funkcije wp_enqueue_global_styles za učitavanje stilova.
4. Cache preglednika: Promjene u theme.json možda se neće odmah pojaviti zbog keširanja. Očistite cache preglednika i koristite verzioniranje za svoj stylesheet.

Zaključak

Do sada imate jasan plan kako prilagođene vrste postova i izlaz dodataka natjerati da se dobro slažu s vašim sustavom dizajna theme.json. Ključ je registrirati vaš CPT s podrškom za uređivač blokova, definirati specifične stilove za blok sadržaja posta, koristiti CSS prilagođena svojstva u izlazu dodataka i registrirati vaše prilagođene blokove s pravilnom integracijom theme.json. Ovaj pristup eliminira nedosljednosti, smanjuje održavanje i daje administratorima stranica moć da kontroliraju izgled i dojam iz jednog izvora istine. Počnite provoditi ove korake danas kako biste unijeli koheziju u svoje WordPress projekte.