Code personnalisé¶

Parfois vous avez besoin d'ajouter du code que l'éditeur visuel ne couvre pas -- un traceur d'analytics, une police personnalisée, un framework CSS ou une balise méta. La boîte de dialogue Paramètres inclut un éditeur de code pour la balise <head>, et le bloc Custom Code vous permet d'intégrer du HTML et du JavaScript arbitraires n'importe où sur la page.

Deux choses à garder en tête :

Le code dans le head s'exécute sur chaque page (niveau site) ou sur une seule page (niveau page). Choisissez la bonne portée pour que les scripts de suivi ne se déclenchent pas là où ils ne devraient pas.
Les blocs de code personnalisé font partie du contenu de la page. Ils vivent à l'intérieur du <body> et s'affichent là où vous les placez sur le canevas.

L'éditeur de head¶

L'éditeur de head est un éditeur de code à l'intérieur de l'onglet Code de la boîte de dialogue Paramètres. Il vous permet d'écrire du HTML qui sera injecté directement dans l'élément <head> de vos pages publiées.

Ouvrir l'éditeur de head¶

Cliquez sur Settings dans la barre latérale gauche (Alt+S) pour ouvrir les Paramètres du site.
Sélectionnez l'onglet Code.
Vous verrez un éditeur de code avec coloration syntaxique et numéros de ligne.
Écrivez votre HTML.
Cliquez sur Appliquer (ou appuyez sur Ctrl+Entrée).

L'onglet Paramètres Code avec un éditeur HTML pour insérer du code personnalisé dans la balise HEAD

Code de head au niveau site vs. au niveau page¶

Lorsque vous ouvrez les Paramètres du site et ajoutez du code dans l'onglet Code, ce code apparaît dans le <head> de chaque page de votre site. Lorsque vous ouvrez les réglages de la page (icône engrenage à côté de la page dans le panneau Pages) et ajoutez du code, il ne s'applique qu'à cette seule page.

Les deux sont injectés. Ils ne se remplacent pas mutuellement. Si vous avez du code de head au niveau site et du code de head au niveau page, les deux seront présents dans le HTML publié -- le code du site en premier, puis le code de la page.

Cela signifie que vous pouvez :

Ajouter un outil de mesure d'audience (par exemple Matomo) au niveau du site pour qu'il suive chaque page.
Ajouter une balise canonique spécifique à une page ou une directive noindex sur des pages individuelles sans affecter le reste du site.

Aperçu en direct¶

Lorsque vous appliquez du code de head, l'éditeur l'ajoute à l'aperçu du canevas. Si vous ajoutez une feuille de style ou un bloc <style>, vous voyez ses effets tout de suite. Les scripts ne s'exécutent pas dans l'aperçu de l'éditeur. Ils ne s'exécutent que sur le site publié : testez-les là.

Cas d'utilisation courants du code de head¶

Une police auto-hébergée¶

La boîte de dialogue Fonts installe les Google Fonts pour vous. Pour une autre police, par exemple un fichier de police que vous hébergez vous-même, chargez-la dans l'éditeur de head avec un bloc <style> :

<style>
  @font-face {
    font-family: "My Font";
    src: url("https://www.example.com/fonts/my-font.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  .my-title {
    font-family: "My Font", sans-serif;
  }
</style>

Remplacez My Font par le nom de votre police, et l'adresse par celle de votre fichier de police.

La règle .my-title applique la police. Donnez la classe my-title aux éléments qui utilisent cette police.

Elle n'apparaîtra pas dans le menu déroulant font-family

Le champ font-family du Style Manager est une liste déroulante. Elle ne contient que les polices ajoutées via la boîte de dialogue Fonts, et on ne peut pas y saisir un nom de police. Une police chargée depuis le code du head n'y figure pas : appliquez-la en CSS dans le même bloc <style>, comme ci-dessus.

Astuce : Ajoutez la police au niveau du site pour qu'elle soit disponible sur toutes les pages. Si vous ne l'ajoutez que sur une seule page, les éléments utilisant cette police sur d'autres pages se rabattront sur une police par défaut.

Matomo¶

Matomo est un outil libre et open source de mesure d'audience. Ajoutez son code de suivi pour mesurer les visites sur l'ensemble de votre site :

<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://YOUR-MATOMO-ADDRESS/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'YOUR-SITE-ID']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

Remplacez YOUR-MATOMO-ADDRESS par l'adresse de votre instance Matomo (par exemple matomo.example.com), et YOUR-SITE-ID par l'identifiant de votre site dans Matomo. Matomo affiche le code complet avec ces valeurs dans ses réglages du code de suivi. Ajoutez ceci au niveau du site pour que le suivi fonctionne sur chaque page.

CSS personnalisé¶

Ajoutez un bloc <style> pour définir des styles que l'éditeur visuel ne prend pas en charge ou que vous souhaitez écrire à la main :

<style>
  /* Défilement fluide pour les liens d'ancrage */
  html {
    scroll-behavior: smooth;
  }

  /* Couleur de sélection personnalisée */
  ::selection {
    background-color: #3b82f6;
    color: white;
  }
</style>

Quand utiliser ceci vs. le Style Manager : Utilisez le Style Manager pour les styles spécifiques aux éléments que vous souhaitez gérer visuellement. Utilisez le CSS personnalisé dans le head pour les comportements globaux, les pseudo-éléments, les animations ou tout ce que le Style Manager n'expose pas.

Balises canoniques¶

Indiquez aux moteurs de recherche quelle URL est la version originale d'une page :

<link rel="canonical" href="https://www.example.com/my-page">

Ajoutez ceci au niveau de la page car chaque page a sa propre URL canonique. Consultez SEO pour en savoir plus sur l'importance des balises canoniques.

Balise méta robots¶

Empêchez les moteurs de recherche d'indexer une page spécifique :

<meta name="robots" content="noindex, nofollow">

Ajoutez ceci au niveau de la page sur les pages brouillons, les pages de remerciement ou les pages d'administration. Ne l'ajoutez pas au niveau du site sauf si vous souhaitez que votre site entier soit masqué des moteurs de recherche.

Frameworks CSS externes¶

Chargez un framework CSS comme Normalize.css ou une bibliothèque utilitaire :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

Ajoutez au niveau du site si vous souhaitez le framework sur chaque page.

Balises de vérification¶

De nombreux services (Google Search Console, Bing Webmaster Tools, Pinterest) vous demandent de vérifier la propriété du site en ajoutant une balise méta :

<meta name="google-site-verification" content="your-verification-code">

Ajoutez ceci au niveau du site. Il n'a besoin d'être que sur une seule page (généralement la page d'accueil), mais l'avoir sur toutes les pages ne cause aucun problème.

Blocs de code personnalisé¶

L'éditeur de head est pour le code dans le <head>. Mais parfois vous avez besoin d'intégrer du HTML, du CSS ou du JavaScript à l'intérieur du corps de la page -- un widget de formulaire de contact, un lecteur vidéo embarqué, un bouton de chat en direct ou un élément interactif.

Pour cela, utilisez le bloc Custom Code. Il vous permet de placer un bloc de HTML arbitraire n'importe où sur votre canevas.

Ajouter un bloc de code personnalisé¶

Ouvrez le panneau Blocks (l'icône + de la barre latérale gauche).
Trouvez le bloc Custom Code, dans la catégorie Elements.
Glissez-le sur le canevas où vous le souhaitez. La fenêtre Insert your code s'ouvre.
Écrivez ou collez votre HTML, CSS ou JavaScript.
Cliquez sur Save.

Pour modifier le code plus tard, double-cliquez sur le bloc.

Le bloc affiche votre HTML sur le canevas. Si votre code contient un <script>, le canevas affiche à la place le message Custom code with <script> can't be rendered on the canvas. Le script s'exécute sur le site publié.

Cas d'utilisation des blocs de code personnalisé¶

Intégrer un formulaire. Collez le code d'intégration d'un service de formulaires (Typeform, Google Forms, Tally, etc.) dans un bloc de code personnalisé. Le formulaire apparaît sur votre page là où vous avez placé le bloc.

Ajouter un widget interactif. Les widgets de chat, les outils de prise de rendez-vous et les flux de réseaux sociaux fournissent souvent des codes d'intégration. Collez-les dans un bloc de code personnalisé.

Éléments alimentés par JavaScript. Si vous avez besoin d'un élément qui nécessite du JavaScript -- un diaporama, un accordéon, un compteur dynamique -- écrivez-le dans un bloc de code personnalisé. Le JavaScript s'exécute dans le navigateur lorsque la page se charge.

Cartes embarquées. Google Maps et OpenStreetMap fournissent des codes d'intégration <iframe> que vous pouvez coller dans un bloc de code personnalisé.

Blocs de code personnalisé vs. code de head¶

	Éditeur de head (onglet Code)	Bloc de code personnalisé
Emplacement dans le HTML	À l'intérieur de `<head>`	À l'intérieur de `<body>`, là où vous le placez
Portée	Tout le site ou par page	Uniquement sur la page où vous l'ajoutez
Contenu typique	Balises méta, feuilles de style, analytics, polices	Formulaires, widgets, intégrations, éléments interactifs
Visible sur le canevas	Non (le contenu du head est invisible)	Oui, sauf le code qui contient un `<script>`
Comment l'ajouter	Boîte de dialogue Paramètres > onglet Code	Glisser le bloc Custom Code depuis le panneau Blocks

Erreurs courantes¶

Ajouter un <script> dans le head alors qu'il devrait être dans le body. Analytics et polices appartiennent au head. Les widgets interactifs et les codes d'intégration appartiennent aux blocs de code personnalisé dans le body.
Oublier de définir la bonne portée. Le code de head au niveau du site s'exécute sur chaque page. Si vous ajoutez une balise canonique spécifique à une page au niveau du site, chaque page obtient la même URL canonique -- ce qui est incorrect.
Ne pas tester après publication. L'aperçu de l'éditeur est proche du résultat publié, mais pas identique. Vérifiez toujours sur le site en ligne.

Avancé : ordre d'exécution et interaction entre le code de head du site et de la page

Ordre d'injection¶

Lorsqu'une page est publiée, le code de head est injecté dans cet ordre :

Les balises meta charset, viewport et generator
La feuille de style Silex de votre site
Code de head personnalisé au niveau du site
Code de head personnalisé au niveau de la page
Le titre, le favicon, la description et les balises Open Graph

Cela signifie que vos styles personnalisés viennent après la feuille de style Silex, et que le code au niveau de la page peut surcharger les styles au niveau du site (les règles CSS ultérieures l'emportent). Les scripts au niveau de la page s'exécutent après les scripts au niveau du site.

Surcharger les styles au niveau du site¶

Si votre code de head au niveau du site ajoute une feuille de style et que vous souhaitez surcharger un style spécifique sur une page, ajoutez un bloc <style> dans le code de head de cette page avec un sélecteur plus spécifique ou le même sélecteur (il l'emporte car il vient plus tard dans le document).

Éviter les scripts en double¶

Si vous chargez le même script au niveau du site et au niveau de la page, il s'exécutera deux fois. Cela peut causer des erreurs ou un double comptage dans les analytics. Utilisez le niveau site pour les scripts qui doivent s'exécuter partout. Utilisez le niveau page uniquement pour les scripts uniques à cette page.

Quiz¶

Q1 : Vous souhaitez ajouter le suivi Matomo à l'ensemble de votre site. Où placez-vous le code de suivi ?

A) Dans un bloc de Code personnalisé sur la page d'accueil
B) Dans l'onglet Code des Paramètres du site
C) Dans l'onglet Code des réglages de la page de chaque page

Réponse

B) Dans l'onglet Code des Paramètres du site. Le code de head au niveau du site s'exécute sur chaque page, ce qui est ce que vous souhaitez pour les analytics. L'option A ne suit que la page d'accueil. L'option C fonctionne mais nécessite d'ajouter le code sur chaque page manuellement.

Q2 : Vous avez collé un code d'intégration de formulaire de contact dans l'éditeur de head, mais rien n'apparaît sur la page. Que s'est-il passé ?

A) Le code d'intégration est cassé
B) L'éditeur de head injecte le code dans le <head>, qui est invisible -- les codes d'intégration de formulaire doivent aller dans un bloc de Code personnalisé dans le body
C) Vous devez ajouter du CSS pour le rendre visible

Réponse

B) L'éditeur de head est pour le contenu invisible du <head>. Les formulaires et autres éléments visibles appartiennent à un bloc de Code personnalisé, qui s'affiche à l'intérieur du corps de la page. Le <head> est pour les balises méta, les feuilles de style et les scripts -- pas pour le HTML visible.

Q3 : Vous avez chargé une police dans l'éditeur de head des réglages d'une seule page. Sur les autres pages, le texte utilisant cette police s'affiche mal. Pourquoi ?

A) Une police ne peut servir que sur une seule page
B) La police n'est chargée que sur la page où vous l'avez ajoutée, les autres pages ne l'ont pas
C) Vous devez vider le cache du navigateur

Réponse

B) La police n'est chargée que sur la page où vous l'avez ajoutée. Ajoutez les polices au niveau du site pour qu'elles soient disponibles sur chaque page. Le code de head au niveau de la page ne s'applique qu'à cette page spécifique.

Q4 : Vous souhaitez empêcher votre page "Merci" d'apparaître dans les résultats de recherche. Qu'ajoutez-vous, et où ?

A) <meta name="robots" content="noindex, nofollow"> dans l'onglet Code des réglages de cette page
B) <meta name="robots" content="noindex, nofollow"> dans l'onglet Code des Paramètres du site
C) Supprimer le titre de la page dans les paramètres SEO

Réponse

A) Ajoutez la balise méta robots dans l'onglet Code des réglages de cette page. Cela masque uniquement cette page des moteurs de recherche. L'ajouter au niveau du site masquerait votre site entier. Supprimer le titre n'empêche pas l'indexation.

Éditer cette page sur GitLab