Comment créer un simple shortcode pour WordPress?

Lorsque vous écrivez quotidiennement des articles WordPress, il y a des moments où vous vous répétez et lorsque vous devez taper le même mot ou la même phrase encore et encore. Qu’il s’agisse d’une URL de site Web, d’une longue phrase ou même d’un bout de code HTML n’a pas d’ importance, vous devriez envisager de créer un simple shortcode pour vous simplifier la tâche.

Pour créer cette simple fonction, vous n’avez pas besoin d’être un programmeur, et vous n’aurez pas à faire appel à un programmeur pour faire quelque choses d’aussi simple. Suivez les étapes, et lorsque vous  verrez « C’est terminé! », vous aurez créer votre premier shortcode personnalisé.

Comment créer un simple shortcode?

Comment créer un simple shortcode pour WordPress?

Avant de commencer, il serait peut être bon de revenir sur les bases.

Qu’est ce qu’un shortcode?

Les shortcodes dans WordPress sont de petits bouts de code qui vous permettent de faire différentes choses avec peu d’effort. Introduits avec la version 2.5 de WordPress, il devait permettre aux utilisateurs de WordPress d’exécuter du code à l’intérieur des articles, pages et widgets sans écrire directement de code.

L’API shortcode vous permet de créer vos propres shortcodes en ajoutant des fonctions au fichier `functions.php` de votre thème. En plus de créer vos propres shortcodes, WordPress intègre cinq shortcodes par défaut dans son noyau:

  • audio – Permet d’intégrer des fichiers audio
  • caption – Permet d’envelopper les légendes autour du contenu, couramment utilisé avec des images.
  • embed – Permet d’intégrer un large éventail de contenus vidéo, audio et tweets
  • gallery – Permet d’insérer des galeries d’images
  • video – Permet d’intégrer des fichiers vidéo

Bien que les shortcodes par défaut de WordPress sont couramment utilisés, très peu d’utilisateurs WordPress tirent partie de l’API shortcode pour concevoir des shortcodes uniques pour leur site WordPress. Dans cet article, je voudrais vous montrer à quel point il est simple d’améliorer votre site WordPress avec des shortcodes personnalisés.

Avant de commencer, s’il vous plaît assurez-vous de faire une sauvegarde de functions.php et tous les autres fichiers que vous éditez avant de faire des changements avec votre site web en direct.

Créer un simple shortcode

Ouvrez votre client FTP favori (par exemple Filezilla). Une fois que vous serez connecté à votre hébergement, accédez à votre dossier thème (wp-content/themes/votre_theme) et téléchargez le fichier functions.php sur le bureau de votre ordinateur, faites en également une copie de sauvegarde a un autre endroit, par mesure de sécurité.

Changer de style - fichier functions

Ouvrez ensuite le fichier functions.php avec votre éditeur de texte préféré, tel que Notepad++, et copiez /collez le code ci-dessous à la fin du fichier.

function blog_shortURL() {
return 'https://bloginfos.com';
}
add_shortcode('wpbi', 'blog_shortURL');

Enregistrez les modifications et fermez le fichier. Téléchargez ensuite le fichier functions.php dans le dossier thème de votre site, en écrasant le fichier existant.

C’est terminé! Ouvrez un article, et positionnez vous dans l’ éditeur de texte, puis tapez `[wpbi]` pour obtenir l’URL de Bloginfos en lieu et place du shortcode. Cela n’avait rien de compliqué, n’est ce pas?

A présent que le simple est fait, allons un peu plus loin.

Créer un simple shortcode pour ajouter une image

Après avoir remplacé le shortcode par une URL de site Web, nous allons à présent remplacer le shortcode par une image avec les dimensions passées en paramètres

Comme dans l’exemple ci-dessus, pour créer ce shortcode, il va falloir ajouter du code au fichier `functions.php` de votre thème.

Après avoir téléchargé le fichier « functions.php`, ouvrez le fichier avec votre éditeur de texte préféré, et copiez /collez le code ci-dessous à la fin du fichier.

function img_shortcode( $atts , $content = null ) {

	extract( shortcode_atts(
		array(
			'width' => '',
			'height' => '',
		), $atts )
	);
return '<img src="' . $content . '" width="' . $width . '" height="' . $height . '">';
}
add_shortcode( 'img', 'img_shortcode' );

C’est terminé! Ouvrez un article, et positionnez vous dans l’ éditeur de texte, puis tapez `[img width=’x’ height=’y’] URL de l’image [/img]`, où « x » et « y » sont des nombres qui représentent la largeur et la hauteur en pixels de l’image.

Vous avez la possibilité d’ajouter facilement d’ autres attributs d’image si vous en avez besoin. Pour plus de détails vous pouvez consultez la liste de tous les attributs de l’ image sur le site Mozilla.

En vous basant sur les exemples présentés, vous ne perdrez plus votre temps si précieux à rechercher un plugin qui serait approprié à une condition. Il vous suffira de créer un simple shortcode.

séparateur de texte

Si vous avez trouvé cet article utile, Partagez le, il intéressera d’autres personnes. Merci!

Partager sur facebook
Facebook
Partager sur whatsapp
WhatsApp
Partager sur linkedin
LinkedIn
Partager sur twitter
Twitter

Allez plus loins

Une réponse

  1. Bonjour,
    merci pour votre article intéressant!
    Je me posais une question, peut-on intégrer une iframe dans un shortcode?
    Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

👋 Hello,

Bienvenue sur BlogInfos.com !

Vous êtes à un seul clic de découvrir des centaines d’articles concernant WordPress, Elegant Themes ou encore Elementor et tout cela gratuitement !

-25% de réduction

👋 Le site ElegantThemes.com propose une réduction de 25% et elle ne sera disponible que pendant quelques temps. Ne manquez pas ça !

En cliquant sur le lien « Accéder Maintenant » vous acceptez d’aider ce site et d’être redirigé vers notre partenaire ElegantThemes.