Formation Wordpress - Oxygen

Dupliquer un composant et comprendre l'élément Reusable

Introduction

En développement web, la clé, c'est de ne pas se fatiguer. Un bon développeur préfèrera toujours s'embêter à mettre en place mille et une astuces si cela lui permet de minimiser la somme de travail au bout du compte. Cela pourrait s'apparenter à de la fénéantise, mais c'est en réalité nécessaire pour ne pas très vite se retrouver à répéter les mêmes actions des centaines de fois . Savoir réutiliser son propre travail permet d'avancer plus vite et d'éviter les erreurs à force de répétition.

La première étape pour économiser son temps de travail est la duplication d'élément, qui vous permet de dupliquer un par un. La deuxième étape est la création d'éléments Reusable, qui vous permet de réutiliser un élément de multiples fois.

Duplication d'élément

Méthode 1 :

  • Depuis votre page Oxygen, sélectionnez l'élément que vous souhaitez dupliquer dans la barre de structure (à droite).
  • Cliquez sur l'icône de crayon qui apparaît au survol de l'élément.
  • Cliquez sur le bouton duplicate

Vous avez maintenant deux éléments identiques que vous pouvez modifier à votre guise. Vous pouvez déplacer un objet dans la barre de structure en glisser-déposer. Pour en savoir plus, consultez le guide dédié

Méthode 2 :

Vous pouvez copier et coller des sections entières de votre site, directement avec l'outil couper / copier / coller, situé en haut de page.

Pour l'utiliser, cliquez simplement sur le conteneur que vous souhaitez couper / copier, puis cliquez sur le conteneur où vous souhaitez le coller. Assurez-vous de vérifier que vous collez bien dans le bon conteneur pour ne pas déséquilibrer la page. Pour en savoir plus, consultez le guide dédié.

Vous pouvez également utiliser cette technique pour copier un élément sur une autre page :

  • Effectuez la copie
  • Fermez la page
  • Ouvrez le page sur laquelle doit être copié l'élémet
  • Collez l'élément.

ATTENTION : Dans ce cas de figure précis, vous pourriez être tenté d'ouvrir plusieurs pages en même temps pour aller plus vite.

achez que cette pratique est déconseillée par Oxygen, car elle risque de causer des problèmes. Cependant, il n'y a généralement pas de souci lorsque vous respectez les règles suivantes :

  • Pas plus de deux pages ouvertes à la fois
  • Ne pas éditer deux pages en même temps (on sauvegarde la première page AVANT de commencer à éditer la deuxième, et inversement)
  • Un seul utilisateur à la fois sur Oxygen
  • Ne pas laisser plus d'une page ouverte lorsque si vous partez faire autre chose.

En cas de problème, le seul vrai souci de vous pourriez rencontrer serait qu'une modification s'applique également sur d'autres pages. Si cela se produit, utilisez les révisions pour corriger le problème.

L'élément Reusable

Transformer un élément ou un conteneur en Reusable vous permettra de le réutiliser sur de multiples pages, voir d'appliquer instantanément vos modifications à tous vos éléments en une fois.

  • Sélectionnez le conteneur ou l'élément que vous souhaitez rendre réutilisable
  • Cliquez sur l'icône de crayon qui apparaît au survol de l'élément
  • Cliquez sur le bouton make Reusable
  • Donnez un nom à votre élément et cliquez sur ok

Vous remarquerez que votre élément a changé d'apparence. En effet, Oxygen transforme automatiquement votre élément en single. Nous vous expliquerons après ce que cela veut dire. Pour le moment, cliquez sur le bouton undo, pour faire un retour arrière (barre supérieure) et remettre votre élément dans son état initial.

Pas d'inquiétude, votre élément est bien enregistré en tant qu'élément réutilisable.

Votre élément est à présent enregistré comme composant réutilisable, mais il n'est pas encore affiché sur Oxygen. Sauvegardez et relancer la page en cliquant sur F5 ou le bouton pour recharger votre page.

  • Une fois votre page rechargée, Sélectionnez le conteneur dans lequel vous souhaitez insérer votre élément
    • A défaut, cliquez sur l'élément inner content
  • Cliquez sur le bouton plus bleu (en haut à gauche)
  • Cliquez sur l'onglet reusable.
  • Cliquez sur le composant que vous venez de créer

Vous remarquerez que deux options sont disponibles :

Editable

L'élément est intégré comme si vous aviez fait un copier-coller classique. Il est entièrement éditable.

Single

L'élément est intégré en tant que copie parfaite de l'élément original. Il ne sera pas modifiable directement sur la page, car toutes les copies en single sont un seul et même élément.

Cela signifie que si vous ouvrez la page de l'élément pour le modifier, toutes ses versions en single seront modifiée.

Pour éditer un élément en single, cliquez dessus et vous verrez apparaître sur la barre d'édition (à droite) un bouton qui vous emmènera vers la page de l'élément.

Besoin de quelque chose ?

Nous sommes toujours prêts à améliorer notre formation. N'hésitez pas à nous signaler un problème ou un cours manquant.
Demande de cours
bonjour@tricorn.fr
Gérer le consentement aux cookies

Afin d'offrir la meilleure expérience possible, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.

View more
Cookies settings
Accepter
Refuser
Confidentialités et Cookies
Privacy & Cookies policy
Cookie name Active
Save settings
Cookies settings