{"id":70366,"date":"2022-03-10T07:00:44","date_gmt":"2022-03-10T15:00:44","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70366"},"modified":"2025-05-26T07:59:02","modified_gmt":"2025-05-26T14:59:02","slug":"une-introduction-aux-shortcodes-wordpress-avec-exemples-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/","title":{"rendered":"Une Introduction Aux Shortcodes WordPress (Avec Exemples)"},"content":{"rendered":"\n<p>Les shortcodes WordPress peuvent facilement enrichir ton site web avec des \u00e9l\u00e9ments interactifs et captivants qui peuvent \u00eatre r\u00e9p\u00e9t\u00e9s \u00e0 travers les articles et les pages. Des exemples incluent <a href=\"https:\/\/www.dreamhost.com\/blog\/monetize-your-wordpress-image-gallery\/\" target=\"_blank\" rel=\"noopener noreferrer\">des galeries d&#8217;images<\/a>, des formulaires de contact, et des playlists pour rendre ton contenu plus utile et captivant.<\/p>\n\n\n<p>Dans ce post, nous discuterons des shortcodes WordPress et pourquoi ils sont utiles. Ensuite, nous d\u00e9crirons quatre m\u00e9thodes pour commencer \u00e0 utiliser des shortcodes sur ton site. Commencez maintenant !<\/p>\n\n\n<h2 id=\"h-wordpress-shortcodes-101\" class=\"wp-block-heading\"><b>WordPress Shortcodes 101<\/b><\/h2>\n\n\n<p>Les shortcodes WordPress sont des extraits qui permettent d&#8217;incorporer rapidement diff\u00e9rents fichiers, objets ou morceaux de contenu dans ton site web. Ce sont des lignes uniques de code HTML qui peuvent inclure des \u00e9l\u00e9ments de publication interactifs.<\/p>\n\n\n<p>Un shortcode ressemble \u00e0 ceci, entour\u00e9 de deux crochets :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">[exampleshortcode]<\/pre>\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/history-of-wordpress\/?utm_campaign=coschedule&amp;utm_source=facebook_page&amp;utm_medium=DreamHost\" target=\"_blank\" rel=\"noopener noreferrer\">Les shortcodes ont \u00e9t\u00e9 introduits en 2008<\/a> pour faciliter la cr\u00e9ation de publications et de pages plus complexes. Ils offrent un moyen simple d&#8217;ins\u00e9rer et de charger des \u00e9l\u00e9ments de contenu dynamiques sur votre site.<\/p>\n\n\n<p>Par exemple, tu peux vouloir <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-front-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">personnaliser ta page d&#8217;accueil WordPress<\/a> en int\u00e9grant une carte Google pour montrer ton emplacement commercial. Tu pourrais m\u00eame ajouter une vid\u00e9o d&#8217;introduction en utilisant un shortcode :<\/p>\n\n\n<pre class=\"wp-block-preformatted\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-33076 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1.jpg\" alt=\"Code court vid\u00e9o WordPress\" width=\"900\" height=\"294\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-300x98.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-768x251.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-600x196.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-730x238.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-784x256.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-877x286.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/294;\" \/><\/pre>\n\n\n<p>Les propri\u00e9taires de sites web utilisent g\u00e9n\u00e9ralement des shortcodes dans le corps des articles, des pages et des types de publications personnalis\u00e9s. Heureusement, \u00e0 mesure que l&#8217;\u00e9diteur de blocs Gutenberg a \u00e9volu\u00e9, l&#8217;utilisation des shortcodes est devenue encore plus conviviale. Nous aborderons ce sujet plus tard dans l&#8217;article.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h-why-you-might-consider-using-wordpress-shortcodes\" class=\"wp-block-heading\"><b>Pourquoi Envisager D&#8217;utiliser Des Shortcodes WordPress<\/b><\/h2>\n\n\n<p>Il existe plusieurs raisons pour lesquelles tu pourrais vouloir utiliser les shortcodes WordPress. Pour commencer, ils sont souvent plus faciles \u00e0 ajouter \u00e0 ta page que d&#8217;apprendre et d&#8217;\u00e9crire un long morceau de code HTML.<\/p>\n\n\n<p>De plus, les shortcodes peuvent garder ton contenu propre et organis\u00e9. Ils ne prennent pas autant de place dans le HTML de ton article. Cela peut t&#8217;aider \u00e0 identifier facilement les erreurs lorsque tu utilises l&#8217;\u00e9diteur de code.<\/p>\n\n\n<p>Les codes courts sont \u00e9galement r\u00e9utilisables. Tu n&#8217;auras pas besoin d&#8217;ajouter manuellement les m\u00eames fonctionnalit\u00e9s, telles qu&#8217;un appel \u00e0 l&#8217;action (CTA) ou des boutons de r\u00e9seaux sociaux, \u00e0 chaque publication. Au lieu de cela, tu peux simplement coller ton code court.<\/p>\n\n\n<h2 id=\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\" class=\"wp-block-heading\"><b>WordPress Shortcodes 101 (4 Fa\u00e7ons d\u2019Utiliser Ces Extraits)<\/b><\/h2>\n\n\n<p>Il existe deux types de base de codes courts que tu dois conna\u00eetre : auto-fermants et englobants. Les codes courts auto-fermants sont ind\u00e9pendants et ne n\u00e9cessitent pas de balises de fermeture :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode]<\/pre>\n\n\n<p>Les shortcodes englobants entourent un \u00e9l\u00e9ment de contenu sp\u00e9cifique pour le modifier. Par cons\u00e9quent, les shortcodes englobants doivent \u00eatre ferm\u00e9s manuellement. Ils ressemblent g\u00e9n\u00e9ralement \u00e0 ceci :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode] contenu [\/myshortcode]<\/pre>\n\n\n<p>Tu peux aussi modifier les propri\u00e9t\u00e9s des shortcodes avec diff\u00e9rents attributs. Cela influencera la mani\u00e8re dont l&#8217;\u00e9l\u00e9ment s&#8217;affiche sur le frontend.<\/p>\n\n\n<p>Par exemple, tu pourrais changer la taille d&#8217;un shortcode de galerie en ajoutant un attribut de taille :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">[gallery id=\"123\" size=\"medium\"]\u200b\u200b<\/pre>\n\n\n<p>Si tu consultes le <a href=\"https:\/\/wordpress.org\/plugins\/search\/shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">R\u00e9pertoire des Plugins WordPress<\/a>, tu trouveras qu&#8217;il existe de nombreuses options pour utiliser des shortcodes sur ton site WordPress. Voici quatre options diff\u00e9rentes !<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-wordpress-default-shortcodes\"><b>1. Shortcodes Par D\u00e9faut De WordPress<\/b><\/h3>\n\n\n<p>WordPress est \u00e9quip\u00e9 de <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/#built-in-shortcodes\" target=\"_blank\" rel=\"noopener noreferrer\">shortcodes int\u00e9gr\u00e9s de base<\/a>. Ces extraits te permettent d&#8217;int\u00e9grer des m\u00e9dias suppl\u00e9mentaires directement dans tes publications.<\/p>\n\n\n<p>Ces codes courts incluent :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><b>[caption]:<\/b> Entoure le contenu de l\u00e9gendes.<\/li>\n\n\n\n<li><b>[gallery]:<\/b> Affiche des galeries d&#8217;images.<\/li>\n\n\n\n<li><b>[audio]:<\/b> Int\u00e8gre et joue des fichiers audio.<\/li>\n\n\n\n<li><b>[video]:<\/b> Int\u00e8gre et joue des fichiers vid\u00e9o.<\/li>\n\n\n\n<li><b>[playlist]:<\/b> Affiche une collection de fichiers audio ou vid\u00e9o.<\/li>\n\n\n\n<li><b>[embed]:<\/b> Entoure les \u00e9l\u00e9ments int\u00e9gr\u00e9s.<\/li>\n\n\n\n<\/ul>\n\n\n<p>Tu peux \u00e9galement activer une vari\u00e9t\u00e9 de shortcodes suppl\u00e9mentaires via le <a href=\"https:\/\/jetpack.com\/support\/shortcode-embeds\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin Jetpack<\/a>.<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tThe Best WordPress Plugins in 2026 (According to Site Owners)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/best-wordpress-plugins\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n<p><\/p>\n\n\n<p>Tout d&#8217;abord, assure-toi que le module Jetpack est activ\u00e9 en cliquant sur <i>Jetpack <\/i>dans ton tableau de bord WordPress :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"396\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15.jpg\" alt=\"Jetpack\" class=\"wp-image-33089 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-300x132.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-768x338.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-600x264.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-730x321.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-784x345.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-877x386.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/396;\" \/><\/figure><\/div>\n\n<p>Ensuite, s\u00e9lectionne <i>Settings<\/i> :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"250\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9.jpg\" alt=\"Jetpack\" class=\"wp-image-33083 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-300x83.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-768x213.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-600x167.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-730x203.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-784x218.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-877x244.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/250;\" \/><\/figure><\/div>\n\n<p>Rends-toi \u00e0 l&#8217;onglet <i>\u00c9criture<\/i>, descends jusqu&#8217;\u00e0 la section <i>R\u00e9daction<\/i> et active <i>Composer en utilisant des shortcodes pour int\u00e9grer des m\u00e9dias de sites populaires<\/i> :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"321\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12.jpg\" alt=\"Jetpack\" class=\"wp-image-33086 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-300x107.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-768x274.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-600x214.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-730x260.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-784x280.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-877x313.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/321;\" \/><\/figure><\/div>\n\n<p>Une fois que tu as activ\u00e9 cette option, tu peux utiliser le shortcode [tweet] pour int\u00e9grer un tweet sp\u00e9cifique dans ton billet. Il suffit de copier l&#8217;URL du tweet et de la coller dans tes crochets de shortcode :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"230\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14.jpg\" alt=\"Code abr\u00e9g\u00e9 de tweet\" class=\"wp-image-33088 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-300x77.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-768x196.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-600x153.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-730x187.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-784x200.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-877x224.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/230;\" \/><\/figure><\/div>\n\n<p>Cela int\u00e9grera le tweet li\u00e9 dans ton post. Le r\u00e9sultat ressemblera \u00e0 ceci :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"750\" height=\"798\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7.jpg\" alt=\"Raccourci Twitter WordPress\" class=\"wp-image-33081 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-730x777.jpg.webp 730w\" data-sizes=\"(max-width: 750px) 100vw, 750px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 750px; --smush-placeholder-aspect-ratio: 750\/798;\" \/><\/figure><\/div>\n\n<p>Tu peux utiliser ces codes courts suppl\u00e9mentaires pour int\u00e9grer une multitude d&#8217;autres m\u00e9dias dans ton contenu, y compris des playlists Spotify, des documents Google ou des recettes.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-gutenberg-shortcodes\"><b>2. Codes Courts de Gutenberg<\/b><\/h3>\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-gutenberg-for-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\">Les blocs Gutenberg<\/a> facilitent l&#8217;ajout de contenu dynamique dans vos articles. L&#8217;\u00e9diteur de blocs te permet de modifier facilement des sections individuelles et d&#8217;appliquer des param\u00e8tres et des r\u00e8gles de formatage sp\u00e9cifiques aux blocs sans utiliser de plugins.<\/p>\n\n\n<p>L&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9diteur Gutenberg a \u00e9volu\u00e9<\/a> pour rendre la cr\u00e9ation de publications et de pages WordPress encore plus facile. Il offre une mani\u00e8re conviviale d&#8217;ins\u00e9rer des shortcodes. La plupart des blocs Gutenberg remplacent les shortcodes standards, mais l&#8217;\u00e9diteur de blocs s&#8217;est av\u00e9r\u00e9 \u00eatre une cible mouvante, donc apprendre \u00e0 utiliser les shortcodes pour la fonctionnalit\u00e9 est une bonne id\u00e9e.<\/p>\n\n\n<p>Par exemple, tu pourrais utiliser un bloc Gutenberg pour int\u00e9grer le tweet de notre exemple pr\u00e9c\u00e9dent au lieu d&#8217;un shortcode. Il te suffit de cliquer sur l&#8217;ic\u00f4ne <i>+ <\/i>et de s\u00e9lectionner le bloc <i>Twitter <\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"377\" height=\"356\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4.jpg\" alt=\"Bloc Twitter dans WordPress\" class=\"wp-image-33079 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes4.jpg.webp 377w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4-300x283.jpg 300w\" data-sizes=\"(max-width: 377px) 100vw, 377px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 377px; --smush-placeholder-aspect-ratio: 377\/356;\" \/><\/figure><\/div>\n\n<p>Cette m\u00e9thode te permet de coller directement l&#8217;URL du tweet dans le bloc sans \u00e9crire le shortcode entre crochets.<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tYour Complete Guide to WordPress Full-Site Editing\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-full-site-editing\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n<p><\/p>\n\n\n<p>De plus, l&#8217;\u00e9diteur de blocs Gutenberg propose un bloc <i>Shortcode<\/i>. Il te permet de g\u00e9rer tes extraits dans l&#8217;\u00e9diteur visuel sans \u00e9crire directement le code en HTML :<\/p>\n\n\n<p>Gutenberg te permet \u00e9galement de cr\u00e9er des blocs r\u00e9utilisables, ce qui peut \u00eatre pratique pour utiliser les m\u00eames extraits de contenu dans tes articles. Nous pouvons te montrer ce concept avec un appel \u00e0 l&#8217;action pour les r\u00e9seaux sociaux que tu pourrais utiliser \u00e0 la fin des articles que tu \u00e9cris sur ton site.<\/p>\n\n\n<p>Tu peux commencer en s\u00e9lectionnant le bloc <i>Shortcode<\/i> dans la fen\u00eatre pop-up :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"265\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11.jpg\" alt=\"Bloc de shortcode Gutenberg\" class=\"wp-image-33085 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-300x88.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-768x226.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-600x177.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-730x215.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-784x231.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-877x258.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/265;\" \/><\/figure><\/div>\n\n<p>Ensuite, une fois que tu as ajout\u00e9 ton extrait de CTA, clique sur les trois points pour un menu d&#8217;options et s\u00e9lectionne <i>Ajouter aux<\/i> <i>blocs r\u00e9utilisables<\/i> :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1348\" height=\"590\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8.jpg\" alt=\"Blocs r\u00e9utilisables WordPress\" class=\"wp-image-33082 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8.jpg.webp 1348w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1348px) 100vw, 1348px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1348px; --smush-placeholder-aspect-ratio: 1348\/590;\" \/><\/figure><\/div>\n\n<p>Tu peux alors nommer le bloc r\u00e9utilisable :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"759\" height=\"473\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13.jpg\" alt=\"nommage de blocs r\u00e9utilisables\" class=\"wp-image-33087 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13.jpg.webp 759w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13-300x187.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-600x374.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-730x455.jpg.webp 730w\" data-sizes=\"(max-width: 759px) 100vw, 759px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 759px; --smush-placeholder-aspect-ratio: 759\/473;\" \/><\/figure><\/div>\n\n<p>Ton extrait sera ensuite enregistr\u00e9 sous l&#8217;onglet r\u00e9utilisable, te permettant de l&#8217;utiliser partout sur ton site web, y compris dans les articles, les pages et les zones de widget.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-plugin-shortcodes\"><b>3. Shortcodes de Plugin<\/b><\/h3>\n\n\n<p>Diff\u00e9rents plugins WordPress viennent \u00e9galement avec leurs propres codes courts. Certains de ces outils peuvent m\u00eame t&#8217;aider \u00e0 ajouter des param\u00e8tres personnalisables aux codes courts par d\u00e9faut existants.<\/p>\n\n\n<p>Par exemple, tu peux obtenir des shortcodes pr\u00eats \u00e0 l&#8217;emploi pour des formulaires de contact depuis le plugin <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/participants-database\/\" target=\"_blank\" rel=\"noopener noreferrer\">Participants Database<\/a>. Il suffit de taper [pdb_signup] pour ins\u00e9rer un formulaire d&#8217;inscription dans un article :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1000\" height=\"228\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6.jpg\" alt=\"Bloc de formulaire Shortcode dans WordPress\" class=\"wp-image-33080 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6.jpg.webp 1000w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-300x68.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-768x175.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-600x137.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-730x166.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-784x179.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-877x200.jpg.webp 877w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/228;\" \/><\/figure><\/div>\n\n<p>Le formulaire s&#8217;affichera alors sur le frontend :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"687\" height=\"436\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10.jpg\" alt=\"cr\u00e9ation d'un formulaire web dans WordPress\" class=\"wp-image-33084 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10.jpg.webp 687w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10-600x381.jpg.webp 600w\" data-sizes=\"(max-width: 687px) 100vw, 687px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 687px; --smush-placeholder-aspect-ratio: 687\/436;\" \/><\/figure><\/div>\n\n<p>Si cela t&#8217;int\u00e9resse, tu peux en apprendre davantage sur <a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins-you-dont-know-about\/\" target=\"_blank\" rel=\"noopener noreferrer\">d&#8217;autres plugins WordPress<\/a> qui peuvent am\u00e9liorer ton site web. Cela inclut le <a href=\"https:\/\/wordpress.org\/plugins\/enhanced-media-library\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin Enhanced Media Library<\/a>, qui peut t&#8217;aider \u00e0 ajuster les param\u00e8tres pour les shortcodes Playlist et Gallery int\u00e9gr\u00e9s.<\/p>\n\n\n<p>Cependant, n&#8217;oublie pas de mettre \u00e0 jour tes plugins de shortcode WordPress. Faire cela peut garantir que ton site fonctionne <a href=\"https:\/\/www.dreamhost.com\/blog\/optimize-wordpress-website-speed\/\" target=\"_blank\" rel=\"noopener noreferrer\">aussi rapidement que possible<\/a> et n\u2019est pas vuln\u00e9rable aux menaces de s\u00e9curit\u00e9.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-custom-shortcodes\"><b>4. Codes Courts Personnalis\u00e9s<\/b><\/h3>\n\n\n<p>Si tu as besoin de plus de fonctionnalit\u00e9s avec les shortcodes, il est possible de cr\u00e9er des shortcodes personnalis\u00e9s. Ils peuvent \u00eatre des outils pr\u00e9cieux pour les d\u00e9veloppeurs cherchant \u00e0 r\u00e9duire le temps pass\u00e9 sur le codage r\u00e9p\u00e9titif.<\/p>\n\n\n<p>Tu devrais noter que cr\u00e9er des shortcodes personnalis\u00e9s n\u00e9cessite des connaissances techniques. Si tu ne te sens pas \u00e0 l&#8217;aise avec la programmation, tu pourrais pr\u00e9f\u00e9rer te tenir \u00e0 une des autres strat\u00e9gies que nous avons mentionn\u00e9es.<\/p>\n\n\n<p>Si tu veux essayer cette m\u00e9thode, envisage d&#8217;utiliser un <a href=\"https:\/\/generatewp.com\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\">g\u00e9n\u00e9rateur tel que GenerateWP<\/a> pour aider \u00e0 formater ton code depuis le d\u00e9but. Tu peux remplir diff\u00e9rents champs d&#8217;attributs pour modifier l&#8217;apparence de l&#8217;\u00e9l\u00e9ment selon tes pr\u00e9f\u00e9rences.<\/p>\n\n\n<p>Tu peux ensuite impl\u00e9menter ces shortcodes en utilisant la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">fonction add_shortcode<\/a>. En action, cela ressemblera \u00e0 ceci :<\/p>\n\n\n<pre class=\"wp-block-preformatted\">add_shortcode( string $tag, callable $callback )<\/pre>\n\n\n<p>Cependant, si tu ne te sens pas \u00e0 l&#8217;aise de cr\u00e9er un shortcode personnalis\u00e9 \u00e0 partir de z\u00e9ro, il y a une autre solution ! Tu peux contacter notre \u00e9quipe de <a href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\" target=\"_blank\" rel=\"noopener noreferrer\">services de d\u00e9veloppement web personnalis\u00e9<\/a>, et nous pouvons t&#8217;aider :<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1878\" height=\"742\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3.jpg\" alt=\"DreamHost Services Professionnels - Conception de site web WordPress\" class=\"wp-image-33078 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3.jpg.webp 1878w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-300x119.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1024x405.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-768x303.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1536x607.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-600x237.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1200x474.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-730x288.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1460x577.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-784x310.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1568x620.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-877x347.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1754x693.jpg.webp 1754w\" data-sizes=\"(max-width: 1878px) 100vw, 1878px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1878px; --smush-placeholder-aspect-ratio: 1878\/742;\" \/><\/figure><\/div>\n\n<p>En utilisant les Services professionnels de DreamHost, tu as juste besoin de remplir une demande de d\u00e9veloppement web. Nous te poserons quelques questions simples sur ton site web et tes exigences. Ensuite, nous pouvons commencer \u00e0 travailler sur l&#8217;impl\u00e9mentation de tes modifications sur une version pr\u00e9liminaire de ton site. Une fois que tu as approuv\u00e9 les derniers ajustements, nous pouvons appliquer le nouveau code \u00e0 ton site web en direct !<\/p>\n\n\n<h2 id=\"h-use-wordpress-shortcodes-to-enhance-your-content\" class=\"wp-block-heading\"><b>Utilise Les Shortcodes WordPress Pour Am\u00e9liorer Ton Contenu<\/b><\/h2>\n\n\n<p>Les shortcodes WordPress peuvent enrichir le contenu de ton site avec des fonctionnalit\u00e9s attrayantes pour les visiteurs. Ils peuvent garantir que les lecteurs interagissent avec ton site et continuent de revenir pour plus.<\/p>\n\n\n<p>Dans cet article, nous avons d\u00e9crit quatre m\u00e9thodes pour utiliser les shortcodes WordPress sur ton site :<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Shortcodes par d\u00e9faut de WordPress<\/li>\n\n\n\n<li>Shortcodes de Gutenberg<\/li>\n\n\n\n<li>Shortcodes de Plugins<\/li>\n\n\n\n<li>Shortcodes personnalis\u00e9s<\/li>\n\n\n\n<\/ol>\n\n\n<p>Si tu penses que tu n&#8217;as pas l&#8217;expertise technique ou le temps de r\u00e9diger des shortcodes ou des Blocks, ne t&#8217;inqui\u00e8te pas ! Tu peux consulter nos <a href=\"https:\/\/www.dreamhost.com\/pro-services\/development\" target=\"_blank\" rel=\"noopener noreferrer\">Services professionnels de d\u00e9veloppement de site web<\/a> pour d\u00e9couvrir comment nous pouvons personnaliser ton site avec du code de haute qualit\u00e9.<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"200\" height=\"202\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/07\/CTA-Customer-Spotlight-2.png\" alt=\"Services de d\u00e9veloppement de sites web personnalis\u00e9s DreamHost\" class=\"wp-image-25383 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 200px; --smush-placeholder-aspect-ratio: 200\/202;\" \/><\/figure><\/div>\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Tu Le R\u00eaves, Nous Le Codons\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Profite de plus de 20 ans d&#8217;expertise en codage en choisissant notre service de D\u00e9veloppement Web. Dis-nous simplement ce que tu souhaites pour ton site \u2014 nous prenons le relais \u00e0 partir de l\u00e0.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            En Savoir Plus                    <\/a>\n\n  <\/div>\n<\/div>\n\n<p><\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les shortcodes WordPress peuvent facilement am\u00e9liorer ton site web avec des \u00e9l\u00e9ments interactifs et captivants qui peuvent \u00eatre r\u00e9p\u00e9t\u00e9s \u00e0 travers les articles et les pages. Des exemples incluent des galeries d&#8217;images, des formulaires de contact, et des playlists pour rendre ton contenu plus utile et engageant. Dans cet article, nous discuterons des shortcodes WordPress et pourquoi ils sont utiles. Ensuite, nous d\u00e9crirons quatre m\u00e9thodes pour commencer \u00e0 les utiliser [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":33073,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Lis tout sur les puissants outils dynamiques que sont les Shortcodes WordPress et comment le contenu dynamique continue d\u2019\u00e9voluer avec les Blocs Gutenberg. En savoir plus !","toc_headlines":"[[\"h-wordpress-shortcodes-101\",\"WordPress Shortcodes 101\"],[\"h-why-you-might-consider-using-wordpress-shortcodes\",\"Pourquoi Envisager D'utiliser Des Shortcodes WordPress\"],[\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\",\"WordPress Shortcodes 101 (4 Fa\u00e7ons d\u2019Utiliser Ces Extraits)\"],[\"h-use-wordpress-shortcodes-to-enhance-your-content\",\"Utilise Les Shortcodes WordPress Pour Am\u00e9liorer Ton Contenu\"]]","hide_toc":false,"footnotes":""},"categories":[15017,14985,15009],"tags":[],"class_list":["post-70366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-getting-started-fr","category-dreampress-fr","category-wordpress-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Une Introduction Aux Shortcodes WordPress (Avec Exemples) - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Lis tout sur les puissants outils dynamiques que sont les Shortcodes WordPress et comment le contenu dynamique continue d\u2019\u00e9voluer avec les Blocs Gutenberg. En savoir plus !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une Introduction Aux Shortcodes WordPress (Avec Exemples)\" \/>\n<meta property=\"og:description\" content=\"Lis tout sur les puissants outils dynamiques que sont les Shortcodes WordPress et comment le contenu dynamique continue d\u2019\u00e9voluer avec les Blocs Gutenberg. En savoir plus !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-10T15:00:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:59:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Une Introduction Aux Shortcodes WordPress (Avec Exemples) - DreamHost Blog","description":"Lis tout sur les puissants outils dynamiques que sont les Shortcodes WordPress et comment le contenu dynamique continue d\u2019\u00e9voluer avec les Blocs Gutenberg. En savoir plus !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/","og_locale":"en_US","og_type":"article","og_title":"Une Introduction Aux Shortcodes WordPress (Avec Exemples)","og_description":"Lis tout sur les puissants outils dynamiques que sont les Shortcodes WordPress et comment le contenu dynamique continue d\u2019\u00e9voluer avec les Blocs Gutenberg. En savoir plus !","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-10T15:00:44+00:00","article_modified_time":"2025-05-26T14:59:02+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Une Introduction Aux Shortcodes WordPress (Avec Exemples)","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-05-26T14:59:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/"},"wordCount":1683,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","articleSection":["Commencer","DreamPress","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/","name":"Une Introduction Aux Shortcodes WordPress (Avec Exemples) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-05-26T14:59:02+00:00","description":"Lis tout sur les puissants outils dynamiques que sont les Shortcodes WordPress et comment le contenu dynamique continue d\u2019\u00e9voluer avec les Blocs Gutenberg. En savoir plus !","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","width":900,"height":598,"caption":"guide to WordPress Shortcodes"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/une-introduction-aux-shortcodes-wordpress-avec-exemples-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Une Introduction Aux Shortcodes WordPress (Avec Exemples)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"fr","translations":{"fr":70366,"es":33096,"en":33069,"de":52332,"pl":55006,"uk":55028,"pt":55062,"ru":55116,"it":68356,"nl":70395},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70366"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70366\/revisions"}],"predecessor-version":[{"id":70368,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70366\/revisions\/70368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33073"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}