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

Sažetak

Mnogi WordPress programeri prave prilagođene tipove objava ili dodatke koji izlaze sadržaj (npr. svedočanstva, portfoliji). Međutim, theme.json—centralna konfiguracija za globalne stilove—često ignoriše ove prilagođene elemente podrazumevano, što dovodi do nepovezanog dizajna. Ovaj članak vas vodi kroz registraciju prilagođenih tipova objava da naslede stilove theme.json, premošćavanje podešavanja za određene blokove, i povezivanje izlaza dodataka sa osnovnim dizajnerskim tokenima. Dobićete korak-po-korak instrukcije, primere iz stvarnog sveta poput stilizovanja 'Team Member' CPT-a, i upozorenja o performansama i trećim stranama. Na kraju, možete osigurati da se bilo koji prilagođeni sadržaj poklapa sa vašim uređivački definisanim dizajnerskim sistemom.

Da li ste ikada napravili prilagođeni tip objave ili integrisali dodatak treće strane, samo da biste otkrili da njegov izlaz potpuno ignoriše prelepi dizajnerski sistem koji ste mukotrpno podesili u theme.json? Niste sami. Podrazumevano, theme.json se primenjuje samo na osnovne WordPress blokove i registrovane stilove blokova, ostavljajući prilagođene tipove objava i sadržaj generisan dodatkom da se sami snalaze. Ovo obično rezultira inline CSS-om, dupliranim fontovima ili neusklađenom paletom boja koja kvari korisničko iskustvo. Ali postoji bolji način: možete proširiti theme.json da pokrije ove prilagođene elemente, osiguravajući dosledan, održiv dizajnerski sistem na celom sajtu. U ovom vodiču, pokrićemo četiri praktična koraka da to postignemo, sa primerima koda i stvarnim upozorenjima.

Razumevanje opsega theme.json

Pre nego što zaronimo, ključno je razumeti da je theme.json koncept blok teme. On definiše globalne stilove, podešavanja (poput paleta boja i veličina fontova) i stilove specifične za blokove u blok uređivaču i na frontendu. Međutim, njegov domet 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đeni tipovi objava kreirani sa register_post_type automatski ne nasleđuju ove stilove osim ako nisu izgrađeni sa blokovima ili eksplicitno stilizovani.

Korak 1: Registracija prilagođenih tipova objava sa podrškom blok uređivača

Prvi korak je osigurati da vaš prilagođeni tip objave koristi blok uređivač. Kada pozivate register_post_type, postavite 'show_in_rest' => true i uključite 'editor' u niz supports. Ovo omogućava blok uređivač za taj tip objave, omogućavajući autorima da koriste stilove blokova iz theme.json. Na primer, evo 'Team Member' CPT-a:

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 objavu člana tima, videćete blok uređivač sa globalnim stilovima vaše teme primenjenim na osnovne blokove poput Paragraf, Naslov i Slika. Ovo samo po sebi često rešava većinu problema sa stilizovanjem. Ako vam je potrebna preciznija kontrola, pređite na sledeći korak. Za dublje razumevanje izgradnje blok tema sa theme.json, pogledajte Kako napraviti prilagođenu WordPress Block temu sa theme.json.

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

Ponekad želite da primenite specifične stilove na sve instance sadržaja vašeg prilagođenog tipa objave—na primer, davanje pozadinske boje ili posebnog paddinga celoj objavi. Možete ciljati core/post-content ili umotati vaš sadržaj u prilagođeni group blok i stilizovati ga putem theme.json. Dodajte sledeće u vašu theme.json datoteku pod styles objekat:

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

Ovo će primeniti svetlu pozadinu i padding na područje sadržaja svih objava, uključujući vaš Team Member CPT. Takođe možete definisati varijacije specifične za blokove unutar settings.blocks kako biste obezbedili opcije stilova u uređivaču.

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

Dodaci često izlaze sadržaj putem shortkodova, widgeta ili prilagođenih blokova. Da biste ih dosledno stilizovali, iskoristite CSS prilagođena svojstva koja theme.json generiše. Na primer, 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 admin sajta promeni paletu boja u theme.json, dugme vašeg dodatka se automatski ažurira. Da biste ovo učinili robustnim, uvek koristite unapred postavljene CSS varijable umesto kodiranja vrednosti. Dodatno, ako vaš dodatak registruje sopstvene blokove, možete naslediti podešavanja theme.json koristeći useSetting u JavaScript-u ili prosleđivanjem $attributes u PHP renderovanju, kao što je pokriveno u Ovladavanje WordPress dinamičkim blokovima.

Korak 4: Rukovanje dinamičkim blokovima

Za prilagođene blokove koji izlaze dinamički sadržaj (npr. klizač svedočanstava), potrebno je registrovati blok sa podrškom blok uređivača i eksplicitno ga povezati sa theme.json. U PHP-u, koristite register_block_type sa $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 render povratnom pozivu, možete pristupiti globalnim stilovima putem wp_get_global_styles() i primeniti ih. 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>';
}

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

Upozorenja

Iako je proširivanje theme.json moćno, obratite pažnju na sledeće zamke:

1. Performanse: Dodavanje previše prilagođenih stilova u theme.json može naduvati datoteku i povećati vreme parsiranja CSS-a. Držite se globalnih podešavanja i koristite stilove specifične za blokove umereno.
2. Sukobi sa dodacima: Neki dodaci poništavaju ili prebrišu podešavanja theme.json. Uvek testirajte sa minimalnim skupom dodataka i razmotrite korišćenje hooks-a poput after_setup_theme da ponovo primenite svoja prilagođavanja.
3. Klasične teme: Ako vaša tema ne koristi blok uređivač (tj. klasična je tema), theme.json ima ograničen efekat. Razmotrite migraciju na blok temu ili korišćenje funkcije wp_enqueue_global_styles za učitavanje stilova.
4. Keš memorija pretraživača: Promene u theme.json se možda neće odmah pojaviti zbog keširanja. Očistite keš pretraživača i koristite verzionisanje za vaš stil.

Zaključak

Do sada imate jasan putokaz kako da prilagođene tipove objava i izlaze dodataka naterate da se dobro slažu sa vašim theme.json dizajnerskim sistemom. Ključ je da registrujete svoj CPT sa podrškom blok uređivača, definišete specifične stilove za blok sadržaja objave, koristite CSS prilagođena svojstva u izlazu dodataka i registrujete svoje prilagođene blokove sa pravilnom integracijom theme.json. Ovaj pristup eliminiše neusklađenost, smanjuje održavanje i daje administratorima sajta moć da kontrolišu izgled i osećaj iz jednog izvora istine. Počnite sa primenom ovih koraka danas kako biste uneli koheziju u svoje WordPress projekte.