wake-up-neo.com

Mauerwerk und Jetpack Infinite Scroll - Überlappungsproblem

Ich versuche, mit Masonry auf meinen Archivseiten eine unendliche Schriftrolle für mein Thema zu implementieren, und ich habe einige Probleme:

1) Die Schaltfläche "Weitere Beiträge laden" wird beim ersten Laden der Seite hinter den ersten Beiträgen ausgeblendet (siehe gelber Kreis): See yellow circle here - the little grey box is the button

Ich fühle mich ein bisschen dumm, diesen zu fragen, aber ich weiß nicht, wie ich das beheben soll, weil Jetpack den Button in den gleichen Container wie die Pfosten lädt, was nur das Standardverhalten ist, und alle Pfosten sind aus Gründen des Mauerwerks absolut positioniert Ich kann den Button gegen sie nicht mit CSS clear. Ich möchte, dass sich der Button unter den Posts befindet.

2) (BEHOBEN, SIEHE UNTEN ANTWORT) Wenn ich auf die Schaltfläche klicke, überlappen/laden sich die neuen Beiträge hinter den ursprünglichen Beiträgen, siehe Bild:

Overlapping posts

Ich kann das Mauerwerk nicht dazu bringen, ein Relayout auszulösen, nachdem die neuen Beiträge geladen wurden. Ich habe mir diesen Beitrag http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ und diese Frage https://wordpress.stackexchange.com/questions/108552/jetpack angesehen -Unendliche-Schriftrolle-Mauerwerk-auf-Zwanzig-Zwölf-Überlappung aber ich kann anscheinend keine Lösung für mein Problem finden.

Das Markup vor dem Klick:

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

Das generierte Markup nach dem Klick:

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

Das PHP, das ich für Jetpack verwende (der fragliche Beitragstyp ist 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' );

Die 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 ));

Das CSS (obwohl ich nicht denke, dass es das Problem ist, da die ersten Beiträge in Ordnung sind) ... mit WENIGER kompiliert, verwende ich calc(), um die Dinge reaktionsfähig zu machen:

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;
}

Vielen Dank für jede Hilfe, die jemand geben kann.

1
Sarah

Ich habe jetzt Punkt (2), das Problem der überlappenden Pfosten, gelöst. Vielleicht hilft das jemand anderem.

Ich habe wrapper in der Funktion mytheme_jetpack_setup in meinem PHP in true geändert (damit die neuen Beiträge in ihrem eigenen div eingeschlossen werden)

Und ich habe die jQuery geändert zu:

    $('#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: Ich habe jetzt auch Punkt (1) über CSS gelöst. Ich kann nicht glauben, dass ich so lange gebraucht habe, um zu erkennen, dass das alles ist, was ich brauche. Ich habe meinem Masonry/Jetpack-Container padding-bottom hinzugefügt (in meinem Fall #content) und im CSS Folgendes festgelegt:

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

Dadurch wird es unter den Rasterelementen positioniert und ebenfalls zentriert. Hoffe es hilft vielleicht jemandem. Ähnliches könnte man auch mit #infinite-loader machen.

1
Sarah