[gallery ids=\"47 ,86, 92, 64, 48, 75, 89, 80\" columns=\"4\" size=\"medium\"]<\/pre>\nCela produira une galerie avec les images des IDs mentionn\u00e9s. Elle aura 4 colonnes et leur taille maximale sera \u00ab\u00a0moyenne\u00a0\u00bb (selon la d\u00e9finition de WordPress).<\/p>\n
Il n’y a pas besoin d’un code HTML moche.<\/p>\n
Exemple de code court de galerie<\/figcaption><\/figure>\n Les codes courts \u00e9liminent le besoin de scripts compliqu\u00e9s. M\u00eame si vous avez peu ou pas de comp\u00e9tences en programmation, vous pouvez ajouter du contenu dynamique sans effort avec leur aide.<\/p>\n
Ils sont tr\u00e8s populaires au sein des d\u00e9veloppeurs de WordPress<\/a>, car ils aident \u00e9norm\u00e9ment \u00e0 automatiser la cr\u00e9ation de contenu et de design. Les codes courts sont aux d\u00e9veloppeurs de WordPress ce que les macros sont aux analystes de donn\u00e9es, ou les raccourcis clavier aux graphistes professionnels.<\/p>\n
Dans ce guide, vous apprendrez tout ce qu’il y a \u00e0 savoir sur les codes courts. Vous d\u00e9couvrirez comment travailler avec l’API des codes courts en cr\u00e9ant vos propres codes courts. Enfin, nous discuterons de l’avenir des codes courts et de la place qu’ils occupent dans le nouvel \u00e9diteur de bloc de WordPress<\/a>.<\/p>\n
\u00c7a vous excite ? Commen\u00e7ons !<\/p>\n
<\/div><\/kinsta-auto-toc>\n Qu’est-ce qu’un code court ?<\/h2>\n
En bref, Code court = Raccourci + Code<\/strong>.<\/p>\n
En g\u00e9n\u00e9ral, les codes courts utilisent des balises entre crochets [] pour d\u00e9finir leur utilisation. Chaque code court remplit une fonction particuli\u00e8re dans un site. Elle peut \u00eatre aussi simple que la mise en forme du contenu ou aussi complexe que la d\u00e9finition de la structure du site web dans son ensemble.<\/p>\n
Par exemple, vous pouvez utiliser des codes courts pour int\u00e9grer des diaporamas<\/a>, des formulaires<\/a>, ou les tableaux de tarifs<\/a>. Vous pouvez m\u00eame les utiliser pour cr\u00e9er des mod\u00e8les de design de pages r\u00e9utilisables.<\/p>\n
Une br\u00e8ve histoire des codes courts<\/h3>\n
Les codes courts ont d’abord \u00e9t\u00e9 rendus populaires par un logiciel de forum en ligne appel\u00e9 Ultimate Bulletin Board (UBB). En 1998, ils ont introduit le BBCode (Bulletin Board Code)<\/a>, une collection de balises faciles \u00e0 utiliser pour permettre aux utilisateurs de formater facilement leurs articles.<\/p>\n
Formatage facile avec des BBCodes simples<\/figcaption><\/figure>\n En tant que langage de balisage l\u00e9ger, le BBCode fonctionne sur les m\u00eames principes que le HTML, sauf qu’il est beaucoup plus simple.<\/p>\n
L’utilisation de balises pr\u00e9d\u00e9finies est \u00e9galement beaucoup plus s\u00fbre, car les utilisateurs ne peuvent pas ins\u00e9rer de code HTML et introduire des vuln\u00e9rabilit\u00e9s en mati\u00e8re de s\u00e9curit\u00e9<\/a>. Par exemple, un utilisateur mal intentionn\u00e9 pourrait utiliser la balise <script> pour ex\u00e9cuter du code JavaScript et casser la fonctionnalit\u00e9 du site.<\/p>\n
Peu apr\u00e8s, d’autres logiciels de forum en ligne tels que phpBB<\/a>, XMB Forum<\/a>, et vBulletin<\/a> a ajout\u00e9 la fonctionnalit\u00e9 BBCode dans ses tableaux de message.<\/p>\n
Les codes courts ont permis aux administrateurs d’avoir un plus grand contr\u00f4le 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.<\/p>\n
Pour les m\u00eames raisons de s\u00e9curit\u00e9, WordPress emp\u00eache le code PHP de s’ex\u00e9cuter \u00e0 l’int\u00e9rieur du contenu du site. Pour surmonter cette limitation, WordPress 2.5<\/a> a introduit la fonctionnalit\u00e9 des codes courts en 2008 avec la publication d\u2019API de code court<\/a>. Il s’est av\u00e9r\u00e9 \u00eatre l’une des fonctionnalit\u00e9s les plus utilis\u00e9es par de nombreux d\u00e9veloppeurs d\u2019extensions et de th\u00e8mes WordPress.<\/p>\n
Que sont les codes courts de WordPress ?<\/h3>\n
Les codes courts WordPress sont des cha\u00eenes de crochets ([ ]<\/strong>) qui se transforment comme par magie en quelque chose de fascinant sur l\u2019interface publique. Ils permettent aux utilisateurs de cr\u00e9er et de modifier facilement des contenus complexes sans avoir \u00e0 se soucier de la complexit\u00e9 du HTML ou des codes d’int\u00e9gration.<\/p>\n
Les codes courts de WordPress sont simples et faciles \u00e0 utiliser<\/figcaption><\/figure>\n Les 2 types de codes courts<\/h3>\n
Il existe principalement deux types de codes courts dans WordPress.<\/p>\n
Les codes courts d’auto-fermeture et de fermeture peuvent \u00eatre valides avec ou sans attributs.<\/figcaption><\/figure>\n \n
- Codes courts \u00e0 fermeture automatique : <\/strong>Ils n’ont pas besoin d’une balise de fermeture.<\/li>\n<\/ul>\n
Exemple : Le code court caption <\/strong>n’a pas besoin de balise de fermeture. Nous ajoutons tout ce dont il a besoin avec diff\u00e9rents attributs.<\/p>\n
\n
- Codes courts de fermeture : <\/strong>Ces derniers ont besoin d’une balise de fermeture. Les codes courts de fermeture manipulent g\u00e9n\u00e9ralement le contenu entre les balises d’ouverture et de fermeture.<\/li>\n<\/ul>\n
Exemple : <\/em>Le code court de caption<\/strong> est utilis\u00e9 pour entourer une l\u00e9gende autour de n’importe quel contenu. Il est principalement utilis\u00e9 pour ajouter une l\u00e9gende aux images, mais il fonctionne avec n’importe quel \u00e9l\u00e9ment HTML.<\/p>\n
Certains codes courts fonctionnent avec ou sans attributs. Cela d\u00e9pend de la fa\u00e7on dont ils sont d\u00e9finis.<\/p>\n
Les codes courts par d\u00e9faut de WordPress<\/h2>\n
WordPress est livr\u00e9 avec 6 codes courts par d\u00e9faut :<\/p>\n
\n
- audio<\/a> : Int\u00e9grez des fichiers audio sur votre site web. Il comprend des commandes de lecture simples comme Play & Pause.<\/li>\n
- caption<\/a> : <\/strong>Enveloppez votre contenu avec des l\u00e9gendes. Il est surtout utilis\u00e9 pour ajouter des l\u00e9gendes d’images, mais vous pouvez l’utiliser pour n’importe quel \u00e9l\u00e9ment HTML.<\/li>\n
- embed<\/a> : D\u00e9veloppe la fonctionnalit\u00e9 oEmbed par d\u00e9faut. Ce raccourci vous permet de d\u00e9finir diff\u00e9rents attributs \u00e0 vos incorporations, comme la d\u00e9finition de leurs dimensions maximales.<\/li>\n
- gallery<\/a> : Ins\u00e9rez une simple galerie d’images sur votre site. Vous pouvez utiliser des attributs pour d\u00e9finir quelles images sont utilis\u00e9es et personnaliser l’apparence de la galerie.<\/li>\n
- playlist<\/a> : Affichez une collection de fichiers audio ou vid\u00e9o avec ce code court \u00e0 fermeture automatique. Vous pouvez lui donner un mode \u00ab\u00a0dark\u00a0\u00bb avec son attribut de style.<\/li>\n
- video<\/a> : Int\u00e9grer un fichier vid\u00e9o et le lire \u00e0 l’aide d’un simple lecteur vid\u00e9o. Ce code court permet d’int\u00e9grer des vid\u00e9os dans ces formats : mp4, webm, m4v, webm, ogv, wmv, flv.<\/li>\n<\/ul>\n
Pour plus de d\u00e9tails sur la mani\u00e8re d’utiliser les codes courts par d\u00e9faut et sur les attributs qu’ils prennent en charge, vous pouvez vous r\u00e9f\u00e9rer aux documents du Codex li\u00e9s.<\/p>\n
Comment utiliser les codes courts de WordPress<\/h3>\n
L’utilisation des codes courts dans WordPress est un processus simple. Mais cela d\u00e9pend de l’endroit o\u00f9 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\u00e9s, afin d’obtenir exactement ce que vous voulez.<\/p>\n
Utilisation des codes courts de WordPress dans les pages et les articles<\/h3>\n
Tout d’abord, allez dans l’\u00e9diteur de page ou d\u2019article o\u00f9 vous voulez ins\u00e9rer le code court.<\/p>\n
Si vous utilisez l’\u00e9diteur Gutenberg, vous pouvez ajouter la balise de code court dans le bloc autonome Codes<\/em> courts. On peut la trouver dans la section Widgets.<\/em><\/p>\n
Ajout d’un bloc de code court \u00e0 Gutenberg<\/figcaption><\/figure>\n Le bloc de codes courts de Gutenberg<\/figcaption><\/figure>\n Vous utilisez toujours l’\u00e9diteur classique<\/a> (ou l\u2019extension Classic Editor) ? Vous pouvez saisir vos codes courts de la mani\u00e8re classique. Quelques codes courts peuvent m\u00eame avoir un bouton dans l’\u00e9cran de l’\u00e9diteur pour les ins\u00e9rer facilement.<\/p>\n
Ajout d’un code court dans l’\u00e9diteur classique<\/figcaption><\/figure>\n Utilisation des codes courts de WordPress dans les widgets de la barre lat\u00e9rale<\/h3>\n
Des codes courts peuvent \u00e9galement \u00eatre ins\u00e9r\u00e9s dans les widgets de la barre lat\u00e9rale<\/a>. Pour les ajouter, allez dans Apparence \u00bb Widgets<\/strong> et ajoutez un widget Texte <\/strong>dans la section o\u00f9 vous voulez ajouter le code court.<\/p>\n
Ajoutez un code court dans votre barre lat\u00e9rale avec le widget Texte<\/figcaption><\/figure>\n Collez le code court dans le widget Texte<\/em> et enregistrez-le. Vous pouvez visiter l’interface publique de votre site et voir le r\u00e9sultat du code court dans votre barre lat\u00e9rale.<\/p>\n
L\u2019affichage du code court (galerie) qui peut \u00eatre vu dans la barre lat\u00e9rale<\/figcaption><\/figure>\n Note :<\/strong> WordPress 4.8 et les versions inf\u00e9rieures ne prennent pas en charge les code court dans les widgets de la barre lat\u00e9rale. Lisez Am\u00e9liorations des widgets dans la<\/a> mise \u00e0 jour de WordPress 4.9<\/u> pour en savoir plus.<\/p>\n
Utilisation des codes courts de WordPress dans l’en-t\u00eate et le pied de page<\/h3>\n
Les codes courts de WordPress sont en g\u00e9n\u00e9ral destin\u00e9s aux pages, aux articles et aux widgets. Mais vous avez un moyen facile d’ins\u00e9rer des codes courts n’importe o\u00f9 dans votre site.<\/p>\n
Disons que vous voulez ajouter un bouton d’appel \u00e0 l’action dans votre pied de page, ou dans tous vos articles avant la section des commentaires. La fonction de callback do_shortcode()<\/a> s\u2019av\u00e8re utile ici.<\/p>\n
Vous devez ajouter le code suivant au fichier header.php<\/em> ou footer.php de<\/em> votre th\u00e8me, ou \u00e0 l’un de ses fichiers de mod\u00e8le :<\/p>\n
<?php echo do_shortcode(\"[name_of_your_shortcode]\"); ?><\/code><\/pre>\nLe code court sera alors affich\u00e9 \u00e0 l’endroit o\u00f9 vous l’avez ins\u00e9r\u00e9.<\/p>\n
Vous devez inclure les crochets entre les guillemets pour faire \u00e9cho au code court. Le simple fait d’inclure son nom ne fonctionnera pas.<\/p>\n
De m\u00eame, vous pouvez utiliser la fonction de callback do_shortcode()<\/em> pour activer les codes courts partout dans WordPress, comme dans la section des commentaires.<\/p>\n
Une introduction rapide \u00e0 l’API des codes courts<\/h3>\n
L’API des codes courts de WordPress<\/a> d\u00e9finit la mani\u00e8re dont vous pouvez utiliser les codes courts pour personnaliser et \u00e9tendre les fonctionnalit\u00e9s de votre site. Il permet aux d\u00e9veloppeurs de cr\u00e9er 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.<\/p>\n
Vous pouvez ajouter presque toutes les fonctionnalit\u00e9s que vous pouvez imaginer \u00e0 votre site web \u00e0 l’aide de codes courts.<\/p>\n
L’API prend en charge les codes courts \u00e0 fermeture automatique et les codes courts de fermeture. Cela g\u00e8re toutes les analyses d\u00e9licates et comprend des fonctions d’aide pour d\u00e9finir et r\u00e9cup\u00e9rer les attributs par d\u00e9faut.<\/p>\n
Gr\u00e2ce \u00e0 l’API, vous pouvez vous plonger directement dans le d\u00e9veloppement et la personnalisation des codes courts, plut\u00f4t que de perdre un temps pr\u00e9cieux \u00e0 d\u00e9finir des expressions r\u00e9guli\u00e8res pour chaque code court que vous cr\u00e9ez.<\/p>\n
Comprendre les bases de l’API de code court<\/h3>\n
Chaque fois que vous ouvrez une page ou un article dans WordPress, il recherche les codes courts enregistr\u00e9s tout en traitant le contenu du site.<\/p>\n
Si un code court enregistr\u00e9 est trouv\u00e9, l’API des codes courts prend le relais et renvoie l\u2019affichage du ou des codes courts. La cha\u00eene renvoy\u00e9e remplace la balise de code court \u00e0 l’endroit o\u00f9 elle a \u00e9t\u00e9 ajout\u00e9e.<\/p>\n
Vous enregistrez un code court dans WordPress avec la fonction add_shortcode()<\/a>. Voici comment on proc\u00e8de :<\/p>\n
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );<\/code><\/pre>\n\n
- shortcode_name :<\/strong> La balise WordPress sera recherch\u00e9e 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\u00e9finir sa valeur (\u00e9vitez les tirets).<\/li>\n
- shortcode_handler_function : <\/strong>La fonction de callback qui sera ex\u00e9cut\u00e9e apr\u00e8s que WordPress aura confirm\u00e9 la pr\u00e9sence d’un code court enregistr\u00e9.<\/li>\n
- La fonction handler shortcode est d\u00e9finie comme ceci :<\/li>\n
function shortcode_handler_function( $atts, $content, $tag ){ }<\/code><\/li>\n- $atts : <\/strong>Un tableau associatif d’attributs (c’est-\u00e0-dire un tableau de paires cl\u00e9-valeur). Si vous ne d\u00e9finissez aucun attribut, il s’agira par d\u00e9faut d’une cha\u00eene vide.<\/li>\n
- $content : <\/strong>Le contenu de fermeture, si vous d\u00e9finissez un code court de fermeture. C\u2019est la responsabilit\u00e9 de la fonction handler<\/a> de s\u2019assurer que la valeur de $content est retourn\u00e9e \u00e0 la sortie.<\/li>\n
- $tag : <\/strong>La valeur de la balise du code court (shortcode_name<\/em> dans l’exemple ci-dessus). Si deux ou plusieurs codes courts partagent la m\u00eame fonction (valide) de callback, la valeur $tag vous aidera \u00e0 d\u00e9terminer quel code court a d\u00e9clench\u00e9 la fonction handler.<\/li>\n<\/ul>\n
L’API analyse la balise du code court, ses attributs et le contenu inclus (le cas \u00e9ch\u00e9ant) en contournant les valeurs vers la fonction handler, qui les traite et renvoie une cha\u00eene de sortie.<\/p>\n
Cette cha\u00eene de sortie remplace la macro de raccourci sur l\u2019interface publique de votre site. Ce que vous voyez finalement dans le navigateur, c’est cette sortie.<\/p>\n
O\u00f9 ajouter vos scripts personnalis\u00e9s de codes courts ?<\/h3>\n
Vous pouvez ajouter vos scripts personnalis\u00e9s de codes courts au fichier functions.php du<\/em> th\u00e8me ou les inclure dans une extension.<\/p>\n
Si vous l’ajoutez \u00e0 un fichier de th\u00e8me, vous pouvez ex\u00e9cuter la fonction add_shortcode()<\/a><\/em> telle qu\u2019elle.<\/p>\n
Mais si vous l’ajoutez \u00e0 une extension, je vous recommande de ne l’initialiser qu’apr\u00e8s le chargement complet de WordPress. Vous pouvez vous en assurer en enveloppant la fonction add_shortcode()<\/em> dans une autre fonction. C’est ce qu’on appelle un enveloppement de fonction :<\/p>\n
function shortcodes_init(){\n add_shortcode( 'shortcode_name', 'shortcode_handler_function' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\nLa fonction add_action()<\/a><\/em> accroche la fonction shortcodes_init<\/em><\/strong> pour ne se d\u00e9clencher qu’une fois le chargement de WordPress termin\u00e9 (elle est appel\u00e9e \u2019init\u2019 hook<\/a>).<\/p>\n
Comment cr\u00e9er un code court personnalis\u00e9 dans WordPress (niveau d\u00e9butant)<\/h2>\n
Maintenant que nous avons couvert les bases, il est temps de cr\u00e9er un code court personnalis\u00e9.<\/p>\n
![\"Exemple](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/exemple-code-court-galerie-WordPress-3.jpg\")
![\"Formatage](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/Formatage-facile-avec-des-BBCodes-simples.png\")
![\"Les](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/codes-courts-WordPress-sont-simples-faciles-utiliser.png\")
![\"Les](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/12\/codes-courts-auto-fermeture-fermeture-peuvent-valides-sans-attributs.png\")
![\"Ajout](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ajout-bloc-code-court-Gutenberg.png\")
![\"Le](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/bloc-codes-courts-Gutenberg.png\")
![\"Ajout](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ajout-code-court-editeur-classique.png\")
![\"Ajoutez](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ajoutez-code-court-dans-barre-laterale-avec-widget-texte.png\")
![\"L\u2019affichage](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/affichage-code-court-galerie-dans-barre-laterale.png\")