Dans cet article, nous verrons comment analyser les blocs Gutenberg d’un article et extraire des blocs sp\u00e9cifiques pour cr\u00e9er autre chose. Nous examinerons les fonctions PHP de WordPress pour l’analyse, l’extraction et le rendu des blocs choisis.<\/p>\n
L’un des avantages du nouvel \u00e9diteur Gutenberg dans WordPress est des donn\u00e9es plus structur\u00e9es pour le contenu des publications. Autrefois, tout \u00e9tait stock\u00e9 au format HTML et il n’y avait aucun moyen d’extraire des \u00e9l\u00e9ments de contenu sp\u00e9cifiques sans quelques expressions r\u00e9guli\u00e8res tr\u00e8s complexes. Mais avec Gutenberg, chaque \u00e9l\u00e9ment de contenu, qu’il s’agisse d’un paragraphe, d’un titre, d’une image, d’une vid\u00e9o, d’un bouton ou d’une colonne contenant d’autres blocs, est stock\u00e9 avec des informations qui nous indiquent ce qu’est cet \u00e9l\u00e9ment de contenu.<\/p>\n
Avec les fonctions WordPress int\u00e9gr\u00e9es, il est tr\u00e8s facile de r\u00e9cup\u00e9rer tous les blocs du contenu d’un article dans un tableau avec toutes leurs informations. Cela ouvre de nombreuses fonctionnalit\u00e9s utiles pour les d\u00e9veloppeurs de th\u00e8mes. Juste pour mentionner quelques id\u00e9es :<\/p>\n
Allons droit au but\u00a0!<\/p>\n
Pour analyser les blocs, nous utilisons la fonction WordPress Le retour de Et c’est tout! Faites une boucle dans le tableau renvoy\u00e9 \u00e0 partir de Vous travaillez peut-\u00eatre sur un site WordPress plus ancien qui a cr\u00e9\u00e9 des publications avant la mise \u00e0 niveau vers Gutenberg (ou utilis\u00e9 un plugin D\u00e9sactiver Gutenberg). Dans ce cas, ces publications n’auront pas de contenu de publication structur\u00e9, mais l’int\u00e9gralit\u00e9 du contenu de la publication se trouvera dans un bloc "\u00c9diteur classique".<\/p>\n Le tableau renvoy\u00e9 par la fonction Nous pouvons supposer en toute s\u00e9curit\u00e9 que si le retour d’un article sur WordPress propose \u00e9galement une fonction pour rendre un bloc sp\u00e9cifique avec Le code ci-dessus rendra tous les blocs de la publication, comme il le ferait normalement lors du rendu du contenu de la publication. La partie amusante survient lorsque nous commen\u00e7ons \u00e0 ajouter du code pour exclure ou inclure des blocs sp\u00e9cifiques qui nous int\u00e9ressent.<\/p>\n Par exemple, le code ci-dessous n’imprimera que les blocs de paragraphes de l’article\u00a0:<\/p>\n Et cela rendra tous les blocs, mais exclura tous les blocs de shortcode\u00a0:<\/p>\n Lors de l’analyse des blocs d’un article, vous devrez probablement v\u00e9rifier le type de bloc. Ils sont assez simples \u00e0 deviner. Par exemple, un bloc Paragraphe est, vous l’aurez devin\u00e9, Pour \u00e9viter les devinettes, voici un aper\u00e7u des blocs par d\u00e9faut fournis par WordPress (au moment d’\u00e9crire ceci) :<\/p>\n Int\u00e9grer\u00a0: Twitter: Youtube: Facebook: Instagram : WordPress : Sound Cloud\u00a0: Spotify\u00a0: Flickr\u00a0: Vim\u00e9o\u00a0: Animoto : Nuage vers le haut\u00a0: Signal de foule\u00a0: Daily motion : Hulu : Imgur\u00a0: Publier: Lanceur\u00a0: Meetup.com\u00a0: Mix cloud\u00a0: Reddit\u00a0: ReverbNation : Capture d’\u00e9cran\u00a0: Script : Slideshare\u00a0: SmugMug\u00a0: Plate-forme de haut-parleur\u00a0: TED\u00a0: Tumblr\u00a0: Vid\u00e9oPress\u00a0: wordpress.tv\u00a0: Kindle d’Amazon: Un article bien r\u00e9dig\u00e9 devrait commencer par un paragraphe qui pr\u00e9sente le sujet de l’article et inciter les gens \u00e0 continuer \u00e0 lire. Ceux-ci sont parfaits pour \u00eatre utilis\u00e9s comme extraits au lieu de compter sur la fonction d’extrait automatique de WordPress !<\/p>\n Il s’agit d’une fonction que vous pouvez ajouter \u00e0 votre th\u00e8me et Apr\u00e8s l’ Pour utiliser cette fonction, il suffit d’appeler :<\/p>\n En supposant que l’appel de fonction est plac\u00e9 quelque part, il y a un objet global Vous pouvez g\u00e9n\u00e9rer automatiquement et dynamiquement une table des mati\u00e8res bas\u00e9e sur les blocs d’en-t\u00eate d’un article. Le processus est assez simple; analyser les blocs de la publication et trouver tous les blocs de type Un bloc d’en-t\u00eate contient des informations sur son niveau dans l’\u00e9l\u00e9ment de tableau d’attributs (cl\u00e9 ‘ Cependant, notez que Si vous \u00eates vraiment pr\u00eat \u00e0 relever le d\u00e9fi, je vous invite \u00e0 am\u00e9liorer le code ci-dessous. Le probl\u00e8me de la g\u00e9n\u00e9ration d’une liste structur\u00e9e appropri\u00e9e Voici la fonction table des mati\u00e8res :<\/p>\n La fonction commence par g\u00e9rer la publication et analyser ses blocs. En ligne, Apr\u00e8s la boucle de bloc, le [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. En tant que param\u00e8tre, vous devez fournir une cha\u00eene du contenu d’un article. Si vous \u00eates dans une boucle ou avez acc\u00e8s \u00e0 un objet de publication, fournissez simplement $post->post_content<\/code>comme param\u00e8tre \u00e0 la fonction.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>est un tableau o\u00f9 chaque \u00e9l\u00e9ment du tableau est un bloc. Pour chaque \u00e9l\u00e9ment de bloc, vous disposez d’informations telles que le type de bloc (cl\u00e9 ‘ blockName<\/code>‘), les attributs de bloc (cl\u00e9 ‘ attrs<\/code>‘), les blocs internes pour les blocs imbriqu\u00e9s tels que les colonnes (cl\u00e9 ‘ innerBlocks<\/code>‘) et deux \u00e9l\u00e9ments pour le contenu r\u00e9el du bloc (cl\u00e9s ‘ innerHTML<\/code>‘ et ‘ innerContent<\/code>‘). L’\u00e9l\u00e9ment innerHTML<\/code>est une cha\u00eene de contenu HTML, alors qu’il innerContent<\/code>s’agit d’un tableau de cha\u00eenes HTML.<\/p>\nparse_blocks()<\/code>pour faire votre travail. Nous examinerons plus d’exemples de code plus loin dans cet article.<\/p>\nUne note sur les messages classiques (non Gutenberg)<\/h2>\n
parse_blocks()<\/code>renverra sur ce type de messages un \u00e9l\u00e9ment de tableau de bloc avec blockName<\/code>la valeur null<\/code>. Le contenu HTML complet de la publication se trouve dans la innerHTML<\/code>cha\u00eene de cet \u00e9l\u00e9ment.<\/p>\nparse_blocks()<\/code>a un \u00e9l\u00e9ment et que blockName<\/code>c’est null<\/code>, nous avons affaire \u00e0 un article "pr\u00e9-Gutenberg". Sinon blockName<\/code>, sera toujours peupl\u00e9. C’est une bonne v\u00e9rification \u00e0 garder \u00e0 l’esprit lorsque vous \u00e9crivez du code pour analyser les blocs de publications et que vous souhaitez g\u00e9rer du contenu WordPress plus ancien.<\/p>\nRendre un bloc<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. En tant que param\u00e8tre, vous devez fournir un tableau pour un bloc, tout comme l’un de ceux renvoy\u00e9s parse_blocks()<\/code>ci-dessus. La fonction renvoie une cha\u00eene de code HTML rendu que vous pouvez simplement r\u00e9percuter directement.<\/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>\nBloquer les noms<\/h2>\n
paragraph<\/code>. Cependant, gardez \u00e0 l’esprit que tous les blocs Gutenberg dans WordPress sont pr\u00e9c\u00e9d\u00e9s d’un espace de noms. Pour les blocs de base WordPress (par d\u00e9faut), ils sont tous pr\u00e9fix\u00e9s par " core\/<\/code>". L’exception sont les blocs Embed qui sont pr\u00e9fix\u00e9s par " core-embed\/<\/code>". Ainsi, par exemple, un bloc de paragraphe aura le nom du bloc core\/paragraph<\/code>.<\/p>\nBlocs communs<\/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>\nMise en page<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(mais pour les messages non Gutenberg, ce sera null<\/code>, voir la note sur les messages non Gutenberg)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nDisposition<\/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>\nInt\u00e8gre<\/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>\nExemple de code\u00a0: R\u00e9cup\u00e9rer le premier paragraphe d’un message sous forme d’extrait<\/h2>\n
functions.php<\/code>qui renverra le premier paragraphe d’un article. Si aucun article n’a \u00e9t\u00e9 fourni, il fera r\u00e9f\u00e9rence \u00e0 l’objet de publication global. Il accepte \u00e9galement les messages non Gutenberg en renvoyant l’extrait WordPress r\u00e9el pour ceux-ci.<\/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>appel de la fonction, nous v\u00e9rifions si la publication contient ou non des donn\u00e9es de bloc invalides (la publication a \u00e9t\u00e9 cr\u00e9\u00e9e avant Gutenberg) et renvoyons un extrait de publication si tel est le cas. Sinon, nous parcourons les blocs de l’article, trouvons le premier bloc de paragraphe et renvoyons son innerHTML<\/code>. \u00c0 la toute fin, nous renvoyons une cha\u00eene avec (ceci est facultatif) un <div><\/code>autour.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>, par exemple \u00e0 l’int\u00e9rieur d’une boucle. Si vous souhaitez sp\u00e9cifier un post, fournissez l’objet post comme param\u00e8tre \u00e0 l’appel de fonction\u00a0:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nExemple\u00a0: Cr\u00e9er une table des mati\u00e8res \u00e0 partir des titres d’un article<\/h2>\n
core\/heading<\/code>. Mais nous pouvons aller plus loin et incorporer des niveaux ; par exemple mettre h3<\/code>comme sous-titre sous h2<\/code>et ainsi de suite.<\/p>\nattrs<\/code>‘). \u00c0 l’int\u00e9rieur du attrs<\/code>tableau, ce serait un \u00e9l\u00e9ment de tableau avec la cl\u00e9 ‘ level<\/code>‘ et un entier signifiant le niveau. A h3<\/code>aurait ‘ level<\/code>‘ la valeur de 3<\/code>, a h4<\/code>aurait ‘ level<\/code>‘ de 4<\/code>, et ainsi de suite.<\/p>\nattrs<\/code>pour les en-t\u00eates, les blocs peuvent \u00eatre vides! Cela se produit lorsque l’auteur n’a pas modifi\u00e9 le type de titre par rapport aux valeurs par d\u00e9faut dans les param\u00e8tres du bloc. Pour contourner cela, nous devons faire quelques hypoth\u00e8ses. Comme les en-t\u00eates par d\u00e9faut seront h2<\/code>(sauf si vous avez chang\u00e9 cela dans votre th\u00e8me). Nous pouvons donc supposer que si un bloc d’en-t\u00eate n’a pas d’attribut de niveau, c’est un h2<\/code>. Sinon, nous obtenons les informations de niveau \u00e0 partir des attributs.<\/p>\nol<\/code>est que nous ne pouvons pas contr\u00f4ler la fa\u00e7on dont l’auteur structure ses titres. Ils pourraient tr\u00e8s bien devenir fous et commencer par un h4<\/code>titre et passer directement \u00e0 un h2<\/code>titre juste apr\u00e8s. Et du coup ils m\u00e9langent un h1<\/code>au milieu. Ma solution consiste donc \u00e0 g\u00e9n\u00e9rer une liste plate ol<\/code>et \u00e0 fournir les informations de niveau dans les classes de l’\u00e9l\u00e9ment de liste. Ensuite, avec un CSS intelligent, vous pouvez indenter les \u00e9l\u00e9ments de la liste en cons\u00e9quence avec un rembourrage \u00e0 gauche.<\/p>\nLe code<\/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>nous accueillons les messages non Gutenberg. La fonction continue de parcourir tous les blocs et chaque fois qu’elle trouve un bloc d’en-t\u00eate, elle est ajout\u00e9e \u00e0 notre $headings<\/code>tableau. Nous utilisons [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>pour supprimer les balises HTML des titres. Nous ajoutons \u00e9galement les informations de niveau \u00e0 notre tableau, o\u00f9 la valeur par d\u00e9faut est d\u00e9finie sur 2<\/code>si les attributs sont vides.<\/p>\n$headings<\/code>tableau doit contenir tous les titres du message, dans l’ordre. Nous pouvons alors simplement g\u00e9n\u00e9rer une cha\u00eene HTML et afficher son contenu. Comme mentionn\u00e9, je g\u00e9n\u00e8re un nom de classe sur chaque \u00e9l\u00e9ment avec des informations sur le niveau du titre afin que nous puissions cr\u00e9er l’illusion d’une liste structur\u00e9e avec CSS.<\/p>\n