Aller au contenu

Les shortcodes dans les pages Avada

Une partie de ce qu'affichent les pages du site (le calendrier, les blocs « À venir », les coordonnées du centre…) n'est pas écrite dans la page elle-même : elle y est insérée par un shortcode. Cette page explique ce que c'est et comment s'en servir.

Qu'est-ce qu'un shortcode ?

Un shortcode est un mot-clé entre crochets, placé dans le contenu d'une page. Sur le site, le visiteur ne voit jamais le mot-clé : il voit ce que le plugin met à sa place.

Dans la page Ce que voit le visiteur
[calendar] le calendrier des événements
[upcoming id="2222"] un bloc « À venir », qui liste les prochaines séances
[info name="phone"] le numéro de téléphone du centre, cliquable
[icon name="tabler:phone"] une icône de téléphone, au milieu du texte
[year] l'année en cours, par exemple dans le pied de page
[youtube] le logo et le nom YouTube, en rouge

L'avantage : l'information n'est saisie qu'à un seul endroit. Le numéro de téléphone se modifie dans Paramétrage > Général, et toutes les pages qui l'affichent par [info name="phone"] suivent d'elles-mêmes.

Les réglages d'un shortcode

Certains shortcodes demandent une précision, écrite après leur nom sous la forme nom="valeur" : [info name="phone"] affiche le téléphone, [info name="address"] l'adresse.

Recopiez ces réglages exactement : guillemets droits ("), sans espace autour du signe =. Le plus sûr est de copier le shortcode là où l'écran le propose. Par exemple, chaque bloc « À venir » affiche son propre shortcode, prêt à copier, dans le champ Shortcode à copier : un clic dans le champ suffit à le copier. Pour les icônes, c'est le menu Paramétrage > Icônes.

Où les placer dans Avada

Dans le constructeur Avada, un shortcode se colle dans un bloc de texte (Text Block), à l'endroit où son contenu doit apparaître. Enregistrez la page, puis affichez-la sur le site pour vérifier le résultat : dans le constructeur, on ne voit souvent que le mot-clé.

Le shortcode s'affiche en toutes lettres sur le site ?

Le nom est sans doute mal orthographié (une majuscule, un tiret à la place d'un trait de soulignement) : WordPress ne le reconnaît pas et le laisse tel quel. Recopiez-le depuis l'écran qui le propose, ou depuis cette page.

Noms anglais et anciens noms français

Les shortcodes du plugin ont été renommés en anglais : [upcoming] s'appelait autrefois [a_venir], [weekly_timetable] s'appelait [AgendaHebdo]. Les anciens noms fonctionnent toujours, et continueront de fonctionner : les pages existantes n'ont pas à être modifiées.

Pour une nouvelle page, utilisez le nom anglais, quelle que soit la langue du site.

Nom à utiliser Ancien nom Ce qu'il affiche
[upcoming id="…"] [a_venir id="…"] un bloc « À venir » (voir Blocs « À venir »)
[weekly_timetable] [AgendaHebdo] le planning hebdomadaire (voir Planning hebdomadaire)
[teachers] [enseignants] la liste des enseignants
[teachers_portraits] [enseignants_portraits] les portraits des enseignants
[home_image] [ImageAccueil] l'image d'accueil
[global_element name="…"] [element_global nom="…"] un élément global (voir Éléments globaux)
[info name="…"] [info nom="…"] une information générale du centre
[icon name="…"] [icone nom="…"] une icône (voir Les icônes)
[year] [annee] l'année en cours
[page_name] [NomPage] le titre de la page
[youtube] (aucun) le logo et le nom YouTube (voir Le logo YouTube)

[calendar] et [youtube] n'ont pas d'ancien nom.

Les informations générales du centre

Le shortcode [info] affiche une information saisie dans Paramétrage > Général. Le réglage name dit laquelle :

Shortcode Affiche
[info name="name"] le nom du centre
[info name="address"] l'adresse
[info name="zip"] le code postal
[info name="city"] la ville
[info name="access"] l'accès (transports…)
[info name="maps_link"] le lien Google Maps
[info name="phone"] le téléphone, cliquable sur un téléphone portable
[info name="email"] l'adresse e-mail

Si l'information n'est pas remplie dans Paramétrage > Général, le shortcode n'affiche rien.

Les icônes

Le shortcode [icon name="…"] insère une icône dans le texte d'une page : une étoile, un téléphone, une enveloppe… L'icône prend la taille et la couleur du texte qui l'entoure.

Inutile de connaître les noms d'icônes : le menu Paramétrage > Icônes les présente toutes et fournit le shortcode prêt à coller.

  1. Ouvrez Paramétrage > Icônes.
  2. Dans la liste des bibliothèques, choisissez de préférence Font Awesome — Solid. Tapez ensuite un mot dans le champ Rechercher une icône… (en anglais, par exemple phone ou calendar).
  3. Cliquez sur l'icône qui vous plaît : un aperçu s'affiche, avec son shortcode dans le champ Shortcode (cliquer pour copier).
  4. Cliquez dans ce champ : le shortcode est copié.
  5. Collez-le dans le bloc de texte Avada, à l'endroit où l'icône doit apparaître, puis enregistrez la page et vérifiez-la sur le site.

Les icônes viennent de plusieurs bibliothèques : Font Awesome (Solid, Regular, Brands), Tabler Icons, Lucide, Phosphor, Material Symbols et Bootstrap Icons. Le shortcode copié indique celle que vous avez choisie, avant les deux-points : [icon name="tabler:star"].

Préférez Font Awesome — Solid

C'est la bibliothèque à utiliser en priorité : c'est celle des anciens shortcodes, et c'est la seule où la recherche comprend les mots-clés. En tapant tea, vous obtenez par exemple une tasse fumante (mug-hot), même si le mot n'est pas dans le nom de l'icône.

Si vous ne trouvez vraiment pas votre icône, vous pouvez chercher dans les autres bibliothèques, mais la recherche y est moins souple : elle ne porte que sur le nom de l'icône (en anglais). Essayez plusieurs mots proches (mug, cup, coffee…).

Les anciens shortcodes d'icône continuent de fonctionner

Un shortcode sans bibliothèque, comme [icon name="star"], affiche toujours l'icône Font Awesome correspondante : les pages existantes n'ont pas à être modifiées. Pour une nouvelle page, copiez le shortcode proposé par Paramétrage > Icônes.

Le même choix d'icônes est proposé ailleurs, sans passer par un shortcode à coller :

  • dans la fiche d'une activité, le champ Icône de l'activité (voir Les activités) ;
  • dans le texte d'une image d'accueil, le bouton Insérer une icône, qui place le shortcode à l'endroit du curseur.

Le logo YouTube

Le shortcode [youtube] n'a aucun réglage : il affiche le logo de YouTube suivi du mot « YouTube », le tout en rouge. Il sert à désigner YouTube dans un texte, par exemple pour dire qu'une séance est diffusée en ligne, sans avoir à écrire le nom en texte brut. Collez-le dans le bloc de texte Avada, à l'endroit voulu. Voir un exemple : le logo dans le titre d'un événement.

Les shortcodes des modèles

D'autres shortcodes servent à construire l'ossature du site : en-tête ([template_header]), pied de page ([template_footer]), parties des pages des événements ([event_teacher], [event_schedule], [event_registration]…). Ils sont mis en place par le webmestre dans les modèles de mise en page, une fois pour toutes. Vous n'avez normalement pas à y toucher.

Quand un shortcode n'affiche rien

Un shortcode correctement écrit peut ne rien afficher :

  • l'information qu'il montre n'est pas remplie (une adresse vide, un bloc « À venir » sans séance à venir) ;
  • le module qui le fournit n'est pas actif sur votre site (voir Les modules). Le shortcode est alors remplacé par rien, plutôt que de s'afficher en toutes lettres.

Un bloc « À venir » dont le numéro est faux affiche un message d'erreur à la place de la liste : recopiez son shortcode depuis le champ Shortcode à copier du bloc.

Pour aller plus loin