Guide complet : Comment ajouter des shortcodes dans WordPress

Un shortcode est un code spécifique à WordPress qui vous permet de faire des choses astucieuses avec très peu d'effort. Les codes abrégés peuvent intégrer des fichiers ou créer des objets qui nécessiteraient normalement de nombreuses lignes de codes compliquées. En termes simples, Shortcode est un raccourci vers une fonction.

En d'autres termes, Shortcode est une forme condensée d'un morceau de code plus grand et souvent complexe. Il vous permet d'insérer un script dans la section contenu de votre page, qui sera ensuite exécuté par WordPress.

Les shortcodes ont été introduits dans WordPress 2.5 et depuis lors, ils ont beaucoup contribué à effectuer la tâche complexe de manière beaucoup plus simple. L'utilisation de shortcodes fait gagner du temps et nous permet de faire des choses plus simplement qui, autrement, nécessiteraient une grande quantité de connaissances techniques et de codage.

Avantages des codes courts

• Améliorez l'efficacité et gagnez du temps - Le code court empêche la redondance. Il aide les utilisateurs à implémenter une fonctionnalité particulière en écrivant le code une fois et en réutilisant le shortcode chaque fois que cette fonctionnalité est nécessaire.
• Balisage personnalisé sélectif – En fonction de votre thème, votre site WordPress aura une mise en page et un design spécifiques. Mais que se passe-t-il si vous voulez que certains de vos messages, pages ou sections de votre page soient différents du modèle de style général, Shortcodes rend cette tâche facile à réaliser.
• Accès aux zones de contenu inaccessibles - Certaines tâches telles que l'insertion d'un widget de texte dans votre en-tête ou l'ajout d'un contenu personnalisé à votre barre latérale ne sont pas faciles. Mais avec les shortcodes, une telle tâche peut être effectuée avec beaucoup de facilité et de flexibilité.
• Aide à créer des mises en page meilleures et uniques - Tous les sites WordPress sont construits sur une mise en page standard comprenant un en-tête, un pied de page, une barre latérale et la section de contenu principale. Les codes courts nous permettent de nous écarter de la mise en page standard et de créer une mise en page différente pour votre site, comprenant vos propres éléments ou composants.

Comment utiliser les codes courts dans WordPress

Pour utiliser un shortcode, insérez-le simplement dans la page ou la publication WordPress.

Un Shortcode ressemble à ceci - [Shortcode-name],

En supposant qu'un tel code court soit déjà défini, lorsqu'il est utilisé dans un site Web, il affiche une liste des publications les plus récentes de l'auteur n'importe où sur le site.

Voici un autre exemple de syntaxe de shortcode, utilisant un objet de shortcode hypothétique, "shortcode_ex".

[shortcode_ex] C'est ici que votre contenu apparaît[/shortcode_ex]

WordPress est livré avec les shortcodes suivants par défaut :

Codes abrégés vidéo

• [dailymotion] intègre une vidéo DailyMotion.
• [hulu] intègre une vidéo Hulu.
• [ted] intègre une vidéo TED Talks.
• [vimeo] intègre une vidéo Vimeo
• [youtube] intègre une vidéo YouTube.

l'audio

• [audio] affiche le fichier audio téléchargé en tant que lecteur audio
• [spotify] intègre la musique de Spotify.

Images et Documents

• insère une galerie d'images dans un article ou une page.
• [instagram] intègre une image d'Instagram.
• [slideshare] intègre un diaporama de Slideshare.net.
• [diaporama] intègre un diaporama des photos téléchargées.
• [googleapps] intègre un document de Google Docs.

Divers

Shortcodes utiles pour ajouter un index d'archives de blog, un formulaire de contact, des sondages, etc.

• [blog_subscription_form] intègre un formulaire d'abonnement permettant aux utilisateurs de s'inscrire pour recevoir des mises à jour par e-mail

Dans l'article d'aujourd'hui, nous verrons comment ajouter facilement des shortcodes à votre site WordPress à l'aide du plugin Shortcodes Ultimate. Alors commençons.

Plugin Ultime Shortcodes

Les plugins de shortcode nous permettent de créer des shortcodes avec facilité et flexibilité, sans codage. Il contient un ensemble de codes abrégés prédéfinis que vous pouvez copier et coller dans votre page/publication. Il existe de nombreux plugins de codes courts disponibles sur le marché. Dans cet article, nous allons nous concentrer sur le plugin Shortcodes Ultimate de Vladimir Anokhin.

Shortcodes Ultimate est un plugin WordPress populaire qui peut être utilisé pour créer des onglets, des boutons, des boîtes, des vidéos réactives et bien plus encore. Il est livré avec plus de 50 codes courts incroyables, ainsi qu'un générateur de codes courts pour créer des codes courts personnalisés.

Pour utiliser le plugin, installez-le simplement et cliquez sur le bouton "Shortcodes" sur votre page/poste. Il peut être intégré à des modules complémentaires premium pour améliorer encore ses fonctionnalités.

Ce plugin est très populaire dans la communauté WordPress, ce qui ressort du fait qu'il compte plus de 700 000 installations actives et près de 4 000 évaluations 5 étoiles.

Principales caractéristiques du plugin Ultimate Shortcodes

• Plus de 50 codes abrégés d'aspect professionnel
• Entièrement réactif
• Texte en surbrillance, zone d'affichage, images, Google Maps, etc.
• Éditeur CSS personnalisé
• Insertion de shortcode en 1 clic avec aperçu en direct
• Support RTL et fonctionne bien avec les sources multilingues
• API puissante

Installation de Shortcodes Ultimate

L'installation du plugin est facile et implique quelques étapes décrites ci-dessous.

• Connectez-vous à votre tableau de bord d'administration WordPress.
• Cliquez sur l'option Plugins dans le menu latéral de gauche
• Cliquez sur le bouton Ajouter nouveau dans les plugins
• Une nouvelle fenêtre apparaîtra, tapez « Shortcodes Ultimate » dans le menu de recherche dans le coin supérieur gauche de la fenêtre et appuyez sur Entrée.
• Une liste de plugins apparaîtra. De là, sélectionnez le plugin et cliquez sur le bouton Installer maintenant.

Une fois l'installation terminée, cliquez sur Activer

Après l'activation, vous serez redirigé vers votre page Plugins et vous y trouverez le plugin Shortcodes Ultimate avec les autres. Ça y est, vous êtes maintenant prêt à utiliser le plugin et à créer des shortcodes sur votre site WordPress

Explorer les shortcodes Ultimate

Lors de l'installation de Shortcodes Ultimate, un menu Shortcodes apparaîtra sur votre tableau de bord. Cliquez sur Shortcodes Menu puis sur Example Menu. Cela fera apparaître la page Exemples. Cette page contient une liste pré-compilée des codes abrégés les plus couramment utilisés que vous pouvez utiliser.

Accordéons, Spoilers, Styles et ancres - Cela nous permet d'ajouter des choses comme des accordéons et des ancres. Les accordéons sont utilisés si vous souhaitez masquer du contenu derrière un signe "+" , qui s'étend pour révéler votre contenu, en cliquant. Il existe également plusieurs styles différents et des icônes que vous pouvez ajouter à l'avant.

Onglets et ancres d'onglet

Cela permet d'ajouter différents onglets à vos pages avec plusieurs options de style.

Disposition des colonnes

Ce shortcode peut être utilisé pour diviser le contenu de notre page en plusieurs colonnes.

Éléments multimédias

Ajoutez des fichiers multimédias comme YouTube, des fichiers vidéo Vimeo sur votre publication/page en utilisant ce shortcode.

Animations

Ce shortcode nous permet d'ajouter des animations telles que du texte volant dans différentes directions, différentes couleurs, des colonnes animées, des boutons et bien plus encore. Les animations améliorent votre contenu et sont utiles pour mettre en évidence un contenu particulier pour vos utilisateurs.

Outre les shortcodes de base, plusieurs autres shortcodes avancés sont également disponibles.

Création de codes courts à l'aide du plugin Shortcodes Ultimate

Lors de l'installation, nous pouvons constater que ce plugin est livré avec plus de 50 codes abrégés, classés en fonction du style, de l'écriture de contenu et de la division du contenu.

Pour ajouter un shortcode à votre page, accédez à votre tableau de bord d'administration, puis cliquez sur Pages, puis sélectionnez la page sur laquelle vous souhaitez ajouter votre shortcode.

Dans l'écran de l'éditeur de publication, vous devriez maintenant remarquer qu'un nouveau bouton a été ajouté au menu de l'éditeur, intitulé Insérer un shortcode.

Cliquez sur ce bouton et vous serez présenté avec la page suivante. Ici, vous pouvez choisir le shortcode approprié en fonction de vos besoins. Les shortcodes peuvent également être filtrés en fonction du contenu, de la boîte, du média, de la galerie, des données et

Après avoir fait votre choix, vous pouvez soit personnaliser cet élément pour changer son apparence, soit simplement l'insérer tel qu'il est.

Cliquez maintenant sur le bouton Insérer un shortcode pour l'insérer dans votre page/publication.

Et voilà, votre shortcode est maintenant inséré dans votre page/publication.

Voici à quoi ressemblera le bouton

Shortcode pour diviser le contenu de notre page en plusieurs colonnes

Accédez à votre tableau de bord, puis aux pages. Créez une nouvelle page ou sélectionnez-en une existante et cliquez sur Insérer un shortcode comme ci-dessus.

Dans l'exemple, nous allons diviser le contenu à l'aide de colonnes. Les colonnes, cependant, résident dans les lignes. Nous allons donc commencer par ajouter un shortcode Rows en cliquant sur l'option "Row".

Cela affichera la boîte de dialogue "Ajouter une ligne". Puisque nous voulons créer une mise en page à 3 colonnes, nous n'apporterons aucune modification et cliquerons sur Installer le shortcode

Le shortcode de ligne devrait maintenant être inséré dans votre message. Insérez votre contenu entre [su_row] et [/su_row].

Vous pouvez maintenant insérer les codes courts de colonne à l'intérieur des codes courts de ligne pour créer votre mise en page multi-colonnes.

Placez votre curseur au début de votre shortcode de ligne et cliquez à nouveau sur le bouton Insérer un shortcode et sélectionnez Colonne dans les options de shortcode.

Ajustez vos paramètres pour le menu des options de votre code court de colonne et cliquez sur le bouton Insérer un code court une fois que vous avez terminé.

Le shortcode sera maintenant affiché dans votre éditeur de publication.

Vous pouvez ajouter plus de colonnes en répétant les étapes ci-dessus ou simplement en copiant-collant les shortcodes existants.

Enfin, remplissez les espaces entre les shortcodes avec votre contenu. Une fois que vous avez terminé, cliquez sur le bouton Mettre à jour/Publier pour terminer le processus.

La sortie apparaîtra comme ceci en fonction du nombre de colonnes ajoutées et de la taille de chaque colonne.