Kuidas PHP-ga Gutenbergi plokkidele juurde pääseda ja neid analüüsida

Selles postituses vaatleme, kuidas sõeluda postituse Gutenbergi plokke ja ekstraheerida konkreetseid plokke, et teha midagi muud. Vaatleme WordPressi PHP funktsioone valitud plokkide sõelumiseks, ekstraktimiseks ja renderdamiseks.

WordPressi uue Gutenbergi redaktori üks eeliseid on postitussisu struktureeritumad andmed. Vanasti salvestati kõike HTML-ina ja konkreetseid sisulõike ei olnud võimalik ilma väga keerukate regulaaravaldisteta välja võtta. Kuid Gutenbergi puhul on iga sisuosa, olgu see lõik, pealkiri, pilt, video, nupp või veerg, mille sees on muid plokke, salvestatud teabega, mis ütleb meile, mis see sisu on.

Sisseehitatud WordPressi funktsioonide abil on väga lihtne tuua kõik postituse sisu plokid massiivina koos kogu nende teabega. See avab teemaarendajatele palju kasulikke funktsioone. Lihtsalt mainides mõnda ideed:

• Looge dünaamiliselt sisukord, hankides kõik pealkirjad (õpetus allpool).
• Hankige kõik postitustes kasutatud videod, pildid või tsitaadid, et need kõik kokku koguda ja teisele lehele loetleda.
• Tehke postituse esimene lõik välja ja kasutage seda arhiivis väljavõttena (õpetus allpool).
• Saate ülevaate konkreetsete klotside kasutamisest ja nende asukohast. Oletame näiteks, et teil on kohandatud reklaamiplokk ja peate teadma, kui sageli seda teie postitustes kasutatakse ja kui kaugele sisus need ilmuvad.
• Renderdage postituse plokid, kuid välistage teatud plokitüübid.
• Kontrollige, kas postituse sisu algab videoga, ja kasutage seda videot arhiivis esiletoodud pildi asemel.
• Kui kasutate kohandatud plokki, mis sisaldab toodete tehnilisi andmeid, saate hõlpsalt luua lehe, mis kuvab ja võrdleb tootepostituste tehnilisi näitajaid.
• Koguge dünaamiliselt kokku kõik postituses kasutatud üksikud pildid ja looge nendest lõpus või mujal galerii.

Hüppame otse sellesse!

Parsi postituse plokke

Plokkide sõelumiseks kasutame WordPressi funktsiooni [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Parameetrina peate sisestama postituse sisu stringi. Kui olete tsüklis või teil on juurdepääs postitusobjektile, esitage lihtsalt $post->post_contentfunktsiooni parameetrina.

Tagasitulek parse_blocks()on massiiv, kus iga massiivi element on plokk. Iga ploki elemendi kohta on teil teave, näiteks ploki tüüp (võti ‘ blockName‘), ploki atribuudid (võti ‘ attrs‘), sisemised plokid pesastatud plokkide jaoks, nagu veerud (võti ‘ innerBlocks‘) ja kaks elementi tegeliku ploki sisu jaoks (võtmed ‘ innerHTML‘ ja ‘ innerContent‘). Element innerHTMLon HTML-i sisu string, samas innerContentkui HTML-stringide massiiv.

Ja see on kõik! parse_blocks()Oma asjade tegemiseks sirvige läbi tagastatud massiivi alates. Vaatame selle postituse allpool rohkem koodinäiteid.

Märkus klassikaliste (mitte-Gutenbergi) postituste kohta

Võimalik, et töötate vanemal WordPressi saidil, mis on loonud postitusi enne Gutenbergi versioonile üleminekut (või kasutanud Gutenbergi keelamise pistikprogrammi). Sel juhul ei ole nendel postitustel postituse struktureeritud sisu, vaid kogu postituse sisu on plokis „Klassikaline redaktor".

Funktsioonist tagastatud massiiv tagastab parse_blocks()sellistel postitustel ühe plokimassiivi elemendi, mille väärtus blockNameon null. Postituse täielik HTML-sisu on selle elemendi innerHTMLstringis.

Võime julgelt eeldada, et kui postituse tootlusel parse_blocks()on üks element ja see blockNameon null, siis on tegemist “Gutenbergi-eelse” postitusega. Muidu blockNameon alati asustatud. Seda on hea meeles pidada, kui kirjutate postituste plokkide sõelumiseks koodi ja soovite käsitleda vanemat WordPressi sisu.

Renderda plokk

WordPress pakub ka funktsiooni konkreetse ploki renderdamiseks [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Parameetrina peate andma ploki jaoks massiivi, täpselt nagu ühe parse_blocks()ülalt tagastatud massiivi. Funktsioon tagastab renderdatud HTML-i stringi, mida saate lihtsalt otse välja tuua.

Ülaltoodud kood renderdab kõik postituse plokid, täpselt nagu tavaliselt postituse sisu renderdamisel. Lõbus osa tuleb siis, kui hakkame lisama koodi, et välistada või kaasata konkreetsed meid huvitavad plokid.

Näiteks prindib allolev kood välja ainult postituse lõiguplokid:

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

Ja see renderdab kõik plokid, kuid välistab kõik lühikoodiplokid:

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

Blokeeri nimed

Postituse plokkide sõelumisel peate tõenäoliselt kontrollima ploki tüüpi. Neid on üsna lihtne ära arvata. Näiteks lõiguplokk on, hästi arvasite ära, paragraph. Kuid pidage meeles, et WordPressis on kõikidel Gutenbergi plokkidel eesliide nimeruumiga. WordPressi põhiplokkide (vaike) puhul on nende eesliide " core/". Erandiks on manustamisplokid, mille eesliide on " core-embed/". Näiteks lõiguplokil on ploki nimi core/paragraph.

Metsikute oletuste vältimiseks on siin ülevaade WordPressi pakutavatest vaikeplokkidest (selle kirjutamise ajal):

Ühised plokid

• Lõik:core/paragraph
• Pilt:core/image
• Pealkiri:core/heading
• Galerii:core/gallery
• Loetelu:core/list
• Tsitaat:core/quote
• Heli:core/audio
• Kaas:core/cover
• Fail:core/file
• Video:core/video

Vormindamine

• Eelvormindatud:core/preformatted
• Kood:core/code
• Klassikaline: core/freeform
  (kuid mitte-Gutenbergi postituste puhul on see null, vt märkust mitte-Gutenbergi postituste kohta)
• Kohandatud HTML:core/html
• Tsitaat:core/pullquote
• Tabel:core/table
• Salm:core/verse

Paigutus

• Nupp:core/button
• Veerud:core/columns
• Veel:core/more
• Lehekülje paus:core/nextpage
• Eraldaja:core/separator
• Vahemärk:core/spacer
• Meedia ja tekst:core/media-text

Vidinad

• Lühikood:core/shortcode
• Arhiivid:core/archives
• Kategooriad:core/categories
• Viimased kommentaarid:core/latest-omments
• Viimased postitused:core/latest-posts

Manustatakse

• Manusta:core/embed

• Twitter: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

• Pilv:core-embed/cloudup

• Rahvahulga signaal:core-embed/crowdsignal

• Igapäevane liikumine:core-embed/dailymotion

• Hulu:core-embed/hulu

• Pilt:core-embed/imgur

• Probleem: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

• Ekraanisaade:core-embed/screencast

• Scribd:core-embed/scribd

• Slaidide jagamine:core-embed/slideshare

• SmugMug:core-embed/smugmug

• Kõlarid: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

Koodi näide: tooge postituse esimene lõik väljavõttena

Hästi kirjutatud postitus peaks algama lõiguga, mis tutvustab postituse sisu ja ahvatleb inimesi lugema. Need sobivad suurepäraselt kasutamiseks väljavõtetena, selle asemel, et toetuda WordPressi automaatsele väljavõtte funktsioonile!

See on funktsioon, mille saate oma teemale lisada ja functions.phpmis tagastab postituse esimese lõigu. Kui postitust ei esitatud, viitab see globaalsele postitusobjektile. See mahutab ka mitte-Gutenbergi postitusi, tagastades nende jaoks tegeliku WordPressi väljavõtte.

Pärast funktsiooni parse_blocks()kutsumist kontrollime, kas postitusel on kehtetuid plokiandmeid (postitus loodi enne Gutenbergi) ja tagastame postituse väljavõtte, kui see nii on. Vastasel juhul vaatame läbi postituse plokid, leiame esimese lõiguploki ja tagastame selle innerHTML. Päris lõpus tagastame stringi, mille <div>ümber on (see on valikuline) a.

Selle funktsiooni kasutamiseks peate helistama:

echo awp_get_excerpt();

Eeldades, et funktsioonikutse paigutatakse kuskile, kus on globaalne $postobjekt, näiteks tsükli sees. Kui soovite määrata postituse, sisestage funktsioonikutse parameetrina postitusobjekt:

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

Näide: looge postituse pealkirjadest sisukord

Saate automaatselt ja dünaamiliselt luua sisukorra, mis põhineb postituse pealkirjaplokkidel. Protsess on piisavalt lihtne; sõeluge postituse plokke ja leidke kõik plokid core/heading. Kuid me saame astuda sammu edasi ja kaasata tasemed; h3nt alampealkirja alla panemine h2ja nii edasi.

Pealkirjaplokk sisaldab teavet selle taseme kohta atribuudimassiivi elemendis (võti ‘ attrs‘). Massiivi sees attrsoleks see massiivi element võtmega ‘ level‘ ja taset tähistava täisarvuga. A- l h3oleks ‘ level‘ väärtus 3, h4a’l oleks ‘ level‘ 4ja nii edasi.

Arvestage siiski, et attrspealkirjade plokid võivad olla tühjad! See juhtub siis, kui autor ei ole muutnud pealkirja tüüpi ploki sätetes vaikeseadetest kõrvale. Selle ümberkäimiseks peame tegema mõned eeldused. Vaikimisi on pealkirjad h2(kui te pole seda oma teemas muutnud). Seega võime eeldada, et kui pealkirjaplokil pole taseme atribuuti, on see h2. Vastasel juhul saame tasemeteabe atribuutidest.

Kui olete väljakutsega tõesti valmis, kutsun teid üles täiustama allolevat koodi. Õige struktureeritud olloendi loomise probleem seisneb selles, et me ei saa kontrollida, kuidas autor oma pealkirju struktureerib. Nad võivad väga hästi hulluks minna ja alustada h4pealkirjaga ja hüpata h2kohe pärast seda. Ja äkki segavad nad h1keskele a. Minu lahendus hõlmab seetõttu kindla olloendi genereerimist ja tasemeteabe esitamist loendiüksuse klassides. Seejärel saate mõne nutika CSS-i abil loendi üksused vastavalt taandada, kasutades vasakpoolset polsterdust.

Kood

Siin on sisukorra funktsioon:

Funktsioon algab postituse käsitlemisest ja selle plokkide sõelumisest. Liinil #9majutame mitte-Gutenbergi ametikohti. Funktsioon jätkab kõigi plokkide läbimist ja kui ta leiab pealkirjaploki, lisatakse see meie $headingsmassiivi. Kasutame [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)()pealkirjadest HTML-märgendite eemaldamiseks. Lisame ka tasemeteabe oma massiivi, kus vaikimisi seatakse 2kui atribuudid on tühjad.

Pärast plokitsüklit $headingspeaks massiiv sisaldama kõiki postituse pealkirju, järjekorras. Seejärel saame lihtsalt genereerida HTML-stringi ja väljastada selle sisu. Nagu mainitud, genereerin igale elemendile klassi nime, mis sisaldab teavet pealkirja taseme kohta, et saaksime luua CSS-i abil illusiooni struktureeritud loendist.

Sarnaselt ülaltoodud väljavõtte funktsiooniga saame seda funktsiooni kutsuda, kui oleme tsükli sees:

echo awp_table_of_contents();

Või kui oleme väljaspool ahelat või tahame postitust täpsustada;

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

See loob loendi, mis näeb välja umbes selline:

Järeldus

Nagu oleme näinud Gutenbergi abil tehtud struktureeritud rikkaliku postitussisu puhul, saame väga hõlpsalt leida ja välja võtta postituste sisu teatud osad. Vaadake tagasi näidete loendit, mida mainisin postituse alguses. Teie kui teemaarendaja võimalustele pole piiranguid. See sõltub lihtsalt sellest, mida teie teema või WordPressi sait vajab (või mis oleks lihtsalt lahe).