jQuery: navigare tra le pagine della paginazione di WordPress

jQuery: navigare tra le pagine della paginazione di WordPress

jQuery può di fatto migliorare molti aspetti dell'interfaccia di WordPress. Uno di questi aspetti è la possibilità di navigare tra le pagine della paginazione creata da WordPress inserendo direttamente il numero di pagina da visualizzare.

Per prima cosa creiamo la paginazione dei post inserendo il form per il salto tra le pagine:


function create_pagination($pages = '', $range = 2) {

	$show_items = ($range * 2) + 1;
	global $paged;
	
	if(empty($paged)) { 
		$paged = 1;
	}
	
	if($pages == '') {
	
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         
         if(!$pages) {
             $pages = 1;
         }
     } 
     
     
     if(1 != $pages) {
         echo '<div id="pagination" data-start="1" data-end="' . $pages . '">';
         if($paged > 2 && $paged > $range+1 && $show_items < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $show_items < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? '<strong>'.$i."</strong>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }

         if ($paged < $pages && $show_items < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $show_items < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo '<form action="#" method="get" id="pagination-form" style="display: inline-block; padding-left: 0.5em;"><div style="display: inline-block"><input type="text" name="p" id="p" size="2" /><input type="submit" name="submit" value="Vai"/></div></form>';
         echo "</div>\n";
     }
}

Abbiamo aggiunto due attributi data all'elemento pagination in modo da poter leggere con jQuery il numero di pagina iniziale e quello finale di ciascuna paginazione.

Ora non ci resta che controllare con jQuery che il numero inserito dall'utente sia compreso nel range stabilito e assemblare l'URL di destinazione:


(function($) {
	var jumpToPage = function() {
			if ($('#pagination-form').length) {
				$('#pagination-form').on('submit', function(evt) {
					evt.preventDefault();
					var $form = $(this),
						$pagination = $form.parent(),
						min = $pagination.data('start'),
						max = $pagination.data('end'),
						page = $('#p', $form).val(),
						href = location.href,
						go = '',
						uri = '';
					if (page <= min || page > max) {
						go = '1';
					} else {
						go = page;
					}
					if (href.indexOf('page') != -1) {
						uri = href.replace(/page\/\d+/, '');
					} else {
						uri = href;
					}
					var dest = uri + 'page/' + go;
					window.location = dest;
				});
			}
		};
	$(document).ready(function() {
		jumpToPage();
	});
})(jQuery);

Come si usa questo codice? La funzione PHP va inserita nel file functions.php e richiamata nel tema in questo modo:


<?php echo create_pagination(); ?>

Il codice jQuery va in un file JavaScript separato e ovviamente ha bisogno di jQuery per funzionare. Quindi uploadate il file in una directory del vostro tema e quindi nel file functions.php userete questo codice:


function add_scripts() {
	if(!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '1.8', true);
		wp_enqueue_script('jquery');
		wp_register_script('pagination', get_template_directory_uri() . '/js/pagination.js', '1.0', array('jquery'), true);
		wp_enqueue_script('pagination');
	}
}
add_action('wp_footer', 'add_scripts');

Potete osservare il risultato finale nel seguente video.

Torna su