Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

Nieskończone przewijanie (infinite scroll), a SEO…

Nieskończone przewijanie w wielu przypadkach jest bardzo wygodną formą paginacji dużej liczby artykułów na stronie internetowej. Internauci nie muszą tutaj tracić czasu na przełączanie się do następnej strony – wszystko odbywa się automatycznie. Pytanie tylko co z wyszukiwarkami, a w szczególności z robotami indeksującymi treść oraz internautami, którzy mają wyłączoną obsługę skryptów JavaScript?

Fot: markus spiske, CC BY 2.0.

Fot: markus spiske, CC BY 2.0.

Rozwiązanie tego problemu jakie przychodzi po chwili zastanowienia to oczywiście wyświetlanie dwóch rodzajów paginacji. Pasowało by więc udostępnić tradycyjne linki dla robotów oraz osób z wyłączoną obsługą skryptów JS oraz infinite scroll dla reszty. Trzeba również pamiętać, że nie możemy wyświetlić jednego i drugiego na raz.

Z pomocą przychodzi nam tutaj znacznik HTML 5 <noscript> </noscript>, obsługiwany jest on przez wszystkie popularne przeglądarki internetowe (IE, Chrome, Safari, Opera, Firefox) i umożliwia wyświetlenie jakiś elementów tylko wtedy kiedy nie zostanie wykryta obsługa skryptów JavaScript.

Wracając do artykułu „Paginacja w WordPressie, wczytywanie postów w tle (nieskończone przewijanie – infinite scroll)” gdzie opisałem dodanie „nieskończonego przewijania” na bazie motywu Tewnety Fifteen przerobimy teraz nasz skrypt tak aby był w pełni przyjazny wyszukiwarką.

Kod z pliku index.php (katalog główny szablonu):

// Start the loop.
			//while ( have_posts() ) : the_post();
 
				/*
				 * Include the Post-Format-specific template for the content.
				 * If you want to override this in a child theme, then include a file
				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
				 */
				//get_template_part( 'content', get_post_format() );
 
			//End the loop.
			//endwhile;
 
			// Previous/next page navigation.
			//the_posts_pagination( array(
			//	'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
			//	'next_text'          => __( 'Next page', 'twentyfifteen' ),
			//	'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
			//) );

Umieszczamy teraz w znaczniku <noscript> </noscript> (wcześniej został on usunięty):

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * e.g., it puts together the home page when no home.php file exists.
 *
 * Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
 
get_header(); ?>
 
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
 
		<?php if ( have_posts() ) : ?>
 
			<?php if ( is_home() && ! is_front_page() ) : ?>
				<header>
					<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
				</header>
			<?php endif; ?>
 <noscript>
			<?php
			// Start the loop.
			while ( have_posts() ) : the_post();
 
				/*
				 * Include the Post-Format-specific template for the content.
				 * If you want to override this in a child theme, then include a file
				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
				 */
				get_template_part( 'content', get_post_format() );
 
			//End the loop.
			endwhile;
 
			// Previous/next page navigation.
			the_posts_pagination( array(
				'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
				'next_text'          => __( 'Next page', 'twentyfifteen' ),
				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
			) );
?>
 </noscript>

Takie rozwiązanie zabezpieczy nas przed brakiem dostępu do postów przez wyszukiwarki oraz osoby nie mające włączonego JavaScriptu.

Oczywiście resztę czynności podanych w poradniku wykonujemy tak samo.

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , , , ,

Dodaj komentarz

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest