Le Code Block

Ce guide nécessite d'avoir une bonne connaissance préalable du fonctionnement général d'Oxygen, ainsi que des langages du web : HTML, CSS, Javascript.

Introduction

Il arrive parfois que vous ayez besoin d'injecter du code spécifique "en dur", c'est-à-dire de vraies lignes de code, dans votre page. Ce peut être le cas par exemple si vous souhaitez insérer un effet particulièrement complexe. Le code block, ou bloc de code, peut remédier à ce problème.

Attention cependant : le code block est un élément à utiliser avec parcimonie. Pas parce qu'il est particulièrement dangereux, c'est un bloc comme les autres, mais parce qu'en abusant de cet élément, vous risquez de vous retrouver avec une page bourrée de code dans tous les sens que vous n'arriverez plus à identifier.

C'est pourquoi, dans la mesure du possible, il est préférable d'utiliser le plugin advanced script, qui vous permet également d'injecter du code supplémentaire, mais de manière beaucoup ordonnée, en vous laissant notamment la possibilité d'activer et de désactiver chaque bloc de code. De manière générale, il est plus judicieux d'utiliser Advanced Scripts pour :

Tout le code CSS
Le code Javascript généraliste (qui s'applique à tout le site)

A l'inverse, le bloc de code est plutôt à réserver :

Au code HTML ou PHP (le code spécifique à WordPress)
Au code Javascript spécifique à une page (encore qu'il tout à fait possible de configurer Advanced Scripts pour qu'il active un code Javascript sur une page en particulier.

En résumé, si vous avez besoin d'intégrer du code en dur sur une page, essayer de privilégier au maximum l'utilisation d'Advanced Scripts avant de passer au code bloc, surtout si vous avez l'intention de tester votre code.

Procédure

Sur votre page Oxygen, sélectionnez le conteneur dans lequel vous voulez mettre votre code block
- A défaut, sélectionnez le inner content
Cliquez sur le plus en haut de votre barre d'édition (en haut à gauche)
Dans l'onglet Basics cliquez sur le champ code block

Raccourci : une fois votre conteneur sélectionné, vous pouvez appuyer sur la touch c pour faire apparaître un code black directement (si vous n'avez pas changé vos raccourcis)