Lister des catégories et afficher les articles correspondants

Version imprimable

16/01/2023, 17h47
mcyann

1 pièce(s) jointe(s)

Lister des catégories et afficher les articles correspondants

Bonjour,

J'ai besoin pour un projet de lister des catégories, et d'afficher le titre de la catégorie puis le contenu des articles (lié a cette catégorie) a travers une boucle WP sur une même page.
Ma boucle est prête, mais je bute sur l'affichage de la catégorie comme un titre.. par ex :

Titre cat1
- art1
- art2
- art3

Titre cat2
-art4
-art5
-art6

Pièce jointe 632586

Voila ce que je veux obtenir, les catégorie sont les mois, les articles contiennent les dates, titre et lieux.

Merci d'avance pour vos idées!!!
Bien cordialement.
16/01/2023, 18h47
mathieu

vous utilisez quelle extension pour indiquer la date de chaque évènement ?

Bonjour,
je n'utilise pas d'extension, c'est un CPT, les champs à remplir sont fait avec ACF.

Et ma boucle ressemble à ça pour le moment :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$args= array(
 
 			'post_type' => 'Calendrier',
            'showposts' => 50,
           	'cat' => 24,
            'orderby'  => 'asc'
 
            );
 
$the_query = new WP_Query($args);
//var_dump($args);
while ($the_query->have_posts()) : 
$the_query->the_post();
?>
	<div>
	<?php the_field('mois'); ?>
	<?php the_field('heure'); ?>
 	<?php the_title(); ?>
	<?php the_field('date'); ?>
	<?php the_field('lieux'); ?>
	</div>
<?php endwhile;?>

Merci :)

17/01/2023, 09h00
SpaceFrog

on pourrait imaginer affecte un data-categorie aux éléments
puis au moyen d'un selecteur sur le data basucler un css display none ...
17/01/2023, 09h22
mcyann

Bonjour,
c'est a dire, je ne vois pas trop ce que vous entendez par data-categorie...
17/01/2023, 09h59
SpaceFrog

Un exemple vaudra mieux qu'une longue explication ...
https://jsfiddle.net/4rxs29ta/

à priori même pas besoin du each ...
https://jsfiddle.net/4rxs29ta/
17/01/2023, 13h13
mcyann

Ok, merci, je crois que je vois l'idée, mais je ne vois pas encore trop comment le mettre en œuvre sur ce projet (je ne suis pas un dev patenté...).
Je vais faire des essais! Encore merci :)

Piste :

Code:

1
2
3
4
while ($the_query->have_posts()) : 
$the_query->the_post();
?>
	<div data-categorie="<?php echo [la catégorie wordpress du post] ;?>">

23/01/2023, 16h07
mcyann

bonjour,
j'ai un peu procrastiné sur ce code et je m'y remets...
je ne vois toujours pas (et pourtant j'ai bien mes lunettes sur le nez, promis!!) comment je peux faire pour faire apparaitre le premier éléments avec un data-catégorie = janvier, par ex, et cacher ensuite les autres éléments qui ont le même data-catégorie et puis ensuite passer sur les éléments qui ont le data-catégorie=decembre et ainsi de suite...
j'ai bien essayer avec la pseudo class :firts-child en css, mais ça ne marche pas. Dans la boucle l'élément est toujours le premier..

Vous pouvez voir ce que j'ai fait ici

Merci d'avance pour vos idées!
23/01/2023, 16h23
SpaceFrog

Là pour le coup le data-categorie est sur le section parent ...
Il faudra en tenir compte pour le selecteur
23/01/2023, 16h43
SpaceFrog

https://jsfiddle.net/v8d7Lpfe/

Attention à la casse des data-categorie ... janvier != Janvier
23/01/2023, 18h39
mcyann

bonjour,
oui, j'ai modifié pour la section parent.
Merci pour ton exemple sur jsfiddle!! :)
Mais ce que j'ai besoin de faire c'est d'afficher le mois juste une fois, pas sur chaque boucle (comme sur l'image que j'ai mise dans le premier post).
Encore merci pour ton aide! :)
24/01/2023, 08h49
SpaceFrog
Citation:

Mais ce que j'ai besoin de faire c'est d'afficher le mois juste une fois, pas sur chaque boucle

C'est une question de conteneur ...
Là le data catégorie qui sert à filtrer est sur un div dans une section
Code:

1 2 <section id="section-calendrier" class="section-cal"> <div class="test-data" data-categorie="janvier">
il suffirait de remonter le data catégorie au conteneur parent qui liste les éléments du mois.

Mais dans le lien donné ici il n'y a pas de conteneur global par mois ... (d'où le script pour boucler sur chaque data-catégorie)

Si tu as un conteneur unique par mois colle lui le data-catégorie du mois et tu n'auras en effet pas à boucler
24/01/2023, 14h58
mcyann

Bonjour,
Comme je suis dans une boucle wp, toute les infos sont dans des "articles", je ne peux pas faire un conteneur pour mettre le mois.
Bon, je vais réfléchir a faire autrement. Merci d'avoir pris le temps!! :)
25/01/2023, 08h07
SpaceFrog

C'est au contraire tout a fait possible
Deux façons de faire

* générer le HTML en php en testant la mois pour savoir si tu dois clore le conteneur du mois et an ouvrir un autre et en concaténant le code html intégral, et en faisant un echo après la boucle

* ou en php en bouclant sur les articles il suffit de créer un array littéral avec en indexe le mois
puis en bouclant sur l'array pour générer le conteneur mois et y mettre tous les articles ratachés
25/01/2023, 11h19
mcyann

Bonjour,
J'ai bricolé une solution...
J'ai ajouté un champ acf dans chaque articles, juste une cache a cocher. Et je teste si cette case est coché pour afficher ou non les articles. J'ai fait une boucle par mois. Si il n'y a pas d'articles "actif" sur certains mois, je cache en JS le mois (qui n'était pas dans la boucle WP). ça fonctionne comme ça...
Voila, comme dit plus haut, je ne suis pas un dev patenté, tu aurais sans aucun doute fait une solution plus propre... :)
Encore merci pour le temps passé!
25/01/2023, 11h49
SpaceFrog

Un dev patenté ?

Je suis surtout un dev pas tenté par WordPress :D

Ce n'est pourtant pas grand chose à réaliser ...
Lors de ta boucle sur les articles, les classifier correctement dans un array avec pour indexe le mois de sorte a pouvoir ensuite générer tes conteneurs par mois ...
26/01/2023, 16h35
NJNDEV

A titre de curiosité

Ton code m'intéresse

Citation:

J'ai bricolé une solution...

.
Je cherche de mon côté à faire sans code ACF, un projet avec des CPT.
Merci..