Les données dynamiques

Cet article aborde des notions avancées. Il est recommandé d'avoir consulté au préalable les cours suivants :

• Prise en main d'Oxygen
• Insertion d'un élément
• La div / le conteneur

Comme vous le savez déjà, Oxygen remplace le thème de votre site. Cette particularité implique néanmoins un aspect à prendre en compte : lorsque que vous écrivez des informations directement via WordPress, que ce soit via une page ou une article, les données ne s'afficheront pas sur la page.

En effet, quand vous créez une page, Oxygen se charge de créer dans le même temps une page blanche qui attends d'être remplie par vos soins. C'est cette page qui s'affichera par défaut, et pas ce que vous écrivez directement sur WordPress.

Cependant, cela ne veut pas dire qu'il est inutile de se servir de WordPress. En effet, il est bien plus simple d'écrire vos articles ou de remplir les produits de votre boutique sans devoir sortir l'artillerie lourde à chaque fois. C'est dans ce but qu'on été créées les données dynamique, afin de vous permettre d'utiliser des données de WordPress directement sur Oxygen.

NB : Ce n'est pas recommandé, mais si vous avez pour une raison ou une autre besoin de désactiver Oxygen sur certaines page, vous pouvez consulter cet article

Exercice pour apprendre à insérer des données dynamiques

Pour commencer, assurez-vous d'avoir sous la main un article ou une page remplie directement avec WordPress. Si ce n'est pas le cas, voici comment faire :

• Créez un nouvel article
  • Panneau de contrôle, onglet articles / ajouter

• Ajoutez un titre, un texte et des images, un extrait et une image à la une
  • Titre, textes et images : directement sur l'article
  • Extrait et image à la une : dans le panneau de droite
  • Pour en savoir plus, consultez le guide dédié à l'interface des pages et articles

• Publiez l'article et éditez-le avec Oxygen

• Insérez une div et gérez vos marges
  • Pour vous aider, vous pouvez consulter le guide dédié à l'insertion d'élément
  • Les marges s'éditent à l'aide de l'onglet size & spacing

• Insérons maintenant notre 1ère donnée dynamique. Insérez à nouveau un élément, mais sélectionnez cette fois-ci l'onglet WordPress, puis Dynamic Data

• Cliquez sur Title pour ajouter votre 1er champ dynamique

Comme vous pouvez le voir, le champ a automatiquement intégré le contenu du titre de l'article. Si vous modifiez par le suite le titre directement sur Oxygen modifiera également le contenu du titre. Veillez cependant à ne pas modifier le champ text content, car il contient les informations qui lui permettent de récupérer les données sur WordPress.

Vous remarquerez également que le champ titre est devenu un conteneur avec un élément span a l'intérieur, utilisé en temps normal pour insérer de très court blocs de textes. C'est l'unique cas où un élément de texte ou d'image peut contenir lui-même un élément. De même, ne modifiez pas le contenu du span. Vous pouvez en revanche renommer les champs si vous le souhaitez

• Sélectionnez le conteneur parent (dans notre exemple, la Div(#3) et insérez les éléments dynamiques featured image et content

Insérer des données dynamique multiples

Les données dynamiques peuvent également être utilisée pour des champs multiples. Imaginons par exemple que vous souhaitiez faire un blog sur votre site. Une fois votre template créé, il vous suffit d'ajouter ces même champs pour que tous vos articles les intégrent sans que vous ayez besoin de configurer chacun d'entre eux.

Si vous avez besoin d'un exemple concret, consultez le cours expliquant comment créer un blog

Vous pouvez également insérer des données dynamique dans un répéteur

Insérer des données plus complexes

Vous l'aurez remarqué, nous n'avons pas intégré l'extrait de la page, car ce champ n'est pas dans l'onglet dynamic data. Pour intégrer des champs moins souvent utilisés, la méthode est un peu différente :

• Insérez un élément de texte et remplissez-le avec du texte au hasard
• Cliquez sur l'élément à l'écran et sélectionnez tout le texte à l'aide de la souris ou en faisant CTRL+A

• De nouvelles options apparaissent sur la barre supérieures. Cliquez sur l'icône Insert data
• Cliquez sur Exerpt

Si ça n'a pas fonctionné, c'est probablement que le texte que vous avez écrit n'étais pas entièrement sélectionné.

Liste des principaux éléments dans l'onglet insert data

Post

• Title : Titre de la page, produit ou article
• Content : Contenu de la page, produit ou article
• Exerpt : Extrait de page ou article ou description courte de produit
• Date : Date
• Categories, Tags, Taxonomies : catégories et autres tags associés à la page, produit ou article
• Meta / Custom Field : Si vous avez rempli un champ personnalisé

Featured image

• Title : titre de l'image
• Caption : description de l'image
• Alt : Alt image

Author

• Display name : nom de l'auteur de la page, produit ou article
• Bio : Biographie de l'auteur

Current User

Idem que Author, mais pour l'utilisateur actuel.

etc ...