WordPress kívülről

HTML5 WordPress oldal navigáció

Az oldalak navigációjához, vagyis az egyes kategóriák oldalakra bontásához az esetek többségében vagy a gyári következő és előző bejegyzések szöveges megoldást alkalmazzák a WordPress weboldal tulajdonosok, vagy a PageNavi bővítményt. Probléma ugyan nincs egyikkel sem, de a PageNavi bővítményt könnyedén fel tudjuk váltani pár soros kóddal is. És, ha már készítünk valamit, akkor az legyen profi, legyen modern és feleljen meg a mai webes trendeknek. Tehát HTML5 kód legyen. Az ilyen esetekben kell alkalmazni a <nav> elemet. A kódunkat illesszük a sablonunk functions.php fájljába.

function efrud_pagination($pages = '', $range = 4)
{
     $showitems = ($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 "<nav id=\"page_nav\"><ul>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo; Első</a></li>";
         if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&laquo</a></li>";
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<li class=\"current\"><a href=\"#\">".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>";
             }
         }
          if ($paged < $pages && $showitems < $pages) echo "<li><a href=\"".get_pagenum_link($paged + 1)."\">&raquo;</a></li>";
          if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>Utolsó &raquo;</a></li>";        
         echo "</ul></nav>\n";
     }
}

Ha ezzel megvagyunk már csak a category.php, archive.php vagy éppen az index.php fájlba kell elhelyezni a lentebb látható kódot. Hogy pontosan melyikbe? Meg kell nézni, hol volt eddig a PageNavi funkció vagy éppen a next_posts funkciót keressük a kódban.

<?php if (function_exists("efrud_pagination")) { efrud_pagination($additional_loop->max_num_pages); } ?>

Így könnyedén váltottunk ki egy bővítményt és tettük szebbé az oldalunkat egy HTML5 szabványos kóddal. Hozzájárultunk a kereső munkájához is. Most már tudja, hogy azon linkek egy navigációhoz tartoznak. Ha stílust szeretnénk adni ennek az oldal navigációnak, akkor a CSS fájlunkban megtehetjük természetesen. Az efrud.hu az alábbi stílust használja:

nav#page_nav{
	margin-bottom: 25px;
	overflow: hidden;
}
nav#page_nav li{
	float: left;
}
nav#page_nav a{
	color: #573d3d;
	text-decoration: none;
	padding: 3px 8px;
	display: block;
	font-size: 13px;
	border: 1px solid #FCFCFC;
}
nav#page_nav a:hover{
	background: #F7F7F7;
	border: 1px solid #f7f6f4;
}
nav#page_nav li.current a,nav#page_nav a:focus{
	background: #F15930;
	border: 1px solid #fff;
	color: #fff;
}

Ezt módosítva könnyedén szabhatja mindenki weboldala arculatához az újonnan létrehozott funkciót.