Verwenden von Jetpack Infinite Scroll & Isotope (Mauerwerk).

Ich stehe vor einem Problem, bei dem ich nach jedem neuen Satz von Ajaxs das Isotopenlayout destroy und dann build . Wenn ich nicht mit diesem Ansatz fortfahre, wird der neue Satz von Posts, die jedes Mal mit unendlichem Scroll geladen werden, nicht mit dem Isotop-Layout als sein eigenes behandelt und sie verpassen Isotop-Styling. Also, ich muss das Isotop jedes Mal neu aufbauen, wenn ich den Trigger für die unendliche Scrollfunktion post-load .

• Login-Option mit Benutzername und Passwort für die Jetpack-Admin-Anmeldung festlegen
• Wie deaktiviert man Jetpack-Module wie Stats?
• Ändern der Sortierreihenfolge für die Präsentation mit Jetpack Infinite Scroll
• Jetpack Kommentare mit Fallback
• Jetpack-API für WordPress-Netzwerk
• Beschneiden von Bildern von oben mit Jetpack Photon

Dieser Ansatz hinterlässt den Benutzer tatsächlich mit einem Flick-Effekt und scrollt zum Anfang des Isotopen-Layouts.

 //In functions.php function vg_infinite_scroll_init() { add_theme_support( 'infinite-scroll', array( 'container' => 'row-wrap', 'type' => 'scroll', 'render' => 'loop_p_arch_infinite_scroll_render', 'footer' => false, 'footer_widgets' => false, 'wrapper' => false, 'posts_per_page' => 9, ) ); } add_action( 'after_setup_theme', 'vg_infinite_scroll_init' ); function loop_p_arch_infinite_scroll_render() { while( have_posts() ) { the_post(); get_template_part( 'content', 'product' ); } } function vg_get_prod_arch_posts( $post_type = 'post' ) { $prodarch_posts = get_posts( array( 'numberposts' => 9, 'paged' => get_query_var( 'paged' ), 'post_type' => $post_type ) ); return $prodarch_posts; } // In archive-product.php  
 
 
 
 
 
  
 
 
 
 
 //In content-product.php global $post; ?> 
 
  
 
 
 
 ID, 'large', array( 'class' => 'image_width_set' ) ); ?>  
 
 //In JS file jQuery(document).on("post-load", function(e) { jQuery('.grid').isotope('destroy'); jQuery('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { columnWidth: '.grid-sizer', gutter: 5 } }); }); jQuery(window).load(function(){ jQuery('.grid').imagesLoaded(function() { jQuery('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { columnWidth: '.grid-sizer', gutter: 5 } }); }) }) 

Solutions Collecting From Web of "Isotop mit unendlicher Schriftrolle"

 jQuery('.grid').append(new_elements) .isotope('appended', new_elements) .imagesLoaded( function() { jQuery('.grid').istotope('layout'); }); 

 function loop_p_arch_infinite_scroll_render() { $paged = get_query_var( 'paged', 1 ); ?> 
 < ?php while( have_posts() ) { the_post(); get_template_part( 'content', 'product' ); } ?> 
  < ?php }