page navigator wordpressMarea majoritate a celor care folosesc platforma WordPress, folosesc un plugin dezvoltat de Lester Chan care are rolul de a înlocui paginaţia default prezentă în teme, cu o soluţie mai modernă, mai lizibilă şi mult mai funcţională. Analizând ultima versiune a plugin-ului WP-PageNavi, observăm trei fişiere cu adevărat importante:

  • wp-pagenavi.php – 9,23 kb
  • pagenavi-options.php – 11,8 kb
  • pagenavi.css – 1,71 kb

Ştim cu toţii că fiecare plugin WordPress înseamnă un efort suplimentar de memorie şi procesare pentru server, iar atunci când vrei ca totul să meargă strună … Personal, sunt adeptul încorporării direct în fişierele core WordPress (mai rar, şi pentru nişte chestii mărunte) sau în tema folosită a unor funcţionalităţi care ar trebui acoperite prin plugin-uri. Este un efort mult mai mic pentru server iar rezultatele sunt aceleaşi. În cazul de faţă, Eric Martin ne propune o soluţie elegantă de a avea paginaţie eye-candy, cu un minim de resurse adiţionale necesare. Rezultatul se vede mai jos:

page navigator wordpress imbunatatitPentru a obţine o astfel de paginaţie, trebuie să modificăm pentru început două fişiere din tema WordPress folosită: sursa .css (de obicei fişierul respectiv se numeşte style.css) şi fişierul functions.php. În fişierul sursă css adaugăm la sfârşit următoarele linii de cod:

/*paginatie*/
.emm-paginate {margin-left:160px;}
.emm-paginate a {background:#e5e5e5; border:1px solid #ddd; color:#444; margin-right:4px; margin-bottom:2px; padding:2px 2px; text-align:center; text-decoration:none;}
.emm-paginate a:hover, .emm-paginate a:active {background:#444; color:#fff;}
.emm-title {color:#555; margin-right:4px;}
.emm-gap {color:#888; margin-right:4px;}
.emm-current {color:#333; border:1px solid #333; margin-right:4px; margin-bottom:2px; padding:2px 2px;}

Tot ce începe cu ” # ” sunt coduri hexa de culori, cu care vă puteţi juca în funcţie de combinaţiile de culori pe care doriţi să le aveţi.
Mai departe, în fişierul functions.php, adăugăm la sfârşit, dar înainte de ” ?> “, următorul cod:

/*paginatie*/
function emm_paginate($args = null) {
	$defaults = array(
		'page' => null, 'pages' => null,
		'range' => 3, 'gap' => 3, 'anchor' => 1,
		'before' => '<div class="emm-paginate">', 'after' => '</div>',
		'title' => __('Pagina:'),
		'nextpage' => __('&raquo;'), 'previouspage' => __('&laquo'),
		'echo' => 1
	);
	$r = wp_parse_args($args, $defaults);
	extract($r, EXTR_SKIP);
	if (!$page && !$pages) {
		global $wp_query;
		$page = get_query_var('paged');
		$page = !empty($page) ? intval($page) : 1;
		$posts_per_page = intval(get_query_var('posts_per_page'));
		$pages = intval(ceil($wp_query->found_posts / $posts_per_page));
	}
	$output = "";
	if ($pages > 1) {
		$output .= "$before<span class='emm-title'>$title</span>";
		$ellipsis = "<span class='emm-gap'>...</span>";
		if ($page > 1 && !empty($previouspage)) {
			$output .= "<a href='" . get_pagenum_link($page - 1) . "' class='emm-prev'>$previouspage</a>";
		}
		$min_links = $range * 2 + 1;
		$block_min = min($page - $range, $pages - $min_links);
		$block_high = max($page + $range, $min_links);
		$left_gap = (($block_min - $anchor - $gap) > 0) ? true : false;
		$right_gap = (($block_high + $anchor + $gap) < $pages) ? true : false;
		if ($left_gap && !$right_gap) {
			$output .= sprintf('%s%s%s',
				emm_paginate_loop(1, $anchor),
				$ellipsis,
				emm_paginate_loop($block_min, $pages, $page)
			);
		}
		else if ($left_gap && $right_gap) {
			$output .= sprintf('%s%s%s%s%s',
				emm_paginate_loop(1, $anchor),
				$ellipsis,
				emm_paginate_loop($block_min, $block_high, $page),
				$ellipsis,
				emm_paginate_loop(($pages - $anchor + 1), $pages)
			);
		}
		else if ($right_gap && !$left_gap) {
			$output .= sprintf('%s%s%s',
				emm_paginate_loop(1, $block_high, $page),
				$ellipsis,
				emm_paginate_loop(($pages - $anchor + 1), $pages)
			);
		}
		else {
			$output .= emm_paginate_loop(1, $pages, $page);
		}
		if ($page < $pages && !empty($nextpage)) {
			$output .= "<a href='" . get_pagenum_link($page + 1) . "' class='emm-next'>$nextpage</a>";
		}
		$output .= $after;
	}
	if ($echo) {
		echo $output;
	}
	return $output;
}
function emm_paginate_loop($start, $max, $page = 0) {
	$output = "";
	for ($i = $start; $i <= $max; $i++) {
		$output .= ($page === intval($i))
			? "<span class='emm-page emm-current'>$i</span>"
			: "<a href='" . get_pagenum_link($i) . "' class='emm-page'>$i</a>";
	}
	return $output;
}
/**/

Desigur, salvăm cele două fişiere şi suprascriem fişierele existente pe server (dacă sunteţi începători, nu ar strica un backup). Ce era mai greu s-a terminat. Acum, căutăm în fişierele .php ale temei noastre (de obicei single.php, index.php, page.php, archive.php, search.php) liniile de cod:

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

Aceste linii spun WordPress să genereze paginaţia default la sfârşitul unui post, a unei pagini, a unei căutări, etc. Noi vom înlocui cele patru linii cu linia de cod:

<?php if (function_exists("emm_paginate")) { emm_paginate(); } ?>

Ei bine, am terminat. Să recapitulăm ce am făcut: am adăugat 6 linii în fişierul css principal al temei, am adăugat o bucată de cod .php (mai mare, ce-i drept – 2,43 kb) în fişierul functions.php şi am înlocuit patru linii din fişierele php alte temei care generează paginaţia default cu o linie de cod (aici câştigăm spaţiu ocupat – înlocuim patru linii cu o linie).

Cu un consum suplimentar infim de memorie şi procesare pentru server, am obţinut o paginaţie lizibilă, funcţională şi fără a folosi un plugin. Spor la lucru!


Am scris asemănător ...