プラグインを使わないでページナビとパンくずを表示 [wordpress]

wordpressの魅力はなんといっても豊富なプラグインが無料で使える事。

導入も設置も大抵はWEB知識が無い方でも簡単にできます。

でもでもブログテーマ等 複数のユーザーが手軽に使えるようなテーマを作る場合、

プラグインに頼らずにデフォルトでテンプレートに組み込んでおきたい機能が幾つかあります。

今回は、パンくずナビゲーションとページナビゲーションを設置する方法を紹介します。

ぱんくずナビゲーションをプラグインを使わずに設置

まずはfunctions.phpに下記のコードを入れます

// パンくずナビゲーション
function get_breadcrumbs(){
	global $wp_query;

	if ( !is_home() ){

		// Start the UL
		echo '<ul>';
		// Add the Home link
		echo '<li><a href="'. get_settings('home') .'">'. Home .'</a></li>';

		if ( is_category() )
		{
			$catTitle = single_cat_title( "", false );
			$cat = get_cat_ID( $catTitle );
			echo "<li> &raquo; ". get_category_parents( $cat, TRUE, " &raquo; " ) ."</li>";
		}
		elseif ( is_archive() && !is_category() )
		{
			echo "<li> &raquo; Archives</li>";
		}
		elseif ( is_search() ) {

			echo "<li> &raquo; Search Results</li>";
		}
		elseif ( is_404() )
		{
			echo "<li> &raquo; 404 Not Found</li>";
		}
		elseif ( is_single() )
		{
			$category = get_the_category();
			$category_id = get_cat_ID( $category[0]->cat_name );

			echo '<li> &raquo; '. get_category_parents( $category_id, TRUE, " &raquo; " );
			echo the_title('','', FALSE) ."</li>";
		}
		elseif ( is_page() )
		{
			$post = $wp_query->get_queried_object();

			if ( $post->post_parent == 0 ){

				echo "<li> &raquo; ".the_title('','', FALSE)."</li>";

			} else {
				$title = the_title('','', FALSE);
				$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
				array_push($ancestors, $post->ID);

				foreach ( $ancestors as $ancestor ){
					if( $ancestor != end($ancestors) ){
						echo '<li> &raquo; <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>';
					} else {
						echo '<li> &raquo; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>';
					}
				}
			}
		}

		// End the UL
		echo "</ul>";
	}
}
テンプレートのパンくずを表示させたい所に下記のコードを入力
<!--?php get_breadcrumbs(); ?-->

パンくずは<ul><li></li></ul>で書き出されるのでCSSで設定すればOKです。

ページナビゲーションをプラグインを使わずに設置

テンプレートのページナビゲーションを付けたい箇所に下記のコードを入力
テンプレートがごちゃごちゃしてわかりづらくなる人はpagenavi.php等のテンプレートを作り、そこに下記コードを入力し、
テンプレートで設置したい箇所に<?php include(TEMPLATEPATH.’/pagenavi.php’); ?>などとすればスッキリ。(<>は英数半角に変更してね)

<div class="tablenav"><!--?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if (strpos($paginate_base, '?') || ! $wp_rewrite--->using_permalinks()) {
 $paginate_format = '';
 $paginate_base = add_query_arg('paged', '%#%');
} else {
 $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
 user_trailingslashit('page/%#%/', 'paged');;
 $paginate_base .= '%_%';
}
echo paginate_links( array(
 'base' => $paginate_base,
 'format' => $paginate_format,
 'total' => $wp_query->max_num_pages,
 'mid_size' => 5,
 'current' => ($paged ? $paged : 1),
)); ?></div>

CSSの記述例
.tablenav {
	color: #2583ad;
	background:white;
	margin: 1em auto;
	line-height:2em;
	text-align:center;
}

a.page-numbers, .tablenav .current {
	color: #00019b;
	padding: 2px .4em;
	border:solid 1px #ccc;
	text-decoration:none;
	font-size:smaller;
}

a.page-numbers:hover {
	color:white;
	background: #328ab2;
}

.tablenav .current {
	color: white;
	background: #328ab2;
	border-color: #328ab2;
	font-weight:bold:
}

.tablenav .next, .tablenav .prev {
	border:0 none;
	background:transparent;
	text-decoration:underline;
	font-size:smaller;
	font-weight:bold;
}

フリーのテーマなんかに こういうの付いていると お いいじゃん。
って思いますよね。

参考にさせて頂いたサイト

WordPressにプラグインなしでパンくずリストを表示させる方法→
WP-PageNavi を使わずにナビゲーション表示→

may the force be with you…