2. Avec WPCode

Sur le fond le principe reste le même, nous avons la possibilité d’injecter du code HTML, Javascript, CSS … via l’extension WPCode qui permet de positionner les snippets quelque part dans un article ou une page WordPress.

Un exemple : une liste à puces

Prenons le cas d’une table JavaScript avec deux ou trois colonnes qui est utilisée pour générer une liste avec des puces, via une fonction du type Disp_Nodes_Item_UL de GXMLDISPLAY. J’utilise ce type d’approche dans des blocs de navigation en entête de quelques guides sur le site. Le code qui est inséré dans un article sera du type :

Nous avons un composant de type accordéon (accordion) qui va s’ouvrir quand on clique dessus et qui va révéler un shortcode wpcode qui identifie un fragment de code. Cet extrait va afficher le contenu d’une table JavaScript qui contient des numéros de chapitres ainsi que des hyperliens permettant d’accéder aux articles correspondants, démonstration :

Les données, sélecteurs, afficheurs

Le un shortcode WPCode identifié par id="1291"  renvoie vers un snippet (de type HTML dans la terminologie du plugin) qui contient les données (une table JavaScript) et des fonctions, similaires à celles qui sont utilisées dans GXMLDISPLAY, dans ce cas précis nous avons :

Ici nous utilisons une définition directe, il n’est pas nécessaire de passer par un objet JavaScript. La table data_array inclue 3 colonnes dont deux (SECTION et TITLE) sont affichées, la troisième (colonne EXPOSE) sert à définir si la ligne sera affichée ou pas (contenu "yes" ou autre chose). Ce qui permet de mettre en place des menus (et un ordre d’apparition) alors que les articles correspondants ne sont pas encore publiés, ce qui explique aussi la règle gxmldisplay_selector('y','EXPOSE','yes','inc').

Enfin, la dernière ligne provoque l’affichage de la table sous la forme d’une liste à puces dans le conteneur <DIV> identifié par ResultDiv et qui est également inclus dans l’extrait de code.

Les composants d’affichage

Cette liste s’affichera à l’endroit de l’article ou le shortcode est positionné, et va utiliser GXMLDISPLAY qui est défini dans un autre extrait de code. Ici il s’agit d’un extrait Javascript et non d’un extrait HTML, nous reconnaissons le début de la fonction Disp_Nodes_Table :

Chaque extrait (Texte, HTML, JavaScript, PHP, CSS …)  est visible et activable dans l’interface de WPCode, nous constatons dans l’image suivante la présence de composants JavaScript, d’une feuille de style CSS, et d’un extrait (id = 1095) similaire à celui que nous venons de prendre pour exemple :

Il faut organiser la cohérence entre l’ensemble de ces extraits, mais ce n’est pas très différent de l’utilisation dans une page HTML classique. Il est donc possible d’avoir des ilots de données que l’on peut appeler à partir de plusieurs articles. Dans le cadre d’un blog je l’utilise comme des listes d’items, avec une centralisation de l’information dans les extraits de code et non dans les articles. Il s’agit de listes simples, rien n’empêche de les enrichir par des données textuelles et d’en faire autre chose.