You are here:Blog»Wordpress»Infinite-Scroll
28
sierpień
2014

Infinite-Scroll

Infinite-Scroll

W skrócie Infinite-Scroll to mechanizm nieskończonego przewijania. Decydując się na takie rozwiązanie rezygnujemy ze standardowej paginacji na rzecz mechanizmu który automatycznie załaduje kolejne posty gdy użytkownik zbliży się do końca strony. W dobie urządzeń mobilnych dla niektórych stron rozwiązanie to będzie niezwykle atrakcyjne. W woordrpress funkcjonalność tą szybko uruchomimy za pomocą wtyczki "Infinite-Scroll"

Strona wtyczki: www.wordpress.org/plugins/infinite-scroll/

Przykład działania skryptu:
www.kariera.goldenline.pl
www.znanylekarz.pl/blog

Wymagania

Wtyczka bazuje na funkcjonalności nawigacji stronami "Poprzednia strona :: Następna strona", zatem do prawidłowego działania wtyczki potrzebujemy umieścić ją w szablonie

<?php content_nav; ?>

a w pliku functions.php 

function content_nav() {
	global $wp_query;
	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="nav-below" class="navigation">
			<div class="nav-next"><?php next_posts_link( __( ) ); ?></div>
			<div class="nav-previous"><?php previous_posts_link( __( ) ); ?></div>
		</nav>
	<?php endif;
}

 

Konfiguracja wtyczki

Content Selector - selector całego bloku z listą postów

Navigation Selector - selector w którym umieszczona jest nawigacja ( w naszym wypadku #nav-below)

Next Selector - selector linku który ładuję następną stronę (w naszym wypadku #nav-below a:first)

Item Selector - selector jednego bloku z postem  

 

Błędy z wtyczkami soocial media 

Jeżeli w naszym szablonie wtyczki social media znajdują się bezpośrednio na stronie z listą postów, to podczas automatycznego ładowania kolejnych stron, strony pojawią się problemy z ich wczytaniem. Z pomocą przyjdzie nam pole "Callback" w konfiguracji wtyczki.  W tym polu możemy umieścić kod który zostanie dodatkowo załadowany po załadowaniu kolejnej strony z postami.

W przypadku Facebook i Twittera dodajemy.

//Twitter
twttr.widgets.load();
//Facebook if (typeof (FB) != 'undefined') { FB.init({ status: true, cookie: true, xfbml: true }); } else { $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () { FB.init({ status: true, cookie: true, xfbml: true }); }); }

Więcej na stronie http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus

Zaufali nam