theme.json laiendamine kohandatud postitüüpidele ja pistikprogrammi väljundile: praktiline juhend

Kokkuvõte

Paljud WordPressi arendajad loovad kohandatud postitüüpe või pistikprogramme, mis väljastavad sisu (nt iseloomustused, portfellid). Kuid theme.json – ülemaailmsete stiilide keskne konfiguratsioon – ignoreerib neid kohandatud elemente vaikimisi sageli, mis toob kaasa ebajärjekindla disaini. See artikkel juhendab teid kohandatud postitüüpide registreerimisel, et need päriksid theme.json stiilid, muudaksid teatud plokkide seadeid ja ühendaksid pistikprogrammi väljundi põhidisaini tunnustega. Saate samm-sammult juhised, reaalseid näiteid nagu 'Meeskonnaliikme' CPT stiilimine ning hoiatusi jõudluse ja kolmandate osapoolte konfliktide kohta. Lõpuks saate tagada, et igasugune kohandatud sisu ühtib teie saidi redigeerija poolt määratud disainisüsteemiga.

Kas olete kunagi loonud kohandatud postitüübi või integreerinud kolmanda osapoole pistikprogrammi, ainult et avastate, et selle väljund ignoreerib täielikult kaunist disainisüsteemi, mille te just theme.json failis vaevaliselt seadistasite? Te pole üksi. Vaikimisi kehtib theme.json ainult WordPressi põhiplokkidele ja registreeritud plokkide stiilidele, jättes kohandatud postitüübid ja pistikprogrammide loodud sisu omapead. See põhjustab tavaliselt sisemist CSS-i, dubleerivaid fondivirnu või sobitamatut värvipaletti, mis rikub kasutajakogemuse. Kuid on parem viis: saate laiendada theme.json faili, et see hõlmaks neid kohandatud elemente, tagades ühtse ja hooldatava disainisüsteemi kogu teie saidil. Selles juhendis vaatleme nelja praktilist sammu selle saavutamiseks koos koodinäidete ja reaalsete hoiatusega.

theme.json ulatuse mõistmine

Enne süvenemist on oluline mõista, et theme.json on plokiteema kontseptsioon. See määratleb globaalsed stiilid, seaded (nagu värvipaletid ja fondi suurused) ja plokispetsiifilised stiilid plokiredaktori ja esiosa jaoks. Selle ulatus on siiski piiratud: see haldab ainult neid plokke, mis deklareerivad selgesõnaliselt theme.json omaduste toetust register_block_type või vanema add_theme_support kaudu. Kohandatud postitüübid, mis on loodud register_post_type funktsiooniga, ei päri automaatselt neid stiile, välja arvatud juhul, kui need on ehitatud plokkidest või selgesõnaliselt kujundatud.

1. samm: kohandatud postitüüpide registreerimine plokiredaktori toega

Esimene samm on tagada, et teie kohandatud postitüüp kasutab plokiredaktorit. Kui kutsute register_post_type funktsiooni, seadistage 'show_in_rest' => true ja lisage 'editor' massiivi supports. See lubab plokiredaktori selle postitüübi jaoks, võimaldades autoritel kasutada theme.json plokitaseme stiile. Näiteks siin on 'Meeskonnaliikme' CPT:

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üüd, kui redigeerite meeskonnaliikme postitust, näete plokiredaktorit, kus teie teema globaalsed stiilid on rakendatud põhiplokkidele nagu Lõik, Pealkiri ja Pilt. See üksi lahendab sageli enamiku stiiliprobleemidest. Kui vajate üksikasjalikumat kontrolli, jätkake järgmise sammuga. Põhjalikumaks ülevaateks plokiteemade ehitamisest koos theme.json failiga vaadake Kuidas luua kohandatud WordPressi plokiteema theme.jsoniga.

2. samm: kohandatud plokkide stiilide lisamine theme.json kaudu

Mõnikord soovite rakendada konkreetseid stiile kõigile oma kohandatud postitüübi sisu eksemplaridele – näiteks anda kogu postitusele taustavärv või eriline polster. Saate sihtida core/post-content plokki või pakkida oma sisu kohandatud grupiplokki ja kujundada selle läbi theme.json faili. Lisage järgmine oma theme.json faili styles objekti alla:

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

See rakendab kõigi postituste sisualale heleda tausta ja polstri, sealhulgas teie Meeskonnaliikme CPT-le. Samuti saate määratleda plokispetsiifilisi variatsioone settings.blocks sees, et pakkuda stiilivalikuid redaktoris.

3. samm: theme.json kohandatud omaduste kasutamine pistikprogrammi väljundis

Pistikprogrammid väljastavad sageli sisu lühikoodide, vidinate või kohandatud plokkide kaudu. Nende ühtseks kujundamiseks kasutage CSS-i kohandatud omadusi, mida theme.json genereerib. Näiteks kui teie teema määratleb esmase värvina --wp--preset--color--primary, saate seda kasutada oma pistikprogrammi CSS-is:

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

See tagab, et kui saidi administraator muudab theme.json värvipaletti, uuendab teie pistikprogrammi nupp automaatselt. Selle töökindlaks muutmiseks kasutage alati eelseadistatud CSS-i muutujaid, mitte kõvakodeeritud väärtusi. Lisaks, kui teie pistikprogramm registreerib oma plokke, saate pärida theme.json seadeid, kasutades JavaScriptis useSetting või edastades $attributes PHP renderdamisel, nagu on kirjeldatud lehel WordPressi dünaamiliste plokkide valdamine.

4. samm: dünaamiliste plokkide käsitlemine

Kohandatud plokkide puhul, mis väljastavad dünaamilist sisu (nt iseloomustuste liugur), peate registreerima ploki plokiredaktori toega ja siduma selle selgesõnaliselt theme.json failiga. PHP-s kasutage register_block_type funktsiooni koos $args parameetriga, mis sisaldab 'render_callback', ja veenduge, et teie ploki block.json fail määrab 'supports' => array( 'color' => true, 'typography' => true ). Seejärel saate oma renderdamise tagasihelistusfunktsioonis juurde pääseda globaalsetele stiilidele läbi wp_get_global_styles() ja neid rakendada. Näiteks:

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

See lähenemisviis tagab, et teie kohandatud plokk austab teema disainitunnuseid. Lisateavet plokkide registreerimise kohta leiate lehel WordPressi töökindlate pistikprogrammide ehitamine.

Hoiatused

Kuigi theme.json laiendamine on võimas, olge nende lõksudega ettevaatlik:

1. Jõudlus: Liiga paljude kohandatud stiilide lisamine theme.json faili võib faili paisutada ja suurendada CSS-i parsimise aega. Peatuge globaalsetel seadetel ja kasutage plokispetsiifilisi stiile säästlikult.
2. Pistikprogrammide konfliktid: Mõned pistikprogrammid lähtestavad või tühistavad theme.json seadeid. Katsetage alati minimaalse pistikprogrammide komplektiga ja kaaluge konksu after_setup_theme kasutamist oma kohanduste uuesti rakendamiseks.
3. Klassikalised teemad: Kui teie teema ei kasuta plokiredaktorit (st see on klassikaline teema), on theme.json mõju piiratud. Kaaluge üleminekut plokiteemale või funktsiooni wp_enqueue_global_styles kasutamist stiilide laadimiseks.
4. Brauseri vahemälu: Muudatused theme.json failis ei pruugi vahemälu tõttu kohe ilmuda. Tühjendage brauseri vahemälu ja kasutage oma stiililehe versioonihaldust.

Kokkuvõte

Nüüdseks on teil selge tegevuskava, kuidas panna kohandatud postitüübid ja pistikprogrammide väljundid kenasti tööle teie theme.json disainisüsteemiga. Võti on registreerida oma CPT plokiredaktori toega, määratleda postitusesisalduse plokile spetsiifilised stiilid, kasutada CSS-i kohandatud omadusi pistikprogrammi väljundis ja registreerida oma kohandatud plokid korraliku theme.json integreerimisega. See lähenemisviis välistab ebajärjekindluse, vähendab hooldust ja annab saidi administraatoritele võimu kontrollida välimust ja tunnet ühest tõeallikast. Alustage nende sammude rakendamist juba täna, et tuua ühtsus oma WordPressi projektidesse.