Bouton "Load More" pour afficher la suite des posts
Bonjour,
Je suis en train de créer mon 1er site/thème wordpress en partant d'un site statique.
Depuis des jours, je cherche un script qui puisse modifier (au click) le nombre de posts par page (pour afficher la suite des posts dans une même page, qui au départ n'en affiche que 5).
La bonne nouvelle c'est que j'en ai enfin trouvé un qui fonctionne, avec une fonction Ajax et une fonction ajoutée au fichier functions.php :yaisse1:
Mais il ne faut jamais se réjouir trop vite, car si le but du "load more" est atteint, ça coince ailleurs… :mur:
Et donc la mauvaise nouvelle, c'est que dans la fonction load_more (functions.php), on doit ré-écrire la boucle d'affichage des posts d'une certaine manière pour afficher les posts suivants quand on clique sur le bouton :
Or les balises de titres h2 des posts suivants s'affichent correctement, mais leur classe qui appelait une action onclick jquery pour afficher un bloc invisible ne fonctionne pas (uniquement pour les posts supplémentaires affichés par cette fonction load_more).
Code de la boucle principale dans ma page php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php
query_posts(array(
'post_type' => 'projets',
'posts_per_page' => 5
) );
if ( have_posts() ) :?>
<?php while (have_posts()) : the_post(); ?>
<article class="post-item">
<h2 class="ruban-click"><?php the_title(); ?></h2>
<div class="bloc-video">
<div class="video"><?php the_excerpt();?></div>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/more.png"></a>
</div>
<br>
</article>
<?php endwhile;?>
<?php endif; ?> |
Code de la fonction load_more dans functions.php (avec la 2e boucle) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| wp_enqueue_script('your_js_hanlde', get_template_directory_uri() . '/js/your_js_hanlde.js', array('jquery'), '1.0.0', true );
wp_localize_script('your_js_hanlde', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
function your_load_more()
{
$count = $_POST["count"];
$cpt = 1;
$args = array(
'posts_per_page' => -1,
'post_type' => 'projets',
);
$articles = new WP_Query( $args );
$ar_posts = array();
if( $articles->have_posts() )
{
while( $articles->have_posts() )
{
$articles->the_post();
$one_post = "";
if( $cpt > $count && $cpt < $count+6 )
{
$one_post .= "<article id='" . get_the_id() . "' class='post-item'>";
$one_post .= "<h2 class='ruban-click'>" . get_the_title() . "</h2>";
$one_post .= "<div class='bloc-video'>";
$one_post .= "<div class='video'>" . get_the_excerpt() . "</div>";
$one_post .= "<a href='" . get_the_permalink() . "'><img src='" . get_bloginfo("template_url") . "/images/more.png'></a>";
$one_post .= "</div><br>";
$one_post .= "</article>";
$ar_posts[] = $one_post;
if( $cpt == $articles->found_posts )
$ar_posts[] = "0";
}
$cpt++;
}
}
echo json_encode($ar_posts);
die();
}
add_action( 'wp_ajax_your_load_more', 'your_load_more' );
add_action( 'wp_ajax_nopriv_your_load_more', 'your_load_more' ); |
Code du bouton load_more du fichier your_js_handle.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $("#load_more").click(function()
{
$.post(ajaxurl,
{
'action': 'your_load_more',
'count': $("article.post-item").length
},
function(response)
{
var posts = JSON.parse(response);
for( var i = 0; i < posts.length; i++ )
{
if( posts[i] == "0" )
$("#load_more").fadeOut();
else
$("#load_more").before(posts[i]);
}
});
}); |
En bref : Dans la fonction php your_load_more() le jquery onclick d'affichage des posts (class "ruban-click" du h2) est ignoré alors que celui du load_more fonctionne.
La page d'origine du code que j'ai essayé d'adapter :
https://stackoverflow.com/questions/...request-jquery
Dans la partie functions.php, j'ai essayé d'adapter les lignes "$one_post .=" de la 2e boucle avec les éléments de ma 1ère boucle, mais je ne suis pas très sûre de la syntaxe…
J'ai aussi tenté différentes options : charger le script jquery de la balise h2 plutôt dans le fichier functions.php que dans le header.php (ne change rien et au contraire empêche l'action de la boucle principale de fonctionner correctement), réunir la partie d'affichage des posts de la boucle dans un template part pour pouvoir l'appeler depuis la fonction load more php sans balises html : ne fonctionne pas… Mais ne comprenant pas bien le php, j'ai pu faire une erreur de syntaxe :
Code:
$one_post .= get_template_part( 'template-parts/post/content', get_post_format() );
Un avis éclairé serait le bien venu, car je tourne en rond… :calim2:
