Išplėsti theme.json į pasirinktinius įrašų tipus ir įskiepių išvestį: praktinis vadovas

Santrauka

Daugelis WordPress kūrėjų kuria pasirinktinius įrašų tipus arba įskiepius, kurie generuoja turinį (pvz., atsiliepimai, portfeliai). Tačiau theme.json – pagrindinė globalių stilių konfigūracija – pagal nutylėjimą dažnai ignoruoja šiuos pasirinktinius elementus, todėl dizainas tampa nenuoseklus. Šis straipsnis padės jums registruoti pasirinktinius įrašų tipus, kad jie paveldėtų theme.json stilius, perrašyti nustatymus konkretiems blokams ir sujungti įskiepių išvestį su pagrindiniais dizaino elementais. Gausite žingsnis po žingsnio instrukcijas, realius pavyzdžius, pvz., „Komandos nario“ pasirinktinio įrašų tipo stiliavimą, bei įspėjimus dėl našumo ir trečiųjų šalių konfliktų. Galų gale galėsite užtikrinti, kad bet koks pasirinktinis turinys atitiktų jūsų svetainės redaktoriaus nustatytą dizaino sistemą.

Ar kada nors sukūrėte pasirinktinį įrašų tipą ar integravote trečiosios šalies įskiepį, o jo išvestis visiškai ignoravo gražią dizaino sistemą, kurią kruopščiai sukonfigūravote theme.json? Jūs ne vieni. Pagal nutylėjimą theme.json taikomas tik pagrindiniams WordPress blokams ir registruotiems blokų stiliams, paliekant pasirinktinius įrašų tipus ir įskiepių generuojamą turinį be priežiūros. Tai dažniausiai lemia įterptinį CSS, pasikartojančius šriftų rinkinius arba nederančią spalvų paletę, kuri kenkia vartotojo patirčiai. Tačiau yra geresnis būdas: galite išplėsti theme.json, kad jis apimtų šiuos pasirinktinius elementus, užtikrinant nuoseklią, lengvai prižiūrimą dizaino sistemą visoje svetainėje. Šiame vadove apžvelgsime keturis praktinius žingsnius, kaip tai pasiekti, su kodo pavyzdžiais ir realiais įspėjimais.

theme.json apimties supratimas

Prieš pradedant, svarbu suprasti, kad theme.json yra blokinių temų koncepcija. Ji apibrėžia globalius stilius, nustatymus (pvz., spalvų paletes ir šriftų dydžius) ir blokui specifinius stilius blokų redaktoriui ir svetainės lankytojui. Tačiau jos apimtis yra ribota: ji valdo tik tuos blokus, kurie aiškiai deklaruoja paramą theme.json savybėms per register_block_type arba senesnį add_theme_support. Pasirinktiniai įrašų tipai, sukurti su register_post_type, automatiškai nepaveldi šių stilių, nebent jie yra sukurti naudojant blokus arba aiškiai stilizuoti.

1 žingsnis: Pasirinktinių įrašų tipų registravimas su blokų redaktoriaus palaikymu

Pirmas žingsnis – užtikrinti, kad jūsų pasirinktiniame įrašų tipe būtų naudojamas blokų redaktorius. Kviesdami register_post_type, nustatykite 'show_in_rest' => true ir įtraukite 'editor' į supports masyvą. Tai įgalina blokų redaktorių tam įrašų tipui, leidžiant autoriams naudoti blokų lygio stilius iš theme.json. Pavyzdžiui, štai „Komandos nario“ pasirinktinis įrašų tipas:

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

Dabar, kai redaguosite komandos nario įrašą, pamatysite blokų redaktorių su jūsų temos globaliais stiliais, pritaikytais pagrindiniams blokams, pvz., Pastraipa, Antraštė ir Paveikslėlis. Tai dažnai išsprendžia daugumą stiliaus problemų. Jei jums reikia detalesnės kontrolės, pereikite prie kito žingsnio. Norėdami giliau pasinerti į blokinių temų kūrimą su theme.json, žr. Kaip sukurti pasirinktinę WordPress blokinę temą su theme.json.

2 žingsnis: Pasirinktinių blokų stilių pridėjimas per theme.json

Kartais norite pritaikyti specifinius stilius visiems jūsų pasirinktinio įrašų tipo turinio egzemplioriams – pavyzdžiui, suteikti visam įrašui fono spalvą ar specialų užpildą. Galite nukreipti į core/post-content arba apvynioti turinį pasirinktiniu grupės bloku ir stilizuoti jį per theme.json. Įtraukite šią kodo dalį į savo theme.json failą po styles objektu:

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

Tai pritaikys šviesų foną ir užpildą visų įrašų turinio sričiai, įskaitant jūsų Komandos nario pasirinktinį įrašų tipą. Taip pat galite apibrėžti blokui specifinius variantus settings.blocks viduje, kad redaktoriuje būtų pateiktos stiliaus parinktys.

3 žingsnis: theme.json pasirinktinių savybių naudojimas įskiepių išvestyje

Įskiepiai dažnai išveda turinį per trumpuosius kodus, valdiklius arba pasirinktinius blokus. Norėdami nuosekliai juos stilizuoti, naudokite CSS pasirinktines savybes, kurias generuoja theme.json. Pavyzdžiui, jei jūsų tema apibrėžia pagrindinę spalvą kaip --wp--preset--color--primary, galite ją naudoti savo įskiepio CSS:

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

Tai užtikrina, kad kai svetainės administratorius pakeis spalvų paletę theme.json, jūsų įskiepio mygtukas automatiškai atsinaujins. Kad tai būtų patikima, visada naudokite išankstinius CSS kintamuosius, o ne kietai užkoduotas reikšmes. Be to, jei jūsų įskiepis registruoja savo blokus, galite paveldėti theme.json nustatymus naudodami useSetting JavaScript arba perduodami $attributes PHP atvaizdavime, kaip aprašyta Įvaldyti WordPress dinaminius blokus.

4 žingsnis: Dinaminių blokų tvarkymas

Pasirinktiniams blokams, kurie išveda dinaminį turinį (pvz., atsiliepimų slankiklį), reikia užregistruoti bloką su blokų redaktoriaus palaikymu ir aiškiai jį susieti su theme.json. PHP naudokite register_block_type su $args, kuriuose yra 'render_callback', ir įsitikinkite, kad jūsų bloko block.json faile nustatyta 'supports' => array( 'color' => true, 'typography' => true ). Tada savo atvaizdavimo atgaliniame kvietime galite pasiekti globalius stilius per wp_get_global_styles() ir juos pritaikyti. Pavyzdžiui:

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

Šis metodas užtikrina, kad jūsų pasirinktinis blokas gerbs temos dizaino elementus. Daugiau apie blokų registravimą žr. Kurti tvirtus WordPress įskiepius.

Įspėjimai

Nors theme.json išplėtimas yra galingas, saugokitės šių spąstų:

1. Našumas: Per daug pasirinktinių stilių theme.json gali išpūsti failą ir padidinti CSS analizavimo laiką. Laikykitės globalių nustatymų ir naudokite blokui specifinius stilius saikingai.
2. Įskiepių konfliktai: Kai kurie įskiepiai atstato arba perrašo theme.json nustatymus. Visada išbandykite su minimaliu įskiepių rinkiniu ir apsvarstykite galimybę prisijungti prie after_setup_theme, kad iš naujo pritaikytumėte savo pakeitimus.
3. Klasikinės temos: Jei jūsų tema nenaudoja blokų redaktoriaus (t. y. tai klasikinė tema), theme.json turi ribotą poveikį. Apsvarstykite galimybę pereiti prie blokinės temos arba naudoti wp_enqueue_global_styles funkciją stiliams įkelti.
4. Naršyklės podėlis: theme.json pakeitimai gali neatsirasti iš karto dėl podėlio. Išvalykite naršyklės podėlį ir naudokite versijavimo numerius savo stilių lape.

Išvada

Dabar jau turite aiškų gairių planą, kaip priversti pasirinktinius įrašų tipus ir įskiepių išvestis darniai veikti su jūsų theme.json dizaino sistema. Svarbiausia yra registruoti pasirinktinį įrašų tipą su blokų redaktoriaus palaikymu, apibrėžti specifinius stilius įrašo turinio blokui, naudoti CSS pasirinktines savybes įskiepių išvestyje ir registruoti pasirinktinius blokus su tinkama theme.json integracija. Šis metodas pašalina nenuoseklumą, sumažina priežiūros darbus ir suteikia svetainės administratoriams galimybę valdyti išvaizdą ir pojūtį iš vieno patikimo šaltinio. Pradėkite įgyvendinti šiuos žingsnius šiandien, kad įneštumėte darną į savo WordPress projektus.