In questo post vedremo come analizzare i blocchi Gutenberg di un post ed estrarre blocchi specifici per creare qualcos’altro. Esamineremo le funzioni PHP di WordPress per l’analisi, l’estrazione e il rendering dei blocchi scelti.<\/p>\n
Uno dei vantaggi del nuovo editor Gutenberg in WordPress sono dati pi\u00f9 strutturati per i contenuti dei post. In passato tutto era archiviato come HTML e non c’era modo di estrarre contenuti specifici senza alcune espressioni regolari molto complesse. Ma con Gutenberg ogni contenuto, sia esso un paragrafo, un’intestazione, un’immagine, un video, un pulsante o una colonna che contiene altri blocchi al suo interno, viene archiviato con informazioni che ci dicono qual \u00e8 questo contenuto.<\/p>\n
Con le funzioni integrate di WordPress \u00e8 molto facile recuperare tutti i blocchi nel contenuto di un post in un array con tutte le loro informazioni. Questo apre un sacco di funzioni utili per gli sviluppatori di temi. Solo per citare alcune idee:<\/p>\n
Diamoci dentro!<\/p>\n
Per analizzare i blocchi utilizziamo la funzione WordPress Il ritorno da E questo \u00e8 tutto! Passa attraverso l’array restituito da Potresti lavorare su un vecchio sito WordPress che ha creato post prima di eseguire l’aggiornamento a Gutenberg (o utilizzato un plugin Disable Gutenberg). In questo caso questi post non avranno un contenuto strutturato, ma l’intero contenuto del post \u00e8 all’interno di un blocco "Editor classico".<\/p>\n L’array restituito dalla funzione Possiamo tranquillamente presumere che se il ritorno di un post WordPress offre anche una funzione per eseguire il rendering di un blocco specifico con Il codice sopra visualizzer\u00e0 tutti i blocchi del post, proprio come farebbe normalmente durante il rendering del contenuto del post. La parte divertente arriva quando iniziamo ad aggiungere codice per escludere o includere blocchi specifici che ci interessano.<\/p>\n Ad esempio, il codice seguente stamper\u00e0 solo i blocchi di paragrafo del post:<\/p>\n E questo render\u00e0 tutti i blocchi, ma escluder\u00e0 tutti i blocchi shortcode:<\/p>\n Quando analizzi i blocchi di un post, molto probabilmente dovrai controllare il tipo di blocco. Sono abbastanza semplici da indovinare. Ad esempio, un blocco di paragrafo \u00e8, hai indovinato, Per evitare ipotesi selvagge, ecco una panoramica dei blocchi predefiniti forniti da WordPress (al momento della stesura di questo):<\/p>\n Incorporare: Twitter: Youtube: Facebook: Instagram: WordPress: SoundCloud: Spotify: Flickr: Vimeo: Animato: Cloudup: Segnale di massa: Movimento quotidiano: Hulu: Imgur: Problema: Kickstarter: Meetup.com: Mixcloud: Reddit: ReverbNation: Screencast: Scribd: Condivisione diapositive: Tazza compiaciuta: Piattaforma degli altoparlanti: TED: Tumblr: Videostampa: wordpress.tv: Amazon Kindle: Un post ben scritto dovrebbe iniziare con un paragrafo che introduca di cosa tratta il post e inviti le persone a continuare a leggere. Questi sono perfetti da usare come estratti invece di fare affidamento sulla funzione di estratto automatico in WordPress!<\/p>\n Questa \u00e8 una funzione che puoi aggiungere al tuo tema Dopo la Per utilizzare questa funzione \u00e8 sufficiente chiamare:<\/p>\n Supponendo che la chiamata di funzione sia collocata da qualche parte c’\u00e8 un Puoi generare automaticamente e dinamicamente un sommario basato sui blocchi di intestazione di un post. Il processo \u00e8 abbastanza semplice; analizza i blocchi del post e trova tutti i blocchi di tipo Un blocco di intestazione contiene informazioni sul suo livello nell’elemento dell’array di attributi (tasto ‘ Tuttavia, tieni presente che Se sei davvero all’altezza della sfida, ti invito a migliorare il codice qui sotto. Il problema della generazione di un elenco strutturato adeguato Ecco la funzione del sommario:<\/p>\n La funzione inizia con la gestione del post e l’analisi dei suoi blocchi. In linea Dopo il ciclo del blocco, l’ [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Come parametro devi fornire una stringa del contenuto di un post. Se sei all’interno di un loop o hai accesso a un oggetto post, fornisci semplicemente $post->post_content<\/code>come parametro alla funzione.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>\u00e8 un array in cui ogni elemento dell’array \u00e8 un blocco. Per ogni elemento del blocco hai informazioni come il tipo di blocco (tasto ‘ blockName<\/code>‘), gli attributi del blocco (tasto ‘ attrs<\/code>‘), i blocchi interni per i blocchi nidificati come Colonne (tasto ‘ innerBlocks<\/code>‘) e due elementi per il contenuto effettivo del blocco (chiavi ‘ innerHTML<\/code>‘ e ‘ innerContent<\/code>‘). L’elemento innerHTML<\/code>\u00e8 una stringa di contenuto HTML, mentre innerContent<\/code>\u00e8 un array di stringhe HTML.<\/p>\nparse_blocks()<\/code>per fare le tue cose. Vedremo altri esempi di codice di questo pi\u00f9 in basso in questo post.<\/p>\nUna nota sui post classici (non Gutenberg).<\/h2>\n
parse_blocks()<\/code>su questo tipo di post restituir\u00e0 un elemento dell’array di blocchi con blockName<\/code>set to null<\/code>. Il contenuto HTML completo del post \u00e8 all’interno della innerHTML<\/code>stringa di questo elemento.<\/p>\nparse_blocks()<\/code>ha un elemento ed blockName<\/code>\u00e8 null<\/code>, abbiamo a che fare con un post "pre-Gutenberg". Altrimenti blockName<\/code>sar\u00e0 sempre popolato. Questo \u00e8 un buon controllo da tenere a mente quando si scrive il codice per analizzare i blocchi dei post e si desidera gestire i contenuti WordPress meno recenti.<\/p>\nRendi un blocco<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Come parametro \u00e8 necessario fornire un array per un blocco, proprio come uno di quelli restituiti parse_blocks()<\/code>dall’alto. La funzione restituisce una stringa di HTML renderizzato che puoi semplicemente richiamare direttamente.<\/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>\nBlocca i nomi<\/h2>\n
paragraph<\/code>. Tuttavia, tieni presente che tutti i blocchi Gutenberg in WordPress sono preceduti da uno spazio dei nomi. Per i blocchi principali di WordPress (predefiniti), sono tutti preceduti da " core\/<\/code>". L’eccezione sono i blocchi Embed che sono preceduti da ” core-embed\/<\/code>“. Quindi, ad esempio, un blocco di paragrafo avr\u00e0 il nome del blocco core\/paragraph<\/code>.<\/p>\nBlocchi comuni<\/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>\nFormattazione<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(ma per i post non Gutenberg sar\u00e0 null<\/code>, vedi la nota sui post non Gutenberg)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nDisposizione<\/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>\nWidget<\/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>\nIncorpora<\/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>\nEsempio di codice: recupera il primo paragrafo di un post come estratto<\/h2>\n
functions.php<\/code>che restituir\u00e0 il primo paragrafo di un post. Se non \u00e8 stato fornito alcun post, far\u00e0 riferimento all’oggetto post globale. Accoglie anche post non Gutenberg restituendo l’effettivo estratto di WordPress per quelli.<\/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>chiamata della funzione controlliamo se il post ha o meno dati di blocco non validi (il post \u00e8 stato creato prima di Gutenberg) e restituiamo un estratto del post in tal caso. Altrimenti andiamo in rassegna i blocchi del post, troviamo il primo blocco di paragrafo e restituiamo il suo innerHTML<\/code>. Alla fine restituiamo una stringa con (questo \u00e8 facoltativo) a <div><\/code>attorno ad essa.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>oggetto globale, ad esempio all’interno di un ciclo. Se vuoi specificare un post, fornisci l’oggetto post come parametro per la chiamata di funzione:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nEsempio: crea un sommario dalle intestazioni di un post<\/h2>\n
core\/heading<\/code>. Ma possiamo fare un ulteriore passo avanti e incorporare i livelli; es. mettendo h3<\/code>come sottotitolo sotto h2<\/code>e cos\u00ec via.<\/p>\nattrs<\/code>‘). All’interno attrs<\/code>dell’array sarebbe un elemento dell’array con la chiave ‘ level<\/code>‘ e un numero intero che indica il livello. A h3<\/code>avrebbe ‘ level<\/code>‘ valore di 3<\/code>, a h4<\/code>avrebbe ‘ level<\/code>‘ di 4<\/code>, e cos\u00ec via.<\/p>\nattrs<\/code>per i blocchi di intestazione possono essere vuoti! Ci\u00f2 accade quando l’autore non ha modificato il tipo di intestazione lontano dai valori predefiniti nelle impostazioni del blocco. Per aggirare questo problema, dobbiamo fare alcune ipotesi. Come saranno i titoli predefiniti h2<\/code>(a meno che tu non lo abbia modificato nel tuo tema). Quindi possiamo presumere che se un blocco di intestazione non ha un attributo di livello, \u00e8 un h2<\/code>. Altrimenti otteniamo le informazioni sul livello dagli attributi.<\/p>\nol<\/code>\u00e8 che non possiamo controllare come l’autore struttura i propri titoli. Potrebbero benissimo impazzire e iniziare con h4<\/code>un’intestazione e passare direttamente a h2<\/code>un’intestazione subito dopo. E all’improvviso si mescolano a h1<\/code>nel mezzo. La mia soluzione prevede quindi la generazione di un ol<\/code>elenco semplice e la fornitura delle informazioni di livello nelle classi dell’elemento dell’elenco. Quindi con alcuni CSS intelligenti puoi indentare gli elementi dell’elenco di conseguenza con un po’ di riempimento sinistro.<\/p>\nIl codice<\/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>accogliamo posti non Gutenberg. La funzione continua a scorrere tutti i blocchi e ogni volta che trova un blocco di intestazione viene aggiunto al nostro $headings<\/code>array. Usiamo [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>per rimuovere i tag HTML dai titoli. Aggiungiamo anche le informazioni sul livello al nostro array, dove il valore predefinito \u00e8 impostato su 2<\/code>se gli attributi sono vuoti.<\/p>\n$headings<\/code>array dovrebbe contenere tutte le intestazioni del post, in ordine. Possiamo quindi semplicemente generare una stringa HTML e visualizzarne il contenuto. Come accennato, genero un nome di classe su ogni elemento con informazioni sul livello dell’intestazione in modo da poter creare l’illusione di un elenco strutturato con CSS.<\/p>\n