Discussion :

[cyberbelette]

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
Mais il ne faut jamais se réjouir trop vite, car si le but du "load more" est atteint, ça coince ailleurs…

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

$one_post .= get_template_part( 'template-parts/post/content', get_post_format() );

Un avis éclairé serait le bien venu, car je tourne en rond…

[Invité]

Bonjour,

il faut chercher et regarder le code jQuery sur le h2.

Ces nouveaux posts n'existent pas le DOM au chargement de la page.
Or, il faut "accrocher" l'évènement à un élément existant : 'body', ou de préférence l'élément existant le plus "proche".

ex. : au lieu de :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
jQuery('..... h2').click(function()
{

il faut écrire :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
jQuery('body').on('click', '..... h2', function()
{

[cyberbelette]

Merci jreaux62 de te pencher sur mon problème en 3 tomes (voire 4…)

La modif dans le js du bouton .ruban-click du h2 n'a rien donné, mais j'ai attribué un #ruban-click au h2 de la 2e boucle et recopié le même code bouton dans le fichier your_js_handle.js (appelé par functions.php pour le bouton on-load).
Et là j'ai re-testé ton conseil :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").on("click", "#ruban-click", function(){

Effectivement, mon bloc caché s'affiche = le JQ fonctionne !

Du coup si je voulais éviter de doubler ma fonction ruban-click JQ que pourrais-tu me conseiller ?
Je suppose qu'il y a un problème d'appel de fichier JS via functions.php, mais je ne sais pas comment le charger dans la 2e boucle sans qu'il soit chargé 2 fois dans la 1ère et referme mon bloc aussitôt ouvert…

[Invité]

Un id doit être unique.

Ajoute plutôt une autre classe "ruban-click-ajax", par ex.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").on("click", ".ruban-click-ajax", function(){

Par contre, ça m'étonne que ça fonctionne avec $("...").....
WP utilise jQuery("...")....pour éviter les conflits.

[cyberbelette]

Oui, c'est la même classe pour tous les posts, c'est vrai…
Je vais voir si utiliser JQuery au lieu de $ me permet de n'utiliser que le script JQ de base pour le bouton du h2 de la 1ère et de la 2e boucle.

[cyberbelette]

JQuery au lieu de $ ne change rien.
C'est bien, ça marche, mais dans un souci de concision, j'aurais aimé pouvoir appeler un seul et même script jquery pour les boutons "ruban-click" des 5 premiers posts (onclick appelés dans $(document).ready( function()) et pour ceux qui sont chargés par le bouton load-more (après exécution de la fonction Ajax du bouton load-more). Mais je ne sais pas comment faire pour appeler une 2e fois le script Jquery correspondant aux boutons/titres des posts une fois ces derniers posts chargés…

[SpaceFrog]

La solution a été donnée plus haut ... .on("click", ... avec 3 paramètres :
* l'event click,
* le parent qui déléguera le click
* la fonction à déclencher

[cyberbelette]

Oui, et j'avais répondu : "La modif dans le js du bouton .ruban-click du h2 n'a rien donné" : en fait le click-bouton ouvrait le bloc qui se refermait aussitôt (comme si le script était appelé 2 fois de suite), c'est pourquoi j'avais fait la 2e fonction avec un 2e bouton .ruban-click-ajax (functions.php).
Mais comme j'ai eu pas mal d'erreurs dûes au cache ces derniers temps, à la lecture de ton commentaire je viens de refaire le test de ne garder que le 1er script en le modifiant : $("body").on("click", ".ruban-click", function(){ tout en vidant le cache, et ça fonctionne !
Du coup je supprime la 2e classe avec sa 2e fonction !
Merci SpaceFrog d'avoir insisté !!

[SpaceFrog]

J'avoue ne pas trop voir le rapport avec le cache pour le on('click'), sauf a recharger ta page en mode test...
L'essentiel est que tu sois arrivée à tes fins.