Les shortcodes sont une fonctionnalité populaire incluse dans de nombreux plugins et thèmes. Cependant, si vous n’avez jamais construit vos propres shortcodes, vous ne savez pas comment les ajouter à vos projets WordPress.

Heureusement, l’API WordPress rend assez simple la création de shortcodes. Cela permettra aux utilisateurs de profiter de vos fonctionnalités de plugin ou de thème à partir de n’importe quelle zone de texte sur leur site WordPress. L’inclusion de shortcodes dans vos projets est un moyen simple de développer et réutiliser les fonctionnalités que vous avez créées pour obtenir un énorme gain de temps.

Dans cet article, nous parlerons un peu plus de la façon dont les shortcodes fonctionnent. Ensuite, nous allons vous montrer comment il est simple de développer le votre en trois étapes. Commençons!

Introduction aux shortcodes et à la shortcode API de WordPress

Comment créer ses propres Shortcodes pour Wordpress

L’API Shortcode de WordPress est un outil pratique pour les développeurs

Les shortcodes ressemblent à de petits morceaux de texte entre crochets, comme ceci: [exemple] . Chacun représente une exécution unique du code prédéfini, déclenchée à la demande. Vous pouvez les utiliser presque partout où le texte peut être ajouté dans WordPress.

Alors que la plupart des shortcodes sont ajoutés par des thèmes et des plugins, le coeur de WordPress possède quelques shortcodes par défaut que vous pouvez utiliser. Certains exemples sont audio , gallery et caption.

Heureusement, l’API Shortcode rend relativement simple la création de codes courts personnalisés pour vos propres projets WordPress. C’est souvent une idée intelligente car cela facilite la vie de vos utilisateurs en leur permettant d’utiliser des fonctionnalités complexes avec quelques frappes.

Comment écrire votre propre code court personnalisé (en 3 étapes simples)

Maintenant que vous comprenez comment les shortcodes fonctionnent, apprenons comment en ajouter un à votre propre thème ou à votre plugin ! Bien sûr, votre shortcodes dépend de vous. Dans cet exemple, nous allons utiliser une simple fonction “Hello world!” Pour vous aider à démarrer.

1. Écrivez la fonction Shortcode

Tout d’abord, vous voudrez ouvrir un nouveau fichier dans un éditeur de texte. Ensuite, écrivez une fonction avec un nom unique, qui exécutera le code que vous souhaitez que le shortcode déclenche:

 function   zendevs_hello_world_shortcode ( )   { 
    return   'Hello world!' ; 
 } 

Si nous devions utiliser cette fonction normalement, il retournerait Hello world! Comme une chaîne qui pourrait être produite en HTML. Cette fonction peut également prendre des paramètres personnalisés. Par exemple, si vous voulez que quelqu’un puisse faire dire “Bonjour Bob!” À la place, vous pouvez ajouter un paramètre de nom. Ces paramètres sont appelés attributs, et ils sont tous gérés à l’aide d’un seul tableau prédéfini $atts par WordPress.

Voici un exemple de la façon d’utiliser la fonction avec le paramètre $atts pour gérer correctement les attributs de shortcode dans WordPress. Vous pouvez en savoir plus sur la façon dont cela fonctionne pour vos propres besoins dans le codex de WordPress :

 function zendevs_hello_world_shortcode($atts) { 
    $a=shortcode_atts( array( 
       'name'   =>   'world' 
    ) ,   $atts   ) ; 
    return   'Hello '   .   $a['name']   .   ! ' ; 
 } 

Cela définit par défaut l’attribut name à world si aucun autre nom n’est disponible. Si un nom est fourni, la fonction produira à la place. Voici un exemple de la façon dont cela serait exécuté avec un code court:

 [helloworld] 
 // Outputs "Hello world!" 
 
 [helloworld  name="Bob"] 
 // Outputs "Hello Bob!" 

Une fois que vous avez terminé, cela peut être utilisé dans toutes les zones basées sur le texte sur un site WordPress où le plugin ou le thème qui contient ce shortcode est installé.

2. Enregistrez le fichier et ajoutez-le à votre projet

Une fois que votre shortcode est prêt, vous pouvez créer un nouveau fichier dans votre thème personnalisé ou un plugin pour sauvegarder la fonction. Un nom descriptif vous aidera à trouver ce fichier ultérieurement (par exemple: shortcode-function-hello-world.php).

Maintenant, il est temps de permettre au reste de votre projet d’accéder à ce nouveau fichier. Si vous travaillez avec un thème, il faut l’inclure dans le fichier functions.php. Si vous construisez un plugin, vous pouvez l’inclure dans n’importe quel fichier déjà chargé dans le projet.

Voici un exemple de la façon dont vous allez charger le fichier dans un thème en utilisant get_stylesheet_directory(). Assurez-vous d’éditer le chemin d’accès à votre fichier pour faire correspondre la structure du dossier à l’intérieur de votre thème:

include(get_stylesheet_directory().'path/to/shortcode-function-hello-world.php') ;

D’autre part, voici à quoi devrait ressembler le chargement du fichier dans un plugin, en utilisant plugin_dir_url(). Encore une fois, modifiez le chemin d’accès à votre fichier pour faire correspondre la structure de dossier de votre plugin:

include(plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php');

À ce stade, votre fonction est maintenant disponible! Tout ce qui reste à faire est d’enregistrer le shortcode dans WordPress.

3. Enregistrez le Shortcode

La dernière étape consiste à enregistrer votre nouveau shortcode en vous servant de l’API. Cela se fait avec la fonction add_shortcode. Il faut deux arguments:

  1. La balise shortcode à utiliser dans l’éditeur de texte
  2. Le nom de la fonction qui gère l’exécution du shortcode

Sous votre fonction shortcode, incluez cette ligne de code et mettez-la à jour pour correspondre à vos propres valeurs:

add_shortcode ('helloworld', 'zendevs_hello_world_shortcode');

La première valeur sera placée entre crochets dans l’éditeur de texte. La seconde correspond au nom de fonction que vous avez écrit dans les deux étapes précédentes. Les deux devraient être assez uniques afin qu’ils n’interfèrent pas avec d’autres shortcodes inclus par le coeur de WordPress, les thèmes ou les plugins.

Une fois que vous avez terminé, tout ce qui reste à faire est de le tester. Connectez-vous à votre panneau d’administration et essayez d’ajouter votre shortcode à une publication:

Bonjour, exemple de code court dans l'éditeur de texte

cela peut être aussi compliqué ou simple que vous le souhaitez – ce que vous décidez de construire dépend de vous! Pour les situations avancées où vous souhaitez modifier la sortie pour différentes situations, il est préférable d’écrire une classe PHP unique pour gérer votre nouveau shortcode.

Conclusion

L’ajout de fonctionnalités complexes aux messages et aux pages de WordPress est facile avec les shortcodes. Ils sont simples à programmer et ajoutent de la valeur à votre projet existant en rendant le contenu dynamique.

Dans cet article, vous avez appris qu’il ne prend que trois étapes simples pour créer un code court:

  1. Écrivez une fonction standard qui exécute le code personnalisé souhaité.
  2. Enregistrez le code sur votre plugin ou thème WordPress.
  3. Enregistrez le shortcode dans WordPress.

0 commentaire

Laisser un commentaire

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