{"id":16093,"date":"2022-11-02T05:03:00","date_gmt":"2022-11-02T05:03:00","guid":{"rendered":"\/tutoriels\/?p=16093"},"modified":"2024-02-18T15:01:43","modified_gmt":"2024-02-18T15:01:43","slug":"shortcode-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/shortcode-wordpress\/","title":{"rendered":"Comment cr\u00e9er un shortcode dans WordPress en 7 \u00e9tapes"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Apprendre &agrave; cr&eacute;er un shortcode sur WordPress peut &ecirc;tre un moyen efficace de personnaliser vos articles et pages. Cependant, si vous &ecirc;tes un d&eacute;butant, vous pouvez avoir du mal &agrave; comprendre comment utiliser une telle fonctionnalit&eacute; sur votre site.<\/p><p class=\"wp-block-paragraph\">C&rsquo;est pourquoi nous avons pr&eacute;par&eacute; un guide afin que tout le monde puisse d&eacute;marrer facilement. En regardant comment fonctionnent les shortcodes (codes courts en fran&ccedil;ais) et comment les appliquer convenablement, vous pouvez commencer &agrave; personnaliser votre contenu &agrave; votre go&ucirc;t sans avoir besoin de plugins suppl&eacute;mentaires.<\/p><p class=\"wp-block-paragraph\">Dans cet article, nous allons discuter de ce que sont les shortcodes WordPress et pourquoi vous pourriez envisager de les utiliser. Nous allons ensuite vous montrer comment cr&eacute;er votre propre shortcode. On va d&eacute;marrer !<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41459\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-creer-un-shortcode-dans-wordpress-tutoriel-video\">Comment cr&eacute;er un shortcode dans WordPress &ndash; Tutoriel vid&eacute;o<\/h2><p class=\"wp-block-paragraph\">Apprenez &eacute;tape par &eacute;tape comment cr&eacute;er un shortcode WordPress. Voici une vid&eacute;o (en anglais) qui vous apportera une aide pr&eacute;cieuse :<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Create a Shortcode in WordPress\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/ooDcpimdf_w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-france.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">S'abonner Pour plus de vid\u00e9os \u00e9ducatives\u202f!<\/span>\n          <span class=\"channel-name\">L'Acad\u00e9mie Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCnJh2FCpNj7xUbl1PKsmi6g?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>S'abonner<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-quels-sont-les-shortcodes-wordpress\">Quels sont les shortcodes WordPress ?<\/h2><p class=\"wp-block-paragraph\">Les shortcodes WordPress fonctionnent comme des raccourcis qui vous permettent d&rsquo;int&eacute;grer des &eacute;l&eacute;ments dans un article ou une page rapidement. Il s&rsquo;agit g&eacute;n&eacute;ralement d&rsquo;une seule ligne de code entre crochets, comme <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[exempleshortcode]<\/code>, par exemple. Ce code affichera une fonction pr&eacute;d&eacute;termin&eacute;e sur le front-end de votre site.<\/p><p class=\"wp-block-paragraph\">WordPress a introduit pour la premi&egrave;re fois les shortcodes avec la sortie du Shortcode API. Cela a permis aux utilisateurs d&rsquo;ajouter facilement des &eacute;l&eacute;ments engageants sur un texte ou une page, comme Google Maps ou le bouton Like de Facebook.<\/p><p class=\"wp-block-paragraph\">Il y existe six shortcodes par d&eacute;faut dans WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>caption<\/strong>: ins&eacute;rer des l&eacute;gendes autour du contenu<\/li>\n\n\n\n<li><strong>gallery<\/strong>: affiche les galeries d&rsquo;images<\/li>\n\n\n\n<li><strong>audio<\/strong>&nbsp;: int&eacute;grer et lire des fichiers audio<\/li>\n\n\n\n<li><strong>video<\/strong>&nbsp;: int&eacute;grer et lire des fichiers vid&eacute;o<\/li>\n\n\n\n<li><strong>playlist<\/strong>&nbsp;: afficher une collection de fichiers audio ou vid&eacute;o<\/li>\n\n\n\n<li><strong>embed<\/strong>&nbsp;: int&eacute;grer du contenu &agrave; cet emplacement<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Vous rencontrerez &eacute;galement deux types de formats de shortcode &ndash; fermeture automatique et fermeture manuelle. Les shortcodes &agrave; fermeture automatique peuvent se fermer automatiquement sans avoir besoin d&rsquo;une balise de fermeture, comme un shortcode <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">gallery<\/code> ou shortcode <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">video<\/code><\/code>.<\/p><p class=\"wp-block-paragraph\">Alors que l&rsquo;autre m&eacute;thode consiste &agrave; entourer les shortcodes autour du contenu que vous souhaitez modifier et vous oblige &agrave; fermer la balise manuellement. Par exemple, vous pouvez int&eacute;grer une vid&eacute;o YouTube en entourant l&rsquo;URL dans les balises <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">embed<\/code> et <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">\/embed<\/code>&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"262\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enfermement-wordpress.jpg\/public\" alt=\"Exemple d'un shortcode utilis&eacute; pour int&eacute;grer une vid&eacute;o YouTube dans un article WordPress.\" class=\"wp-image-19832\" title=\"creation-shortcodes wordpress\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enfermement-wordpress.jpg\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enfermement-wordpress.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enfermement-wordpress.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enfermement-wordpress.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Par exemple, cela donnerait le r&eacute;sultat suivant&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"518\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/Shortcode-video-integree.jpg\/public\" alt=\"Exemple d'un article WordPress avec un lecteur vid&eacute;o incorpor&eacute;\" class=\"wp-image-19833\" title=\"shortcode-video-int&eacute;gr&eacute;e\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/Shortcode-video-integree.jpg\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/Shortcode-video-integree.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/Shortcode-video-integree.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/Shortcode-video-integree.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Certains des <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/plugin-wordpress\/\">meilleurs plugins WordPress<\/a> viennent avec leurs propres shortcodes. Par exemple, WP Forms et Contact Form 7 ont des shortcodes qui vous permettent d&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/formulaire-contact-wordpress\/\">int&eacute;grer un formulaire de contact WordPress<\/a> dans un article ou une page assez rapidement. Vous pouvez &eacute;galement utiliser un plugin comme MaxButtons pour ajouter un shortcode de bouton WordPress o&ugrave; vous voulez sur votre site.<\/p><h2 class=\"wp-block-heading\" id=\"h-pourquoi-devriez-vous-envisager-d-utiliser-des-shortcodes-wordpress\">Pourquoi devriez-vous envisager d&rsquo;utiliser des shortcodes WordPress ?<\/h2><p class=\"wp-block-paragraph\">Il existe de nombreuses raisons pour lesquelles vous pouvez souhaiter utiliser des shortcodes WordPress. Les exemples sont nombreux, il est plus facile et plus rapide que d&rsquo;apprendre et d&rsquo;&eacute;crire un long morceau de code en HTML. De plus, ils vous aident &agrave; garder votre contenu propre et accessible.<\/p><p class=\"wp-block-paragraph\">Les shortcodes peuvent &ecirc;tre utilis&eacute;s pour automatiser certaines fonctions que vous utilisez &agrave; plusieurs reprises dans vos articles. Par exemple, si vous utilisez un <strong>bouton d&rsquo;appel &agrave; l&rsquo;action (CTA)<\/strong> sur chacun de vos articles, avoir un shortcode d&eacute;di&eacute; pr&ecirc;t &agrave; l&rsquo;emploi peut &ecirc;tre une solution rapide et pratique.<\/p><p class=\"wp-block-paragraph\">Il est &agrave; noter que l&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/gutenberg\/\">&eacute;diteur Gutenberg<\/a> fonctionne de la m&ecirc;me fa&ccedil;on, en s&rsquo;appuyant sur l&rsquo;utilisation de shortcodes. Il permet aux utilisateurs de WordPress d&rsquo;ajouter plusieurs fonctionnalit&eacute;s interactives gr&acirc;ce &agrave; l&rsquo;utilisation de blocs.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"403\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/wordpress-editeur-gutenberg.jpg\/public\" alt=\"Comment utiliser Gutenberg pour ajouter un shortcode &agrave; WordPress\" class=\"wp-image-19835\" title=\"wordpress-editeur-gutenberg\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/wordpress-editeur-gutenberg.jpg\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/wordpress-editeur-gutenberg.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/wordpress-editeur-gutenberg.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/wordpress-editeur-gutenberg.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Une telle m&eacute;thode est beaucoup plus facile pour les d&eacute;butants, car vous pouvez inclure du contenu directement sur l&rsquo;interface utilisateur. Cependant, l&rsquo;&eacute;diteur de bloc WordPress est encore limit&eacute; dans ce qu&rsquo;il offre. Heureusement, il est livr&eacute; avec un bloc <em>Shortcode<\/em>, vous permettant ainsi d&rsquo;ajouter du contenu personnalis&eacute; &agrave; vos articles.<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-creer-un-shortcode-dans-wordpress-en-7-etapes-nbsp\">Comment cr&eacute;er un shortcode dans WordPress (en 7 &eacute;tapes)&nbsp;?<\/h2><p class=\"wp-block-paragraph\">Si vous avez d&eacute;j&agrave; quelques connaissances de codage, vous pouvez cr&eacute;er vos propres shortcodes personnalis&eacute;s. Cela vous donne un contr&ocirc;le complet sur l&rsquo;apparence et la fonctionnalit&eacute; de votre site.<\/p><p class=\"wp-block-paragraph\">Regardons comment cr&eacute;er un shortcode WordPress personnalis&eacute;. Dans ce tutoriel, nous allons ajouter des liens de m&eacute;dias sociaux &agrave; un article pour notre exemple.<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-1-creer-un-nouveau-fichier-de-theme\">&Eacute;tape 1 &ndash; Cr&eacute;er un nouveau fichier de th&egrave;me<\/h3><p class=\"wp-block-paragraph\">Avant de commencer, c&rsquo;est une bonne id&eacute;e de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/sauvegarde-wordpress\/\">sauvegarder enti&egrave;rement votre site WordPress<\/a>. Vous devrez &eacute;galement cr&eacute;er un fichier s&eacute;par&eacute; pour votre shortcode personnalis&eacute; en dehors du fichier <strong>functions.php<\/strong> de votre th&egrave;me. Cela fournira une solution de rechange en cas de probl&egrave;me.<\/p><p class=\"wp-block-paragraph\">Vous pouvez utiliser un client <strong>FTP (File Transfer Protocol)<\/strong> tel que <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/utiliser-filezilla\/\">FileZilla<\/a> pour acc&eacute;der aux fichiers du th&egrave;me de votre site. Une fois connect&eacute; &agrave; votre site, naviguez vers <strong>wp-content &gt; themes<\/strong>, et localisez le dossier de votre th&egrave;me actuel. Dans notre exemple, ce sera <strong>rosa-lite<\/strong>&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"234\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/interface-filezilla.png\/public\" alt=\"Capture d'&eacute;cran de filezila \" class=\"wp-image-19837\" title=\"interface-filezilla\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/interface-filezilla.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/interface-filezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/interface-filezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/interface-filezilla.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Ouvrez le dossier de votre th&egrave;me, faites un clic droit dessus et cliquez sur le bouton <strong>create new file<\/strong><\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"678\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/creer-fichier-filezilla.png\/public\" alt=\"Cr&eacute;er un nouveau fichier sur filezilla \" class=\"wp-image-19838\" title=\"creer-fichier-filezilla\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/creer-fichier-filezilla.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/creer-fichier-filezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/creer-fichier-filezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/creer-fichier-filezilla.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Nommez votre nouveau fichier <strong>custom-shortcodes.php<\/strong> et cliquez sur <strong>OK<\/strong>. Vous pouvez ensuite le modifier en cliquant-droit dessus et en s&eacute;lectionnant l&rsquo;option <strong>View\/Edit<\/strong>&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"681\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/editer-filezilla.png\/public\" alt=\"Modifier un fichier sur filezilla \" class=\"wp-image-19839\" title=\"modifier-filezilla\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/editer-filezilla.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/editer-filezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/editer-filezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/editer-filezilla.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Cela ouvrira le fichier dans votre &eacute;diteur de texte par d&eacute;faut. Ensuite, vous aurez simplement besoin d&rsquo;ajouter le bloc de code suivant :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php \n?&gt;<\/pre><p class=\"wp-block-paragraph\">Cela garantit que votre nouveau fichier sera interpr&eacute;t&eacute; comme PHP, qui est le langage de script sur lequel WordPress est construit.<\/p><p class=\"wp-block-paragraph\">Vous pouvez ensuite enregistrer vos modifications et fermer le fichier. Assurez-vous de cocher la case suivante pour s&rsquo;assurer qu&rsquo;il est mis &agrave; jour sur le serveur et appliqu&eacute; &agrave; votre site:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"677\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/sauvegarder-fichier-filezilla.png\/public\" alt=\"Sauvegarder un fichier sur filezilla \" class=\"wp-image-19840\" title=\"sauvegarder-fichier-filezilla\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/sauvegarder-fichier-filezilla.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/sauvegarder-fichier-filezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/sauvegarder-fichier-filezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/sauvegarder-fichier-filezilla.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Ensuite, ouvrez le fichier <strong>functions.php<\/strong> dans le m&ecirc;me dossier de th&egrave;me, et ajoutez la ligne de code suivante au bas du document&nbsp;:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">include('custom-shortcodes.php');<\/pre><p class=\"wp-block-paragraph\">Cela indiquera au syst&egrave;me d&rsquo;inclure toutes les modifications que vous faites au fichier <strong>custom-shortcodes.php<\/strong> dans <strong>functions.php<\/strong> tout en vous permettant de les garder s&eacute;par&eacute;s. Lorsque vous &ecirc;tes pr&ecirc;t, enregistrez vos modifications et fermez le fichier.<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-2-creation-de-la-fonction-shortcode\">&Eacute;tape 2 &ndash; Cr&eacute;ation de la fonction Shortcode<\/h3><p class=\"wp-block-paragraph\">Ensuite, vous devrez cr&eacute;er la fonction du shortcode, en lui demandant quoi faire. S&eacute;lectionnez &agrave; nouveau l&rsquo;option <strong>View\/Edit<\/strong> pour votre fichier <strong>custom-shortcodes.php<\/strong>. Utilisez l&rsquo;extrait de code suivant pour ajouter une action &agrave; laquelle accrocher votre fonction&nbsp;:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function subscribe_link(){\nreturn 'Follow us on &lt;a rel=\"nofollow\" href=\"https:\/\/twitter.com\/Hostinger?s=20\"&gt;Twitter&lt;\/a&gt;';\n}<\/pre><p class=\"wp-block-paragraph\">Puis, vous devrez inclure une fonction de callback, qui s&rsquo;ex&eacute;cutera lorsque le crochet d&rsquo;action est activ&eacute;. Ajouter la ligne de code suivante directement apr&egrave;s que celle mentionn&eacute;e ci-dessus aurait dit &agrave; WordPress que votre fonction est un shortcode:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_shortcode('subscribe', 'subscribe_link');<\/pre><p class=\"wp-block-paragraph\">Lorsque vous cr&eacute;ez un shortcode &agrave; l&rsquo;aide de la fonction <strong>add<\/strong>_<strong>shortcode<\/strong>, vous assignez une balise de shortcode &laquo;&nbsp;($tag)&nbsp;&raquo; et une fonction correspondante &laquo;&nbsp;($func)&nbsp;&raquo; qui s&rsquo;ex&eacute;cutera chaque fois que le raccourci est utilis&eacute;.<\/p><p class=\"wp-block-paragraph\">En d&rsquo;autres termes, si la balise shortcode est <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[subscribe]<\/code>, le crochet <strong>&lsquo;subscribe_link&rsquo;<\/strong> va diriger le visiteur vers l&rsquo;URL fournie.<\/p><p class=\"wp-block-paragraph\">Par cons&eacute;quent, le code en entier que vous allez utiliser dans votre fichier <strong>custom-shortcodes.php<\/strong> ressemblera &agrave; ceci&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"461\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement.png\/public\" alt=\"fichier custom-shortcodes.php avec une fonction d'abonnement\" class=\"wp-image-19842\" title=\"shortcode-abonnement\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Il convient de noter que lorsque vous nommez des balises, vous ne devriez employer que des lettres minuscules, bien que des tirets du bas puissent &ecirc;tre utilis&eacute;s. Il est &eacute;galement crucial d&rsquo;&eacute;viter d&rsquo;utiliser les traits d&rsquo;union, car ils peuvent interf&eacute;rer avec d&rsquo;autres shortcodes.<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-3-ajouter-le-shortcode-de-fermeture-automatique-self-closing-au-site-internet-wordpress\">&Eacute;tape 3 &ndash; Ajouter le shortcode de fermeture automatique (self-closing) au site internet wordpress<\/h3><p class=\"wp-block-paragraph\">Vous pouvez maintenant tester votre code initial comme un shortcode &agrave; fermeture automatique sur votre site WordPress. En utilisant l&rsquo;&eacute;diteur de bloc WordPress, vous pouvez ins&eacute;rer la balise <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[subscribe]<\/code> directement dans l&rsquo;article&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"269\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement-wordpress.png\/public\" alt=\"La balise [subscribe] dans l'&eacute;diteur de WordPress\" class=\"wp-image-19844\" title=\"shortcode-abonnement-wordpress\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement-wordpress.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-abonnement-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Cela affichera le contenu suivant pour les visiteurs de votre site internet :<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"674\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-resultat.png\/public\" alt=\"R&eacute;sultat du shortcode sur le site \" class=\"wp-image-19845\" title=\"shortcode-resultat\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-resultat.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-resultat.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-resultat.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-resultat.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Si vous &ecirc;tes satisfait de ce shortcode, vous n&rsquo;avez rien d&rsquo;autre &agrave; faire. Cependant, si vous souhaitez le personnaliser, vous pouvez passer &agrave; l&rsquo;&eacute;tape suivante.<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-4-ajouter-des-parametres-au-shortcode\">&Eacute;tape 4 &ndash; Ajouter des param&egrave;tres au shortcode<\/h3><p class=\"wp-block-paragraph\">Vous pouvez adapter le shortcode &lsquo;<strong>subscribe<\/strong>&lsquo; pour des fonctionnalit&eacute;s suppl&eacute;mentaires afin d&rsquo;afficher d&rsquo;autres liens de m&eacute;dias sociaux. Vous pouvez le faire en ajoutant un param&egrave;tre pour modifier l&rsquo;URL.<\/p><p class=\"wp-block-paragraph\">Pour ajouter des attributs de traitement , vous devrez ouvrir le fichier <strong>custom-shortcodes.php<\/strong> et ajouter le code suivant :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function subscribe_link_att($atts) {\n    $default = array(\n        'link' =&gt; '#',\n    );\n    $a = shortcode_atts($default, $atts);\n    return 'Follow us on '.$a['link'];\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre><p class=\"wp-block-paragraph\">Cela vous permettra de personnaliser les liens dans votre balise shortcode pour les ajouter &agrave; l&rsquo;&eacute;diteur Gutenberg. Vous pouvez le coller sur le code pr&eacute;c&eacute;dent dans le fichier <strong>custom-shortcodes.php<\/strong> . &Ccedil;a devrait ressembler a quelque chose comme ceci :<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"459\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/fichier-shortcode-liens-personnalises.png\/public\" alt=\"fichier custom-shortcodes.php avec des attributs de traitement pour personnaliser les liens\" class=\"wp-image-19846\" title=\"fichier-shortcode-liens-personnalises\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/fichier-shortcode-liens-personnalises.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/fichier-shortcode-liens-personnalises.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/fichier-shortcode-liens-personnalises.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/fichier-shortcode-liens-personnalises.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">L&rsquo;ajout de la fonction<strong> shortcode_atts()<\/strong> combinera les attributs utilisateur avec tous les attributs connus. Toutes les donn&eacute;es manquantes seront donc remplac&eacute;es par leurs valeurs par d&eacute;faut. Lorsque vous &ecirc;tes pr&ecirc;t, enregistrez vos modifications et fermez le fichier.<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-5-testez-les-parametres\">&Eacute;tape 5 &ndash; Testez les param&egrave;tres<\/h3><p class=\"wp-block-paragraph\">Vous pouvez maintenant tester le shortcode mis &agrave; jour dans l&rsquo;&eacute;diteur de blocs WordPress. Pour notre exemple, nous allons tester nos liens Twitter et Facebook avec les shortcodes suivants :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[subscribe link='https:\/\/www.facebook.com\/Hostinger\/']\n[subscribe link='https:\/\/twitter.com\/Hostinger?s=20\/']<\/pre><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"382\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour.png\/public\" alt=\"Test des liens \" class=\"wp-image-19847\" title=\"Test-des-liens\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Cela produira le r&eacute;sultat suivant :<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"657\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour-front-end.png\/public\" alt=\"R&eacute;sultat du test de liens \" class=\"wp-image-19848\" title=\"R&eacute;sultat-du-test-de-liens\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour-front-end.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour-front-end.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour-front-end.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/tester-shortcode-mis-a-jour-front-end.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Ce shortcode &agrave; fermeture automatique affiche les URL directes de vos Profils sociaux aux visiteurs. Cependant, vous voudrez peut-&ecirc;tre que cette fonctionnalit&eacute; soit un peu plus jolie.<\/p><p class=\"wp-block-paragraph\">Par exemple, vous pouvez cr&eacute;er une version ferm&eacute;e qui vous permet de personnaliser enti&egrave;rement le texte d&rsquo;ancrage. Celui-ci sera affich&eacute; pour les utilisateurs lorsqu&rsquo;ils sont sur le point de cliquer dessus. Nous vous montrerons comment proc&eacute;der &agrave; l&rsquo;&eacute;tape suivante.<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-6-creer-un-shortcode-ferme-enclosing\">&Eacute;tape 6 &ndash; Cr&eacute;er un shortcode ferm&eacute; (enclosing)<\/h3><p class=\"wp-block-paragraph\">Le shortcode ferm&eacute; sera format&eacute; de la m&ecirc;me mani&egrave;re que l&rsquo;exemple pr&eacute;c&eacute;dent de fermeture automatique. Cependant, il inclura un param&egrave;tre suppl&eacute;mentaire pour la fonction.<\/p><p class=\"wp-block-paragraph\">Tout d&rsquo;abord, vous devrez ajouter $content = null. Il va identifier cette fonction comme un shortcode ferm&eacute;. Vous pouvez ensuite ajouter la fonction <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/do_shortcode-wordpress\/\">do_shortcode de WordPress<\/a>, qui recherchera les shortcodes dans le contenu.<\/p><p class=\"wp-block-paragraph\">Dans le fichier <strong>custom-shortcodes.php<\/strong> , ajoutez le nouveau shortcode ferm&eacute; :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function subscribe_link_att($atts, $content = null) {\n    $default = array(\n        'link' =&gt; '#',\n    );\n    $a = shortcode_atts($default, $atts);\n    $content = do_shortcode($content);\n    return 'Follow us on &lt;a href=\"'.($a['link']).'\" style=\"color: blue\"&gt;'.$content.'&lt;\/a&gt;';\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre><p class=\"wp-block-paragraph\">Lorsque vous &ecirc;tes pr&ecirc;t, votre fichier <strong>custom-shortcode.php<\/strong> devrait ressembler &agrave; ceci :<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"459\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enferme-1.png\/public\" alt=\"Fichier contenant un short code ferm&eacute;\" class=\"wp-image-19852\" title=\"fichier-shortcode\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enferme-1.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enferme-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enferme-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-enferme-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Le code pr&eacute;c&eacute;dent poss&egrave;de aussi un attribut suppl&eacute;mentaire &ldquo;<strong>style<\/strong>&ldquo;. Il va proc&eacute;der au changement du texte d&rsquo;ancrage en une couleur bleue. N&rsquo;oubliez pas d&rsquo;enregistrer vos modifications lorsque vous avez termin&eacute; !<\/p><h3 class=\"wp-block-heading\" id=\"h-etape-7-ajouter-un-shortcode-ferme-au-site-web\">&Eacute;tape 7 &ndash; Ajouter un shortcode ferm&eacute; au site Web<\/h3><p class=\"wp-block-paragraph\">Vous pouvez maintenant ins&eacute;rer votre shortcode dans l&rsquo;&eacute;diteur de blocs WordPress pour voir le r&eacute;sultat final :<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"364\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-editeur-de-bloc.png\/public\" alt=\"Insertion du shortcode sur WordPress\" class=\"wp-image-19853\" title=\"insertion-shortcode\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-editeur-de-bloc.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-editeur-de-bloc.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-editeur-de-bloc.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-editeur-de-bloc.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p class=\"wp-block-paragraph\">Comme vous l&rsquo;avez remarqu&eacute;, vous pouvez facilement modifier les URL de vos pages de r&eacute;seaux sociaux et le texte d&rsquo;ancrage affich&eacute; pour le visiteur &agrave; l&rsquo;aide de ce shortcode ferm&eacute;. Dans ce cas, nous avons choisi &laquo; <strong>Facebook<\/strong> &raquo; et &laquo; <strong>Twitter<\/strong> &raquo;&nbsp;:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"693\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-front-end.png\/public\" alt=\"Exemple du shortcode ferm&eacute;\" class=\"wp-image-19854\" title=\"shortcode-ferm&eacute;-exemple\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-front-end.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-front-end.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-front-end.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/shortcode-ferme-front-end.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">C&rsquo;est fini ! Vous avez maintenant cr&eacute;&eacute; un shortcode personnalis&eacute; pour les liens d&rsquo;abonnement dans vos pages et articles. Notez que toutes les &eacute;tapes susmentionn&eacute;es peuvent &ecirc;tre modifi&eacute;es pour cr&eacute;er toutes sortes d&rsquo;&eacute;l&eacute;ments diff&eacute;rents &agrave; l&rsquo;aide de la fonction WordPress <strong>Shortcodes<\/strong> .<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p class=\"wp-block-paragraph\">Ajouter des fonctionnalit&eacute;s suppl&eacute;mentaires &agrave; votre site Web WordPress est beaucoup plus simple avec les shortcodes. Vous pouvez les utiliser pour personnaliser votre contenu existant et ajouter des fonctionnalit&eacute;s interactives, telles que des formulaires de contact, des galeries d&rsquo;images ou des liens d&rsquo;abonnement.<\/p><p class=\"wp-block-paragraph\">Dans cet article, nous avons appris &agrave; cr&eacute;er vos propres shortcodes dans WordPress en sept &eacute;tapes faciles :<\/p><p class=\"wp-block-paragraph\">1. Cr&eacute;er un nouveau fichier de th&egrave;me<\/p><p class=\"wp-block-paragraph\">2. Cr&eacute;er la fonction shortcode<\/p><p class=\"wp-block-paragraph\">3. Ajouter le shortcode &agrave; fermeture automatique au site Web wordpress<\/p><p class=\"wp-block-paragraph\">4. Ajouter des param&egrave;tres au shortcode<\/p><p class=\"wp-block-paragraph\">5. Testez les param&egrave;tres<\/p><p class=\"wp-block-paragraph\">6. Cr&eacute;er des shortcodes ferm&eacute;s<\/p><p class=\"wp-block-paragraph\">7. Ajouter le shortcode ferm&eacute; au site Web<\/p><p class=\"wp-block-paragraph\">Vous avez d&rsquo;autres questions sur la cr&eacute;ation de vos propres shortcodes WordPress ou sur la fa&ccedil;on d&rsquo;optimiser les performances de votre site avec l&rsquo;h&eacute;bergement WordPress ? Faites-le nous savoir dans la section commentaires ci-dessous !<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Apprenez d&#039;autres techniques avanc&eacute;es de WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/changer-polices-wordpress\/\" target=\"_blank\" rel=\"noopener\">Comment Ajouter une Police WordPress Personnalis&eacute;e<\/a><br>\n<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/supprimer-titre-page-article-wordpress\/\" target=\"_blank\" rel=\"noopener\">Comment Supprimer un Titre d&rsquo;une Page ou Article dans WordPress<\/a> <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-creer-un-shortcode-wordpress-faq\">Comment Cr&eacute;er un Shortcode WordPress &ndash; FAQ<\/h2><p class=\"wp-block-paragraph\">Les questions fr&eacute;quemment pos&eacute;es ci-dessous vous permettront de mieux comprendre les shortcode WordPress.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1683738492813\"><h3 class=\"schema-faq-question\">Qu&rsquo;est-ce qu&rsquo;un Shortcode sur WordPress ?<\/h3> <p class=\"schema-faq-answer\">Un shortcode WordPress est un raccourci ou une syntaxe courte qui permet aux utilisateurs de cr&eacute;er des fonctionnalit&eacute;s sp&eacute;cifiques sans avoir &agrave; modifier le code source. Les shortcodes sont un moyen d&rsquo;incorporer facilement des widgets et personnaliser votre site Web. Ils sont g&eacute;n&eacute;ralement inclus dans les th&egrave;mes et plugins WordPress.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1683912911121\"><h3 class=\"schema-faq-question\">Comment faire un Shortcode WordPress ?<\/h3> <p class=\"schema-faq-answer\">Vous pouvez cr&eacute;er un shortcode WordPress en suivant ces &eacute;tapes:<br>1. Cr&eacute;er un nouveau fichier de th&egrave;me<br>2. Cr&eacute;er la fonction shortcode<br>3. Ajouter le shortcode &agrave; fermeture automatique au site Web wordpress<br>4. Ajouter des param&egrave;tres au shortcode<br>5. Testez les param&egrave;tres<br>6. Cr&eacute;er des shortcodes ferm&eacute;s<br>7. Ajouter le shortcode ferm&eacute; au site Web<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1683912917511\"><h3 class=\"schema-faq-question\">Comment utiliser les shortcodes WordPress ?<\/h3> <p class=\"schema-faq-answer\">Pour utiliser un shortcode WordPress, allez dans l&rsquo;&eacute;diteur de page ou d&rsquo;article o&ugrave; vous voulez ins&eacute;rer le code court, ajoutez simplement un bloc texte ou un bloc code court dans votre &eacute;diteur Gutenberg. Ins&eacute;rez ensuite le code court, attendez, votre code devra &ecirc;tre ajout&eacute;!<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Apprendre &agrave; cr&eacute;er un shortcode sur WordPress peut &ecirc;tre un moyen efficace de personnaliser vos articles et pages. Cependant, si vous &ecirc;tes un d&eacute;butant, vous pouvez avoir du mal &agrave; comprendre comment utiliser une telle fonctionnalit&eacute; sur votre site. C&rsquo;est pourquoi nous avons pr&eacute;par&eacute; un guide afin que tout le monde puisse d&eacute;marrer facilement. En [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/shortcode-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":189,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment Cr\u00e9er un Shortcode sur Wordpress en 7 \u00c9tapes Simples","rank_math_description":"Vous souhaitez cr\u00e9er un shortcode sous Wordpress ? Vous ne savez pas comment faire ? Suivez nos \u00e9tapes pour devenir un v\u00e9ritable expert !","rank_math_focus_keyword":"shortcode wordpress","footnotes":""},"categories":[4777],"tags":[],"class_list":["post-16093","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-a-shortcode-in-wordpress\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/criar-shortcode-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/shortcode-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-un-shortcode-en-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-a-shortcode-in-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-a-shortcode-in-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-a-shortcode-in-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-a-shortcode-in-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-a-shortcode-in-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-un-shortcode-en-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-un-shortcode-en-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-un-shortcode-en-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/criar-shortcode-wordpress\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/16093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=16093"}],"version-history":[{"count":26,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/16093\/revisions"}],"predecessor-version":[{"id":29831,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/16093\/revisions\/29831"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=16093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=16093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=16093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}