Imaginez que vous puissiez ajouter de nouvelles choses à votre site WordPress, comme des diaporamas, des formulaires de contact ou même des listes spéciales, en tapant un simple code. C’est la puissance des codes courts.
Vous trouverez que de nombreuses extensions et thèmes WordPress peuvent utiliser des codes courts pour ajouter des fonctionnalités supplémentaires à votre site. Beaucoup de nos lecteurs nous demandent la meilleure façon de les ajouter à leurs publications, pages et colonne latérale.
Dans cet article, nous allons vous afficher comment utiliser les codes courts sur votre site WordPress, étape par étape. Nous allons même vous afficher comment créer des codes courts personnalisés si vous voulez être vraiment créatif.
Qu’est-ce qu’un code court ?
Lesshortcodes dans WordPress sont des raccourcis de code qui vous aident à ajouter du contenu dynamique aux publications, pages et widgets de la colonne latérale de WordPress. Ils sont affichés entre crochets comme ceci :
[myshortcode]
Pour mieux comprendre les codes courts, jetons un coup d’œil à l’arrière-plan de la raison pour laquelle ils ont été ajoutés en premier lieu.
WordPress filtre tout le contenu pour s’assurer que personne n’utilise les publications et le contenu des pages pour insérer un code malveillant dans la base de données. Cela signifie que vous pouvez écrire du HTML de base dans vos publications, mais que vous ne pouvez pas écrire de code PHP.
Mais qu’en est-il si vous souhaitez exécuter un code personnalisé à l’intérieur de vos publications pour afficher des articles similaires, des bannières publicitaires, des formulaires de contact, des galeries ou autre chose ?
C’est là qu’intervient l’API des codes courts.
Fondamentalement, il permet aux développeurs/développeuses d’ajouter leur code à l’intérieur d’une fonction, puis d’inscrire cette fonction dans WordPress en tant que code court, de sorte que les utilisateurs/utilisatrices puissent facilement l’utiliser sans avoir de connaissances en matière de codage.
Lorsque WordPress trouve le code court, il exécute automatiquement le code qui lui est associé.
Voyons comment ajouter facilement des codes courts à vos publications et pages WordPress. Vous pouvez utiliser les liens ci-dessous pour passer à votre méthode préférée.
- Adding a Shortcode in WordPress Posts and Pages
- Adding a Shortcode in WordPress Sidebar Widgets
- Adding a Shortcode in Old WordPress Classic Editor
- Adding a Shortcode in WordPress Theme Files
- Adding a Shortcode in Block Theme Files With the Full-Site Editor
- Creating Your Own Custom Shortcode in WordPress
- Shortcodes vs. Gutenberg Blocks
Ajout d’un code court dans les publications et les pages de WordPress
Tout d’abord, vous devez modifier la publication et la page où vous souhaitez ajouter le code court.
Ensuite, vous devez cliquer sur le bouton d’ajout de bloc « + » pour insérer un bloc de code court.
Après avoir saisi/saisie le bloc Shortcode, vous pouvez simplement saisir votre code court dans les Réglages du bloc.
Le code court sera fourni par divers plugins WordPress que vous pourriez utiliser, tels que WPForms pour les formulaires de contact ou OptinMonster pour le marketing e-mail.
Pour en savoir plus sur l’utilisation des blocs, consultez notre tutoriel Gutenberg pour plus de détails.
Vous pouvez maintenant enregistrer votre publication ou votre page et prévisualiser vos modifications pour voir le code court en action.
Ajout d’un code court dans les widgets de la colonne latérale de WordPress
Vous pouvez également utiliser des codes courts dans les widgets de la colonne latérale de WordPress.
Il suffit de se rendre sur la page Apparence » Widgets et d’ajouter un bloc de widgets « Shortcode » à une colonne latérale.
Vous pouvez maintenant coller votre code court dans la zone de texte du widget.
N’oubliez pas de cliquer sur le bouton « Mettre à jour » pour stocker les réglages de votre widget.
Après cela, vous pouvez visiter votre site WordPress pour voir la Prévisualisation directe du code court dans le widget de la colonne latérale.
Ajout d’un code court dans l’ancien éditeur/éditrices classique de WordPress
Si vous utilisez encore l’ancien éditeur classique de WordPress, voici comment vous pouvez ajouter des codes courts à vos publications et pages WordPress.
Il suffit de modifier la publication et la page où vous souhaitez ajouter le code court. Vous pouvez coller le code court n’importe où à l’intérieur de l’éditeur de contenu où vous voulez qu’il s’affiche. Confirmez simplement que le code court se trouve sur sa propre ligne.
N’oubliez pas d’enregistrer vos modifications. Après cela, vous pouvez prévisualiser votre publication et votre page pour voir le code court en action.
Ajout d’un code court dans les fichiers du thème WordPress
Les codes courts sont destinés à être utilisés dans les publications, les pages et les widgets de WordPress. Cependant, il peut arriver que vous souhaitiez utiliser un code court à l’intérieur d’un fichier de thème WordPress.
WordPress permet de le faire facilement, mais vous devrez modifier les fichiers de votre thème WordPress. Si vous n’avez jamais fait cela auparavant, consultez notre guide sur la façon de copier et coller du code dans WordPress.
Ajouté à n’importe quel modèle de thème WordPress, vous pouvez ajouter un code court en utilisant le code suivant :
<?php echo do_shortcode('[your_shortcode]'); ?>
WordPress va maintenant rechercher le code court et afficher sa sortie dans le modèle de votre thème.
Ajout d’un code court dans les fichiers du thème Block avec l’éditeur du site complet
Si vous utilisez un thème en blocs, vous trouverez plus facile d’ajouter des codes courts dans les fichiers de votre thème WordPress à l’aide de l’éditeur de site complet.
Vous pouvez accéder à cet outil en sélectionnant Apparence » Éditeur dans le tableau de bord WordPress.
Le modèle d’accueil de votre thème s’affiche par défaut. Vous pouvez passer à d’autres modèles en sélectionnant l’option « Modèles ».
Une fois que vous avez choisi un modèle, vous pouvez commencer à le modifier en cliquant dans le volet droit de l’éditeur. L’éditeur remplit alors l’écran.
Maintenant, vous pouvez cliquer sur l’icône d’insertion de bloc » + » et rechercher le bloc de code court. Après cela, il suffit de le faire glisser sur le Modèle et de taper le code court que vous souhaitez utiliser.
N’oubliez pas de cliquer sur le bouton « Enregistrer » en haut de l’écran pour stocker vos modifications.
Créer votre propre code court personnalisé dans WordPress
Les codes courts peuvent être très utiles lorsque vous souhaitez ajouter du contenu dynamique ou du code personnalisé dans les publications et les pages de WordPress. Cependant, si vous souhaitez créer un code court personnalisé, il est nécessaire d’avoir une certaine expérience du codage.
Si vous êtes à l’aise avec l’écriture de code PHP, voici un exemple de code que vous pouvez utiliser comme modèle :
// function that runs when shortcode is called
function wpb_demo_shortcode() {
// Things that you want to do.
$message = 'Hello world!';
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');
Dans ce code, nous avons d’abord créé une fonction qui exécute un code et renvoie le résultat. Ensuite, nous avons créé un nouveau code court appelé « greeting » et demandé à WordPress d’exécuter la fonction que nous avons créée.
Vous pouvez ajouter ce code au fichier functions.php de votre thème manuellement ou utiliser une extension d’extraits de code comme WPCode.
Pour plus de détails, vous pouvez consulter notre guide pour ajouter du code personnalisé dans WordPress sans rien casser.
Une fois que vous avez fait cela, vous pouvez ajouter ce code court à vos publications, pages et widgets en utilisant le code suivant :
[accueil]
Il exécutera la fonction que vous avez créée et affichera le résultat souhaité.
Voyons maintenant une utilisation plus pratique d’un code court.
Dans cet exemple, nous allons afficher une bannière Google AdSense à l’intérieur d’un code court :
// The shortcode function
function wpb_demo_shortcode_2() {
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-0123456789101112"
data-ad-slot="9876543210"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
// Ad code returned
return $string;
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');
N’oubliez pas de remplacer le code de l’annonce par votre propre code d’annonce.
Vous pouvez désormais utiliser le code court [my_ad_code] dans vos publications, pages et widgets de la colonne latérale de WordPress. WordPress exécutera automatiquement la fonction associée au code court et affichera le code de la publicité.
Shortcodes vs. Blocs Gutenberg
Les utilisateurs/utilisatrices nous demandent souvent quelles sont les différences entre les codes courts vs les blocs Gutenberg.
Fondamentalement, les blocs vous permettent de faire la même chose que les codes courts, mais d’une manière plus simple/simple d’utilisation.
Au lieu de nécessiter l’ajout d’un code court pour afficher du contenu dynamique, les blocs permettent aux utilisateurs/utilisatrices d’ajouter du contenu dynamique à l’intérieur des publications/pages avec une interface utilisateur plus intuitive. Beaucoup d’extensions WordPress populaires ont opté pour l’utilisation de blocs au lieu de codes courts parce qu’ils sont plus faciles à utiliser pour les débutants.
Nous avons dressé une liste des extensions de blocs Gutenberg les plus utiles pour WordPress que vous pourriez vouloir essayer.
Si vous souhaitez créer vos propres blocs Gutenberg personnalisés, vous pouvez suivre notre tutoriel étape par étape sur la façon de créer des blocs Gutenberg personnalisés sur WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter un code court dans WordPress. Vous pouvez également consulter notre guide sur la façon de créer un thème WordPress personnalisé sans écrire de code et notre choix d’experts des meilleurs plugins de constructeur de page WordPress par glisser-déposer.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
David
-Hi, you know if its possible to add a box fixed for example with a shortcode inside? TNX
WPBeginner Support
That would depend on the plugin you are using for the shortcode.
Administrateur
Tihomir
Hi All
in one of my pages I am using this shortcode [product_category category=’jeans’ number=’1000′ per_page=’1000′] . It shows 1000 products of the chosen category jeans. What I can add to this code to make this 1000 products appear same like on product category page or by with a load more button?
Jose Rodriguez
English translation –> but something happens when I add the shortcode and then some text, it turns out that this text is inside the html of the shortcode in the frontend, how can I avoid that?
loganathan
I am creating an own theme, the problem is that theme does no support shortcode. can anyone help me to enable shortcode functionality for my theme.
Ihsan
thanks for sharing such a nice article..
i want to know how we can use php and html both in short code… waiting for good response thanks…
Melissa Lowe
I installed a Mailchimp for WordPress shortcode ..pasted it at the end of the text version of my document/article & no form was created & this is what it said…..MailChimp for WordPress error: There is no form with ID 0, perhaps it was deleted?
Ashkan
What for $atts in that function ?
Helena
Hi,
I have a widget by the homepage sidebar from a multisite installation and want to have 1 widget (only one) from this sidebar working at the subsites.
It is a text widget with a picture, this picture links to an online ebook.
Do you think I can use this to have it done?
Many thanks!
Vinayak Ganiger
The wp form shortcode is not working in pages but it works fine in posts. My website is vinstechs.com. In my website page named Projects is their, in that the shortcode is not working.
What’s the solution for this, please reply with solution.
Meryl
I have a slightly more complex question.
I’m using a theme with a theme options panel.
I want to use a shortcode inside one of those options.
However the output is just the [shortcode] text. Is there specific syntax I can use or does it differ from theme to theme? It’s taking forever to get answers from the theme dev.
Mayank Jain
Perfect beginner explanation!
Vikash Ahlawat
Very helpful post to create our own plugin.
hirak das
Hi i am having a problem with [login_widget] shortcode.when i inserted this code to any page/post on wordpress i only get the text but not the login form…i am using login widget with shortcode plugin…please help…
Armen
This doesn’t work if you’re trying to place another shortcode within the shortcode you’re creating.
Say I had a shortcode like [jpshare] and I wanted to place it along with other stuff into another shortcode function like in this article to add to the posts, how would you do that?
Mike
No mention in the article WHERE to add the shortcode. Back to Google for a better tutorial.
Drew
It clearly stated the code goes into « functions.php ». If you’re not sure how to use the shortcode, it goes anything you add text.
Ihatewordpress
Hello,
As you can tell from my name I’m very frustrated right now with wordpress.
>>This last part is simple, just add the [adsense] shortcode in the HTML or Visual views of the Post or Page content editor.<<
Not even a tiny clue how to do that – would you be willing to expand on this? Thank you
WPBeginner Support
WordPress uses shortcodes to add functionality into posts and pages. Like in this tutorial if you wanted to display advertisement code, then you will create a shortcode for it. Once you have created a shortcode you can use it in your posts and pages. Create a new post or edit an existing one and add your shortcode with square brackets in the post content area, like [adsense].
Administrateur
Brock
I installed Popup manager plugin for newsletter subscribers. I got the popup to appear by following your suggestion of putting the shortcode in a comment on my main page. This works but only if a person expands my first comment to read the entire thing. Where/how do I paste the shortcode to get the popup to appear when someone visits my page without requiring them to do anything else? I’m trying to find something in the template customization options but nothing is standing out.
Patty
Please help me understand if this is using a shortcode plugin properly. I need to display the date of the last update to a post or page to stop Google structured errors. I am using default 2014 only with plugins. I found a shortcode plugin named « Last Updated Shortcode » that seems to do what I need. I am wondering if this is what I do.
I would install the plugin, and then activate the plugin. Then on the page/post I would Edit page/post, and at the bottom of the post (or anywhere else if I prefer) add the shortcode. So I would literally type [lastupdated] The last updated date should then appear, correct???
And hopefully, Google will be happy and stop emailing notices of structured errors.
WPBeginner Support
Yes. We are not sure about how it will affect your SEO though. You may want to take a look at how to display the last updated date of your posts in WordPress.
Administrateur
Larry Leek
I’m guessing using the short codes for things like countdown timers is is only for wordpress.org or self hosted wp users correct?
WPBeginner Support
Yes.
Administrateur
Anibal
Hi I’m having trouble with the short code [tpe mylang lang=’es, en’] I know WP has recently changed this shortcode replacing the old [tp mylang= »yes » lang= »es, en » ] for the new one, but I’ve done the replacement and I still get to a 404 Nothing found error page, whenever I click on a link with this code. Any Ideas?
WPBeginner Support
You are probably using Transposh plugin. Please contact the plugin support, they would be able to help you better.
Administrateur
Akshat Verma
can you recommend any good shortcode plugin for wordpress 4.2
Steve
I am having trouble figuring out how to add code comments to a page with just shortcode in it. I’ve tried HTML & PHP comment tags and when added the shortcode doesn’t work anymore. The reason I would like to comment the code is that I would like to document information about the shortcode in the page I call it from ( I may not be the site admin forever).
WPBeginner Support
WordPress will strip out PHP or HTML comments in post editor. If you were using Edit Flow, then you could leave a note below the post. Right now you can switch to Text editor and leave HTML comment, but as soon as some user views the post in visual editor it will be stripped out again.
Administrateur
Steve
It strips out the comments AND puts in a blank line for each comment. I put the comments below the shortcode and that works fine.
Thanks for helping me understand what was going on.
Michael
When I add shortcode to posts, whether it be in the middle of an article or at the end, the actual element always appears at the top of the post, any idea why?
Malte
Same here! How to fix that?!
Malte
Okay… Use return instead of echo and everything is k!
James Newman
@MALTE – I have the same issue. Can you clarify which file needs to be edited? I looked at the .php files for the plugin and could not find any echo statements to replace.
Thanks!
WPBeginner Staff
Simply copy [rx_aeolus_three_cols] and paste it in a WordPress page. Save your page and then preview it. However, you will first have to create your portfolio in the plugin. Otherwise you will not see anything, because there is nothing for the plugin to display.
Usha
I have downloaded a plug-in ‘Aeolus portfolio’ for the WordPress 3.9.2 running Twenty Eleven theme. I have been given the following shortcodes in the plug-in setting:
[rx_aeolus_three_cols]-Displays all portfolio as three columns.
[rx_aeolus_two_cols]-Displays all portfolio as two columns.
[rx_aeolus_one_col]-Displays all portfolio as one column.
Can anyone help as to how these short code can be incorporated in a page. I am new to WP plugins and badly need help.
Thanks
Usha
Sweetbreeze Tornado
What if you want to add a button with shortcode?
Dan
Thanks! This thread helped me a lot.
Just in case someone else lands in here and need to use a more complex HTML/PHP code structure inside a shortcode, this is an example using some aditional options from the WordPress Shortcodes API documentation:
Place this (and modify as needed) inside your functions.php:
http://pastie.org/9454401
Then you just use this shortcode inside your WordPress content
[mycustomshortcode]
Greetings!
Rob
You’re the man! This is exactly what I needed. Thank you.
WPBeginner Staff
You can add this code in your theme’s functions.php file.
Aymen Benzarti
HI
I’m beginner and this is my first time with wordpress
so the first question when i tried this tutorial is in which file i have to write this code ?
Nidesh
Hi,
Could you please tell me whether i have to put short codes to a particular page if i want any particular plugin to be displayed in that particular page.
E.g. I’ve installed Collabpress plugin. And i don’t see it’s UI in the front end of my site. So do i have to insert any shortcode to a page for it to be displayed?
WPBeginner Support
Nidesh, yes you will be using shortcodes to do that. Please check out our guide on using Collabpress
Administrateur
Christina
I would like to add the subscribe shortcode to my side menu. How do I do this?
Amber T
I am just a little confused… where am I embedding this shortcode.
I have a columns plugin that provided the shortcode with a click of a buton, not sure if I have to take the code and embed it in my html.
please help.
thanks in advance!
WPBeginner Support
just put the shortcode in your post content. Click on the preview button to see how it looks before publishing your post.
Administrateur
Carol Manser
Really? Easy? Simple? This website is great but it says it is for beginners. I’ve been using Wordpress for 2 years and yet I did not understand it at all. It’s quite annoying the way geeks always bang on about how easy something is and then write something totally incomprehensible to ordinary humans – just like every Math teacher I ever had.
OK, write an article that can only be understood by geeks – fine, but please don’t keep telling me how easy it is
output? string? content editor – where is it? define a function? I wish you would because I don’t know what it is.
« This function is pretty straightforward – it just returns my Google Adsense code as a string » –
a string of what? etc etc. Just saying….
WPBeginner Support
We totally agree with you that sometimes when writing we may feel that we have explained everything clearly for beginners, but a beginner level user may still not be able to understand it. This is why we have comments and we will be happy to explain it to you more
A shortcode is a short+code. WordPress allows you to generate shortcodes for your programing code blocks called
functions. Since a user can not write programming code in the Post Editor when writing a new post. The shortcodes provide users a way to add those programming codes into a post without writing the full code in post editor.When WordPress finds a shortcode in a post like this:
[my_shortcode]
It then executes the programming code associated with that particular shortcode.
The example given in the article above, creates a function get_adsense. When this function is executed it outputs the adsense code. We hope this explains it for you. Let us know if you have any more questions.
Administrateur
Stacy
Or the instructions are 3 lines and your wondering where are the rest of the instructions????
Przemek
Totally, agree. I struggled to understand most of it, too.
Alan Murray
Can I use a shortcode on a Standalone HTML page to link to a page on my blog?
If so how do I embed it? Does the file need to be a PHP file?
I can’t seem to find anywhere on the net providing information on using sortcode outside Wordpress pages or posts.
WPBeginner Support
Alan, shortcodes are a WordPress feature the page should be a WordPress page in order to execute the shortcode.
Administrateur
DavidA
Do you know, how to add a shortcode on a website from an other website WordPress? (multisite)
Thx
WPBeginner Support
yes by creating a network wide plugin all blogs on the multisite can share the shortcode.
Administrateur
Lucy
Very good one!
John Rose
Clear and concise. Thank you so much. – John
Luke Ward
Hello, thank you for this, it’s helped a lot.
However I would like to know how to add more than one adsense in as a shortcode.
eg [adsense1] – displays one advert [adsense2] displays a different advert.
Thanks!
Editorial Staff
Follow the same process. Change the word adsense with adsense1.
Administrateur
Luke Ward
Thank you, sorry for the noob question!
Also I have another problem now, I’m using this code to add adsense which works with responsive designs using javascript. You can see the code I’m using in the link below…
http://www.labnol.org/?p=25252
When this is added in after reuturn’ – nothing is displayed.
Hope you can help with this problem as I cannot seem to find out how anywhere.
Thanks
Editorial Staff
The issue is with the syntax.
Paul
Just came across this as I’m looking to add my own shortcodes, I can understand the function part of it, but which document do you include the « hook up »
« add_shortcode(‘adsense’, ‘get_adsense’); line »
that would be helpful to me
Thanks
Editorial Staff
You add that right after the function part.
Administrateur
Patrick
I’m clueless and am trying to create a short code to insert the blog’s owner’s user name. Any ideas?
Editorial Staff
Write a function that outputs the username. Then put that function in the shortcode output. Unfortunately, we do not write custom codes like those on requests.
Administrateur
The Dividend Ninja
You forgot to put the semicolon after the ‘ on line 13, which would cause an error, and show people how to call the function. So it would look like this:
Cheers!
</script>
‘;
}
add_shortcode(‘adsense’, ‘get_adsense’);
But nice job explaining
Editorial Staff
Thanks for letting us know. Its fixed now
Administrateur
wt
So how to add a box with a CSS style using shortcode?Where should I put CSS content in?
ayushwhizkid
I have installed a plugin that uses shortcodes to add styled boxes. I want to add the box to my posts by putting in the single.php. How to insert shortcode content to php file.
p.s. want to use the box for author info!
KishaanSha
I added a shortcode:
add_shortcode(‘post_title’, ‘get_the_title’);
which returns post title.. But that post title doen’t displays in rss feed. What may the problem? Where that shortcode [post_title] shoul appear, there is blank space only. Can anyone help me to fix it.. Thank you.
wpbeginner
@KishaanSha Are you adding the shortcode in your post content or in a theme?
BlogAid
I can see a lot of custom uses for this. Thanks for the post. ~ MaAnna
denisa
how to make a short code for the archive page, whether this be?
Crysislevel
thanx for this…i added many shortcodes to my site with the help of plugins and implemented them in my single.php file!
Groho
I think it’s the very basic tutorial to add shortcode in wordpress
graphicbeacon
This is pretty basic. The links below will provide a detailed use of wordpress shortcodes.
http://www.problogdesign.com/wordpress/working-with-wordpress-shortcodes/
http://www.graphicbeacon.com/how-to-add-a-paypal-donation-shortcode-button-to-your-posts/
A flexible shortcode is one that will allow you to edit certain attributes. Couldn’t the google adsense code be tweaked to allow the user to set attributes such as the width/height and even ad client?
Glenn
wow nice, so I need to add my shortcode in my functions.php just in case I changed my wordpress theme?
Editorial Staff
Yes, it is crucial that you update the functions to the next functions.php file if you change themes.
Administrateur
Bill
Straightforward enough, except where do I put the
add_shortcode(‘adsense’, ‘get_adsense’);
statement?
Editorial Staff
You put this right below the function that is mentioned in the article in your functions.php file.
Administrateur