Comment utiliser le bloc Repeater avec Oxygen Builder ?

Qu’est ce qu’un repeater avec Oxygen Builder ?

Le repeater (en français : répétiteur) est un élément vous permettant de créer des boucles de n’importe quel type de posts dans n’importe quelle page.

Il peut être utilisé dans des sliders, des carrousels, ou simplement dans des éléments comme des div, des colonnes, etc.

Souvent utilisé pour montrer des listes comme des listes d’articles, des listes de produits, listes de services, liste de questions, etc.

Voici un exemple de l’utilisation d’un bloc Repeater, ceci sont des blocs représentant une partie des articles d’un site. Comme vous pouvez le voir, ces blocs sont très répétitifs, la seule chose qui change c’est leur contenu.La mise en page est la même pour tous.

Pourquoi utiliser un repeater avec Oxygen Builder ?

Imaginez que vous tenez une boutique de vêtements. Vous avez donc une page qui listera tous vos articles. Votre boutique présentant une cinquantaine, centaine voire des milliers d’articles, vous imaginez-vous intégrer les cartes de présentation de ces produits un par un ?
Nous pouvons être d’accord sur le fait que ce serait extrêmement long et très éprouvant.

Comme pour cette boutique possédant des milliers d’articles, ces blocs ci dessus avec l’image, le nom de l’article et son prix, ce sont des blocs créés grâce à un repeater.
Cela n’a pas été intégré bloc par bloc, c’est une requête pour avoir tous les articles qui ont été demandé et renvoyée via le repeater, l’apparence et le contenu répété sont aussi gérés via le repeater.

Avec le repeater d’Oxygen Builder, il vous suffit de dire :

quel type de post vous voulez lister (article, produit, etc.)
lui dire quoi montrer comme informations de ce type de poste (le titre, l’auteur, le prix, l’extrait, etc)
avec quel design

Et il le répètera suivant vos exigences.

Vous pourrez lui demander de tout montrer, ou au contraire il est possible de filtrer, ou encore de changer l’ordre ou le nombre de publications à retourner.

Comment se servir d’un repeater avec Oxygen Builder ?

Tout d’abord, rendons-nous sur une page à créer ou à modifier avec Oxygen Builder.

Ajoutez une nouvelle page avec le bouton “Ajouter” ou modifiez une page avec le bouton “Edit with Oxygen”.

Si vous choisissez de créer une nouvelle page, cliquez sur le bouton “Edit with Oxygen” après avoir cliqué sur le bouton “Ajouter”, comme ci-après.

Utilisons le widget « Repeater » pour lister les articles de votre site WordPress.

Une fois l’éditeur de votre page ouvert, et le moment venu d’ajouter votre repeater, cliquez sur la croix en haut à gauche de votre interface et le widget se trouve dans l’onglet “Helper”.

Voilà les réglages que l’on peut voir lorsque l’on ajoute un bloc Repeater avec Oxygen Builder

Pour configurer le repeater, et donc choisir ce qu’il doit afficher, allons dans l’onglet “Query”.

L’onglet “Layout” vous permet de configurer l’apparence de votre repeater : l’alignement horizontal et l’alignement vertical des articles.

La “Pagination”, comme son nom l’indique, vous permet de régler tout ce qui concerne… la pagination. L’activer, la désactiver, son apparence, le texte, etc.

Et enfin, l’onglet “Grid Layout” vous servira si vous décidez d’afficher vos postes sous forme de grille.

Nous voulons donc afficher la liste de tous les articles de votre site WordPress.

Dans ce cas, il va vous falloir entrer dans l’onglet “Query”.

Dans cet onglet, il existe quatre réglages :

Default : cette requête fonctionne en fonction de l’URL de la page sur laquelle vous êtes. Si vous êtes dans l’archive de vos articles de blogs, WordPress générera une requête qui renverra vos articles de blog. Tout cela est fait automatiquement pa WordPress.
Custom : via cette requête, vous pouvez choisir la requête à renvoyer ou spécifier manuellement les ID de publication (si vous souhaitez sélectionner des publications d’un autre type de publication via leur ID, utilisez la requête “Manual”).
Manual ou Advanced : spécifiez manuellement les paramètres WP_Query si vous voulez un contrôle complet sur les publications renvoyées par la requête.

Ainsi, si vous êtes en train de modifier l’archive de vos articles et que vous voulez simplement afficher la liste des articles, vous pouvez laisser ce réglage sur “Default.

En revanche, si vous êtes sur une page autre que la page d’archive des articles, il vous faudra choisir le mode d’appel des articles : Custom, Manual ou Advanced.

Ici, le mode Custom nous offre largement et simplement la possibilité de faire ce que nous souhaitons, donc pas besoin d’utiliser le mode Manual ou Advanced.

Ensuite, affichons nos articles sous forme de grille. Pour cela, allons sur l’onglet “Grid Layout”.

Voir le mode d’affichage de nos articles

Nous réglerons la grille sur 3 colonnes et un espacement entre elles de 30 pixels.

Enfin, ajoutons nos éléments dans la grille.

Le widget repeater nous donne accès à la modification du premier bloc de la grille. Et oui, pas besoin d’avoir accès aux autres blocs de la liste car ce sont des répétitions du premier bloc.
Le premier bloc sert de modèle pour les suivants. Ainsi, seul le premier bloc nous intéresse.

Comme vous pouvez le voir, la base a été ajoutée : le widget titre et le widget texte. Mais ils ne présentent pas encore ce que contiennent les articles.

Pour cela, rien de plus simple :

Sélectionnez le texte du titre
Cliquez sur le bouton, en haut de votre interface, “Insert Data”
Sélectionnez le bouton “Title” dans l’onglet “Post” puisque nous voulons afficher le titre des articles

Si vous souhaitez que les titres soient cliquables (c’est-à-dire qu’en cliquant dessus ils nous amènent vers l’article concerné) cochez la case “Link”, sinon ne la cochez pas.

La manipulation est la même pour tout autre élément dynamique : l’extrait, la date, l’auteur, la catégorie, l’étiquette, et plein d’autres.

Dernier exemple, pour afficher l’extrait, nous avons besoin d’utiliser le widget “Texte” puis, sélectionnez le texte, cliquez sur le bouton “Insert Data” et choisissez “Excerpt” de l’onglet “Post” et cela affichera l’extrait du post.

Voici à quoi ressemble notre petit exemple. Evidemment, vous pouvez changer le style, ajouter les éléments que vous voulez, changer l’ordre des articles, les filtrer, etc.

C’est sur ces mots que se termine cet article.

J’espère que cet article sur le widget repeater avec Oxygen Builder vous aura aidé.

Si vous ressentez que vous avez besoin d’approfondir vos connaissances sur Oxygen Builder, ou si vous faites face à une problématique spécifique, n’hésitez pas à me contacter. Je vous répondrai dans les meilleurs délais.

Je vous souhaite une bonne navigation !