{"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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>Le code pr&eacute;c&eacute;dent poss&egrave;de aussi un attribut suppl&eacute;mentaire &laquo;&nbsp;<strong>style<\/strong>&laquo;&nbsp;. 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>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>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>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><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>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>Dans cet article, nous avons appris &agrave; cr&eacute;er vos propres shortcodes dans WordPress en sept &eacute;tapes faciles :<\/p><p>1. Cr&eacute;er un nouveau fichier de th&egrave;me<\/p><p>2. Cr&eacute;er la fonction shortcode<\/p><p>3. Ajouter le shortcode &agrave; fermeture automatique au site Web wordpress<\/p><p>4. Ajouter des param&egrave;tres au shortcode<\/p><p>5. Testez les param&egrave;tres<\/p><p>6. Cr&eacute;er des shortcodes ferm&eacute;s<\/p><p>7. Ajouter le shortcode ferm&eacute; au site Web<\/p><p>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                    <h4 class=\"title\">Apprenez d'autres techniques avanc&eacute;es de WordPress<\/h4>\n                    <p> <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<\/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>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":0},{"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-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-a-shortcode-in-wordpress","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-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps","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":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/criar-shortcode-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}],"_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}]}}