Selles postituses vaatleme, kuidas s\u00f5eluda postituse Gutenbergi plokke ja ekstraheerida konkreetseid plokke, et teha midagi muud. Vaatleme WordPressi PHP funktsioone valitud plokkide s\u00f5elumiseks, ekstraktimiseks ja renderdamiseks.<\/p>\n
WordPressi uue Gutenbergi redaktori \u00fcks eeliseid on postitussisu struktureeritumad andmed. Vanasti salvestati k\u00f5ike HTML-ina ja konkreetseid sisul\u00f5ike ei olnud v\u00f5imalik ilma v\u00e4ga keerukate regulaaravaldisteta v\u00e4lja v\u00f5tta. Kuid Gutenbergi puhul on iga sisuosa, olgu see l\u00f5ik, pealkiri, pilt, video, nupp v\u00f5i veerg, mille sees on muid plokke, salvestatud teabega, mis \u00fctleb meile, mis see sisu on.<\/p>\n
Sisseehitatud WordPressi funktsioonide abil on v\u00e4ga lihtne tuua k\u00f5ik postituse sisu plokid massiivina koos kogu nende teabega. See avab teemaarendajatele palju kasulikke funktsioone. Lihtsalt mainides m\u00f5nda ideed:<\/p>\n
H\u00fcppame otse sellesse!<\/p>\n
Plokkide s\u00f5elumiseks kasutame WordPressi funktsiooni Tagasitulek Ja see on k\u00f5ik! V\u00f5imalik, et t\u00f6\u00f6tate vanemal WordPressi saidil, mis on loonud postitusi enne Gutenbergi versioonile \u00fcleminekut (v\u00f5i kasutanud Gutenbergi keelamise pistikprogrammi). Sel juhul ei ole nendel postitustel postituse struktureeritud sisu, vaid kogu postituse sisu on plokis \u201eKlassikaline redaktor".<\/p>\n Funktsioonist tagastatud massiiv tagastab V\u00f5ime julgelt eeldada, et kui postituse tootlusel WordPress pakub ka funktsiooni konkreetse ploki renderdamiseks \u00dclaltoodud kood renderdab k\u00f5ik postituse plokid, t\u00e4pselt nagu tavaliselt postituse sisu renderdamisel. L\u00f5bus osa tuleb siis, kui hakkame lisama koodi, et v\u00e4listada v\u00f5i kaasata konkreetsed meid huvitavad plokid.<\/p>\n N\u00e4iteks prindib allolev kood v\u00e4lja ainult postituse l\u00f5iguplokid:<\/p>\n Ja see renderdab k\u00f5ik plokid, kuid v\u00e4listab k\u00f5ik l\u00fchikoodiplokid:<\/p>\n Postituse plokkide s\u00f5elumisel peate t\u00f5en\u00e4oliselt kontrollima ploki t\u00fc\u00fcpi. Neid on \u00fcsna lihtne \u00e4ra arvata. N\u00e4iteks l\u00f5iguplokk on, h\u00e4sti arvasite \u00e4ra, Metsikute oletuste v\u00e4ltimiseks on siin \u00fclevaade WordPressi pakutavatest vaikeplokkidest (selle kirjutamise ajal):<\/p>\n Manusta: Twitter: Youtube: Facebook: Instagram: WordPress: SoundCloud: Spotify: Flickr: Vimeo: Animoto: Pilv: Rahvahulga signaal: Igap\u00e4evane liikumine: Hulu: Pilt: Probleem: Kickstarter: Meetup.com: Mixcloud: Reddit: ReverbNation: Ekraanisaade: Scribd: Slaidide jagamine: SmugMug: K\u00f5larid: TED: Tumblr: VideoPress: wordpress.tv: Amazon Kindle: H\u00e4sti kirjutatud postitus peaks algama l\u00f5iguga, mis tutvustab postituse sisu ja ahvatleb inimesi lugema. Need sobivad suurep\u00e4raselt kasutamiseks v\u00e4ljav\u00f5tetena, selle asemel, et toetuda WordPressi automaatsele v\u00e4ljav\u00f5tte funktsioonile!<\/p>\n See on funktsioon, mille saate oma teemale lisada ja P\u00e4rast funktsiooni Selle funktsiooni kasutamiseks peate helistama:<\/p>\n Eeldades, et funktsioonikutse paigutatakse kuskile, kus on globaalne Saate automaatselt ja d\u00fcnaamiliselt luua sisukorra, mis p\u00f5hineb postituse pealkirjaplokkidel. Protsess on piisavalt lihtne; s\u00f5eluge postituse plokke ja leidke k\u00f5ik plokid Pealkirjaplokk sisaldab teavet selle taseme kohta atribuudimassiivi elemendis (v\u00f5ti ‘ Arvestage siiski, et Kui olete v\u00e4ljakutsega t\u00f5esti valmis, kutsun teid \u00fcles t\u00e4iustama allolevat koodi. \u00d5ige struktureeritud Siin on sisukorra funktsioon:<\/p>\n Funktsioon algab postituse k\u00e4sitlemisest ja selle plokkide s\u00f5elumisest. Liinil P\u00e4rast plokits\u00fcklit [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Parameetrina peate sisestama postituse sisu stringi. Kui olete ts\u00fcklis v\u00f5i teil on juurdep\u00e4\u00e4s postitusobjektile, esitage lihtsalt $post->post_content<\/code>funktsiooni parameetrina.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>on massiiv, kus iga massiivi element on plokk. Iga ploki elemendi kohta on teil teave, n\u00e4iteks ploki t\u00fc\u00fcp (v\u00f5ti ‘ blockName<\/code>‘), ploki atribuudid (v\u00f5ti ‘ attrs<\/code>‘), sisemised plokid pesastatud plokkide jaoks, nagu veerud (v\u00f5ti ‘ innerBlocks<\/code>‘) ja kaks elementi tegeliku ploki sisu jaoks (v\u00f5tmed ‘ innerHTML<\/code>‘ ja ‘ innerContent<\/code>‘). Element innerHTML<\/code>on HTML-i sisu string, samas innerContent<\/code>kui HTML-stringide massiiv.<\/p>\nparse_blocks()<\/code>Oma asjade tegemiseks sirvige l\u00e4bi tagastatud massiivi alates. Vaatame selle postituse allpool rohkem koodin\u00e4iteid.<\/p>\nM\u00e4rkus klassikaliste (mitte-Gutenbergi) postituste kohta<\/h2>\n
parse_blocks()<\/code>sellistel postitustel \u00fche plokimassiivi elemendi, mille v\u00e4\u00e4rtus blockName<\/code>on null<\/code>. Postituse t\u00e4ielik HTML-sisu on selle elemendi innerHTML<\/code>stringis.<\/p>\nparse_blocks()<\/code>on \u00fcks element ja see blockName<\/code>on null<\/code>, siis on tegemist “Gutenbergi-eelse” postitusega. Muidu blockName<\/code>on alati asustatud. Seda on hea meeles pidada, kui kirjutate postituste plokkide s\u00f5elumiseks koodi ja soovite k\u00e4sitleda vanemat WordPressi sisu.<\/p>\nRenderda plokk<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Parameetrina peate andma ploki jaoks massiivi, t\u00e4pselt nagu \u00fche parse_blocks()<\/code>\u00fclalt tagastatud massiivi. Funktsioon tagastab renderdatud HTML-i stringi, mida saate lihtsalt otse v\u00e4lja tuua.<\/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>\nBlokeeri nimed<\/h2>\n
paragraph<\/code>. Kuid pidage meeles, et WordPressis on k\u00f5ikidel Gutenbergi plokkidel eesliide nimeruumiga. WordPressi p\u00f5hiplokkide (vaike) puhul on nende eesliide " core\/<\/code>". Erandiks on manustamisplokid, mille eesliide on " core-embed\/<\/code>". N\u00e4iteks l\u00f5iguplokil on ploki nimi core\/paragraph<\/code>.<\/p>\n\u00dchised plokid<\/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>\nVormindamine<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(kuid mitte-Gutenbergi postituste puhul on see null<\/code>, vt m\u00e4rkust mitte-Gutenbergi postituste kohta)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nPaigutus<\/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>\nVidinad<\/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>\nManustatakse<\/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>\nKoodi n\u00e4ide: tooge postituse esimene l\u00f5ik v\u00e4ljav\u00f5ttena<\/h2>\n
functions.php<\/code>mis tagastab postituse esimese l\u00f5igu. Kui postitust ei esitatud, viitab see globaalsele postitusobjektile. See mahutab ka mitte-Gutenbergi postitusi, tagastades nende jaoks tegeliku WordPressi v\u00e4ljav\u00f5tte.<\/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>kutsumist kontrollime, kas postitusel on kehtetuid plokiandmeid (postitus loodi enne Gutenbergi) ja tagastame postituse v\u00e4ljav\u00f5tte, kui see nii on. Vastasel juhul vaatame l\u00e4bi postituse plokid, leiame esimese l\u00f5iguploki ja tagastame selle innerHTML<\/code>. P\u00e4ris l\u00f5pus tagastame stringi, mille <div><\/code>\u00fcmber on (see on valikuline) a.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>objekt, n\u00e4iteks ts\u00fckli sees. Kui soovite m\u00e4\u00e4rata postituse, sisestage funktsioonikutse parameetrina postitusobjekt:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nN\u00e4ide: looge postituse pealkirjadest sisukord<\/h2>\n
core\/heading<\/code>. Kuid me saame astuda sammu edasi ja kaasata tasemed; h3<\/code>nt alampealkirja alla panemine h2<\/code>ja nii edasi.<\/p>\nattrs<\/code>‘). Massiivi sees attrs<\/code>oleks see massiivi element v\u00f5tmega ‘ level<\/code>‘ ja taset t\u00e4histava t\u00e4isarvuga. A- l h3<\/code>oleks ‘ level<\/code>‘ v\u00e4\u00e4rtus 3<\/code>, h4<\/code>a’l oleks ‘ level<\/code>‘ 4<\/code>ja nii edasi.<\/p>\nattrs<\/code>pealkirjade plokid v\u00f5ivad olla t\u00fchjad! See juhtub siis, kui autor ei ole muutnud pealkirja t\u00fc\u00fcpi ploki s\u00e4tetes vaikeseadetest k\u00f5rvale. Selle \u00fcmberk\u00e4imiseks peame tegema m\u00f5ned eeldused. Vaikimisi on pealkirjad h2<\/code>(kui te pole seda oma teemas muutnud). Seega v\u00f5ime eeldada, et kui pealkirjaplokil pole taseme atribuuti, on see h2<\/code>. Vastasel juhul saame tasemeteabe atribuutidest.<\/p>\nol<\/code>loendi loomise probleem seisneb selles, et me ei saa kontrollida, kuidas autor oma pealkirju struktureerib. Nad v\u00f5ivad v\u00e4ga h\u00e4sti hulluks minna ja alustada h4<\/code>pealkirjaga ja h\u00fcpata h2<\/code>kohe p\u00e4rast seda. Ja \u00e4kki segavad nad h1<\/code>keskele a. Minu lahendus h\u00f5lmab seet\u00f5ttu kindla ol<\/code>loendi genereerimist ja tasemeteabe esitamist loendi\u00fcksuse klassides. Seej\u00e4rel saate m\u00f5ne nutika CSS-i abil loendi \u00fcksused vastavalt taandada, kasutades vasakpoolset polsterdust.<\/p>\nKood<\/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>majutame mitte-Gutenbergi ametikohti. Funktsioon j\u00e4tkab k\u00f5igi plokkide l\u00e4bimist ja kui ta leiab pealkirjaploki, lisatakse see meie $headings<\/code>massiivi. Kasutame [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>pealkirjadest HTML-m\u00e4rgendite eemaldamiseks. Lisame ka tasemeteabe oma massiivi, kus vaikimisi seatakse 2<\/code>kui atribuudid on t\u00fchjad.<\/p>\n$headings<\/code>peaks massiiv sisaldama k\u00f5iki postituse pealkirju, j\u00e4rjekorras. Seej\u00e4rel saame lihtsalt genereerida HTML-stringi ja v\u00e4ljastada selle sisu. Nagu mainitud, genereerin igale elemendile klassi nime, mis sisaldab teavet pealkirja taseme kohta, et saaksime luua CSS-i abil illusiooni struktureeritud loendist.<\/p>\n