Advanced Scripts

Introduction

Oxygen Builder est un outil très utile qui permet de créer et d'éditer des pages entières sans avoir besoin d'écrire des lignes de code. Mais il finit tout de même par être limité lorsque l'on souhaite d'intégrer certaines fonctionnalités, comme pas exemple un effet visuel particulièrement complexe. Quand il devient nécessaire d'écrire de vraies lignes de code, nous utilisons Advanced Script, un utilitaire qui nous permet d'organiser de manière très précise tout le code que nous créons et de le compartimenter pour savoir quel bloc de code correspond à quoi.

Mais cette extension peut aussi vous servir ! Si vous êtes à l'aise avec la gestion de votre site, vous pourriez avoir envie d'y ajouter quelques lignes de code en plus. Le CSS notamment, est particulièrement aisé à apprendre et à mettre en place. Un guide est disponible si vous souhaitez apprendre comment faire.

Licence d'utilisation

Advanced Script est un module payant. Votre site possède une licence d'une durée illimitée. Cette licence sera conservée si vous effectuez une nouvelle installation. Veillez cependant à ne pas utiliser cette possibilité à votre profit. Une licence dupliquée sur un site sans rapport avec Tricorn sera désactivée.

Instructions générales

Accéder à Advanced Script.

Depuis le panneau de contrôle, sélectionnez l'onglet outils, puis le sous-onglet Advanced Script.

Vous arrivez sur l'interface principale d'Advanced Script. Les fichiers affichés dépendent du modèle à partir duquel du avons construit votre site :

• L'onglet de droite vous permet d'activer et de désactiver des blocs de code en cliquant sur les boutons en vert. Veillez cependant à garder les blocs initiaux actifs, sauf si vous avez ce que vous faites.
  • Certains fichiers peuvent être rangés dans un dossier, qu'il faudra ouvrir pour accéder au code. Désactiver le dossier aura pour effet de désactiver tous les fichiers qu'il contient.
• Vous pouvez déplacer un fichier dans l'arborescence par glisser-déposer.

• Pour fermer et rouvrir le panneau de structure, cliquez sur la flèche Toggle script List.

Créer un nouveau bloc de code

Pour créer un nouveau bloc de code, cliquez sur le + situé en haut à droite de l'interface.

Utilisez ensuite le panneau de gauche pour configurer votre bloc de code :

• Title : Donnez un titre pertinent à votre bloc (exemple : effet animé bouton)
• Description : facultatif
• Type : indique le type de code que vous souhaitez intégrer
  • Si vous intégrez du code provenant d'une url, indiquez load from URL, sinon mettez custom code.
• Location : Emplacement du code dans votre page. Ce champ se met à jour automatiquement en fonction du type de code, ne le modifiez donc pas, sauf raison particulière.
• Hooks : Similaire à location, mais pour WordPress. A ne pas modifier, sauf raison particulière.
• Priority : Indique si votre bloc de code doit s'exécuter en priorité par rapport à d'autres. Laissez ce champ à 10 en temps normal.
• Condition : indique si vous souhaitez que ce code s'exécute uniquement si certaines conditions sont remplies. Ne remplissez ce champ que si vous exécutez un code susceptible de ralentir votre site, ou s'il ne doit absolument s'exécuter sur certaines pages, sinon, laissez-le vide Pour l'éxécuter, cliquer sur la flèche, puis sur Add new :
  • la condition Post signifie que le code s'exécute uniquement dans certains articles ou page.
  • Vous pouvez mettre plusieurs conditions sur un même bloc de code.

Une fois votre paramétrage terminé, cliquez sur le bouton Save and Activate pour sauvegarder vos modifications et activer le bloc de code.

Organiser vos blocs de code

Il est essentiel de bien organiser votre code si vous voulez pouvoir vous y retrouver plus tard. Créer un unique fichier de plusieurs centaines de lignes n'est pas recommandé si vous débutez. Il est préférable de créer plusieurs blocs de code, chacun destiné à une action précise sur votre site, que vous organiserez en un fichier :

Cliquez sur le bouton add new folder, à côté du bouton +

Un nouveau fichier va s'ouvrir tout en bas du panneau de droite. Renommez-le, puis cliquez sur l'icône pour cocher les modifications.

Déplacez ensuite votre fichier avec votre souris tout en haut du panneau de structure.

De la même manière, déplacez ensuite vos blocs de code dans le fichier. Il faut parfois s'y reprendre quelques fois pour avoir le bon coup de main.

Remplir vos blocs de code

Vous pouvez à présent écrire votre code sur le bloc correspondant. Advanced Script embarque une aide à la rédaction qui vous informe lorsque votre code présente un problème.

• Une croix signifie que votre code n'est pas juste.
  • Si vous rentrez un code CSS particulièrement expérimental, Advanced Script peut ne pas le reconnaître même si le code fonctionne.
• Un panneau de signalisation signifie qu'un point a retenu l'attention du logiciel.
  • Par exemple, une classe a été laissée vide. Le code fonctionnera, mais cette classe est inutile.

Une fois votre code terminé, sauvegardez vos modifications et testez si votre code marche. Il sera nécessaire de vider le cache pour que vos utilisateurs voient les modifications.

ATTENTION : Une fois votre code écrit et sauvegardé, ne le changez plus de bloc de code, car il est possible que cela empêche Oxygen Builder de correctement fonctionner. Vous pouvez cependant déplacer les blocs de codes en eux-même sans risque.

Pour vous initier à l'écriture du code CSS, consultez le guide dédié.