T\u00e4ss\u00e4 viestiss\u00e4 tarkastellaan kuinka j\u00e4sent\u00e4\u00e4 viestin Gutenberg-lohkoja ja poimia tiettyj\u00e4 lohkoja luodaksesi jotain muuta. Tarkastellaan WordPress PHP -toimintoja valittujen lohkojen j\u00e4sent\u00e4miseen, purkamiseen ja hahmontamiseen.<\/p>\n
Yksi WordPressin uuden Gutenberg-editorin etu on j\u00e4sennellympi data postaussis\u00e4ll\u00f6lle. Vanhoina aikoina kaikki tallennettiin HTML-muodossa, eik\u00e4 tiettyj\u00e4 sis\u00e4ll\u00f6n osia ollut mahdollista purkaa ilman eritt\u00e4in monimutkaisia \u200b\u200bs\u00e4\u00e4nn\u00f6llisi\u00e4 lausekkeita. Mutta Gutenbergin kanssa jokainen sis\u00e4lt\u00f6, olipa kyseess\u00e4 kappale, otsikko, kuva, video, painike tai sarake, jonka sis\u00e4ll\u00e4 on muita lohkoja, tallennetaan tiedoilla, jotka kertovat meille, mit\u00e4 t\u00e4m\u00e4 sis\u00e4lt\u00f6 on.<\/p>\n
Sis\u00e4\u00e4nrakennettujen WordPress-toimintojen avulla on eritt\u00e4in helppoa noutaa kaikki viestin sis\u00e4ll\u00f6n lohkot taulukossa kaikkine tiedoineen. T\u00e4m\u00e4 avaa runsaasti hy\u00f6dyllisi\u00e4 ominaisuuksia teeman kehitt\u00e4jille. Muutama idea mainitakseni:<\/p>\n
Hypp\u00e4\u00e4k\u00e4\u00e4mme suoraan asiaan!<\/p>\n
Lohkojen j\u00e4sent\u00e4miseen k\u00e4yt\u00e4mme WordPress-toimintoa Paluu l\u00e4hteest\u00e4 Ja siin\u00e4 kaikki! Selaa palautetun taulukon l\u00e4pi Saatat ty\u00f6skennell\u00e4 vanhemmalla WordPress-sivustolla, joka on luonut viestej\u00e4 ennen p\u00e4ivitt\u00e4mist\u00e4 Gutenbergiin (tai k\u00e4ytt\u00e4nyt Disable Gutenberg-laajennusta). T\u00e4ss\u00e4 tapauksessa n\u00e4ill\u00e4 viesteill\u00e4 ei ole j\u00e4sennelty\u00e4 viestisis\u00e4lt\u00f6\u00e4, vaan koko viestin sis\u00e4lt\u00f6 on "Classic editor" -lohkossa.<\/p>\n Funktiosta palautettu taulukko palauttaa Voimme turvallisesti olettaa, ett\u00e4 jos viestin tuotolla WordPress tarjoaa my\u00f6s toiminnon tietyn lohkon render\u00f6imiseksi Yll\u00e4 oleva koodi render\u00f6i kaikki viestin lohkot, aivan kuten tavallisesti hahmonnettaessa viestin sis\u00e4lt\u00f6\u00e4. Hauskin osa tulee, kun alamme lis\u00e4t\u00e4 koodia tiettyjen meit\u00e4 kiinnostavien lohkojen poissulkemiseksi tai sis\u00e4llytt\u00e4miseksi.<\/p>\n Esimerkiksi alla oleva koodi tulostaa vain viestin kappalelohkot:<\/p>\n Ja t\u00e4m\u00e4 hahmontaa kaikki lohkot, mutta sulkee pois kaikki lyhytkoodilohkot:<\/p>\n Kun j\u00e4sent\u00e4t viestin lohkoja, sinun on todenn\u00e4k\u00f6isesti tarkistettava lohkon tyyppi. Ne ovat melko yksinkertaisia \u200b\u200barvata. Esimerkiksi kappalelohko on, hyvin arvasit sen, Villien arvailujen v\u00e4ltt\u00e4miseksi t\u00e4ss\u00e4 on yleiskatsaus WordPressin tarjoamista oletuslohkoista (t\u00e4t\u00e4 kirjoitettaessa):<\/p>\n Upottaa: Viserrys: YouTube: Facebook: Instagram: WordPress: SoundCloud: Spotify: Flickr: Vimeo: Animoto: Pilvist\u00e4: Crowdsignal: P\u00e4ivitt\u00e4inen liike: Hulu: Kuva: Ongelma: Kickstarter: Meetup.com: Mixcloud: Reddit: ReverbNation: Screencast: Scribd: Slideshare: SmugMug: Kaiutindekki: TED: Tumblr: VideoPress: wordpress.tv: Amazon Kindle: Hyvin kirjoitetun postauksen tulisi alkaa kappaleella, joka esittelee viestin aiheen ja houkuttelee ihmisi\u00e4 jatkamaan lukemista. N\u00e4m\u00e4 ovat t\u00e4ydellisi\u00e4 k\u00e4ytett\u00e4v\u00e4ksi otteina sen sijaan, ett\u00e4 luottaisit WordPressin automaattiseen otetoimintoon!<\/p>\n T\u00e4m\u00e4 on toiminto, jonka voit lis\u00e4t\u00e4 teemaasi ja Toiminnon K\u00e4ytt\u00e4\u00e4ksesi t\u00e4t\u00e4 toimintoa sinun tarvitsee vain soittaa:<\/p>\n Olettaen, ett\u00e4 funktiokutsu sijoitetaan jonnekin, jossa on globaali Voit luoda sis\u00e4llysluettelon automaattisesti ja dynaamisesti viestin otsikkolohkojen perusteella. Prosessi on riitt\u00e4v\u00e4n yksinkertainen; j\u00e4sent\u00e4\u00e4 viestin lohkot ja etsi\u00e4 kaikki tyypin lohkot Otsikkolohko sis\u00e4lt\u00e4\u00e4 tietoja sen tasosta attribuuttitaulukon elementiss\u00e4 (avain ’ Huomaa kuitenkin, ett\u00e4 Jos todella vastaat haasteeseen, kehotan sinua parantamaan alla olevaa koodia. Asianmukaisen j\u00e4sennellyn T\u00e4ss\u00e4 on sis\u00e4llysluettelotoiminto:<\/p>\n Toiminto alkaa viestien k\u00e4sittelyll\u00e4 ja sen lohkojen j\u00e4sent\u00e4misell\u00e4. Linjalla Lohkosilmukan j\u00e4lkeen [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Parametriksi sinun on annettava viestin sis\u00e4ll\u00f6n merkkijono. Jos olet silmukassa tai sinulla on p\u00e4\u00e4sy post-objektiin, anna vain $post->post_content<\/code>funktion parametri.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>on taulukko, jossa jokainen taulukon elementti on lohko. Jokaisesta lohkoelementist\u00e4 sinulla on tietoja, kuten lohkon tyyppi (avain ’ blockName<\/code>’), lohkon attribuutit (avain ’ attrs<\/code>’), sis\u00e4lohkot sis\u00e4kk\u00e4isille lohkoille, kuten sarakkeet (avain ’ innerBlocks<\/code>’), ja kaksi elementti\u00e4 varsinaiselle lohkon sis\u00e4ll\u00f6lle (avaimet ’ innerHTML<\/code>’ ja ’ innerContent<\/code>’). Elementti innerHTML<\/code>on HTML-sis\u00e4ll\u00f6n merkkijono, kun taas innerContent<\/code>se on joukko HTML-merkkijonoja.<\/p>\nparse_blocks()<\/code>tehd\u00e4ksesi asiasi. Katsomme lis\u00e4\u00e4 koodiesimerkkej\u00e4 t\u00e4st\u00e4 alempana t\u00e4ss\u00e4 viestiss\u00e4.<\/p>\nHuomautus klassisista (ei-Gutenbergin) viesteist\u00e4<\/h2>\n
parse_blocks()<\/code>t\u00e4llaisissa viesteiss\u00e4 yhden lohkotaulukon elementin, jonka blockName<\/code>arvo on null<\/code>. Viestin koko HTML-sis\u00e4lt\u00f6 on t\u00e4m\u00e4n elementin innerHTML<\/code>merkkijonon sis\u00e4ll\u00e4.<\/p>\nparse_blocks()<\/code>on yksi elementti ja se blockName<\/code>on null<\/code>, kyseess\u00e4 on "pre-Gutenberg" -viesti. Muuten blockName<\/code>on aina asutettu. T\u00e4m\u00e4 on hyv\u00e4 tarkistus pit\u00e4\u00e4 mieless\u00e4, kun kirjoitat koodia viestien lohkojen j\u00e4sent\u00e4miseksi ja haluat k\u00e4sitell\u00e4 vanhempaa WordPress-sis\u00e4lt\u00f6\u00e4.<\/p>\nRender\u00f6i lohko<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Parametriksi sinun on annettava lohkolle taulukko, aivan kuten yksi parse_blocks()<\/code>ylh\u00e4\u00e4lt\u00e4 palautetuista. Funktio palauttaa renderoidun HTML-koodin merkkijonon, jonka voit yksinkertaisesti toistaa suoraan.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);\nforeach ($blocks as $block) {\n echo render_block($block);\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] != 'core\/shortcode') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nEst\u00e4 nimet<\/h2>\n
paragraph<\/code>. Muista kuitenkin, ett\u00e4 kaikkiin WordPressin Gutenberg-lohkoihin on liitetty nimiavaruus. WordPress-ydinlohkoissa (oletus) niiden kaikkien etuliitteen\u00e4 on " core\/<\/code>". Poikkeuksena ovat upotuslohkot, joiden etuliitteen\u00e4 on " core-embed\/<\/code>". Joten esimerkiksi kappalelohkolla on lohkon nimi core\/paragraph<\/code>.<\/p>\nYleiset lohkot<\/h3>\n
\n
core\/paragraph<\/code><\/li>\ncore\/image<\/code><\/li>\ncore\/heading<\/code><\/li>\ncore\/gallery<\/code><\/li>\ncore\/list<\/code><\/li>\ncore\/quote<\/code><\/li>\ncore\/audio<\/code><\/li>\ncore\/cover<\/code><\/li>\ncore\/file<\/code><\/li>\ncore\/video<\/code><\/li>\n<\/ul>\nMuotoilu<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(mutta muiden kuin Gutenberg-viestien kohdalla se on null<\/code>, katso huomautus ei-Gutenberg-viesteist\u00e4)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nLayout<\/h3>\n
\n
core\/button<\/code><\/li>\ncore\/columns<\/code><\/li>\ncore\/more<\/code><\/li>\ncore\/nextpage<\/code><\/li>\ncore\/separator<\/code><\/li>\ncore\/spacer<\/code><\/li>\ncore\/media-text<\/code><\/li>\n<\/ul>\nWidgetit<\/h3>\n
\n
core\/shortcode<\/code><\/li>\ncore\/archives<\/code><\/li>\ncore\/categories<\/code><\/li>\ncore\/latest-omments<\/code><\/li>\ncore\/latest-posts<\/code><\/li>\n<\/ul>\nUpota<\/h3>\n
\n
core\/embed<\/code><\/p>\n<\/li>\ncore-embed\/twitter<\/code><\/p>\n<\/li>\ncore-embed\/youtube<\/code><\/p>\n<\/li>\ncore-embed\/facebook<\/code><\/p>\n<\/li>\ncore-embed\/instagram<\/code><\/p>\n<\/li>\ncore-embed\/wordpress<\/code><\/p>\n<\/li>\ncore-embed\/soundcloud<\/code><\/p>\n<\/li>\ncore-embed\/spotify<\/code><\/p>\n<\/li>\ncore-embed\/flickr<\/code><\/p>\n<\/li>\ncore-embed\/vimeo<\/code><\/p>\n<\/li>\ncore-embed\/animoto<\/code><\/p>\n<\/li>\ncore-embed\/cloudup<\/code><\/p>\n<\/li>\ncore-embed\/crowdsignal<\/code><\/p>\n<\/li>\ncore-embed\/dailymotion<\/code><\/p>\n<\/li>\ncore-embed\/hulu<\/code><\/p>\n<\/li>\ncore-embed\/imgur<\/code><\/p>\n<\/li>\ncore-embed\/issuu<\/code><\/p>\n<\/li>\ncore-embed\/kickstarter<\/code><\/p>\n<\/li>\ncore-embed\/meetup-com<\/code><\/p>\n<\/li>\ncore-embed\/mixcloud<\/code><\/p>\n<\/li>\ncore-embed\/reddit<\/code><\/p>\n<\/li>\ncore-embed\/reverbnation<\/code><\/p>\n<\/li>\ncore-embed\/screencast<\/code><\/p>\n<\/li>\ncore-embed\/scribd<\/code><\/p>\n<\/li>\ncore-embed\/slideshare<\/code><\/p>\n<\/li>\ncore-embed\/smugmug<\/code><\/p>\n<\/li>\ncore-embed\/speaker<\/code><\/p>\n<\/li>\ncore-embed\/ted<\/code><\/p>\n<\/li>\ncore-embed\/tumblr<\/code><\/p>\n<\/li>\ncore-embed\/videopress<\/code><\/p>\n<\/li>\ncore-embed\/wordpress-tv<\/code><\/p>\n<\/li>\ncore-embed\/amazon-kindle<\/code><\/p>\n<\/li>\n<\/ul>\nEsimerkki koodista: Hae viestin ensimm\u00e4inen kappale katkelmana<\/h2>\n
functions.php<\/code>joka palauttaa viestin ensimm\u00e4isen kappaleen. Jos viesti\u00e4 ei ole annettu, se viittaa globaaliin viestiobjektiin. Se sis\u00e4lt\u00e4\u00e4 my\u00f6s ei-Gutenberg-viestit palauttamalla niist\u00e4 todellisen WordPress-otteen.<\/p>\nfunction awp_get_excerpt($post=false) {\n if (!$post) { \n global $post;\n }\n if (!$post) { return ''; }\n $excerpt = '';\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n $excerpt = get_the_excerpt($post->ID);\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n $excerpt = strip_tags($block['innerHTML']);\n break;\n }\n }\n }\n return \"<div class='excerpt'>$excerpt<\/div>\";\n}<\/code><\/pre>\nparse_blocks()<\/code>kutsun j\u00e4lkeen tarkistamme, onko viestiss\u00e4 virheellisi\u00e4 lohkotietoja (viesti luotiin ennen Gutenbergi\u00e4) ja palautamme viestiotteen, jos n\u00e4in on. Muussa tapauksessa k\u00e4ymme l\u00e4pi viestin lohkot, etsimme ensimm\u00e4isen kappaleen lohkon ja palautamme sen innerHTML<\/code>. Aivan lopussa palautamme merkkijonon, jonka <div><\/code>ymp\u00e4rill\u00e4 (t\u00e4m\u00e4 on valinnainen) a.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>objekti, esimerkiksi silmukan sis\u00e4ll\u00e4. Jos haluat m\u00e4\u00e4ritt\u00e4\u00e4 postin, anna post-objekti parametrina funktiokutsulle:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nEsimerkki: Luo sis\u00e4llysluettelo viestin otsikoista<\/h2>\n
core\/heading<\/code>. Mutta voimme vied\u00e4 sen askeleen pidemm\u00e4lle ja sis\u00e4llytt\u00e4\u00e4 tasot; esim. asettamalla h3<\/code>alaotsikko alle h2<\/code>ja niin edelleen.<\/p>\nattrs<\/code>’). Taulukon sis\u00e4ll\u00e4 attrs<\/code>se olisi taulukkoelementti, jonka avain on ’ level<\/code>’ ja tasoa ilmaiseva kokonaisluku. A: lla h3<\/code>olisi ’ level<\/code>’ arvo 3<\/code>, a :lla h4<\/code>olisi ’ level<\/code>’ 4<\/code>ja niin edelleen.<\/p>\nattrs<\/code>otsikon lohkot voivat olla tyhji\u00e4! T\u00e4m\u00e4 tapahtuu, kun kirjoittaja ei ole muuttanut otsikkotyyppi\u00e4 pois oletusasetuksista lohkon asetuksissa. T\u00e4m\u00e4n kiert\u00e4miseksi meid\u00e4n on teht\u00e4v\u00e4 joitain oletuksia. Oletusotsikot ovat h2<\/code>(ellet ole muuttanut t\u00e4t\u00e4 teemassasi). Joten voimme olettaa, ett\u00e4 jos otsikkolohkolla ei ole taso-attribuuttia, se on h2<\/code>. Muuten saamme tasotiedot attribuuteista.<\/p>\nol<\/code>luettelon luomisessa on se, ett\u00e4 emme voi hallita sit\u00e4, miten kirjoittaja j\u00e4sent\u00e4\u00e4 otsikkonsa. He voivat hyvinkin tulla hulluksi ja aloittaa h4<\/code>otsikolla ja hyp\u00e4t\u00e4 oikealle h2<\/code>otsikkoon heti sen j\u00e4lkeen. Ja yht\u00e4kki\u00e4 ne sekoittuvat h1<\/code>keskelle. Ratkaisuni sis\u00e4lt\u00e4\u00e4 siksi tasaisen ol<\/code>listan luomisen ja tasotietojen tarjoamisen luettelokohteen luokissa. Sitten jollain \u00e4lykk\u00e4\u00e4ll\u00e4 CSS:ll\u00e4 voit sisent\u00e4\u00e4 luettelon kohteet vastaavasti vasemmalla t\u00e4ytteell\u00e4.<\/p>\nKoodi<\/h3>\n
function awp_table_of_contents($post=false) {\n if (!$post) {\n global $post;\n }\n if (!$post) { return ''; }\n $headings = [];\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n return '';\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/heading') {\n $level = (isset($block['attrs']['level']))? $block['attrs']['level']: 2; \/\/ h2 as default\n $headings[] = ['title' => wp_strip_all_tags($block['innerHTML']), 'level' => $level];\n }\n }\n }\n\u00a0\n if (empty($headings)) { \/\/ No headings found in post\n return '';\n }\n\u00a0\n $toc = '<ol class=\"table-of-contents\">';\n foreach ($headings as $heading) {\n $toc .= '<li class=\"heading-level-'. $heading['level']. '\">'. $heading['title']. '<\/li>';\n }\n $toc .= '<\/ol>';\n return $toc;\n}<\/code><\/pre>\n#9<\/code>otamme vastaan \u200b\u200bmuita kuin Gutenberg-virkoja. Funktio jatkaa silmukkaa kaikkien lohkojen l\u00e4pi ja aina kun se l\u00f6yt\u00e4\u00e4 otsikkolohkon, se lis\u00e4t\u00e4\u00e4n $headings<\/code>taulukkoomme. K\u00e4yt\u00e4mme [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>HTML-tunnisteiden poistamiseen otsikoista. Lis\u00e4\u00e4mme my\u00f6s tasotiedot taulukkoomme, jossa oletusarvo on, 2<\/code>jos attribuutit on tyhj\u00e4.<\/p>\n$headings<\/code>taulukon tulee sis\u00e4lt\u00e4\u00e4 kaikki viestien otsikot j\u00e4rjestyksess\u00e4. Voimme sitten yksinkertaisesti luoda HTML-merkkijonon ja tulostaa sen sis\u00e4ll\u00f6n. Kuten mainittiin, luon jokaiselle elementille luokan nimen, joka sis\u00e4lt\u00e4\u00e4 tiedot otsikon tasosta, jotta voimme luoda illuusion j\u00e4sennellyst\u00e4 luettelosta CSS:n avulla.<\/p>\n