Le guide pour créer des shortcodes personnalisés dans WordPress

La façon la plus simple de représenter les shortcodes est de les définir comme un moyen facile d'ajouter du contenu dynamique dans vos publications, pages et barres latérales WordPress. De nombreux plugins et thèmes WordPress ont des codes abrégés comme moyen d'ajouter du contenu spécialisé comme des formulaires de contact, des galeries d'images, des curseurs, etc. Le moyen le plus simple de commencer à créer et à utiliser des shortcodes est d'utiliser un plugin de shortcode. Cependant, si vous êtes intéressé par la création de shortcodes personnalisés dans WordPress, attachez votre ceinture, car ce guide est fait pour vous. Attention, cela nécessitera une certaine expertise technique en codage, ce que vous savez probablement déjà.

Ainsi, il existe deux manières de trouver des shortcodes WordPress qui vous seront utiles :

1. ils peuvent réduire la quantité de code que vous devez écrire,
2. ils simplifient l'utilisation des plugins, thèmes et autres fonctions WordPress.

Le processus de préparation de WordPress pour les shortcodes personnalisés

Bien que ce ne soit en aucun cas une nécessité, il est généralement judicieux de conserver vos codes abrégés personnalisés dans leur propre fichier. Sinon, vous pouvez choisir de les ajouter au fichier functions.php de votre thème. Commencez par créer un nouveau fichier nommé 'custom-shortcodes.php' et enregistrez-le dans le même dossier que le fichier functions.php de votre thème. Ensuite, dans le fichier nouvellement créé, vous ajouterez le bloc de code suivant :
<?php
?>
Ce faisant, vous souhaitez ouvrir le fichier functions.php et ajouter la ligne de code suivante :
include('custom-shortcodes.php');
Toutes nos félicitations! Vous êtes maintenant prêt à commencer à créer des shortcodes personnalisés dans WordPress.

Créer des shortcodes de base dans WordPress

Nous expliquerons le processus de création d'un shortcode WordPress de base à travers un exemple d'insertion d'une simple image d'avatar. La première étape consiste à créer la fonction de shortcode. Dans le fichier custom-shortcodes.php, vous ajouterez ce qui suit :

function simpleavatar_function() {
retourner '<img src=”https://simpleavatar.com/wp-content/uploads/avatar-simple.png”
alt=”doti-avatar” width=”96″ height=”96″ class=”left-align” />' :
}

Dans l'exemple de code ci-dessus, la fonction simpleavatar_function renvoie une image prédéterminée nommée avatar-simple.png. La prochaine étape serait d' enregistrer le shortcode avec WordPress en utilisant la fonction intégrée add_shortcode. Toujours dans custom-shortcodes.php, assurez-vous d'ajouter la ligne de code suivante :

add_shortcode('simpleavatar', 'simpleavatar_function');

Après avoir enregistré un shortcode à l'aide de la fonction add_shortcode, vous passerez la balise shortcode ($tag) et la fonction correspondante ($func)/hook qui s'exécutera chaque fois que ce raccourci sera utilisé. Dans ce cas particulier, la balise de raccourci est simpleavatar et le crochet est dotiavatar_function.
Assurez-vous de n'utiliser que des lettres minuscules lorsque vous nommez des balises , en omettant les traits d'union. Les traits de soulignement, cependant, sont acceptables.
Donc, maintenant que vous avez créé le shortcode et que vous l'avez enregistré, ce serait formidable que vous l'essayiez. Chaque fois que vous souhaitez que l'avatar simple apparaisse dans le contenu de la publication, utilisez simplement le shortcode à la place : [simpleavatar]

Création de shortcodes personnalisés dans WordPress avec des paramètres (attributs)

Dans l'exemple précédent, vous n'aviez pas beaucoup de place pour changer les choses. Et, supposons qu'au lieu de pousser une seule image, vous aimeriez pouvoir définir quelle image utiliser à l'aide d'un paramètre. Une excellente façon de le faire est d'ajouter des attributs ($atts). Ainsi, comme précédemment, dans custom-shortcodes.php, ajoutez une autre fonction :

function simplerating_function( $att=tableau() ) {

//définir les paramètres par défaut

extrait(shortcode_atts(tableau(

'note'=> '5'

), $atts));

renvoie "<img src=\"http://simpleavatar.com/wp-content/uploads/$raing-star.png\"

alt=\"simple-rating\" width=\"130\" height=\"190\" class=\"left-align\" />" ;

}

Ce que vous avez écrit ci-dessus n'accepte qu'un seul paramètre : la note. Si une valeur d'évaluation n'est pas transmise, il utilisera une valeur de chaîne par défaut de 5. Il le fait en déballant le tableau d'attributs à l'aide de la fonction shortcode_atts intégrée, puis en combinant les valeurs par défaut avec des valeurs qui pourraient avoir été transmises dans la fonction . Assurez-vous de ne pas oublier d'enregistrer le code :
add_shortcode('simplerating', 'simplerating_function');

Avec la fonction de shortcode créée et le hook ajouté, le shortcode est prêt à trouver sa place dans le contenu de votre publication :

[note simplifiée = 3]

Ce serait l'essentiel de la création de shortcodes WordPress à fermeture automatique. Cependant, il existe encore un autre type que vous pouvez créer.

Un type supplémentaire de shortcodes que vous pouvez créer : les shortcodes englobants

Jusqu'à présent, nous avons expliqué les codes abrégés auto-fermants. Cependant, il existe un autre type de shortcode que nous aimerions vous présenter : les shortcodes englobants.

Ceux-ci vous permettent d'utiliser un format de style BBCode. Un tel style ressemblerait à ceci :

[shortcode]contenu[/shortcode]

Les codes abrégés englobants sont utiles dans le cas où vous devez manipuler le contenu joint. Pour illustrer davantage, disons que vous avez un style particulier de bouton que vous utilisez pour votre site Web. Vous pouvez utiliser le code HTML pour générer ce bouton/style chaque fois que vous en avez besoin. Cependant, vous pouvez également configurer un shortcode personnalisé pour le faire pour vous.

En utilisant un shortcode englobant, vous pourrez vous concentrer sur le contenu plutôt que sur le code.

Création des shortcodes englobants

Vous allez encore une fois dans le fichier custom-shortcodes.php, et ajouter ce qui suit :

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

return '<a href=”https://twitter.com/simpleavatar/” target=”blank” class=”doti-follow”>' . $contenu . '</a>' ;

}

Dans ce bloc de code ci-dessus, le $content = null est utilisé pour identifier cette fonction en tant que shortcode englobant. Dans cette fonction, vous encapsulez votre contenu dans le code HTML. Vous pouvez probablement deviner l'étape suivante - enregistrer le shortcode :

add_shortcode('simplefollow', 'simplefollow_function');

Voila ! Le shortcode est prêt à être utilisé.

Qu'est-ce que cela revient à

Une fois que vous aurez compris comment fonctionne la création de shortcodes personnalisés dans WordPress, vous constaterez que le processus lui-même est simple et sans effort. Cependant, si cela vous semble trop difficile, rappelez-vous que vous pouvez contourner complètement le processus et opter pour des plugins, des thèmes et d'autres fonctionnalités qui vous permettent de personnaliser le site Web à votre guise.