theme.jsonin laajentaminen mukautetuille sisältötyypeille ja liitännäisten tulosteelle: käytännön opas

Yhteenveto

Monet WordPress-kehittäjät rakentavat mukautettuja sisältötyyppejä tai liitännäisiä, jotka tuottavat sisältöä (esim. suositukset, portfoliot). Kuitenkin theme.json—globaalien tyylien keskeinen konfiguraatio—jättää nämä mukautetut elementit usein huomiotta oletuksena, mikä johtaa epäyhtenäiseen suunnitteluun. Tämä artikkeli opastaa sinua rekisteröimään mukautettuja sisältötyyppejä perimään theme.json-tyylit, ohittamaan asetukset tietyille lohkoille ja yhdistämään liitännäisten tulosteen ydinsuunnittelutunnuksiin. Saat vaiheittaiset ohjeet, todellisia esimerkkejä kuten 'Tiimin jäsen' -sisältötyypin tyylittely, sekä varoituksia suorituskyvystä ja kolmannen osapuolen konflikteista. Lopuksi voit varmistaa, että mikä tahansa mukautettu sisältö vastaa sivustosi editorin määrittelemää suunnittelujärjestelmää.

Oletko koskaan rakentanut mukautettua sisältötyyppiä tai integroinut kolmannen osapuolen liitännäisen, vain huomataksesi, että sen tuloste jättää täysin huomiotta kauniin suunnittelujärjestelmän, jonka olet vaivalla määrittänyt theme.jsonissa? Et ole yksin. Oletuksena theme.json koskee vain ytimen WordPress-lohkoja ja rekisteröityjä lohkotyylejä, jättäen mukautetut sisältötyypit ja liitännäisten tuottaman sisällön selviytymään omillaan. Tämä johtaa tyypillisesti inline-CSS:ään, päällekkäisiin fonttipinoihin tai epäsopivaan väripalettiin, joka rikkoo käyttökokemuksen. Mutta on parempi tapa: voit laajentaa theme.jsonia kattamaan nämä mukautetut elementit, varmistaen yhtenäisen ja ylläpidettävän suunnittelujärjestelmän koko sivustollasi. Tässä oppaassa käymme läpi neljä käytännön vaihetta tämän toteuttamiseksi, täydellisinä koodiesimerkkeineen ja todellisine varoituksineen.

theme.jsonin laajuuden ymmärtäminen

Ennen kuin sukellamme syvemmälle, on tärkeää ymmärtää, että theme.json on lohkoteeman konsepti. Se määrittelee globaalit tyylit, asetukset (kuten väripaletit ja fonttikoot) ja lohkokohtaiset tyylit lohkoeditorille ja etusivulle. Sen ulottuvuus on kuitenkin rajoitettu: se hallitsee vain lohkoja, jotka ilmoittavat nimenomaisesti tukevansa theme.json-ominaisuuksia register_block_type- tai vanhemman add_theme_support-kutsun kautta. Mukautetut sisältötyypit, jotka on luotu register_post_type-kutsulla, eivät automaattisesti peri näitä tyylejä, ellei niitä ole rakennettu lohkoilla tai nimenomaisesti tyylitelty.

Vaihe 1: Mukautettujen sisältötyyppien rekisteröinti lohkoeditorin tuella

Ensimmäinen vaihe on varmistaa, että mukautettu sisältötyyppisi käyttää lohkoeditoria. Kutsuessasi register_post_type, aseta 'show_in_rest' => true ja lisää 'editor' supports-taulukkoon. Tämä mahdollistaa lohkoeditorin kyseiselle sisältötyypille, jolloin kirjoittajat voivat käyttää theme.jsonin lohkotason tyylejä. Esimerkiksi tässä on 'Tiimin jäsen' -sisältötyyppi:

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

Nyt, kun muokkaat tiimin jäsenen postausta, näet lohkoeditorin, jossa teemasi globaalit tyylit on sovellettu ytimen lohkoihin kuten Kappale, Otsikko ja Kuva. Tämä yksinään ratkaisee useimmat tyyliongelmat. Jos tarvitset tarkempaa hallintaa, siirry seuraavaan vaiheeseen. Saadaksesi syvemmän katsauksen lohkoteemojen rakentamiseen theme.jsonilla, katso Kuinka rakentaa mukautettu WordPress-lohkoteema theme.jsonilla.

Vaihe 2: Mukautettujen lohkotyylien lisääminen theme.jsonin kautta

Joskus haluat soveltaa tiettyjä tyylejä kaikkiin mukautetun sisältötyyppisi sisällön esiintymiin—esimerkiksi antaa koko postaukselle taustavärin tai erityisen pehmusteen. Voit kohdistaa core/post-content-lohkoon tai kääriä sisältösi mukautettuun ryhmälohkoon ja tyylitellä sen theme.jsonin kautta. Lisää seuraava theme.json-tiedostoosi styles-objektin alle:

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

Tämä soveltaa vaaleaa taustaa ja pehmustetta kaikkien postausten sisältöalueelle, mukaan lukien Tiimin jäsen -sisältötyyppi. Voit myös määritellä lohkokohtaisia variaatioita settings.blocks-objektin sisällä tarjotaksesi tyylivaihtoehtoja editorissa.

Vaihe 3: theme.jsonin mukautettujen ominaisuuksien käyttö liitännäisten tulosteessa

Liitännäiset tuottavat usein sisältöä lyhytkoodien, widgetien tai mukautettujen lohkojen kautta. Tyylitelläksesi nämä johdonmukaisesti, hyödynnä CSS-mukautettuja ominaisuuksia, jotka theme.json tuottaa. Esimerkiksi, jos teemasi määrittelee päävärin --wp--preset--color--primary, voit käyttää sitä liitännäisesi CSS:ssä:

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

Tämä varmistaa, että kun sivuston ylläpitäjä muuttaa väripalettia theme.jsonissa, liitännäisesi painike päivittyy automaattisesti. Tehdäksesi tästä vankkaa, käytä aina ennalta määriteltyjä CSS-muuttujia kovakoodattujen arvojen sijaan. Lisäksi, jos liitännäisesi rekisteröi omia lohkoja, voit periä theme.json-asetukset käyttämällä useSetting-funktiota JavaScriptissä tai välittämällä $attributes PHP-renderöinnissä, kuten käsitellään artikkelissa WordPress-dynaamisten lohkojen hallinta.

Vaihe 4: Dynaamisten lohkojen käsittely

Mukautetuille lohkoille, jotka tuottavat dynaamista sisältöä (esim. suosituskeltain), sinun täytyy rekisteröidä lohko lohkoeditorin tuella ja yhdistää se nimenomaisesti theme.jsoniin. PHP:ssä käytä register_block_type-funktiota $args-parametrilla, joka sisältää 'render_callback'-kentän, ja varmista, että lohkosi block.json-tiedosto asettaa 'supports' => array( 'color' => true, 'typography' => true ). Tämän jälkeen renderöintitakaisinkutsussa voit käyttää globaaleja tyylejä wp_get_global_styles()-funktion kautta ja soveltaa niitä. Esimerkiksi:

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

Tämä lähestymistapa varmistaa, että mukautettu lohkosi kunnioittaa teeman suunnittelutunnuksia. Lisätietoa lohkojen rekisteröinnistä on artikkelissa Vankkojen WordPress-liitännäisten rakentaminen.

Varoitukset

Vaikka theme.jsonin laajentaminen on voimakasta, varo seuraavia sudenkuoppia:

1. Suorituskyky: Liian monien mukautettujen tyylien lisääminen theme.jsoniin voi paisuttaa tiedostoa ja lisätä CSS:n jäsentämisaikaa. Pysy globaaleissa asetuksissa ja käytä lohkokohtaisia tyylejä säästeliäästi.
2. Liitännäisten ristiriidat: Jotkut liitännäiset nollaavat tai ohittavat theme.json-asetukset. Testaa aina minimaalisella liitännäisjoukolla ja harkitse after_setup_theme-koukkuun tarttumista mukautustesi uudelleensoveltamiseksi.
3. Klassiset teemat: Jos teemasi ei käytä lohkoeditoria (eli se on klassinen teema), theme.jsonilla on rajallinen vaikutus. Harkitse siirtymistä lohkoteemaan tai wp_enqueue_global_styles-funktion käyttöä tyylien lataamiseen.
4. Selaimen välimuisti: theme.jsoniin tehdyt muutokset eivät välttämättä näy heti välimuistituksen vuoksi. Tyhjennä selaimesi välimuisti ja käytä versiointia tyylitiedostollesi.

Johtopäätös

Tässä vaiheessa sinulla on selkeä suunnitelma saada mukautetut sisältötyypit ja liitännäisten tulosteet toimimaan hyvin theme.json-suunnittelujärjestelmäsi kanssa. Avain on rekisteröidä sisältötyyppisi lohkoeditorin tuella, määritellä tiettyjä tyylejä postauksen sisältölohkolle, käyttää CSS-mukautettuja ominaisuuksia liitännäisten tulosteessa ja rekisteröidä mukautetut lohkosi asianmukaisella theme.json-integraatiolla. Tämä lähestymistapa poistaa epäjohdonmukaisuudet, vähentää ylläpitoa ja antaa sivuston ylläpitäjille mahdollisuuden hallita ulkoasua ja tuntumaa yhdestä totuuden lähteestä. Aloita näiden vaiheiden toteuttaminen tänään tuodaksesi yhtenäisyyttä WordPress-projekteihisi.