Kuinka käyttää ja jäsentää Gutenberg-lohkoja PHP:llä

Tässä viestissä tarkastellaan kuinka jäsentää viestin Gutenberg-lohkoja ja poimia tiettyjä lohkoja luodaksesi jotain muuta. Tarkastellaan WordPress PHP -toimintoja valittujen lohkojen jäsentämiseen, purkamiseen ja hahmontamiseen.

Yksi WordPressin uuden Gutenberg-editorin etu on jäsennellympi data postaussisällölle. Vanhoina aikoina kaikki tallennettiin HTML-muodossa, eikä tiettyjä sisällön osia ollut mahdollista purkaa ilman erittäin monimutkaisia ​​säännöllisiä lausekkeita. Mutta Gutenbergin kanssa jokainen sisältö, olipa kyseessä kappale, otsikko, kuva, video, painike tai sarake, jonka sisällä on muita lohkoja, tallennetaan tiedoilla, jotka kertovat meille, mitä tämä sisältö on.

Sisäänrakennettujen WordPress-toimintojen avulla on erittäin helppoa noutaa kaikki viestin sisällön lohkot taulukossa kaikkine tiedoineen. Tämä avaa runsaasti hyödyllisiä ominaisuuksia teeman kehittäjille. Muutama idea mainitakseni:

• Luo dynaamisesti sisällysluettelo hakemalla kaikki otsikot (opastus alla).
• Hae kaikki kaikissa viesteissä käytetyt videot, kuvat tai lainaukset kerätäksesi ja listataksesi ne kaikki toiselle sivulle.
• Pura viestin ensimmäinen kappale ja käytä sitä otteena arkistossa (opastus alla).
• Saat yleiskuvan tiettyjen lohkojen käytöstä ja niiden sijainnista. Oletetaan esimerkiksi, että sinulla on mukautettu mainoslohko ja sinun on tiedettävä, kuinka usein sitä käytetään viesteissäsi ja kuinka pitkälle sisällössä ne näkyvät.
• Renderöi viestin lohkot, mutta sulje pois tietyt lohkotyypit.
• Tarkista, alkaako viestin sisältö videolla, ja käytä kyseistä videota arkistossa esitellyn kuvan sijaan.
• Jos käytät mukautettua lohkoa, joka sisältää tuotteiden tekniset tiedot, voit helposti luoda sivun, joka näyttää ja vertaa teknisiä tietoja eri tuotejulkaisuissa.
• Kerää dynaamisesti kaikki viestissä käytetyt yksittäiset kuvat ja luo niistä galleria lopussa tai muualla.

Hyppääkäämme suoraan asiaan!

Jäsennä viestin lohkot

Lohkojen jäsentämiseen käytämme WordPress-toimintoa [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Parametriksi sinun on annettava viestin sisällön merkkijono. Jos olet silmukassa tai sinulla on pääsy post-objektiin, anna vain $post->post_contentfunktion parametri.

Paluu lähteestä parse_blocks()on taulukko, jossa jokainen taulukon elementti on lohko. Jokaisesta lohkoelementistä sinulla on tietoja, kuten lohkon tyyppi (avain ‘ blockName‘), lohkon attribuutit (avain ‘ attrs‘), sisälohkot sisäkkäisille lohkoille, kuten sarakkeet (avain ‘ innerBlocks‘), ja kaksi elementtiä varsinaiselle lohkon sisällölle (avaimet ‘ innerHTML‘ ja ‘ innerContent‘). Elementti innerHTMLon HTML-sisällön merkkijono, kun taas innerContentse on joukko HTML-merkkijonoja.

Ja siinä kaikki! Selaa palautetun taulukon läpi parse_blocks()tehdäksesi asiasi. Katsomme lisää koodiesimerkkejä tästä alempana tässä viestissä.

Huomautus klassisista (ei-Gutenbergin) viesteistä

Saatat työskennellä vanhemmalla WordPress-sivustolla, joka on luonut viestejä ennen päivittämistä Gutenbergiin (tai käyttänyt Disable Gutenberg-laajennusta). Tässä tapauksessa näillä viesteillä ei ole jäsenneltyä viestisisältöä, vaan koko viestin sisältö on "Classic editor" -lohkossa.

Funktiosta palautettu taulukko palauttaa parse_blocks()tällaisissa viesteissä yhden lohkotaulukon elementin, jonka blockNamearvo on null. Viestin koko HTML-sisältö on tämän elementin innerHTMLmerkkijonon sisällä.

Voimme turvallisesti olettaa, että jos viestin tuotolla parse_blocks()on yksi elementti ja se blockNameon null, kyseessä on "pre-Gutenberg" -viesti. Muuten blockNameon aina asutettu. Tämä on hyvä tarkistus pitää mielessä, kun kirjoitat koodia viestien lohkojen jäsentämiseksi ja haluat käsitellä vanhempaa WordPress-sisältöä.

Renderöi lohko

WordPress tarjoaa myös toiminnon tietyn lohkon renderöimiseksi [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Parametriksi sinun on annettava lohkolle taulukko, aivan kuten yksi parse_blocks()ylhäältä palautetuista. Funktio palauttaa renderoidun HTML-koodin merkkijonon, jonka voit yksinkertaisesti toistaa suoraan.

Yllä oleva koodi renderöi kaikki viestin lohkot, aivan kuten tavallisesti hahmonnettaessa viestin sisältöä. Hauskin osa tulee, kun alamme lisätä koodia tiettyjen meitä kiinnostavien lohkojen poissulkemiseksi tai sisällyttämiseksi.

Esimerkiksi alla oleva koodi tulostaa vain viestin kappalelohkot:

foreach ($blocks as $block) {
    if ($block['blockName'] == 'core/paragraph') {
        echo render_block($block);
    }
}

Ja tämä hahmontaa kaikki lohkot, mutta sulkee pois kaikki lyhytkoodilohkot:

foreach ($blocks as $block) {
    if ($block['blockName'] != 'core/shortcode') {
        echo render_block($block);
    }
}

Estä nimet

Kun jäsentät viestin lohkoja, sinun on todennäköisesti tarkistettava lohkon tyyppi. Ne ovat melko yksinkertaisia ​​arvata. Esimerkiksi kappalelohko on, hyvin arvasit sen, paragraph. Muista kuitenkin, että kaikkiin WordPressin Gutenberg-lohkoihin on liitetty nimiavaruus. WordPress-ydinlohkoissa (oletus) niiden kaikkien etuliitteenä on " core/". Poikkeuksena ovat upotuslohkot, joiden etuliitteenä on " core-embed/". Joten esimerkiksi kappalelohkolla on lohkon nimi core/paragraph.

Villien arvailujen välttämiseksi tässä on yleiskatsaus WordPressin tarjoamista oletuslohkoista (tätä kirjoitettaessa):

Yleiset lohkot

• Kohta:core/paragraph
• Kuva:core/image
• Otsikko:core/heading
• Galleria:core/gallery
• Lista:core/list
• Lainata:core/quote
• Audio:core/audio
• Peite:core/cover
• Tiedosto:core/file
• Video:core/video

Muotoilu

• Esimuotoiltu:core/preformatted
• Koodi:core/code
• Klassinen: core/freeform
  (mutta muiden kuin Gutenberg-viestien kohdalla se on null, katso huomautus ei-Gutenberg-viesteistä)
• Muokattu HTML:core/html
• Pullquote:core/pullquote
• Pöytä:core/table
• Jae:core/verse

Layout

• Painike:core/button
• Sarakkeet:core/columns
• Lisää:core/more
• Sivunvaihto:core/nextpage
• Erotin:core/separator
• Välikappale:core/spacer
• Media ja teksti:core/media-text

Widgetit

• Lyhyt koodi:core/shortcode
• Arkistot:core/archives
• Luokat:core/categories
• Viimeisimmät kommentit:core/latest-omments
• Uusimmat viestit:core/latest-posts

Upota

• Upottaa:core/embed

• Viserrys:core-embed/twitter

• YouTube:core-embed/youtube

• Facebook:core-embed/facebook

• Instagram:core-embed/instagram

• WordPress:core-embed/wordpress

• SoundCloud:core-embed/soundcloud

• Spotify:core-embed/spotify

• Flickr:core-embed/flickr

• Vimeo:core-embed/vimeo

• Animoto:core-embed/animoto

• Pilvistä:core-embed/cloudup

• Crowdsignal:core-embed/crowdsignal

• Päivittäinen liike:core-embed/dailymotion

• Hulu:core-embed/hulu

• Kuva:core-embed/imgur

• Ongelma:core-embed/issuu

• Kickstarter:core-embed/kickstarter

• Meetup.com:core-embed/meetup-com

• Mixcloud:core-embed/mixcloud

• Reddit:core-embed/reddit

• ReverbNation:core-embed/reverbnation

• Screencast:core-embed/screencast

• Scribd:core-embed/scribd

• Slideshare:core-embed/slideshare

• SmugMug:core-embed/smugmug

• Kaiutindekki:core-embed/speaker

• TED:core-embed/ted

• Tumblr:core-embed/tumblr

• VideoPress:core-embed/videopress

• wordpress.tv:core-embed/wordpress-tv

• Amazon Kindle:core-embed/amazon-kindle

Esimerkki koodista: Hae viestin ensimmäinen kappale katkelmana

Hyvin kirjoitetun postauksen tulisi alkaa kappaleella, joka esittelee viestin aiheen ja houkuttelee ihmisiä jatkamaan lukemista. Nämä ovat täydellisiä käytettäväksi otteina sen sijaan, että luottaisit WordPressin automaattiseen otetoimintoon!

Tämä on toiminto, jonka voit lisätä teemaasi ja functions.phpjoka palauttaa viestin ensimmäisen kappaleen. Jos viestiä ei ole annettu, se viittaa globaaliin viestiobjektiin. Se sisältää myös ei-Gutenberg-viestit palauttamalla niistä todellisen WordPress-otteen.

Toiminnon parse_blocks()kutsun jälkeen tarkistamme, onko viestissä virheellisiä lohkotietoja (viesti luotiin ennen Gutenbergiä) ja palautamme viestiotteen, jos näin on. Muussa tapauksessa käymme läpi viestin lohkot, etsimme ensimmäisen kappaleen lohkon ja palautamme sen innerHTML. Aivan lopussa palautamme merkkijonon, jonka <div>ympärillä (tämä on valinnainen) a.

Käyttääksesi tätä toimintoa sinun tarvitsee vain soittaa:

echo awp_get_excerpt();

Olettaen, että funktiokutsu sijoitetaan jonnekin, jossa on globaali $postobjekti, esimerkiksi silmukan sisällä. Jos haluat määrittää postin, anna post-objekti parametrina funktiokutsulle:

$post_id = 1;
$post = get_post($post_id);
echo awp_get_excerpt($post);

Esimerkki: Luo sisällysluettelo viestin otsikoista

Voit luoda sisällysluettelon automaattisesti ja dynaamisesti viestin otsikkolohkojen perusteella. Prosessi on riittävän yksinkertainen; jäsentää viestin lohkot ja etsiä kaikki tyypin lohkot core/heading. Mutta voimme viedä sen askeleen pidemmälle ja sisällyttää tasot; esim. asettamalla h3alaotsikko alle h2ja niin edelleen.

Otsikkolohko sisältää tietoja sen tasosta attribuuttitaulukon elementissä (avain ‘ attrs‘). Taulukon sisällä attrsse olisi taulukkoelementti, jonka avain on ‘ level‘ ja tasoa ilmaiseva kokonaisluku. A: lla h3olisi ‘ level‘ arvo 3, a :lla h4olisi ‘ level‘ 4ja niin edelleen.

Huomaa kuitenkin, että attrsotsikon lohkot voivat olla tyhjiä! Tämä tapahtuu, kun kirjoittaja ei ole muuttanut otsikkotyyppiä pois oletusasetuksista lohkon asetuksissa. Tämän kiertämiseksi meidän on tehtävä joitain oletuksia. Oletusotsikot ovat h2(ellet ole muuttanut tätä teemassasi). Joten voimme olettaa, että jos otsikkolohkolla ei ole taso-attribuuttia, se on h2. Muuten saamme tasotiedot attribuuteista.

Jos todella vastaat haasteeseen, kehotan sinua parantamaan alla olevaa koodia. Asianmukaisen jäsennellyn olluettelon luomisessa on se, että emme voi hallita sitä, miten kirjoittaja jäsentää otsikkonsa. He voivat hyvinkin tulla hulluksi ja aloittaa h4otsikolla ja hypätä oikealle h2otsikkoon heti sen jälkeen. Ja yhtäkkiä ne sekoittuvat h1keskelle. Ratkaisuni sisältää siksi tasaisen ollistan luomisen ja tasotietojen tarjoamisen luettelokohteen luokissa. Sitten jollain älykkäällä CSS:llä voit sisentää luettelon kohteet vastaavasti vasemmalla täytteellä.

Koodi

Tässä on sisällysluettelotoiminto:

Toiminto alkaa viestien käsittelyllä ja sen lohkojen jäsentämisellä. Linjalla #9otamme vastaan ​​muita kuin Gutenberg-virkoja. Funktio jatkaa silmukkaa kaikkien lohkojen läpi ja aina kun se löytää otsikkolohkon, se lisätään $headingstaulukkoomme. Käytämme [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)()HTML-tunnisteiden poistamiseen otsikoista. Lisäämme myös tasotiedot taulukkoomme, jossa oletusarvo on, 2jos attribuutit on tyhjä.

Lohkosilmukan jälkeen $headingstaulukon tulee sisältää kaikki viestien otsikot järjestyksessä. Voimme sitten yksinkertaisesti luoda HTML-merkkijonon ja tulostaa sen sisällön. Kuten mainittiin, luon jokaiselle elementille luokan nimen, joka sisältää tiedot otsikon tasosta, jotta voimme luoda illuusion jäsennellystä luettelosta CSS:n avulla.

Kuten yllä olevaa otefunktiota, voimme kutsua tätä funktiota, kun olemme silmukan sisällä, seuraavasti:

echo awp_table_of_contents();

Tai jos olemme silmukan ulkopuolella tai haluamme määrittää viestin;

$post_id = 1;
$post = get_post($post_id);
echo awp_table_of_contents($post);

Tämä luo luettelon, joka näyttää tältä:

Johtopäätös

Kuten olemme nähneet Gutenbergin mahdollistaman jäsennellyn rikkaan viestisisällön avulla, voimme helposti löytää ja poimia tiettyjä osia viestien sisällöstä. Palaa artikkelin alussa mainitsemaani esimerkkiluetteloon. Teemankehittäjän toiminnalle ei ole rajoituksia. Se riippuu vain siitä, mitä teemasi tai WordPress-sivustosi tarvitsee (tai mikä olisi vain siistiä).