Proširenje theme.json na prilagođene vrste objava i izlaz dodataka: Praktični vodič

Sažetak

Mnogi WordPress programeri grade prilagođene vrste objava ili dodatke koji prikazuju sadržaj (npr. svjedočanstva, portfoliji). Međutim, theme.json—centralna konfiguracija za globalne stilove—često ignoriše ove prilagođene elemente podrazumevano, što dovodi do neusklađenog dizajna. Ovaj članak vas vodi kroz registraciju prilagođenih vrsta objava da naslijede theme.json stilove, zamjenu postavki za određene blokove i povezivanje izlaza dodataka sa osnovnim dizajnerskim tokenima. Dobićete upute korak po korak, primjere iz stvarnog svijeta poput stiliziranja 'Člana tima' CPT-a, 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 dizajnerskim sistemom definiranim u editoru vašeg sajta.

Jeste li ikada napravili prilagođenu vrstu objave ili integrirali dodatak treće strane, samo da biste otkrili da njegov izlaz potpuno ignoriše prekrasan dizajn sistem koji ste mukotrpno konfigurirali u theme.json? Niste sami. Podrazumevano, theme.json se primjenjuje samo na osnovne WordPress blokove i registrirane stilove blokova, ostavljajući prilagođene vrste objava i sadržaj generiran od dodataka da se sami snalaze. To obično rezultira inline CSS-om, dupliranim fontovima 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 dizajn sistem na cijelom vašem sajtu. U ovom vodiču, obradit ćemo četiri praktična koraka da to ostvarimo, s primjerima koda i stvarnim upozorenjima.

Razumijevanje opsega theme.json

Prije nego što zaronimo, ključno je razumjeti da je theme.json koncept blok tema. On definiše globalne stilove, postavke (poput paleta boja i veličina fonta) i stilove specifične za blokove u blok editoru i na front-endu. Međutim, njegov doseg je ograničen: kontroliše samo blokove koji eksplicitno prijavljuju podršku za svojstva theme.json putem register_block_type ili starijeg add_theme_support. Prilagođene vrste objava kreirane s register_post_type automatski ne nasljeđuju ove stilove osim ako nisu izgrađene s blokovima ili eksplicitno stilizirane.

Korak 1: Registracija prilagođenih vrsta objava s podrškom za blok editor

Prvi korak je osigurati da vaša prilagođena vrsta objave koristi blok editor. Prilikom pozivanja register_post_type, postavite 'show_in_rest' => true i uključite 'editor' u niz supports. Ovo omogućava blok editor za tu vrstu objave, dopuštajući autorima da koriste stilove na nivou 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' => 'Članovi tima',
            'singular_name' => 'Član tima',
        ),
        'rewrite' => array( 'slug' => 'tim' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

Sada, kada uređujete objavu člana tima, vidjet ćete blok editor s globalnim stilovima vaše teme primijenjenim na osnovne blokove poput Paragrafa, Naslova i Slike. Ovo samo po sebi često rješava većinu problema sa stiliziranjem. Ako vam je potrebna finija kontrola, pređite na sljedeći korak. Za dublje uranjanje 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 objave—na primjer, dati cijeloj objavi pozadinsku boju ili posebno padding. Možete ciljati core/post-content ili omotati svoj sadržaj u prilagođeni grupni blok i stilizirati ga putem theme.json. Dodajte sljedeće u vaš theme.json fajl pod styles objekat:

{
  "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 objava, uključujući vaš CPT Člana tima. Također možete definirati varijacije specifične za blokove unutar settings.blocks kako biste pružili opcije stilova u editoru.

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

Dodaci često prikazuju sadržaj putem kratkih kodova, widgeta ili prilagođenih blokova. Da biste ih dosljedno stilizirali, iskoristite CSS prilagođena svojstva koja theme.json generiše. Na primjer, ako vaša tema definiše 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 sajta promijeni paletu boja u theme.json, dugme vašeg dodatka se automatski ažurira. Da biste ovo učinili robusnim, uvijek koristite unaprijed postavljene CSS varijable umjesto tvrdokodiranja vrijednosti. Osim toga, ako vaš dodatak registruje vlastite blokove, možete naslijediti postavke theme.json koristeći useSetting u JavaScript-u ili prosljeđivanjem $attributes u PHP prikazu, kao što je obrađeno u Ovladavanje WordPress dinamičkim blokovima.

Korak 4: Rukovanje dinamičkim blokovima

Za prilagođene blokove koji prikazuju dinamički sadržaj (npr. klizač svjedočanstava), trebate registrirati blok s podrškom za blok editor i eksplicitno ga povezati s theme.json. U PHP-u, koristite register_block_type s $args koji uključuju 'render_callback' i osigurajte da vaš block.json fajl postavlja 'supports' => array( 'color' => true, 'typography' => true ). Zatim, u vašem povratnom pozivu za prikaz, 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 povećati veličinu fajla i vrijeme parsiranja CSS-a. Držite se globalnih postavki i koristite stilove specifične za blokove rijetko.
2. Sukobi dodataka: Neki dodaci resetuju ili nadjačavaju postavke theme.json. Uvijek testirajte s minimalnim setom dodataka i razmislite o povezivanju s after_setup_theme kako biste ponovo primijenili svoje prilagodbe.
3. Klasične teme: Ako vaša tema ne koristi blok editor (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. Keš memorija preglednika: Promjene u theme.json se možda neće odmah pojaviti zbog keširanja. Očistite keš preglednika i koristite verzioniranje za vaš stilski fajl.

Zaključak

Do sada imate jasan putokaz kako učiniti da prilagođene vrste objava i izlazi dodataka lijepo sarađuju s vašim theme.json dizajnerskim sistemom. Ključ je registrirati vaš CPT s podrškom za blok editor, definirati specifične stilove za blok sadržaja objave, koristiti CSS prilagođena svojstva u izlazu dodataka i registrirati vaše prilagođene blokove s odgovarajućom integracijom theme.json. Ovaj pristup eliminiše nedosljednost, smanjuje održavanje i daje administratorima sajta moć da kontrolišu izgled i osjećaj iz jednog izvora istine. Počnite primjenjivati ove korake danas kako biste donijeli koheziju vašim WordPress projektima.