IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

WordPress PHP Discussion :

Intégrer une div entre deux posts de la boucle


Sujet :

WordPress PHP

  1. #1
    Membre régulier
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 142
    Points : 108
    Points
    108
    Par défaut Intégrer une div entre deux posts de la boucle
    Bonjour,

    Mon theme utilise infinite scroll. Cependant le délai d'affichage de la page suivant est rédhibitoire (entre 3 et 5 secondes).
    Le loader ajax est positionné en bas des pages (10 articles par page).
    Je tente de l'intercaler plus haut, entre le 5 ème et 6 ème post afin de déclencher le chargement de la page suivante avant que l'utilisateur atteigne le bas de page.

    J'essaie donc d'insérer une div contenant le déclencheur ajax dans le loop après le 5ème post.

    Une première fois dans index.php (pour que le déclencheur soit présent en page N°1)

    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
    22
    <?php
                    (int) $indexpost=0;
     
                    while (have_posts()) : the_post();
                        get_template_part('template-parts/content', get_post_format());
     
                        if($indexpost==5)
                        {
                            if ( $GLOBALS['wp_query']->max_num_pages > 1 ) 
                            {
                                ?>
                                <div class="load-more-posts scroll" data-load-type="scroll">
                                    <a href="javascript:void(0)" class="btn btn-load-more secondary-font">
                                      <span class="ajax-loader"></span>
                                      <?php _e('Older Posts', 'minimal-grid') ?>
                                    </a>
                                </div>
                                <?php
                             }
                        }
                         ++$indexpost;
                    endwhile;
    et une seconde fois dans la boucle "load-more-post" (pour que chaque page suivante contienne le déclencheur)

    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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <?php
                (int) $indexpost=0;
     
            if ( $loop->have_posts() ):
                while ( $loop->have_posts() ): $loop->the_post();
                    ob_start();
                    get_template_part('template-parts/content', get_post_format());
                    $output['content'][] = ob_get_clean();
     
                if($indexpost==5)
                {
     
                    if ( $GLOBALS['wp_query']->max_num_pages > 1 ) 
                    {
                                ?>
                                <div class="load-more-posts scroll" data-load-type="scroll">
                                    <a href="javascript:void(0)" class="btn btn-load-more secondary-font">
                                      <span class="ajax-loader"></span>
                                      <?php _e('Older Posts', 'minimal-grid') ?>
                                    </a>
                                </div>
                                <?php
                    }
                }
                    ++$indexpost;
     
                endwhile;wp_reset_postdata();
                wp_send_json_success($output);
            else:
                $output['more_post'] = false;
                wp_send_json_error($output);
            endif;
            wp_die();
    Sauf que le div n'est pas inséré entre les posts mais toujours en haut de page.
    Comment intégrer le div entre deux posts de la boucle ?
    Ma recherche sur le net ne m'a donné aucune piste (que je comprenne clairement).

    Merci pour votre aide.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    peut-être que ce placement est fait avec du code javascript qui est bloqué à 10 quelque part.
    est ce que c'est un thème libre qu'on peut tester ?

  3. #3
    Membre régulier
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 142
    Points : 108
    Points
    108
    Par défaut
    Ma méthode me parait toutefois très bancale.

    Le chargement de la page suivante se fait avec modification alternative de la classe de la div.
    Cela sert de bouton toogle.
    En cas de succès (dans le script.js qui appelle la page suivante), la classe "tmt-post-loding" est retirée à la div, ce qui "réarme" la div pour une seconde page si l'utilisateur la réaffiche à l'écran.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
        n.fetchPostsOnScroll = function () {
            e(window).scroll(function () {
                if (!e('.load-more-posts').hasClass('tmt-no-post') && !e('.load-more-posts').hasClass('tmt-post-loding') && e('.load-more-posts').hasClass('scroll') && minimal_grid_is_on_scrn('.load-more-posts')) {
     
                    e('.load-more-posts').addClass('tmt-post-loding');
                    n.ShowPostsAjax();   
     
                }
            });
    et, dans n.ShowPostsAjax()

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
                success: function (response) {
                    console.log("success");
     
                    e('.load-more-posts').removeClass('tmt-post-loding');
                    if (response.success) {
    ...

    Ajouter la classe "load-more-posts scroll" au post N° 5 pourrait-il suffire ?
    sauf qu'il faudrait aussi ajouter <a href="javascript:void(0)"</a> à ce post, il me semble...

    Et puis, dans la fonction "load-more-post" lorsque je tente d'ajouter une nouvelle div class="load-more-posts scroll" rien ne fonctionne plus, la page suivante n'est plus chargée.
    Il y a une div de trop apparemment.

    De plus, je ne sais pas quel comportement produira une multiplication de class "load-more-posts scroll" dans les différentes pages successives.

    Bref, je suis dans le brouillard.

  4. #4
    Membre régulier
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 142
    Points : 108
    Points
    108
    Par défaut
    Citation Envoyé par mathieu Voir le message
    peut-être que ce placement est fait avec du code javascript qui est bloqué à 10 quelque part.
    est ce que c'est un thème libre qu'on peut tester ?
    Bonjour Mathieu,
    Oui, il s'agit du theme "minimal-grid" par themmattic.
    Les fichiers sur lesquels je travaille : load-posts.php (ligne 81), script.js (ligne 354, 387)

  5. #5
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    je viens de tester le thème et pour l'affichage des articles d'une catégorie, je peux régler le nombre dans l'espace d'administration, Réglages -> Lecture -> "Les pages du site doivent afficher au plus..."

  6. #6
    Membre régulier
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 142
    Points : 108
    Points
    108
    Par défaut
    Oui, j'ai déjà modifié ce paramètre dans "réglages".
    Au lieu de 10 posts si je mets 5 cela ne change rien à mon souci.
    Le déclencheur js se place sous les 5 articles et cela prend autant de temps à charger les 5 suivants.
    En ce sens, c'est même pire puisque l'attente du chargement se produit deux fois plus souvent.

    Mon objectif est que le chargement des 10 articles de la page 2 se produise avant que l'utilisateur atteigne la fin de la page 1.
    Comme cela se ferait avec un lazy loading.
    Et ainsi de suite pour les pages suivantes.

    Avec ce thème "Minimal-grid" de Thememattic, il existe une option "preloader" que je n'ai jamais pu tester car elle bug (aucun chargement).
    Je ne sais pas si cette option résoudrait le problème.

    Je devrais peut-être essayer de comprendre ce qui ne va pas avec cette option "preloader" et tenter de la déboguer, car pour le moment je n'arrive à rien avec mon approche.

  7. #7
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    ah désolé, j'avais mal compris votre souci.

    est ce que c'est le serveur qui est long a généré la réponse ou alors c'est le transfert qui est trop lent ?
    s'il s'agit du serveur, j'aurais essayé de mettre en cache le résultat de la fonction "minimal_grid_load_more".

  8. #8
    Membre régulier
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2015
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2015
    Messages : 142
    Points : 108
    Points
    108
    Par défaut
    Je ne sais pas dire si c'est le serveur ou le transfert qui pose problème.
    J'ai la fibre et en ligne c'est 4 à 5s.
    J'ai divisé par 3 la taille des images "mises en avant" de mes articles mais je n'ai pas observé d'amélioration.
    En local c'est pas instantané non plus, mais supportable (1 s).

    Il y a un moyen de savoir exactement d'où provient la lenteur ?

    Je suis preneur pour mettre en cache, mais je ne sais pas faire.
    Merci

  9. #9
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    pour savoir quand sont générés les éléments, vous pouvez vous aider de cette fonction :
    https://www.php.net/manual/fr/function.microtime.php

    pour l'algorithme du cache, il s'agit principalement d'enregistrer le résultat généré avec cette fonction par exemple :
    https://developer.wordpress.org/refe...update_option/
    ensuite le plus compliqué sera de trouver les actions wordpress qui doivent remettre à zéro ce cache.

Discussions similaires

  1. Tracer une ligne entre deux DIV
    Par akrogames dans le forum jQuery
    Réponses: 1
    Dernier message: 04/05/2009, 21h29
  2. [Dojo] Tracer une ligne entre deux DIV
    Par Invité dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 04/03/2009, 01h54
  3. Etablir une connexion entre deux postes
    Par blondelle dans le forum C++Builder
    Réponses: 35
    Dernier message: 01/10/2006, 13h48
  4. Passer une variable entre deux fenêtres
    Par DeezerD dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 17/08/2005, 10h52
  5. Réponses: 14
    Dernier message: 02/05/2005, 19h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo