Que sont les codes courts WordPress ? Un guide complet étape par étape

Publié: 2023-03-17
codes abrégés wordpress
Suivez @Cloudways

Vous cherchez à rendre vos articles et pages WordPress plus interactifs et visuellement attrayants ? Les shortcodes WordPress sont là pour vous faciliter la vie. Ces extraits de code pratiques vous permettent d'ajouter diverses fonctionnalités et éléments de conception sans avoir besoin de compétences avancées en codage.

Dans cet article de blog, je couvrirai tout ce que vous devez savoir sur les shortcodes WordPress. Tout d'abord, nous commencerons par explorer les shortcodes WordPress par défaut et comment les ajouter. Ensuite, nous verrons comment utiliser les codes abrégés dans diverses parties de votre site Web, y compris les publications, les pages, les widgets et même les fichiers de thème.

De plus, je vous guiderai dans la création de votre propre shortcode personnalisé dans WordPress, vous permettant de personnaliser la conception et les fonctionnalités de votre site Web en fonction de vos besoins exacts. Enfin, nous comparerons les shortcodes aux blocs Gutenberg, un autre moyen populaire d'ajouter des éléments personnalisés à votre site Web.

Alors, allons-y !

  • Shortcodes WordPress : un aperçu
  • Shortcodes WordPress : avantages et inconvénients
  • Les codes courts WordPress par défaut
  • Comment ajouter des shortcodes WordPress (5 méthodes simples)
  • Codes courts contre blocs Gutenberg

Shortcodes WordPress : un aperçu

Les shortcodes WordPress sont une fonctionnalité puissante et polyvalente qui vous permet d'ajouter du contenu dynamique et des fonctionnalités à votre site Web sans avoir besoin de compétences en codage. Les shortcodes sont essentiellement de petits extraits de code que vous pouvez insérer dans vos publications, pages, widgets ou fichiers de thème pour afficher une fonction ou un contenu spécifique.

L'utilisation de codes abrégés améliore considérablement l'expérience utilisateur en fournissant des fonctionnalités faciles à utiliser telles que des boutons, des formulaires, des galeries et bien plus encore. De plus, ils peuvent également améliorer le référencement de votre site Web en rendant votre contenu plus interactif et attrayant pour vos visiteurs.

Rationalisez votre flux de travail de développement avec une solution de pack en vedette

Rejoignez plus de 11 000 développeurs Web satisfaits et profitez d'un hébergement Web transparent avec Cloudways - plus de soucis de gestion.

Essayez 3 jours gratuitement !

Shortcodes WordPress : avantages et inconvénients

Maintenant que vous avez une idée des shortcodes WordPress, passons rapidement en revue leurs avantages et leurs inconvénients avant de plonger dans la partie pratique.

Avantages des shortcodes WordPress

  • Gain de temps : Ils vous aident à ajouter des fonctionnalités complexes sans codage manuel.
  • Personnalisable : Les codes abrégés peuvent être personnalisés pour répondre à des besoins spécifiques.
  • Convivial : Ils sont faciles à utiliser et peuvent être ajoutés à n'importe quel article ou page WordPress sans nécessiter de compétences avancées en codage.
  • Compatibilité : Ils sont compatibles avec une large gamme de plugins et de thèmes.Ainsi, dans la plupart des cas, vous êtes libre de choisir n'importe quel thème ou plugin WordPress.

Inconvénients des shortcodes WordPress

  • Dépendance : Une dépendance excessive aux shortcodes peut causer des problèmes si le plugin ou le thème n'est pas mis à jour.
  • Problèmes de compatibilité : Certains shortcodes peuvent ne pas être compatibles avec tous les thèmes et plugins WordPress.
  • Courbe d'apprentissage : une compréhension de base de l'utilisation et de la personnalisation des codes abrégés est nécessaire.
  • Sécurité : Les shortcodes doivent être correctement nettoyés et validés pour éviter les failles de sécurité.

Les shortcodes WordPress offrent une solution pratique pour améliorer les fonctionnalités et la conception de votre site.

Cependant, il est important de les utiliser judicieusement pour éviter les problèmes de dépendance, les problèmes de compatibilité et les vulnérabilités de sécurité potentielles.

Apprenons-en plus sur les shortcodes WordPress par défaut dans la rubrique suivante.

Les codes courts WordPress par défaut

WordPress comprend six shortcodes intégrés par défaut qui facilitent l'ajout de fonctionnalités à vos pages et publications :

  • [ audio] : ajoutez des fichiers audio à vos pages ou publications.
  • [ légende] : ajoutez une légende à une image ou une vidéo.
  • [ embed] : définissez la largeur et la hauteur d'un élément intégré.
  • [ galerie] : créez une galerie de photos à l'aide d'images.
  • [ vidéo] : ajoutez des vidéos à vos pages ou publications.
  • [p laylist] : affichez des fichiers audio ou vidéo dans une publication.

Liste de quelques codes abrégés utiles avec des fonctions (tableau)

Vous trouverez ci-dessous une liste de quelques shortcodes utiles dans WordPress ainsi que leurs fonctions :

Fonction Utilisation pratique
[audio] [ sourceaudio="#"]
[légende] [ largeurde légende="450"]<imgsrc = "#"/ >Image[/légende]
[ intégrer] [incorporerlargeur= »450″hauteur= »320″]
[galerie] [identifiantgalerie = »32″]
[vidéo] [vidéosrc= »# »]
[ liste de lecture] [typede liste de lecture ="vidéo »]
[wpforms] [identifiant wpforms= »10″]
[soliloque] [identifiant monologue = "578"]

Comment ajouter des shortcodes WordPress (5 méthodes simples)

L'ajout de shortcodes WordPress est facile et peut être effectué en utilisant cinq méthodes différentes. Ces méthodes incluent l'ajout direct de shortcodes aux publications ou aux pages, l'utilisation du widget de texte, la création d'un plugin de shortcode, l'ajout de shortcodes au fichier functions.php de votre thème et l'utilisation d'un plugin de création de shortcode.

Comment ajouter des codes abrégés dans les publications et les pages WordPress

Voici comment vous pouvez facilement ajouter des shortcodes dans les publications et les pages WordPress :

  • Accédez à votre éditeur de publication/page et recherchez « Shortcode ».
  • Si vous utilisez Gutenberg, recherchez le shortcode dans la section des blocs et ajoutez-le à votre page ou postez-le.

shortcode dans le bloc

  • Collez le shortcode dans le champ respectif où vous souhaitez l'afficher.
  • J'ai ajouté le shortcode WP Forms pour ajouter le formulaire de contact.

wp formulaires shortcode

  • Prévisualisez votre message ou votre page pour vérifier si le shortcode fonctionne.

aperçu du shortcode du bloc

  • Vous pouvez suivre des étapes similaires pour n'importe quel constructeur de page. Par exemple, dans Elementor, recherchez Shortcode dans la section Element et faites-le glisser et déposez-le dans le dossier souhaité.

code court sur elementor

Comment ajouter des codes courts dans les widgets WordPress

Voici les étapes pour ajouter un shortcode WordPress dans un widget :

  • Accédez à votretableau de bord WordPress et accédez à Apparence > Widgets.
  • Cliquez sur l'icône «+ » pour parcourir toutes les options de widget disponibles et rechercher le widget Shortcode.

code court sur le widget

  • Ajoutez votre shortcode au champ et mettez à jourvotre section widget. Pour ce tutoriel, j'ajoute leshortcode WP Forms .

wp form shortcode dans le widget

  • Prévisualisez votre site pour vous assurer que le shortcode s'affiche correctement dans la zone du widget.

aperçu du shortcode sur le widget

Comment ajouter des codes courts dans WordPress Classic Editor

Le WordPress Classic Edtior est encore largement utilisé pour l'édition de publications et de pages dans WordPress. Et ajouter un shortcode dans l'éditeur classique est assez simple et peut être fait en suivant les étapes simples ci-dessous :

  • Ouvrez l'éditeur WordPress Classic en accédant à la publication/page que vous souhaitez modifier et en sélectionnant «Éditeur classique » dans les options d'édition.
  • Créez une nouvelle publication/page ou modifiez-en une existanteà laquelle vous souhaitezajouter le shortcode.
  • Localisez la zone où vous souhaitez ajouter le shortcode, saisissez-le simplement ici.

wpforms shortcode dans l'éditeur classique

  • Enregistrez les modifications que vous avez apportées à la publication/page, puis prévisualisez-les pour voir si le shortcode fonctionne correctement.

Comment ajouter des codes courts dans les fichiers de thème WordPress

Voici les étapes pour ajouter des shortcodes dans les fichiers de thème WordPress :

  • Sauvegardez vos fichiers ou utilisez un site intermédiaire pour éviter tout dommage à votre site de production.

Par exemple, je veux ajouter un Shortcode pour toutes les 404 pages (lorsque quelqu'un essaie d'accéder à des pages qui n'existent pas).

  • Accédez àTableau de bord WordPress > Apparence>Éditeur de fichiers de thème.
  • Sélectionnez la section des fichiers où vous souhaitez ajouter le shortcode. Par exemple, 404.php pour toutes les pages d'erreur 404.
  • Collez le shortcode dans le fichier sélectionné.Par exemple:
 <?php echo do_shortcode("[wpforms]"); ?> 

script de code court

  • Enregistrez les modifications et prévisualisez le résultat de sortie.
  • Voici le résultat de sortie que vous obtiendrez lorsque quelqu'un essaiera d'accéder à des pages inexistantes.

code court sur la page 404

Comment créer votre propre code court personnalisé dans WordPress

La création d'un shortcode personnalisé dans WordPress peut sembler une tâche ardue, car elle implique généralement la création d'un nouveau plugin. Cependant, avec une préparation et des soins appropriés, le processus peut être simplifié et relativement indolore.

Je vous recommande de créer une sauvegarde ou de travailler sur un site intermédiaire pour revenir facilement à une version précédente en cas de problème lors du processus de création du shortcode.

Élevez votre jeu de développement WordPress avec l'hébergement Cloudways

Ne vous contentez pas d'un hébergement WordPress terne, qui freine votre workflow de développement. Passez à Cloudways et profitez de vitesses ultra-rapides, d'une mise en scène gratuite et déployez facilement des applications Web.

COMMENCER L'ESSAI GRATUIT

Créer un plugin personnalisé

Voici les étapes pour créer un shortcode personnalisé dans WordPress :

  • Créez un plugin personnalisé pour votre shortcode en accédant à votre serveur/site via un client FTPcomme FileZilla.
  • Accédez audossier wp-content > plugins > et créez un nouveau répertoire.
  • Nommez le répertoire d'après votre plugin, par exemple :subscribe-shortcode .

dossier du plugin de shortcode

  • Ouvrez votre dossier de plugin etcréez un nouveau fichier PHP avec un nom de votre choix, tel que my-shortcode.php.

fichier php de code court

  • Cliquez surafficher/modifier le fichier PHP et ouvrez le fichier local.
  • Collez le code d'en-tête du plugin et enregistrez-le en appuyant sur « ctrl+s». Le code devrait ressembler à ce qui suit :
 <?php

/*

 * Nom du plugin : S'abonner à Shosrtcode

 * URI du plugin : https://cloudways.com/en/

 * Description : Ce plugin est à des fins de test.

 *Version : 1.0.0

 * Nécessite au moins : 5.3

 * Nécessite PHP : 7.4

 * Auteur : Farhan Ayub

 * URI de l'auteur : https://profiles.wordpress.org/farhanayub/

 * Licence : GPL v2 ou ultérieure

 * URI de la licence : https://www.gnu.org/licenses/gpl-2.0.html

 * Mettre à jour l'URI : https://cloudways.com/en/

 * Domaine de texte : my-basics-plugin

 * Chemin du domaine : /languages

 */

?>
  • Lorsque vous enregistrez les modifications, une fenêtre contextuelle"Le fichier a changé" apparaîtra sur votre outil FileZilla.
  • Sélectionnez "Terminer l'édition et supprimer le fichier local " et cliquez sur Oui.

modifications de fichiers

  • Une fois le fichier mis à jour, accédez à votretableau de bord WordPress > Plugin installé et activezvotre nouveau plugin.
  • Les détails du plugin doivent afficher les champs d'en-tête, tels que la version, le nom de l'auteur, etc.

plugin personnalisé dans les plugins installés

Créer un shortcode WordPress personnalisé

Vous pouvez également créer un shortcode WordPress personnalisé après avoir activé votre plugin. Dans cette section, je vais créer un shortcode qui permet aux utilisateurs de s'abonner à la chaîne YouTube Cloudways.

Voici les étapes pour créer un shortcode WordPress personnalisé :

  • Ouvrez votre fichier PHP (ici : my-shortcode.php) et collez le code suivant :
 add_shortcode( 'subscribe', 'cloudways_link' );

fonction cloudways_link(){

    return 'S'abonner à Cloudways <a href="https://www.youtube.com/@Cloudways/featured?sub_confirmation=1">Chaîne YouTube</a>' ;

    }

add_action('init', 'cloudways_link'); 

script de shortcode dans le fichier de plugin

  • Utilisons le shortcode personnalisé dans votre message. Puisque nous avons défini le nom de notre shortcode comme "subscribe ", appelez-le avec des crochets comme ceci : [subscribe].

abonnez-vous au shortcode

  • Mettez à jour les modifications et vérifiez lasortie du shortcode .

abonnez vous lien youtube

  • Si la sortie apparaît sur la publication, cela signifie que le shortcode WordPress personnalisé fonctionne.

Codes courts contre blocs Gutenberg

Les codes courts et les blocs Gutenberg sont tous deux utilisés dans WordPress pour améliorer les fonctionnalités de votre site. Cette section comparera les deux pour mettre en évidence les principales différences.

Codes abrégés :

  • Permet d'insérer du contenu dynamique dans les pages et publications WordPress
  • Créé à l'aide de crochets avec un mot-clé ou une fonction à l'intérieur
  • Nécessite des connaissances de base en codage
  • Peut être ajouté à n'importe quelle page ou publication dans l'éditeur WordPress
  • Peut être réutilisé sur plusieurs pages ou messages

Blocs Gutenberg :

  • Permet de créer du contenu dynamique avec une interface glisser-déposer
  • Offrir plus d'options et facile à utiliser que les shortcodes
  • Peut créer facilement des mises en page complexes
  • Peut être étendu avec des blocs personnalisés ou des plugins
  • Nécessite moins de connaissances techniques que les shortcodes

Les codes abrégés peuvent nécessiter des connaissances de base en codage et offrir une personnalisation visuelle limitée. D'autre part, les blocs Gutenberg offrent une approche plus conviviale avec des options étendues pour la création de contenu dynamique.

Pour ajouter un shortcode à l'aide de blocs Gutenberg, sélectionnez simplement l'option "Shortcode" et remplissez le nom du shortcode dans le champ désigné. Cela peut être fait facilement sans aucune connaissance en codage, ce qui en fait une option pratique pour les utilisateurs qui préfèrent une approche plus visuelle de la création de contenu.

Résumé

Les shortcodes WordPress sont un outil puissant qui vous permet de créer facilement et rapidement du contenu dynamique. Que vous soyez un débutant ou un utilisateur expérimenté, il existe plusieurs façons de les ajouter à votre site WordPress. J'ai couvert 5 méthodes simples dans ce blog. Avec l'hébergement WordPress géré de Cloudways, vous pouvez facilement créer et gérer des codes abrégés pour votre site Web WordPress.

Bien qu'ils puissent avoir certaines limites, les avantages l'emportent sur les inconvénients, en particulier lorsqu'ils sont combinés à la facilité d'utilisation des blocs Gutenberg.

Ainsi, que vous cherchiez à afficher un simple bouton ou un contenu complexe, les shortcodes sont un moyen fantastique d'améliorer votre site WordPress.

Essayez-les et voyez comment ils peuvent faire passer votre contenu au niveau supérieur !

FAQ

Q. WordPress a-t-il des shortcodes intégrés ?

Oui, WordPress est livré avec 6 shortcodes intégrés listés ci-dessous :

  • [ audio]
  • [ légende]
  • [ intégrer]
  • [ galerie]
  • [ vidéo]
  • [ liste de lecture]

Q. Où sont mes shortcodes dans WordPress ?

Vous pouvez trouver les shortcodes d'un plugin WordPress en consultant la documentation du plugin dans le tableau de bord WordPress.

Q. Comment utiliser les shortcodes par défaut dans WordPress ?

Vous pouvez utiliser les codes abrégés par défaut dans WordPress de trois manières : via le bloc Gutenberg, l'éditeur classique ou par code.

Q. À quoi servent les shortcodes dans WordPress ?

Le but des shortcodes dans WordPress est d'ajouter du contenu et des fonctions dynamiques à vos pages et publications.