web-dev-qa-db-fra.com

Maçonnerie et Jetpack Infinite Scroll - problème de chevauchement

J'essaie d'implémenter le défilement infini avec maçonnerie sur mes pages d'archives sur mon thème et j'ai quelques problèmes:

1) Le bouton "Charger plus de messages" est caché derrière les messages initiaux lorsque vous chargez la page pour la première fois, voir le cercle jaune: See yellow circle here - the little grey box is the button

Je me sens un peu stupide de demander celui-ci mais je ne sais pas comment le résoudre car Jetpack charge le bouton dans le même conteneur que les articles, ce qui n’est que le comportement par défaut, et tous les articles sont absolument positionnés à cause de la maçonnerie, donc Je ne peux pas modifier le bouton clear avec CSS. Je veux que le bouton soit en dessous des messages.

2) (RESOLU, VOIR SOUS LA REPONSE) Lorsque je clique sur le bouton, les nouveaux messages se chevauchent/se chargent derrière les messages initiaux, voir photo:

Overlapping posts

Je n'arrive pas à faire en sorte que la maçonnerie déclenche un relais une fois les nouveaux messages chargés. J'ai consulté cet article http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ et cette question https://wordpress.stackexchange.com/questions/108552/jetpack -infinite-scroll-maçonnerie-sur-vingt-douze-chevauchements mais je n'arrive pas à trouver une solution à mon problème.

Le balisage avant le clic:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="Gutter-sizer"></div>

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

Le balisage généré après le clic:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="Gutter-sizer"></div>                                    

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <span class="infinite-loader" style="display:none">...</span>

            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

Le PHP que j'utilise pour Jetpack (le type de message en question est mytheme_portfolio):

function mytheme_render_infinite_scroll() {
    while ( have_posts() ) : the_post();
            if ('mytheme_portfolio' == get_post_type()) :
                get_template_part( 'content', 'archive-portfolio' );
            else :
                get_template_part( 'content', get_post_format() );
            endif;
    endwhile;
}

function mytheme_jetpack_setup() {
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'content',
        'type'           => 'click',
        'render'         => 'mytheme_render_infinite_scroll',
        'wrapper'        => false,
        'posts_per_page' => 5,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_jetpack_setup' );

Le jQuery:

(function( $ ) {

    $( document ).ready(function() {

        $('#content').masonry({
          columnWidth: '.grid-sizer',
          itemSelector: 'article',
          Gutter: '.Gutter-sizer'
        });

        $( document.body ).on( 'post-load', function () {
            $('#content').masonry({
              columnWidth: '.grid-sizer',
              itemSelector: 'article',
              Gutter: '.Gutter-sizer'
            });
        });

    });

}( jQuery ));

Le CSS (bien que je ne pense pas que ce soit le problème car les publications initiales sont correctes) ... compilé avec LESS, j'utilise calc() pour rendre les choses réactives:

article,
.grid-sizer {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(1) + ((1 - 1)*1.5em));
}
article.featured {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(2) + ((2 - 1)*1.5em));
}
.Gutter-sizer {
  width: 1.5em;
}

Merci beaucoup pour toute aide que n'importe qui peut donner.

jqueryplugin-jetpackmasonry
1
Sarah

J'ai maintenant résolu le point (2), le problème des postes qui se chevauchent; peut-être que cela aidera quelqu'un d'autre.

J'ai changé wrapper en true dans la fonction mytheme_jetpack_setup dans mon PHP (de sorte que les nouveaux articles soient emballés dans leur propre div)

Et j'ai changé le jQuery en:

    $('#content').masonry({
      columnWidth: '.grid-sizer',
      itemSelector: 'article',
      Gutter: '.Gutter-sizer'
    });

    var infiniteCount = 1;
    $( document.body ).on( 'post-load', function () {
        var elements = $('.infinite-wrap.infinite-view-' + infiniteCount + ' article');
        $('#content').masonry( 'appended', elements );
        infiniteCount++;
    });

EDIT: J'ai également résolu le point (1) maintenant aussi via CSS, je ne peux pas croire que cela m'a pris si longtemps pour réaliser que c'était tout ce dont il avait besoin. J'ai ajouté un padding-bottom à mon conteneur Masonry/Jetpack (dans mon cas, #content) et ai défini les éléments suivants dans le CSS:

#content #infinite-handle {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding-bottom: 2em;
        }

Cela le positionne sous les éléments de la grille et le centre aussi. J'espère que ça peut aider quelqu'un peut-être. Vous pourriez aussi faire la même chose avec #infinite-loader.

1
Sarah