Comment créer des shortcodes dans WordPress et y travailler plus facilement

Comment créer de courts codes WordPress et travailler avec eux plus facilement

WordPress codes courts sont de petites balises qui sont utilisés comme liens pour exécuter des fonctionnalités spécifiques dans les messages et les pages.Vous pouvez reconnaître les codes courts avec des supports carrés qui entourent un mot ou une phrase simple.Ils ont été introduits dans la version 2.5 avec pour mission d’aider les gens à remplir les fonctions d’une manière simple.

Comme vous le savez peut-être déjà, WordPress utilise le langage de programmation PHP pour l’activer.Par conséquent, lorsque vous souhaitez ajouter une fonctionnalité spécifique directement aux publications et pages, vous devez écrire le code dans l’éditeur de texte.Au lieu de cela, les codes courts permettent aux utilisateurs de remplacer l’ensemble du bloc de code par un terme simple et l’exécuter simplement en affichant. Amazing, non?

Dans ce guide, vous pouvez apprendre:

  • Comment utiliser les codes courts WordPress
  • Comment créer un code court simple
  • Comment utiliser des codes courts dans les widgets texte

Lecture recommandée: Cours Udemy WordPress

Comment utiliser les codes courts WordPress

Codes courts dans les éditeurs de texte et visuels

Pour utiliser des codes courts, vous n’avez pas besoin de savoir comment coder ou comprendre comment ils fonctionnent dans le backend.WordPress lui-même, ainsi que la plupart des thèmes et plugins WordPRess, utilise différents shortcodes pour vous permettre d’utiliser de nombreuses fonctionnalités avancées.

Par exemple, pour visualiser toute la galerie d’images, il vous suffit d’utiliser le shortcode

qui est installé avec WordPress.La plupart des codes courts peuvent être utilisés dans leur forme de base comme dans l’exemple précédent.

Les codes courts sont remplacés par du contenu réel dès que vous publiez ou prévisualisez une publication ou une page.

Paramètres shortcode

Le plus souvent, les codes courts peuvent avoir des paramètres supplémentaires.En y ajoutant plus d’informations, vous pouvez personnaliser et modifier la sortie.Par exemple, alors que le shortcode trivial

Affichez toutes les images jointes à la publication, vous pouvez la modifier.Le shortcode de la Galerie vous permet de spécifier des images en fonction de leur identifiant afin que vous ne puissiez afficher que des images spécifiques ou même inclure des images qui ne font pas partie de ce message particulier.

En outre, vous pouvez définir la taille d’une galerie et bien d’autres choses en fournissant des paramètres supplémentaires.Voici un exemple :

[ids galleria = “1,5,7” size = “medium”]

Dans cet exemple, la galerie affiche uniquement les images avec des numéros d’identification spécifiés.Dans ce cas, la taille serait automatiquement modifiée en moyenne.Et vous obtenez tout cela avec un code court simple.Maintenant, imaginez ce que le tout serait comme si vous alliez ajouter manuellement du code php qui aurait des dizaines sinon des centaines de lignes.Merci, codes courts!

Balises de début et de fin

Certains codes courts plus complexes peuvent avoir des balises de début et de fin.Ainsi, au lieu d’un shortcode, vous vous retrouveriez avec deux avec du contenu spécifique entre les deux.

Par exemple, un plug-in Google Maps peut vous permettre de visualiser un emplacement sur les cartes via le shortcode.La plupart de ces plugins auront des balises de début et de fin, tandis que l’adresse doit être écrite entre.Voici un exemple :

] [[maps]New York, États-Unis [[/ maps]]

Comme vous pouvez le voir dans l’exemple, la balise de fin commence toujours par une barre oblique « / ».En ayant les deux balises, WordPress peut plus facilement identifier les pièces de code court.

Travailler dans l’éditeur de texte

WordPress codes courts

Bien qu’ils ne soient que des raccourcis vers des fonctions, les codes courts sont en fait des cryptogrammes spécifiques à WordPress par eux-mêmes.Ainsi, si vous essayez d’écrire un shortcode dans l’éditeur visuel, WordPress vous montrera immédiatement la sortie (ou tout simplement le placeholder) de ce shortcode.Si vous avez suivi l’exemple de la galerie et écrit le shortcode dans l’éditeur visuel, vous verrait que WordPress affiche immédiatement son contenu (voir la première image dans ce post pour voir comment cela fonctionne).

Si vous souhaitez modifier un shortcode et travailler avec ses paramètres, passez à un éditeur de texte qui vous permet de voir la structure d’un shortcode donné.

Codes courts WordPress par défaut

Les codes courts sont généralement gérés par thèmes et plugins.Chaque développeur peut enregistrer des shortcodes par lui-même, donc tout le monde est différent.Ce qu’un code court fait, quels sont ses paramètres et ses fonctions, dépend exclusivement du plugin et du thème spécifiques que vous utilisez.

Par exemple, un plugin qui vous aide à afficher un emplacement sur Google Maps peut avoir un shortcode [[maps]], un plugin qui affiche les formulaires d’inscription utilisera [[form]], et ainsi de suite.

Chaque produit est différent, alors assurez-vous de vérifier la description et la documentation des thèmes et des plugins pour en savoir plus sur leur utilisation spécifique.

Toutefois, WordPress est livré avec un ensemble de codes courts prédéfinis que vous pouvez utiliser sans installer d’extensions supplémentaires.Par défaut, ce sont des codes courts avec qui vous pouvez travailler :

  • – intègre des fichiers audio

  • [didascalia] – enveloppe les sous-titres autour du contenu
  • – enveloppe les objets enseillés et définit leur taille maximale

  • – montre la galerie d’images

  • – montre une collection de fichiers audio et vidéo

  • – intégrer des fichiers vidéo

Échapper aux codes courts (affiche le texte shortcode sans l’exécuter)

Parfois, vous pouvez voir du texte qui représente un code court au lieu de l’exécuter.Si vous avez essayé d’ajouter un code court aux éditeurs de texte et visuels, vous avez réalisé qu’il avait couru dans les deux cas.

Pour afficher le texte d’un shortcode, utilisez des doubles crochets : [[shortcode]]

Si vous souhaitez afficher un shortcode avec des balises de début et de fin, utilisez uniquement la première et la dernière double parenthèse : [[maps] New York, USA [/ maps]]

Lorsque vous travaillez dans l’éditeur de texte, vous pouvez également remplacer les crochets par leurs codes.Donc, au lieu de «  » utilisez « [” puoi usare “& # 91;”, e invece “]& # 93; ».Par exemple : & # 91; shortcode & # 93 ; Il affichera également le shortcode sans l’exécuter.

Comment créer un code court simple

Lorsque vous écrivez des articles sur WordPress tous les jours, il ya des moments où vous répétez et quand vous avez besoin de taper quelque chose encore et encore.Il n’a pas d’importance si c’est une URL de site Web, une longue phrase, ou peut-être un morceau de HTML que vous écrivez constamment à partir de zéro, vous devriez envisager d’écrire un shortcode pour elle.

Et avec cette fonctionnalité simple, vous n’avez pas besoin d’être un programmeur ou vous n’embaucherez pas même un pour rendre les choses simples pour vous.Suivez les étapes ci-dessous et créez un code personnalisé :

    1. Ouvrez le fichier de fonction.php le menu Apparence -> Editor
    2. Insérez le code suivant à la fin du fichier :
fsg_shortURL fonction {
retour « http://www.firstsiteguide.com »;
}
add_shortcode ('fsg', 'fsg_shortURL');
  1. Allez dans Éditeur de texte et tapez pour [fsg] obtenir l’URL au lieu du shortcode

Ce n’était pas dur, n’est-ce pas ?

Exemple le plus avancé : Ajouter le shortcode d’image

En plaçant le code suivant dans fonctions.php, vous pouvez créer le code court pour placer une image avec des attributs personnalisés de largeur et de hauteur :

    1. Allez au fichier Fonctions.php
    2. Coller le code suivant :
img_shortcode fonction ($atts, $content = null) {

extrait (shortcode_atts (
		Vecteur(
			'width' => '',
			'hauteur' => '',
		), $ atts)
	);
return '';
}
add_shortcode (« img », « img_shortcode »);

  1. Éditeur de texte ouvert :

Ici, vous pouvez utiliser [img width = ‘x’ height = ‘y’] http://… [/ img]codes courts où « x » et « y » sont des nombres qui représentent la largeur et la hauteur en pixels.

Vous pouvez facilement ajouter plus d’attributs d’image si vous en avez besoin; consultez la liste de tous les attributs d’image sur W3 Schools.

Comment utiliser des codes courts dans les widgets texte

Avec wordpress version 4.9 qui est sorti le 15 Novembre 2017, les codes courts fonctionnent automatiquement dans les widgets texte.Mais si vous utilisez toujours une ancienne version de WordPress, cette partie du tutoriel vous aidera à obtenir le résultat.

Les codes courts peuvent contenir plusieurs fonctionnalités que vous pouvez ajouter à votre site WordPress.Que vous en ayez créé un pour vous-même ou que vous soyez venu avec un thème ou un plugin que vous venez d’installer, vous utiliserez probablement des codes courts tout le temps.Puisque vous pouvez vraiment gagner du temps et en profiter, il n’y a aucune raison de ne pas utiliser de codes courts.

Si vous commencez tout juste à créer votre site Web WordPress, vous n'avez peut-être utilisé que des shortcodes dans l'éditeur de publication.Mais la vérité est que vous pouvez utiliser des codes courts à peu près n’importe où.

Par exemple, si vous utilisez le plugin 5sec Google Maps PRO qui vous permet de créer facilement des cartes avec d’innombrables broches dessus, vous pouvez insérer la carte via le code court directement dans le widget texte et afficher votre position sur la barre latérale au lieu d’un seul envoi.Mais si votre thème ne prend pas en charge les codes courts dans les widgets, vous devrez activer la fonctionnalité par vous-même et c’est ce que nous allons montrer dans cet article.

Si vous avez besoin d’utiliser un code court dans vos fichiers PHP (par exemple, si vous souhaitez exécuter le code dans votre fichier en-tête.php et exécuter le code court partout où l’en-tête est présent), vous pouvez facilement le faire en l’enveloppant.Mais si vous avez essayé d’utiliser un shortcode dans votre widget texte comme dans l’exemple que nous avons mentionné ci-dessus, vous avez été déçu parce qu’il ne fonctionne tout simplement pas et le widget a montré le code court au lieu de celui-ci est contenu.À moins que le thème n’ait déjà enregistré la fonctionnalité, vous devrez l’activer vous-même.

Donc, si vous voulez être en mesure d’insérer un code court dans un widget texte et le faire fonctionner, ne vous inquiétez pas; vous pouvez y arriver en quelques secondes :

    1. Fonctions ouvertes.php
    2. Copiez et coller les deux lignes suivantes :
add_filter (« widget_text », « shortcode_unautop »);
add_filter (« widget_text », « do_shortcode »);
  1. Enregistrez vos modifications

Bien qu’il suffise en fait d’utiliser uniquement la deuxième ligne qui fait fonctionner le code court, vous voudrez que la première ligne évite d’insérer automatiquement le paragraphe WordPress et de casser les balises où vous créez inconsciemment des ruptures de ligne en formatant du texte dans un widget.Si vous placez un shortcode sur une ligne séparée, un autop supprimera ces balises de paragraphe et le shortcode fonctionnera comme un charme.

Vous pouvez maintenant accéder au widget d’apparence -> et faire glisser le widget de texte vers l’emplacement souhaité.Après tout, lorsque vous écrivez un shortcode directement dans votre widget texte (qui est enregistré sur votre site, bien sûr), il s’exécutera exactement comme il a été tapé dans l’éditeur de poste.

De même, vous pouvez exécuter le code PHP à partir de votre widget texte.C’était assez facile, n’est-ce pas ?Profitez de vos codes courts.

Les codes courts sont partout

Si vous commencez tout juste un blog WordPress, les shortcodes peuvent sembler redondants et difficiles à comprendre.La plupart du temps, il sera possible d’éviter les codes courts à l’aide d’une interface conviviale fournie par un plugin.Mais quand vous vous impliquez davantage avec le blog et quand vous commencez à utiliser plusieurs plugins, vous comprendrez la vraie puissance des codes courts.

Leur utilisation deviendra une routine et vous vous habituerez rapidement à écrire des supports carrés dans chaque nouveau poste que vous créez.Prenez donc quelques minutes et utilisez cet article pour apprendre les bases.

Open

info.ibdi.it@gmail.com

Close