Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Utiliser le Bloc Code

Vous pouvez utiliser le Bloc Code pour ajouter du code personnalisé à une page, un article de blog, une barre latérale ou un pied de page. Le Bloc Code est une bonne option si vous souhaitez intégrer des widgets tiers ou personnaliser une page au-delà des possibilités offertes par d'autres blocs. Vous pouvez également utiliser le Bloc Code pour afficher des extraits de code.

Le Bloc Code prend en charge les langages HTML et Markdown.

Pour en savoir plus sur le choix du meilleur bloc pour du contenu personnalisé, consultez la page Blocs Intégration vs Blocs Code.

Il s'agit d'une fonctionnalité Premium disponible dans le plan Website Business actuel et les plans supérieurs :

  • Disponible dans : tous les plans Business et Commerce
  • Disponible dans : l'ancien plan Personnel (n’est plus disponible pour les nouveaux abonnements)
  • Non disponible dans : le plan Personnel actuel
  • Période d'essai : disponible au cours d'une période d'essai

Pour en savoir plus, rendez-vous sur Fonctionnalités Premium.

Regarder une vidéo

Étape 1 - Ajouter le Bloc Code

  1. Ouvrez un éditeur de page ou d'article.
  2. Cliquez sur un Point d'Insertion ou sur l'icône +.
  3. Sélectionnez Code dans le menu.
  4. Pour des étapes plus détaillées, rendez-vous sur Ajout de blocs.

Étape 2 - Ajouter du code

Si vous affichez du contenu avec le Bloc Code, assurez-vous de sélectionner HTML ou Markdown dans le menu déroulant.

Ensuite, saisissez ou collez le code dans le champ, puis supprimez la balise <p>Hello, World!</p> (<p>Bonjour tout le monde !</p>). Pour coller le code, copiez-le puis cliquez dans la case et appuyez sur Ctrl + V (Windows) ou Cmd + V (Mac).

Remarque : le Bloc Code a une limite de 400 Ko, soit environ 300 000 caractères.

Astuce : les codes CSS et JavaScript s'affichent sous forme de texte par défaut. Pour les ajouter à un Bloc Code, choisissez le menu déroulant HTML, puis ajoutez des tags. Entourez du code CSS avec les tags <style></style> et entourez du code JavaScript avec les tags <script></script>.

Étape 3 - Afficher la source (facultatif) 

Si vous utilisez le Bloc Code pour afficher du code, cochez l'option Display Source (Afficher la Source).

Cette option est utile pour afficher des exemples de code, car le Bloc Code formate automatiquement les extraits de code pour des raisons de lisibilité, ce qui en fait une meilleure solution que le Bloc Texte.

Remarque : l'option Afficher la Source est toujours cochée pour les options CSS, JavaScript et Plain Text (Texte Clair).

Étape 4 - Enregistrer

Cliquez sur Apply (Appliquer) pour publier vos modifications.

Prévisualiser du code intégré

À titre de mesure de sécurité, votre code ne s'affichera pas toujours lorsque vous êtes connecté(e), même si les visiteurs pourront le voir. Si vous ne pouvez pas voir du code que vous avez ajouté à un Bloc Code, vous pouvez utiliser Preview in Safe Mode (Prévisualiser en Mode Sans Échec) pour consulter l'élément intégré.

Résolution de problèmes

Votre code pourrait également ne pas s'afficher si vous l'avez ajouté à une page dans un Index. Pour effectuer un test, retirez la page de l'Index dans la section Pages, puis déconnectez-vous de votre site.

Si vous rencontrez toujours des problèmes pour voir l'effet du code, nous vous recommandons de prendre contact avec la source (par exemple, le service vous ayant communiqué un extrait de code pour un widget), car elle connaît mieux la façon dont il est censé fonctionner.

Remarque  : l'ajout de code personnalisé n'est pas pris en charge par notre service d'assistance. Autrement dit, nous ne somme pas en mesure de vous aider concernant la configuration de code personnalisé ou la résolution de problèmes associés. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ou son entière compatibilité avec Squarespace, notamment son fonctionnement avec notre design adaptatif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l'ensemble des templates. Les personnalisations tierces peuvent également causer des problèmes d'affichage avec les futures mises à jour de notre plateforme. Bien que nous ne soyons pas en mesure de vous assister à ce sujet, de nombreuses ressources peuvent vous orienter dans la bonne direction :
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 64 sur 175
Utiliser le Bloc Code