Create-block : une librairie pour démarrer rapidement ses projets Gutenberg

Sommaire du cours

  1. Qu’est-ce que create-block ?
  2. Prérequis
  3. Mise en place de create-block
    1. 1. Installer create-block
    2. 2. Lancer Webpack
    3. 3. Pour plus tard : mise en production
  4. Analyse de l’arborescence de notre extension
    1. Build : les fichiers de production
    2. Nodes modules : les dépendances du projet
    3. Src : le dossier de travail
    4. Le fichier capitainewp-gut-bases.php
    5. Vous ĂȘtes prĂȘt Ă  crĂ©er votre premier bloc

Qu’est-ce que create-block ?

Aujourd’hui, pour faire du javascript moderne, on a besoin d’outils en tous genres pour vĂ©rifier et compiler le code, le rendre compatible avec les navigateurs


Et tout cela nĂ©cessite gĂ©nĂ©ralement pas mal d’outils et beaucoup de configuration via Webpack et NPM.

On utilise notamment :

  • Webpack : qui va permettre de surveiller notre dossier et lancer les opĂ©rations nĂ©cessaires lors d’un changement de fichier
  • Babel : qui compile le javascript moderne et en crĂ©e une version rĂ©trocompatible
  • React : la librairie JS de facebook utilisĂ©e par Gutenberg pour gĂ©rer l’éditeur visuel
  • JSLint : qui permet de vĂ©rifier que notre code ne contient pas d’erreurs
  • 


MĂȘme les habituĂ©s de Webpack et du dĂ©veloppement en JS passent du temps pour faire de telles configurations.

Create-block est un set d’outils (un toolkit en anglais) qui ne nĂ©cessite aucune configuration prĂ©alable et qui va mettre en place toute la structure nĂ©cessaire au dĂ©veloppement de blocs Gutenberg avec React.

En d’autre termes, on installe le projet, on commence Ă  coder, et on oublie les soucis. Et ça, ça me plait !

Je dois avouer que j’ai Ă©tĂ© conquis par ce projet. Comme je le dis tout le temps je ne suis pas un grand fan de la ligne de commande. Mais pour le coup je dois avouer que tout fonctionne Ă  merveille du premier coup !

Allez maintenant si vous le voulez bien, lançons-nous dans l’installation de create-block :

Prérequis

Comme on l’a vu dans les cours prĂ©cĂ©dents, nous allons avoir prĂ©alablement besoin d’installer NodeJS, (version 8 au minimum), le serveur Javascript qui nous permettra de lancer des commandes NPM.

Il nous faut aussi un outil de ligne de commande comme Powershell sur Windows et le terminal sur Mac. Les deux sont dĂ©jĂ  installĂ©s avec le systĂšme.

Une fois que l’on Ă  ça, il suffit de nous rendre sur la page du projet create-block sur la documentation WordPress pour voir un peu de quoi il en retourne.

Mise en place de create-block

D’aprĂšs la documentation, nous n’avons rien besoin de tĂ©lĂ©charger. Il faudra simplement taper quelques lignes de commandes pour initialiser un nouveau plugin avec toute la configuration nĂ©cessaire Ă  Gutenberg.

Avant toute chose, si ce n’est pas dĂ©jĂ  fait, on va installer une instance de WordPress en local. Pour cela vous pouvez utiliser l’excellent Local WP, dont un cours est dĂ©diĂ© dans la formation dĂ©velopper un thĂšme sur mesure.

Installer un site en local
Préparer un nouveau site avec Local

Ok ! De lĂ  retenez-bien le chemin de votre site, le Site Path sur Local, car on va devoir y aller en ligne de commande.

1. Installer create-block

On va ouvrir notre terminal et se dĂ©placer dans notre projet grĂące Ă  la commande cd (pour change directory).

On va devoir se rendre directement dans le dossier des extensions de notre site fraichement installé:

cd /Sites/gutenberg/app/public/wp-content/plugins

Adaptez cette ligne en fonction d’oĂč est installĂ© votre site. Si vous n’utilisez pas Local alors vous n’aurez pas besoin de la partie /app/public/.

Conseil

Dans le cas oĂč un dossier contient des espaces, comme Local Sites, pensez Ă  les Ă©chapper avec un backslash \ (Alt + Maj + / sur Mac).

L’autre solution serai d’ouvrir le dossier plugins via votre explorateur de fichiers, faire un clic droit dessus et sĂ©lectionner : Nouveau terminal au dossier.

L'explorateur de fichiers, et le menu pour ouvrir le terminal dans le dossier présenté
Une alternative pour ouvrir votre terminal sur le bon dossier

De lĂ  on va lancer la commande d’installation de create-block. Cette commande va crĂ©er le dossier de l’extension, donc vous n’avez pas besoin de le faire manuellement.

SHELL

1npx @wordpress/create-block capitainewp-gut-bases

Remplacez « capitainewp-gut-bases Â» par le nom que vous souhaitez donner Ă  votre extension. Notez Ă©galement que npx est une commande dĂ©rivĂ©e de npm.

Le terminal de MacOS avec la commande NPX visant Ă  installer create-block
Lancez la commande NPX

Patientez quelques secondes, le temps que les packages soient téléchargés et installés. Tout se fait automatiquement.

Une fois l’installation terminĂ©e, vous devriez avoir cet Ă©cran :

Le terminal indique que create-block a été installé avec succÚs dans votre dossier plugins
L’installation est terminĂ©e !

Vous devriez voir votre nouveau dossier dans plugins/ :

L'architecture de votre extension dans votre explorateur de fichiers
Voici à quoi ressemble votre plugin dans l’explorateur de fichiers

C’est parfait ! On peut maintenant lancer Webpack.

2. Lancer Webpack

De lĂ , comme vous le suggĂšre le terminal, il vous suffit de taper :

SHELL

cd capitainewp-gut-bases
npm start

LĂ  encore adaptez en fonction du nom de votre extension.

Au prochain dĂ©marrage de votre ordinateur, il ne faudra pas oublier de relancer Webpack. Pour cela vous ferez :

SHELL

cd /Sites/gutenberg/app/public/wp-content/plugins/capitainewp-gut-bases
npm start

Voici ce que devrait afficher votre terminal :

Le terminal affiche diffĂ©rentes informations, comme le fait que Webpack est bien lancĂ© et prĂȘt Ă  compiler les fichiers
Wepack est lancĂ©, prĂȘt Ă  compiler les fichiers de l’extension

Le terminal indique qu’il surveille le dossier en vue de changements et que la compilation s’est bien dĂ©roulĂ©e. C’est le signe que tout fonctionne correctement !

Le jour ou vous aurez une erreur de compilation, ou une erreur React, elle s’affichera dans cette fenĂȘtre, en rouge.

Conseil

Vous pourriez également lancer directement cette commande depuis le terminal intégré de VSC si vous utilisez cet éditeur de code. Pour cela cliquez sur Terminal > New terminal.

Le terminal sera directement ouvert dans le bon dossier, et vous aurez tout dans une seule fenĂȘtre :

Le terminal de Visual Studio Code
La console dans VSC

De cette maniĂšre, vous verrez immĂ©diatement l’état de la compilation ainsi que toute erreur qui s’afficherait en rouge dans la zone infĂ©rieure.

Ok c’est parfait ! Comme promis, il n’y a eu aucune configuration difficile ni le besoin de traiter avec Webpack directement.

3. Pour plus tard : mise en production

Lorsque votre extension sera prĂȘte pour la production, il faudra lancer la commande npm run build afin de crĂ©er une version optimisĂ©e de l’extension.

Analyse de l’arborescence de notre extension

Allez, maintenant que c’est installĂ© on va rapidement jeter un oeil Ă  notre extension. Voici son arborescence :

FenĂȘtre du systĂšme montrant l'arborescence des dossiers et fichiers gĂ©nĂ©rĂ©s par create-block
L’arborescence des fichiers de notre extension de blocs

Build : les fichiers de production

Dans build, vous retrouvez plusieurs fichiers, qui sont le rĂ©sultat de la compilation par Webpack :

  • index.js est le JS compilĂ© par Webpack qui contient tout le code de vos blocks.
  • style-index.css est le CSS pour le front-end, qui contient les styles de vos blocks
  • index.css : le CSS pour le back-end, pour des styles supplĂ©mentaires
  • block.json : qui contient la dĂ©finition de votre bloc ainsi que certains paramĂštres

Conseil

Du cĂŽtĂ© de l’administration WordPress, on va parfois avoir besoin de crĂ©er des styles CSS spĂ©ciaux pour les champs Ă©ditables de nos blocks ou pour surcharger un style de l’admin. C’est pour cette raison que l’on a une feuille de style spĂ©cifique pour l’éditeur.

Vous pouvez jeter un oeil au fichier index.js compilĂ© mais vous verrez un code vraiment pas sexy : c’est le code compilĂ© rĂ©trocompatible gĂ©nĂ©rĂ© par Webpack.

Nodes modules : les dépendances du projet

On retrouve Ă©galement le dossier nodes_modules. Regardez le nombre de dossiers qu’il contient : ce sont toutes les dĂ©pendances nĂ©cessaires au projet (il faut savoir que certaines dĂ©pendances ont aussi leurs propres dĂ©pendances).

C’est le fichier package.json qui est le responsable. D’ailleurs si vous l’ouvrez vous ne verrez qu’une dĂ©pendance Ă  @wordpress/scripts. C’est cette librairie qui appelera toutes les sous-dĂ©pendances nĂ©cessaires au bon fonctionnement du projet.

Vous pourrez donc ajouter vos propres dépendances NPM ici si vous en avez le besoin dans votre projet.

Src : le dossier de travail

Le dossier src est celui dans lequel on va travailler. C’est un dossier qui disparait lorsque l’on « build Â» le projet pour le mettre en production car il ne sert qu’au dĂ©veloppeur.

Le fichier src/index.js est le script de base de notre premier bloc. Il est accompagnĂ© de edit.js ainsi que save.js. On va analyser tout cela en dĂ©tail un peu plus tard. On retrouve Ă©galement block.json qui permet de dĂ©finir l’existence du bloc.

D’ailleurs, lorsque l’on ajoutera d’autres blocs, il faudra lĂ©gĂšrement modifier cette structure de base.

On retrouve Ă©galement un fichier editor.scss et un autre style.scss : Webpack les compilera automatiquement dans le bon fichier CSS.

Aparté: Les préprocesseurs CSS

Un petit mot sur les prĂ©processeurs CSS comme Sass : leur objectif est de vous simplifier l’écriture du CSS en proposant des Ă©critures sympathiques :

– Les variables, pour rĂ©utiliser facilement des valeurs

– l’imbrication, afin d’éviter la rĂ©pĂ©tition des sĂ©lecteurs

– la sĂ©paration en plusieurs fichiers, pour mieux organiser votre code


Create-block embarque Sass, le plus utilisé des préprocesseurs CSS. Webpack compilera automatiquement les fichiers.

Si vous n’ĂȘtes pas Ă  l’aise avec les prĂ©processeurs CSS, aucun souci, vous pouvez Ă©crire du CSS standard dans ces fichiers et ça fonctionnera tout aussi bien !

Si vous voulez rĂ©viser ou apprendre les bases en 5 minutes, direction la doc ! Vous allez trĂšs vite gagner du temps sur l’écriture de votre CSS.

Les bases de Sass

En parallĂšle je vous conseille d’installer Emmet sur votre Ă©diteur de code afin d’ĂȘtre au top de l’efficacitĂ© ! Il est dĂ©jĂ  inclus de base dans VSC.

Le fichier capitainewp-gut-bases.php

Enfin, le fichier capitainewp-gut-bases.php (oĂč tout autre nom correspondant au nom de votre projet) contient la dĂ©claration du bloc via la fonction register_block_type() dont on va bientĂŽt reparler.

Il n’y aura mĂȘme pas besoin de charger les scripts et les styles, comme on le fait avec les thĂšmes (voir le cours chargement des ressources) grĂące aux fonctions wp_register_style() et wp_register_script(), car WordPress s’en charge automatiquement pour chaque bloc !

Le nĂ©cessaire a Ă©galement Ă©tĂ© fait pour vous permettre d’internationaliser vos blocs et les traduire dans diffĂ©rentes langues.

Vous ĂȘtes prĂȘt Ă  crĂ©er votre premier bloc

Vous voilĂ  dĂ©sormais pleinement opĂ©rationnel pour crĂ©er vos blocs !

DerniĂšre chose : n’oubliez pas d’activer votre extension avant de continuer. Vous pouvez en profiter pour modifier la description au dĂ©but du fichier capitainewp-gut-bases.php.

L'écran des extensions dans WordPress. Pour le moment, notre extension de blocs Gutenberg n'est pas activée

Centre de ressources

Source : https://kinsta.com/fr/ressources/

Explorer tous les sujets

Le guide ultime des codes courts ou shortcodes WordPress (avec des exemples pour créer les vÎtres)

Source : https://kinsta.com/fr/blog/shortcodes-wordpress/

Les codes courts de WordPress sont une fonction puissante qui permet de faire des trucs sympas avec peu d’efforts. On peut faire Ă  peu prĂšs n’importe quoi avec eux. Avec les codes courts, l’intĂ©gration d’élĂ©ments interactifs ou la crĂ©ation de mises en page complexes est aussi simple que l’insertion d’une seule ligne de code.

Si vous voulez ajouter une galerie, il suffit de saisir le code suivant :

Cela produira une galerie avec les images des IDs mentionnĂ©s. Elle aura 4 colonnes et leur taille maximale sera « moyenne Â» (selon la dĂ©finition de WordPress).

Il n’y a pas besoin d’un code HTML moche.

Exemple de code court de galerie
Exemple de code court de galerie

Les codes courts Ă©liminent le besoin de scripts compliquĂ©s. MĂȘme si vous avez peu ou pas de compĂ©tences en programmation, vous pouvez ajouter du contenu dynamique sans effort avec leur aide.

Ils sont trĂšs populaires au sein des dĂ©veloppeurs de WordPress, car ils aident Ă©normĂ©ment Ă  automatiser la crĂ©ation de contenu et de design. Les codes courts sont aux dĂ©veloppeurs de WordPress ce que les macros sont aux analystes de donnĂ©es, ou les raccourcis clavier aux graphistes professionnels.

Dans ce guide, vous apprendrez tout ce qu’il y a Ă  savoir sur les codes courts. Vous dĂ©couvrirez comment travailler avec l’API des codes courts en crĂ©ant vos propres codes courts. Enfin, nous discuterons de l’avenir des codes courts et de la place qu’ils occupent dans le nouvel Ă©diteur de bloc de WordPress.

Ça vous excite ? Commençons !

Table des matiĂšres

  1. Qu’est-ce qu’un code court ?
  2. Les codes courts par défaut de WordPress
  3. Comment créer un code court personnalisé dans WordPress (niveau débutant)
  4. Codes courts de WordPress : Avantages et inconvénients
  5. Codes courts et blocs Gutenberg

Qu’est-ce qu’un code court ?

En bref, Code court = Raccourci + Code.

En gĂ©nĂ©ral, les codes courts utilisent des balises entre crochets [] pour dĂ©finir leur utilisation. Chaque code court remplit une fonction particuliĂšre dans un site. Elle peut ĂȘtre aussi simple que la mise en forme du contenu ou aussi complexe que la dĂ©finition de la structure du site web dans son ensemble.

Par exemple, vous pouvez utiliser des codes courts pour intĂ©grer des diaporamas, des formulaires, ou les tableaux de tarifs. Vous pouvez mĂȘme les utiliser pour crĂ©er des modĂšles de design de pages rĂ©utilisables.

Une brĂšve histoire des codes courts

Les codes courts ont d’abord Ă©tĂ© rendus populaires par un logiciel de forum en ligne appelĂ© Ultimate Bulletin Board (UBB). En 1998, ils ont introduit le BBCode (Bulletin Board Code), une collection de balises faciles Ă  utiliser pour permettre aux utilisateurs de formater facilement leurs articles.

Formatage facile avec des BBCodes simples
Formatage facile avec des BBCodes simples

En tant que langage de balisage lĂ©ger, le BBCode fonctionne sur les mĂȘmes principes que le HTML, sauf qu’il est beaucoup plus simple.

L’utilisation de balises prĂ©dĂ©finies est Ă©galement beaucoup plus sĂ»re, car les utilisateurs ne peuvent pas insĂ©rer de code HTML et introduire des vulnĂ©rabilitĂ©s en matiĂšre de sĂ©curitĂ©. Par exemple, un utilisateur mal intentionnĂ© pourrait utiliser la balise <script> pour exĂ©cuter du code JavaScript et casser la fonctionnalitĂ© du site.

Peu aprĂšs, d’autres logiciels de forum en ligne tels que phpBBXMB Forum, et vBulletin a ajoutĂ© la fonctionnalitĂ© BBCode dans ses tableaux de message.

Les codes courts ont permis aux administrateurs d’avoir un plus grand contrîle sur ce que leurs utilisateurs peuvent et ne peuvent pas faire. De plus, ils ont permis aux utilisateurs de formater leur contenu par le biais de simples balises.

Pour les mĂȘmes raisons de sĂ©curitĂ©, WordPress empĂȘche le code PHP de s’exĂ©cuter Ă  l’intĂ©rieur du contenu du site. Pour surmonter cette limitation, WordPress 2.5 a introduit la fonctionnalitĂ© des codes courts en 2008 avec la publication d’API de code court. Il s’est avĂ©rĂ© ĂȘtre l’une des fonctionnalitĂ©s les plus utilisĂ©es par de nombreux dĂ©veloppeurs d’extensions et de thĂšmes WordPress.

Que sont les codes courts de WordPress ?

Les codes courts WordPress sont des chaĂźnes de crochets ([ ]) qui se transforment comme par magie en quelque chose de fascinant sur l’interface publique. Ils permettent aux utilisateurs de crĂ©er et de modifier facilement des contenus complexes sans avoir Ă  se soucier de la complexitĂ© du HTML ou des codes d’intĂ©gration.

Les codes courts de WordPress sont simples et faciles Ă  utiliser
Les codes courts de WordPress sont simples et faciles Ă  utiliser

Les 2 types de codes courts

Il existe principalement deux types de codes courts dans WordPress.

Les codes courts d'auto-fermeture et de fermeture peuvent ĂȘtre valides avec ou sans attributs.
Les codes courts d’auto-fermeture et de fermeture peuvent ĂȘtre valides avec ou sans attributs.
  • Codes courts Ă  fermeture automatique : Ils n’ont pas besoin d’une balise de fermeture.

Exemple : Le code court caption n’a pas besoin de balise de fermeture. Nous ajoutons tout ce dont il a besoin avec diffĂ©rents attributs.

  • Codes courts de fermeture : Ces derniers ont besoin d’une balise de fermeture. Les codes courts de fermeture manipulent gĂ©nĂ©ralement le contenu entre les balises d’ouverture et de fermeture.

Exemple : Le code court de caption est utilisĂ© pour entourer une lĂ©gende autour de n’importe quel contenu. Il est principalement utilisĂ© pour ajouter une lĂ©gende aux images, mais il fonctionne avec n’importe quel Ă©lĂ©ment HTML.

Certains codes courts fonctionnent avec ou sans attributs. Cela dépend de la façon dont ils sont définis.

Les codes courts par défaut de WordPress

WordPress est livré avec 6 codes courts par défaut :

  • audio : IntĂ©grez des fichiers audio sur votre site web. Il comprend des commandes de lecture simples comme Play & Pause.
  • caption : Enveloppez votre contenu avec des lĂ©gendes. Il est surtout utilisĂ© pour ajouter des lĂ©gendes d’images, mais vous pouvez l’utiliser pour n’importe quel Ă©lĂ©ment HTML.
  • embed : DĂ©veloppe la fonctionnalitĂ© oEmbed par dĂ©faut. Ce raccourci vous permet de dĂ©finir diffĂ©rents attributs Ă  vos incorporations, comme la dĂ©finition de leurs dimensions maximales.
  • gallery : InsĂ©rez une simple galerie d’images sur votre site. Vous pouvez utiliser des attributs pour dĂ©finir quelles images sont utilisĂ©es et personnaliser l’apparence de la galerie.
  • playlist : Affichez une collection de fichiers audio ou vidĂ©o avec ce code court Ă  fermeture automatique. Vous pouvez lui donner un mode « dark Â» avec son attribut de style.
  • video : IntĂ©grer un fichier vidĂ©o et le lire Ă  l’aide d’un simple lecteur vidĂ©o. Ce code court permet d’intĂ©grer des vidĂ©os dans ces formats : mp4, webm, m4v, webm, ogv, wmv, flv.

Pour plus de dĂ©tails sur la maniĂšre d’utiliser les codes courts par dĂ©faut et sur les attributs qu’ils prennent en charge, vous pouvez vous rĂ©fĂ©rer aux documents du Codex liĂ©s.

Comment utiliser les codes courts de WordPress

L’utilisation des codes courts dans WordPress est un processus simple. Mais cela dĂ©pend de l’endroit oĂč vous voulez les ajouter sur votre site. Assurez-vous de lire la documentation sur les codes courts pour comprendre comment cela fonctionne. Apprenez les attributs qui sont supportĂ©s, afin d’obtenir exactement ce que vous voulez.

Utilisation des codes courts de WordPress dans les pages et les articles

Tout d’abord, allez dans l’éditeur de page ou d’article oĂč vous voulez insĂ©rer le code court.

Si vous utilisez l’éditeur Gutenberg, vous pouvez ajouter la balise de code court dans le bloc autonome Codes courts. On peut la trouver dans la section Widgets.

Ajout d'un bloc de code court Ă  Gutenberg
Ajout d’un bloc de code court à Gutenberg
Le bloc de codes courts de Gutenberg
Le bloc de codes courts de Gutenberg

Vous utilisez toujours l’éditeur classique (ou l’extension Classic Editor) ? Vous pouvez saisir vos codes courts de la maniĂšre classique. Quelques codes courts peuvent mĂȘme avoir un bouton dans l’écran de l’éditeur pour les insĂ©rer facilement.

Ajout d'un code court dans l'Ă©diteur classique
Ajout d’un code court dans l’éditeur classique

Utilisation des codes courts de WordPress dans les widgets de la barre latérale

Des codes courts peuvent Ă©galement ĂȘtre insĂ©rĂ©s dans les widgets de la barre latĂ©rale. Pour les ajouter, allez dans Apparence » Widgets et ajoutez un widget Texte dans la section oĂč vous voulez ajouter le code court.

Ajoutez un code court dans votre barre latérale avec le widget Texte
Ajoutez un code court dans votre barre latérale avec le widget Texte

Collez le code court dans le widget Texte et enregistrez-le. Vous pouvez visiter l’interface publique de votre site et voir le rĂ©sultat du code court dans votre barre latĂ©rale.

L’affichage du code court (galerie) qui peut ĂȘtre vu dans la barre latĂ©rale
L’affichage du code court (galerie) qui peut ĂȘtre vu dans la barre latĂ©rale

Note : WordPress 4.8 et les versions infĂ©rieures ne prennent pas en charge les code court dans les widgets de la barre latĂ©rale. Lisez AmĂ©liorations des widgets dans la mise Ă  jour de WordPress 4.9 pour en savoir plus.

Utilisation des codes courts de WordPress dans l’en-tĂȘte et le pied de page

Les codes courts de WordPress sont en gĂ©nĂ©ral destinĂ©s aux pages, aux articles et aux widgets. Mais vous avez un moyen facile d’insĂ©rer des codes courts n’importe oĂč dans votre site.

Disons que vous voulez ajouter un bouton d’appel Ă  l’action dans votre pied de page, ou dans tous vos articles avant la section des commentaires. La fonction de callback do_shortcode() s’avĂšre utile ici.

Vous devez ajouter le code suivant au fichier header.php ou footer.php de votre thĂšme, ou Ă  l’un de ses fichiers de modĂšle :

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Le code court sera alors affichĂ© Ă  l’endroit oĂč vous l’avez insĂ©rĂ©.

Vous devez inclure les crochets entre les guillemets pour faire Ă©cho au code court. Le simple fait d’inclure son nom ne fonctionnera pas.

De mĂȘme, vous pouvez utiliser la fonction de callback do_shortcode() pour activer les codes courts partout dans WordPress, comme dans la section des commentaires.

Une introduction rapide à l’API des codes courts

L’API des codes courts de WordPress dĂ©finit la maniĂšre dont vous pouvez utiliser les codes courts pour personnaliser et Ă©tendre les fonctionnalitĂ©s de votre site. Il permet aux dĂ©veloppeurs de crĂ©er un contenu unique (par exemple des formulaires, des carrousels, des diaporamas, etc.) que les utilisateurs peuvent ajouter sur leurs sites en collant le code court correspondant.

Vous pouvez ajouter presque toutes les fonctionnalitĂ©s que vous pouvez imaginer Ă  votre site web Ă  l’aide de codes courts.

L’API prend en charge les codes courts Ă  fermeture automatique et les codes courts de fermeture. Cela gĂšre toutes les analyses dĂ©licates et comprend des fonctions d’aide pour dĂ©finir et rĂ©cupĂ©rer les attributs par dĂ©faut.

GrĂące Ă  l’API, vous pouvez vous plonger directement dans le dĂ©veloppement et la personnalisation des codes courts, plutĂŽt que de perdre un temps prĂ©cieux Ă  dĂ©finir des expressions rĂ©guliĂšres pour chaque code court que vous crĂ©ez.

Comprendre les bases de l’API de code court

Chaque fois que vous ouvrez une page ou un article dans WordPress, il recherche les codes courts enregistrés tout en traitant le contenu du site.

Si un code court enregistrĂ© est trouvĂ©, l’API des codes courts prend le relais et renvoie l’affichage du ou des codes courts. La chaĂźne renvoyĂ©e remplace la balise de code court Ă  l’endroit oĂč elle a Ă©tĂ© ajoutĂ©e.

Vous enregistrez un code court dans WordPress avec la fonction add_shortcode(). Voici comment on procĂšde :

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
  • shortcode_name : La balise WordPress sera recherchĂ©e lors de l’analyse du contenu des articles. L’API des codes courts vous recommande de n’utiliser que des lettres minuscules, des chiffres et des underscores pour dĂ©finir sa valeur (Ă©vitez les tirets).
  • shortcode_handler_function : La fonction de callback qui sera exĂ©cutĂ©e aprĂšs que WordPress aura confirmĂ© la prĂ©sence d’un code court enregistrĂ©.
  • La fonction handler shortcode est dĂ©finie comme ceci :
  • function shortcode_handler_function( $atts, $content, $tag ){ }
  • $atts : Un tableau associatif d’attributs (c’est-Ă -dire un tableau de paires clĂ©-valeur). Si vous ne dĂ©finissez aucun attribut, il s’agira par dĂ©faut d’une chaĂźne vide.
  • $content : Le contenu de fermeture, si vous dĂ©finissez un code court de fermeture. C’est la responsabilitĂ© de la fonction handler de s’assurer que la valeur de $content est retournĂ©e Ă  la sortie.
  • $tag : La valeur de la balise du code court (shortcode_name dans l’exemple ci-dessus). Si deux ou plusieurs codes courts partagent la mĂȘme fonction (valide) de callback, la valeur $tag vous aidera Ă  dĂ©terminer quel code court a dĂ©clenchĂ© la fonction handler.

L’API analyse la balise du code court, ses attributs et le contenu inclus (le cas Ă©chĂ©ant) en contournant les valeurs vers la fonction handler, qui les traite et renvoie une chaĂźne de sortie.

Cette chaüne de sortie remplace la macro de raccourci sur l’interface publique de votre site. Ce que vous voyez finalement dans le navigateur, c’est cette sortie.

OĂč ajouter vos scripts personnalisĂ©s de codes courts ?

Vous pouvez ajouter vos scripts personnalisĂ©s de codes courts au fichier functions.php du thĂšme ou les inclure dans une extension.

Si vous l’ajoutez Ă  un fichier de thĂšme, vous pouvez exĂ©cuter la fonction add_shortcode() telle qu’elle.

Mais si vous l’ajoutez Ă  une extension, je vous recommande de ne l’initialiser qu’aprĂšs le chargement complet de WordPress. Vous pouvez vous en assurer en enveloppant la fonction add_shortcode() dans une autre fonction. C’est ce qu’on appelle un enveloppement de fonction :

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

La fonction add_action() accroche la fonction shortcodes_init pour ne se dĂ©clencher qu’une fois le chargement de WordPress terminĂ© (elle est appelĂ©e â€™init’ hook).

Comment créer un code court personnalisé dans WordPress (niveau débutant)

Maintenant que nous avons couvert les bases, il est temps de créer un code court personnalisé.

Pour suivre les Ă©tapes indiquĂ©es ci-dessous, vous devez ĂȘtre familiarisĂ© avec le code PHP et modifier vos fichiers de thĂšme WordPress. Lorsque vous aurez terminĂ© le tutoriel, vous aurez votre premier code court WordPress personnalisĂ© prĂȘt Ă  ĂȘtre lancĂ© !

Nous commencerons par le code court le plus simple possible, puis nous passerons Ă  des codes courts plus complexes. Profitez des courtes Ă©tapes sur le chemin de la maĂźtrise des codes courts !

Exemple 1 : code court utilisant [current_year]

CrĂ©ons un code court appelĂ© [current_year] qui affiche l’annĂ©e en cours sur votre site web.

Ce code court est utile si vous ajoutez Ă  votre site web du contenu qui doit ĂȘtre mis Ă  jour chaque annĂ©e. Par exemple, en ajoutant une mention de droit d’auteur en bas de page de votre site.

Je vais utiliser une extension barebones pour ajouter mes fonctions de code court. Vous pouvez l’ajouter au fichier functions.php de votre thĂšme et obtenir les mĂȘmes rĂ©sultats, mais je ne le recommande pas. Mais c’est bon pour tester et apprendre !

Info

Faites une sauvegarde avant d’apporter des modifications Ă  votre site. Kinsta fournit des sauvegardes automatiques Ă  tous ses clients.

Commençons par crĂ©er une extension. CrĂ©ez un nouveau dossier dans votre rĂ©pertoire /wp-content/plugins/.

Notez l'emplacement du répertoire des extensions
Notez l’emplacement du rĂ©pertoire des extensions

Je nomme mon plugin « salcodes Â» mais vous pouvez lui donner le nom que vous voulez.

Dans le rĂ©pertoire de l’extension salcodes, crĂ©ez un fichier PHP du mĂȘme nom (salcodes.php). Une fois fait, ajoutez l’en-tĂȘte suivant au fichier de votre extension :

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Ce simple en-tĂȘte d’extension est suffisant pour nos besoins. Vous pouvez en savoir plus sur les exigences en matiĂšre d’en-tĂȘte d’extension dans le Codex WordPress. Enregistrez ce fichier, puis allez sur votre Tableau de bord WordPress pour activer l’extension.

Maintenant, enregistrons le code court et sa fonction handler. Pour ce faire, ajoutez le code suivant à votre fichier d’extension :

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>
  • La balise @return dans le commentaire PHP dĂ©finit le type de sortie renvoyĂ©e. Il est suivi d’une brĂšve description de la mĂȘme chose.
  • current_year est la balise ou le nom du code court. Elle dĂ©finit la balise Ă  fermeture automatique que vous devez ajouter Ă  votre contenu, qui dans ce cas serait [current_year].
  • salcodes_year est le nom de la fonction de traitement des codes courts qui renvoie la chaĂźne de sortie. Nous dĂ©finirons cette fonction de rappel dans les prochaines lignes. Comme nous crĂ©ons un simple code court Ă  fermeture automatique, vous n’avez pas Ă  lui transmettre de valeurs variables telles que $attributes, $content ou $tag.
  • salcodes_init est la fonction d’encapsulation qui est reliĂ©e Ă  « init Â» pour s’assurer que le code court est enregistrĂ© et exĂ©cutĂ© seulement aprĂšs que WordPress a fini de se charger. La fonction add_action() intĂ©grĂ©e Ă  WordPress rend cela possible.
  • getdate() est une fonction PHP qui renvoie un tableau d’informations sur la date de l’horodatage actuel. La clĂ© de l’annĂ©e contient la valeur de l’annĂ©e en cours (sous la forme d’une chaĂźne de 4 chiffres). Ainsi, getdate() [‘year’] renvoie l’annĂ©e en cours. Ce rĂ©sultat est exactement ce que nous voulons.

Enregistrez votre fichier d’extension. Il est maintenant temps de vĂ©rifier si le code court fonctionne comme prĂ©vu.

Ajoutez le code court n’importe oĂč dans votre site (page, article, widget de barre latĂ©rale, etc.). Je l’ajoute au widget Texte de la barre latĂ©rale de mon site.

Tester le code court personnalisé en l'ajoutant au site.
Tester le code court personnalisĂ© en l’ajoutant au site.

Et comme prévu, il fonctionne parfaitement.

Affichage du code court de l'année
Affichage du code court de l’annĂ©e

FĂ©licitations pour avoir atteint votre premiĂšre Ă©tape !

Le code court que vous venez de crĂ©er n’a pas de variables $attributes ou $content associĂ©es. Vous apprendrez Ă  les utiliser dans les exemples suivants.

Exemple 2 : Code court pour un bouton d’appel à action

CrĂ©ons un code court de bouton d’appel Ă  action personnalisable. Ce sera aussi une fermeture automatique (dĂ©solĂ© $content, vous devez attendre la prochaine).

Je veux que les utilisateurs puissent personnaliser la taille et la couleur du bouton d’appel à action avec les attributs du code court.

Comme le rĂ©sultat final est un Ă©lĂ©ment de bouton, ses attributs HTML tels que hrefidclasstarget & label peuvent ĂȘtre utilisĂ©s pour le personnaliser facilement.

Vous pouvez utiliser les attributs id et class pour styliser le bouton, car ce sont tous deux des sĂ©lecteurs CSS courants.

Je n’emballe pas ma fonction de gestionnaire ici pour que les choses restent simples à expliquer.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Wouah, il y a beaucoup de choses Ă  dĂ©baller ici. Je vais vous l’expliquer ligne par ligne, pour que vous puissiez comprendre comment cela fonctionne.

  • Nous avons abordĂ© la fonction add_shortcode() et son fonctionnement dans la section prĂ©cĂ©dente.
  • shortcode_atts() est une fonction WordPress qui combine les attributs de code court de l’utilisateur avec des attributs connus. Il remplit les valeurs par dĂ©faut si nĂ©cessaire (vous pouvez Ă©galement les dĂ©finir vous-mĂȘme). Le rĂ©sultat sera un tableau contenant toutes les clĂ©s des attributs connus, fusionnĂ©es avec les valeurs des attributs de codes courts dĂ©finis par l’utilisateur.
  • Dans la fonction de gestion des codes courts, nous dĂ©finissons une variable ($a) et l’affectons au tableau renvoyĂ© par shortcode_atts(). Nous attribuons aux attributs leurs valeurs par dĂ©faut avec la syntaxe : â€˜attribute’ => ‘default-value’Par exemple, dans le code ci-dessus, nous dĂ©finissons la valeur par dĂ©faut de l’attribut label au bouton avec la syntaxe ‘label’ => ‘Button’.
  • Nous pouvons extraire les valeurs de chaque clĂ© d’attribut avec la syntaxe PHP pour les tableaux : $a[‘attribut’].
  • La variable $output stocke le code HTML de l’élĂ©ment bouton (balise <a> avec la classe ‘button’). C’est la chaĂźne qui est finalement renvoyĂ©e par la fonction.

Si vous souhaitez que le lien par dĂ©faut soit l’URL de la page d’accueil du site, vous pouvez utiliser la fonction WordPress home_url().

Essayons d’utiliser le code court tel quel, sans aucun attribut dĂ©fini, et voyons ce qui en ressort.

J'ajoute le code court à un widget de texte de la barre latérale pour le tester.
J’ajoute le code court Ă  un widget de texte de la barre latĂ©rale pour le tester.

Si vous vous demandez Ă  quoi servent les doubles crochets ([[cta_button]]), ils s’appellent codes courts d’escape. Ils vous aident Ă  afficher tout code court enregistrĂ© sur votre site sous forme de texte normal, comme dans l’image ci-dessous.

Affichage du code court du bouton d’appel Ă  action montrant qu'il fonctionne parfaitement comme prĂ©vu
Affichage du code court du bouton d’appel Ă  action montrant qu’il fonctionne parfaitement comme prĂ©vu
La sortie HTML du bouton d’appel à action sans attributs.
La sortie HTML du bouton d’appel à action sans attributs.

Les utilisateurs peuvent personnaliser la taille et la couleur du bouton Ă  l’aide du code court. Nous avons dĂ©jĂ  dĂ©fini leurs valeurs par dĂ©faut dans la fonction de traitement, mais nous devons inscrire et faire figurer la feuille de style dans la liste des ressources disponibles. Cette feuille de style doit comporter toutes les classes dĂ©finies dans le code court.

Vous pouvez Ă©galement dĂ©finir ces classes dans la feuille de style globale de votre thĂšme, mais il est recommandĂ© de les charger sĂ©parĂ©ment. Cela garantit que mĂȘme si vous changez ou mettez Ă  jour votre thĂšme WordPress, ces classes se chargeront toujours avec le code court.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La fonction salcodes_enqueue_scripts() dĂ©finit la variable globale $post, puis confirme deux conditions via :

  • is_a() : vĂ©rifie si $post est une instance de l’objet Il s’agit de tous les types d’articles dans WordPress.
  • has_shortcode() : vĂ©rifie si le contenu de l’article contient le code court [cta_button].

Si les deux conditions sont remplies, la fonction enregistre et met en file d’attente la feuille de style style.css incluse dans le dossier CSS. La fonction plugin_dir_url( $file ) permet d’obtenir facilement l’URL du rĂ©pertoire de l’extension.

Je ne vous montrerai pas le code CSS ici, mais vous pouvez le trouver dans le code source Ă  la fin de cette section.

Enfin, testons le code court [cta_button] en l’ajoutant au contenu de l’article :

Remarquez le lien personnalisé, la couleur, la taille et les attributs du libellé.
Remarquez le lien personnalisé, la couleur, la taille et les attributs du libellé.

L’image ci-dessous montre l’aspect du bouton d’appel à action sur l’interface publique :

Le bouton d’appel Ă  action a maintenant une nouvelle URL, une nouvelle couleur, une nouvelle taille et un nouveau libellĂ©.
Le bouton d’appel Ă  action a maintenant une nouvelle URL, une nouvelle couleur, une nouvelle taille et un nouveau libellĂ©.

Maintenant que vous avez appris Ă  dĂ©finir des attributs personnalisĂ©s et Ă  inclure des styles, vous pouvez ajouter diverses autres fonctionnalitĂ©s Ă  votre code court de bouton d’appel Ă  action. Par exemple, vous pouvez donner Ă  vos utilisateurs la possibilitĂ© d’ajouter des animations, des effets de survol et divers autres styles de boutons.

Exemple 3 : Code court utilisant $content.

Pour notre dernier exemple, construisons un code court appelĂ© [boxed] qui affiche tout contenu entre ses balises dans une boĂźte avec des titres colorĂ©s.

Commençons par enregistrer le code court et définir sa fonction de gestionnaire.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}
  • $content = null : ceci enregistre le code court comme un type d’encapsulation. Vous pouvez utiliser la variable $content dans votre fonction de gestion pour modifier votre sortie comme vous le souhaitez.
  • $tag = «  : ceci dĂ©finit la variable $tag du code court. Ce n’est pas nĂ©cessaire dans cet exemple, mais c’est une bonne pratique de l’inclure.

Dans cet exemple, nous modifions le contenu en utilisant des styles CSS en ligne.

Les styles de toutes les classes utilisĂ©es Ă  l’intĂ©rieur du code court sont enregistrĂ©s et mis en file d’attente comme nous l’avons fait dans l’exemple de code court prĂ©cĂ©dent.

Mais le fait que deux codes courts utilisent la mĂȘme feuille de style signifie que vous devez la charger si l’un d’eux est utilisĂ©. Mettons donc Ă  jour la fonction salcodes_enqueue_scripts() :

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');
  • $has_shortcode : une variable dĂ©finie par l’utilisateur qui vĂ©rifie si l’un des codes courts existe sur la page ou l’article. Le || (opĂ©rateur OR) rend cela possible.

Maintenant, prenons notre code court [boxed].

Ajoutez le code court boxed ainsi que les attributs title, title_color et color.
Ajoutez le code court boxed ainsi que les attributs title, title_color et color.

La capture d’écran ci-dessous affiche le rĂ©sultat que nous obtenons.

Une jolie boĂźte n'est pas si difficile Ă  obtenir aprĂšs tout !
Une jolie boüte n’est pas si difficile à obtenir aprùs tout !

Maintenant que vous avez appris Ă  faire vos propres codes courts, vous pouvez quitter [boxed] et y donner votre propre tournure. N’oubliez pas de partager vos crĂ©ations avec nous !

Si vous le souhaitez, vous pouvez tĂ©lĂ©charger le code source de l’extension de code court ici.

Codes courts de WordPress : Avantages et inconvénients

Les avantages

  • Les codes courts simplifient l’ajout de fonctionnalitĂ©s complexes dans les sites WordPress. Vous pouvez ajouter presque tout en saisissant une seule ligne de code.
  • Les codes courts automatisent le flux de dĂ©veloppement. Ils Ă©liminent la nĂ©cessitĂ© d’écrire des scripts complexes chaque fois que l’on veut insĂ©rer un certain Ă©lĂ©ment.
  • Les codes courts sont plus conviviaux que l’ajout de code HTML ou de scripts PHP.
  • Les codes courts peuvent ĂȘtre regroupĂ©s dans des extensions. MĂȘme si vous mettez Ă  jour WordPress ou si vous modifiez/mettez Ă  jour votre thĂšme, les codes courts resteront valables et continueront Ă  fonctionner comme avant.
  • Le regroupement des codes courts Ă  l’intĂ©rieur des extensions les rend faciles Ă  utiliser sur plusieurs sites WordPress. Si vous ĂȘtes un dĂ©veloppeur qui gĂšre de nombreux sites, le fait d’avoir tous vos codes courts personnalisĂ©s prĂȘts Ă  l’emploi est un atout majeur.
  • Comme les codes courts acceptent Ă©galement des attributs, les utilisateurs peuvent modifier le comportement du mĂȘme code court en modifiant simplement les options de ses attributs.

Les inconvénients

  • L’utilisation des codes courts n’est pas intuitive pour l’utilisateur final, surtout si un grand nombre d’entre eux sont utilisĂ©s sur une page. Dans ce cas, ils sont plus adaptĂ©s aux dĂ©veloppeurs.
  • Il est difficile de dire ce qu’un code court fait simplement en le regardant. L’équipe centrale de WordPress les a judicieusement nommĂ©s « mystery meat embed codes Â» pour cette raison prĂ©cise.
  • Les codes courts qui sont intĂ©grĂ©s avec des thĂšmes cesseront de fonctionner si vous changez de thĂšme.
  • Les codes courts sont ambigus quant Ă  leur syntaxe. Par exemple, certains d’entre eux sont favorables Ă  la fermeture facultative, de sorte que vous pouvez les utiliser soit comme fermeture automatique, soit comme fermeture, voire les deux s’ils sont emboĂźtĂ©s. Vous pouvez deviner comment cela peut devenir trĂšs rapidement super confus.
  • Les codes courts peuvent casser le HTML en raison de balises conflictuelles ou de problĂšmes d’interopĂ©rabilitĂ©. Il n’est jamais bon de les voir sur l’interface publique d’un site.
  • Les codes courts ajoutent une charge supplĂ©mentaire sur votre serveur. Plus le nombre de codes courts sur votre page ou vos articles augmente, plus cette charge augmente. Trop de codes courts peuvent amener votre site web Ă  ramer (par exemple, l’affichage de la plupart des constructeurs de pages).

Codes courts et blocs Gutenberg

L’introduction de Gutenberg a rĂ©duit l’intĂ©rĂȘt des codes courts. Les utilisateurs peuvent dĂ©sormais ajouter des blocs directement Ă  partir de l’interface de l’éditeur, plutĂŽt que de s’occuper des balises de codes courts, aussi simple soient-elles.

Et si vous souhaitez ajouter des codes courts, Gutenberg propose mĂȘme un bloc dĂ©diĂ© pour ajouter des codes courts. Les blocs sont les nouveaux codes courts.

« Si vous pouvez le faire avec un code court, vous pouvez le faire avec un bloc. Â» — James Huff, ingĂ©nieur du bonheur chez Automattic

Cela explique pourquoi tous les codes courts populaires sont convertis en blocs. De nombreux dĂ©veloppeurs de WordPress ont dĂ©cidĂ© de faire en sorte que leurs produits et services fonctionnent exclusivement avec l’éditeur de bloc (Gutenberg).

Mais cela ne signifie pas que c’est la fin du monde pour les codes courts. L’équipe centrale de WordPress a promis de nombreuses amĂ©liorations Ă  l’éditeur de blocs, que vous pouvez voir dans Twenty Twenty, mais d’ici lĂ , les codes courts sont lĂ  pour rester !Faire plus avec moins, dites-vous ? C’est possible avec les codes courts de WordPress ! Apprenez ce que c’est et comment crĂ©er les vĂŽtres avec ce guide en profondeur. La vie est trop courte pour ne pas utiliser de codes courts〚〛đŸ’ȘCLICK TO TWEET

Résumé

Il est facile d’ajouter des fonctionnalitĂ©s complexes n’importe oĂč dans votre site WordPress, grĂące Ă  des codes courts. Ils donnent aux utilisateurs des balises faciles Ă  taper qui peuvent ĂȘtre utilisĂ©es sans avoir Ă  se soucier de l’utilisation de codes complexes.

Bien qu’il n’y ait pas de raccourcis dans la vie, il y a certainement de nombreux codes courts Ă  utiliser dans WordPress. Mes prĂ©fĂ©rĂ©s sont Shortcodes Ultimate et Shortcodes by par Angie Makes.

Et si vous ne trouvez pas celui que vous cherchez, vous pouvez en crĂ©er un vous-mĂȘme.

Vous pouvez mĂȘme prendre un raccourci pour crĂ©er votre code court personnalisĂ© en utilisant l’extension Shortcoder. Elle s’occupe de l’essentiel pour vous. Et n’oubliez pas : la vie est courte, utilisez les codes courts !