I det h\u00e4r inl\u00e4gget kommer vi att titta p\u00e5 hur man analyserar ett inl\u00e4ggs Gutenberg-block och extraherar specifika block f\u00f6r att g\u00f6ra n\u00e5got annat. Vi ska titta p\u00e5 WordPress PHP-funktioner f\u00f6r att analysera, extrahera och rendera valda block.<\/p>\n
En f\u00f6rdel med den nya Gutenberg-redigeraren i WordPress \u00e4r mer strukturerad data f\u00f6r inl\u00e4ggsinneh\u00e5ll. F\u00f6rr i tiden lagrades allt som HTML och det fanns inget s\u00e4tt att extrahera specifika delar av inneh\u00e5ll utan n\u00e5gra mycket komplexa regulj\u00e4ra uttryck. Men med Gutenberg lagras varje del av inneh\u00e5llet, vare sig det \u00e4r ett stycke, rubrik, bild, video, knapp eller en kolumn som har andra block inuti sig, med information som ber\u00e4ttar vad detta inneh\u00e5ll \u00e4r.<\/p>\n
Med inbyggda WordPress-funktioner \u00e4r det v\u00e4ldigt enkelt att h\u00e4mta alla block i ett inl\u00e4ggs inneh\u00e5ll i en array med all deras information. Detta \u00f6ppnar upp f\u00f6r massor av anv\u00e4ndbara funktioner f\u00f6r temautvecklare. F\u00f6r att bara n\u00e4mna n\u00e5gra id\u00e9er:<\/p>\n
L\u00e5t oss bara hoppa direkt in i det!<\/p>\n
F\u00f6r att analysera block anv\u00e4nder vi WordPress-funktionen Returen fr\u00e5n Och det \u00e4r allt! G\u00e5 igenom den returnerade arrayen fr\u00e5n Du kanske arbetar p\u00e5 en \u00e4ldre WordPress-webbplats som har skapat inl\u00e4gg innan du uppgraderar till Gutenberg (eller anv\u00e4nde en Disable Gutenberg-plugin). I det h\u00e4r fallet kommer dessa inl\u00e4gg inte att ha strukturerat inl\u00e4ggsinneh\u00e5ll, utan snarare \u00e4r hela inl\u00e4ggets inneh\u00e5ll i ett "Klassisk redigerare"-block.<\/p>\n Arrayen som returneras fr\u00e5n funktionen Vi kan lugnt anta att om ett inl\u00e4ggs avkastning WordPress erbjuder ocks\u00e5 en funktion f\u00f6r att rendera ett specifikt block med Ovanst\u00e5ende kod kommer att \u00e5terge alla inl\u00e4ggets block, precis som den normalt skulle g\u00f6ra n\u00e4r inl\u00e4ggets inneh\u00e5ll \u00e5terges. Det roliga kommer n\u00e4r vi b\u00f6rjar l\u00e4gga till kod f\u00f6r att utesluta eller inkludera specifika block som vi \u00e4r intresserade av.<\/p>\n Till exempel kommer koden nedan endast att skriva ut postens styckeblock:<\/p>\n Och detta kommer att rendera alla block, men exkludera alla kortkodsblock:<\/p>\n N\u00e4r du analyserar ett inl\u00e4ggs block kommer du troligen att beh\u00f6va kontrollera blockets typ. De \u00e4r ganska enkla att gissa. Ett styckeblock \u00e4r till exempel, du gissade r\u00e4tt, F\u00f6r att undvika vilda gissningar h\u00e4r \u00e4r en \u00f6versikt \u00f6ver standardblocken som tillhandah\u00e5lls av WordPress (n\u00e4r detta skrivs):<\/p>\n B\u00e4dda in: Twitter: Youtube: Facebook: Instagram: WordPress: SoundCloud: Spotify: Flickr: Vimeo: Animoto: Cloudup: Publiksignal: Dailymotion: Hulu: Imgur: Problem: Kickstarter: Meetup.com: Mixcloud: Reddit: ReverbNation: Screencast: Scribd: Bilddelning: SmugMug: H\u00f6gtalarpanel: TED: Tumblr: Videopress: wordpress.tv: Amazon Kindle: Ett v\u00e4lskrivet inl\u00e4gg b\u00f6r b\u00f6rja med ett stycke som introducerar vad inl\u00e4gget handlar om och som lockar folk att forts\u00e4tta l\u00e4sa. Dessa \u00e4r perfekta att anv\u00e4nda som utdrag ist\u00e4llet f\u00f6r att f\u00f6rlita sig p\u00e5 den automatiska utdragsfunktionen i WordPress!<\/p>\n Det h\u00e4r \u00e4r en funktion du kan l\u00e4gga till i ditt tema i Efter funktionens F\u00f6r att anv\u00e4nda den h\u00e4r funktionen beh\u00f6ver du bara ringa:<\/p>\n F\u00f6rutsatt att funktionsanropet placeras n\u00e5gonstans d\u00e4r det finns ett globalt Du kan automatiskt och dynamiskt generera en inneh\u00e5llsf\u00f6rteckning baserat p\u00e5 ett inl\u00e4ggs rubrikblock. Processen \u00e4r enkel nog; analysera inl\u00e4ggets block och hitta alla block av typen Ett rubrikblock inneh\u00e5ller information om dess niv\u00e5 i attributmatriselementet (nyckel ’ Observera dock att Om du verkligen orkar med utmaningen uppmanar jag dig att f\u00f6rb\u00e4ttra koden nedan. Problemet med att skapa en ordentlig strukturerad H\u00e4r \u00e4r inneh\u00e5llsf\u00f6rteckningsfunktionen:<\/p>\n Funktionen b\u00f6rjar med att hantera inl\u00e4gget och analysera dess block. Vid k\u00f6 Efter [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Som parameter m\u00e5ste du tillhandah\u00e5lla en str\u00e4ng av ett inl\u00e4ggs inneh\u00e5ll. Om du \u00e4r inne i en loop eller har tillg\u00e5ng till ett post-objekt, ange bara $post->post_content<\/code>som parameter till funktionen.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>\u00e4r en array d\u00e4r varje arrayelement \u00e4r ett block. F\u00f6r varje blockelement har du information som typ av block (nyckel ’ blockName<\/code>’), blockattribut (nyckel ’ attrs<\/code>’), inre block f\u00f6r kapslade block som kolumner (nyckel ’ innerBlocks<\/code>’), och tv\u00e5 element f\u00f6r sj\u00e4lva blockinneh\u00e5llet (nycklar ’ innerHTML<\/code>’ och ’ innerContent<\/code>’). Elementet innerHTML<\/code>\u00e4r en str\u00e4ng av HTML-inneh\u00e5ll, medan det innerContent<\/code>\u00e4r en upps\u00e4ttning HTML-str\u00e4ngar.<\/p>\nparse_blocks()<\/code>f\u00f6r att g\u00f6ra din grej. Vi ska titta p\u00e5 fler kodexempel p\u00e5 detta l\u00e4ngre ner i det h\u00e4r inl\u00e4gget.<\/p>\nEn anteckning om klassiska (icke-Gutenberg) inl\u00e4gg<\/h2>\n
parse_blocks()<\/code>kommer p\u00e5 denna typ av inl\u00e4gg att returnera ett block array-element med blockName<\/code>satt till null<\/code>. Inl\u00e4ggets fullst\u00e4ndiga HTML-inneh\u00e5ll finns i detta elements innerHTML<\/code>str\u00e4ng.<\/p>\nparse_blocks()<\/code>har ett element och dess blockName<\/code>\u00e4r null<\/code>, har vi att g\u00f6ra med ett "pre-Gutenberg"-inl\u00e4gg. Annars blockName<\/code>kommer alltid att fyllas i. Detta \u00e4r en bra kontroll att ha i \u00e5tanke n\u00e4r du skriver kod f\u00f6r att analysera inl\u00e4ggs block och du vill hantera \u00e4ldre WordPress-inneh\u00e5ll.<\/p>\nG\u00f6r ett block<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Som parameter m\u00e5ste du tillhandah\u00e5lla en array f\u00f6r ett block, precis som en av de som returneras parse_blocks()<\/code>ovanifr\u00e5n. Funktionen returnerar en str\u00e4ng med renderad HTML som du helt enkelt kan eka rakt ut.<\/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>\nBlocknamn<\/h2>\n
paragraph<\/code>. Kom dock ih\u00e5g att alla Gutenberg-block i WordPress har ett namnomr\u00e5de som prefix. F\u00f6r WordPress-k\u00e4rnblock (standard) har de alla prefixet " core\/<\/code>". Undantaget \u00e4r Embed-blocken som har prefixet " core-embed\/<\/code>". S\u00e5 till exempel ett styckeblock kommer att ha blocknamnet core\/paragraph<\/code>.<\/p>\nVanliga block<\/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>\nFormatering<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(men f\u00f6r icke-Gutenberg-inl\u00e4gg kommer det att vara null<\/code>, se anteckning om icke-Gutenberg-inl\u00e4gg)<\/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>\nWidgets<\/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>\nB\u00e4dda in<\/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>\nKodexempel: H\u00e4mta ett inl\u00e4ggs f\u00f6rsta stycke som utdrag<\/h2>\n
functions.php<\/code>som kommer att returnera ett inl\u00e4ggs f\u00f6rsta stycke. Om inget inl\u00e4gg l\u00e4mnades kommer det att h\u00e4nvisa till det globala postobjektet. Det rymmer ocks\u00e5 icke-Gutenberg-inl\u00e4gg genom att returnera sj\u00e4lva WordPress-utdraget f\u00f6r dessa.<\/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>anrop kontrollerar vi om inl\u00e4gget har ogiltiga blockdata (inl\u00e4gget skapades f\u00f6re Gutenberg) och returnerar inl\u00e4ggsutdrag om s\u00e5 \u00e4r fallet. Annars g\u00e5r vi igenom inl\u00e4ggets block, hittar det f\u00f6rsta styckeblocket och returnerar dess innerHTML<\/code>. I slutet returnerar vi en str\u00e4ng med (detta \u00e4r valfritt) a <div><\/code>runt den.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>objekt, till exempel inuti en loop. Om du vill specificera ett inl\u00e4gg, ange postobjektet som parameter till funktionsanropet:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nExempel: Skapa en inneh\u00e5llsf\u00f6rteckning fr\u00e5n ett inl\u00e4ggs rubriker<\/h2>\n
core\/heading<\/code>. Men vi kan ta det ett steg l\u00e4ngre och inf\u00f6rliva niv\u00e5er; t.ex. s\u00e4tta h3<\/code>som underrubrik under h2<\/code>och s\u00e5 vidare.<\/p>\nattrs<\/code>’). Inuti attrs<\/code>arrayen skulle det vara ett arrayelement med nyckeln ’ level<\/code>’ och ett heltal som anger niv\u00e5n. A h3<\/code>skulle ha ’ level<\/code>’ v\u00e4rde av 3<\/code>, a h4<\/code>skulle ha ’ level<\/code>’ av 4<\/code>och s\u00e5 vidare.<\/p>\nattrs<\/code>rubrikblock kan vara tomma! Detta h\u00e4nder n\u00e4r f\u00f6rfattaren inte har \u00e4ndrat rubriktypen fr\u00e5n standardinst\u00e4llningarna i blockets inst\u00e4llningar. F\u00f6r att kringg\u00e5 detta m\u00e5ste vi g\u00f6ra n\u00e5gra antaganden. Som standard kommer rubriker att vara h2<\/code>(s\u00e5vida du inte har \u00e4ndrat detta i ditt tema). S\u00e5 vi kan anta att om ett rubrikblock inte har ett niv\u00e5attribut s\u00e5 \u00e4r det en h2<\/code>. Annars f\u00e5r vi niv\u00e5informationen fr\u00e5n attributen.<\/p>\nol<\/code>lista \u00e4r att vi inte kan kontrollera hur f\u00f6rfattaren strukturerar sina titlar. De kan mycket v\u00e4l bli galna och b\u00f6rja med en h4<\/code>rubrik och hoppa direkt till en h2<\/code>rubrik direkt efter. Och pl\u00f6tsligt blandar de en h1<\/code>i mitten. Min l\u00f6sning inneb\u00e4r d\u00e4rf\u00f6r att generera en platt ol<\/code>lista och tillhandah\u00e5lla niv\u00e5informationen i listobjektets klasser. Sedan med lite smart CSS kan du dra in listobjekten d\u00e4refter med lite v\u00e4nster stoppning.<\/p>\nKoden<\/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>tar vi emot tj\u00e4nster som inte \u00e4r Gutenberg. Funktionen forts\u00e4tter att g\u00e5 igenom alla block och n\u00e4r den hittar ett rubrikblock l\u00e4ggs den till i v\u00e5r $headings<\/code>array. Vi anv\u00e4nder [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>f\u00f6r att ta bort HTML-taggarna fr\u00e5n titlarna. Vi l\u00e4gger ocks\u00e5 till niv\u00e5informationen i v\u00e5r array, d\u00e4r standarden \u00e4r inst\u00e4lld p\u00e5 2<\/code>om attributen \u00e4r tomma.<\/p>\n$headings<\/code>blockloopen b\u00f6r arrayen inneh\u00e5lla alla postens rubriker, i ordning. Vi kan sedan helt enkelt generera en HTML-str\u00e4ng och mata ut dess inneh\u00e5ll. Som n\u00e4mnt genererar jag ett klassnamn p\u00e5 varje element med information om rubrikens niv\u00e5 s\u00e5 att vi kan skapa illusionen av en strukturerad lista med CSS.<\/p>\n