Comment créer un simple shortcode pour WordPress?

Valentin
6 Jan 2024
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?

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é.

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.