初心者必見!WordPressで0からブログを作ってみよう!カテゴリメニュー・パンくずリスト・ページャー作成編

このエントリーをはてなブックマークに追加

初心者必見!WordPressで0からブログを作ってみよう!カテゴリメニュー・パンくずリスト・ページャー作成編

今回は、ブログサイトをもっと使いやすくしてみたいと思います。カテゴリメニューを表示したり、パンくずリスト、ページャーを実装してみます。これらを実装することで見つけやすく探しやすいブログになるように貢献できますね。

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordpressテーマ作成編から進めていただくといいかもしれません。

1. HTMLの入門編
2. CSSの入門編
3. WordPressテーマ作成編
4. カテゴリメニュー・パンくずリスト・ページャー作成編 ←いまここ
5. 検索できるようにしよう編
6. WordPressで問い合わせページを作ろう編
7. レスポンシブでスマートフォンにも対応させよう編
8. 作ったブログをサーバーにアップしてみよう編

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、Wordpressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

今回の作業するにあたって必要なデータ

今回の完成例

※テーマのみのダウンロードなのでWordPressをインストールしなければ正常に動作しません。ご注意ください。

カテゴリメニューを表示させる

カテゴリメニューを表示させる

カテゴリを作って記事を分類している場合に、これらをサイト上に表示させる方法をご紹介します。今回のサンプルであればヘッダー部分にあるグロバールナビがそれにあたります。

正直、手動で一つづつリンクを書いていくっていうのでもいいのですが、それだとカテゴリーが今後増えた場合にいちいち自分で作業しなければいけません。なので、管理画面にあるカテゴリを取得して表示させるというようにすれば今後手間がなさそうです。

で、今回の場合であればカテゴリは「HTML」「CSS」「JavaScript」の三種類ですね。これらをヘッダーのグローバルナビに表示させるようにします。

WordPress管理画面のカテゴリを取得して繰り返し表示

管理画面で作成したカテゴリをブログ上に表示させます。現状だと下記のようにHTMLで仮で表示させているだけで、リンクもなければWordPressの管理画面を連動はしていないので、管理画面でカテゴリをいくら増やそうがブログ上に反映されることはありません。

header.php

<nav class="header__nav">
	<ul class="header__nav__menu">
		<li class="header__nav__list"><a href="#">HTML</a></li>
		<li class="header__nav__list"><a href="#">CSS</a></li>
		<li class="header__nav__list"><a href="#">JavaScript</a></li>
	</ul>
</nav>

これを以下のようにPHPの構文を使って記述をします。

header.php

<nav class="header__nav">
	<ul class="header__nav__menu">
		<?php
			$cat_all = get_terms( "category", "fields=all&get=all" );
			foreach($cat_all as $value):
		?>
		<li class="header__nav__list"><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></li>
		<?php endforeach; ?>
	</ul>
</nav>

get_terms

条件を指定してタクソノミー情報を検索し、マッチしたすべてのデータを取得する。
今回の場合ならカテゴリを取得して、カテゴリの数だけ繰り返し処理を行います。

foreach

繰り返し処理を行います。

foreach ( 配列 as 変数 ) {
    処理文
}

変数$cat_allには配列としてカテゴリがそれぞれ格納されています。foreachを使うことでその配列から各カテゴリをを取り出し、変数$valueに代入しています。初心者の方にはちょっと難しいですね。

foreachで、配列の各要素の値を取得 – PHPリファレンス

ブラウザで確認

ブラウザで確認すると見た目上はさっきと変わりませんが、ちゃんとリンクが設定されているかと思います。しかも、リンク先もそのカテゴリの一覧になっていますね。ただし、なぜか「未分類」というカテゴリが表示されてしまっています。

これはもともとWordPressのほうで用意されてしまっているカテゴリなんですね。なので、「未分類カテゴリ」を管理画面のほうから削除しなければいけません。ただし、「未分類カテゴリ」はデフォルトのカテゴリなので消すには単純に削除というのができません。

未分類が出ているから消す(管理画面)

未分類は邪魔なので消しちゃいましょう。これは管理画面のほうで作業をします。

管理画面左メニュー設定 > 投稿設定

で投稿用カテゴリーの初期設定の「未分類」を「HTML」に変更してください。

投稿設定

次に、実際に「未分類カテゴリ」を消します。

管理画面左メニュー投稿 > カテゴリ

ここでカテゴリ一覧が表示されるので「未分類カテゴリ」をチェックしてセレクトメニューから削除を選び「適用」で消せます。

ようは「投稿用カテゴリーの初期設定」に選択されているカテゴリは消すことができないんですね。これでブラウザで確認をしてください。ちゃんと「未分類」が消えていると思います。

※もしかしたらカテゴリメニューん順番が「HTML」「CSS」「JavaScript」になっていないかもしれませんね。なんですが、もし順番を変更したい場合などはプラグインを使うのが良さそうです。というのも、ふつうに管理画面から順番を変える手段はないです。

WordPressでカテゴリの順番を変更できるプラグイン3種
Category Orderを使いWordPressのカテゴリーの順番を並び替える – SEOのホワイトハットジャパン

あたりを確認していただくといいかもしれません。

パンくずリストを実装しよう

パンくずリスト

パンくずリストとは

この部分のことをパンくずリストといいます。トップページから他のページに移動したときにそのページがトップページからどんな階層から辿っているかを表示させるものです。サイトの使いやすさを向上させるものとして多くのサイトやブログで使われています。

今回やりたいこと

ページによってパンくずリストの表示の仕方って違いますよね?

例えば、トップページならばHomeだけでいいですね

それが、記事詳細ならば
Home > カテゴリ > 記事のタイトル

カテゴリ一覧ページならば
Home > カテゴリ

というようにしたいなーと思います。実は今回は省略しますが、検索ページの場合や、固定ページの場合なども考えなければいけません。とりあえず今回は記事詳細とカテゴリ一覧で対応しましょう!!

追記・変更する箇所

header.php

<nav class="breadcrumb">
	<ul class="breadcrumb__menu">
		<li class="breadcrumb__list"><a href="#">Home</a></li>
		<li class="breadcrumb__list">記事詳細</li>
	</ul>
</nav>

とりあえずCSSでデザインを当て込んだだけなので全くパンくずリストとして機能していないですね。

header.php

<nav class="breadcrumb">
	<ul class="breadcrumb__menu">
	<?php 
		$postcate = get_the_category();
		$title = get_the_title();
	?>
		<li class="breadcrumb__list"><a href="<?php echo home_url(); ?>">Home</a></li>
		<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,false,''); ?></li>
		<li class="breadcrumb__list"><?php echo $title; ?></li>
	</ul>
</nav>
<?php echo home_url(); ?>

これでトップページへのリンクを指定しています。もともと「#」になってしまっていたので。

$postcate = get_the_category();

でカテゴリを取得しています。

<?php echo get_category_parents($postcate[0]->term_id,false,''); ?>

これでカテゴリを表示させます。

get_category_parents(カテゴリ, リンクの有無, 区切り文字);

というように設定をします。リンクの有無はaタグで囲ってリンク先を設定するかですね。trueならリンクあり、falseならリンクなしになります。区切り文字は矢印だったりスラッシュだったりでパンくずリストのメニューを何で区切るか指定できます。ですが、今回はCSSで区切り文字を出すようにしているので、PHP側の区切り文字はなしです。

$title = get_the_title();

これで記事のタイトルを取得

ここまでで、一旦ブラウザで確認してみてください。そうするとトップページでもカテゴリページでも詳細ページでも

Home > カテゴリ > 記事のタイトル

というように表示されてしまっていますね。では、これらをif文を使って出し分けします。

if文で出し分けする

では出し分けをします

header.php

<nav class="breadcrumb">
	<ul class="breadcrumb__menu">
	<?php 
		$postcate = get_the_category();
		$title = get_the_title();
	?>
		<li class="breadcrumb__list"><a href="<?php echo home_url(); ?>">Home</a></li>
	<?php if(!is_home()&&!is_admin()){

		if(is_category()){
		?>
			<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,false,''); ?></li>
		<?php } elseif(is_single()){ ?>
			<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,true,''); ?></li>
			<li class="breadcrumb__list"><?php echo $title; ?></li>
		<?php }; ?>
	<?php }; ?>
	</ul>
</nav>

ちょっとややこしいので解説すると

<?php if(!is_home()&&!is_admin()){
	
	// トップページと管理画面以外なら

	if(is_category()){
	?>
		// カテゴリページなら

	<?php } elseif(is_single()){ ?>
		
		// 記事詳細ページなら

	<?php }; ?>
<?php }; ?>

というように出し分けをしています。ブラウザで確認をして動作確認をしてみてくださいね。

パンくずリストを別ファイルにする

header.phpにコードを書きましたが、結構コード量多いですよね?というか、パンくずリストはもっと多くなる可能性が高いです。というのも検索結果ページや、固定ページなどの場合も出し分けをするからですね。その場合にheader.phpにどんどん書き足してもいいのですが、コードが見づらくなってしまいそうですよね。

なので、パンくずリストphpファイルを作成して、header.php側で呼び出しというのをしてみたいと思います。

・パンくずリストphpファイルを作成

breadcrumb.phpというファイルをテーマフォルダ直下に作成して、header.php内のパンくずリストのコードをbreadcrumb.phpにコピペしてください。コピペしたらheader.php内のパンくずリストのコードは削除します。

<nav class="breadcrumb">
	<ul class="breadcrumb__menu">
	<?php 
		$postcate = get_the_category();
		$title = get_the_title();
	?>
		<li class="breadcrumb__list"><a href="<?php echo home_url(); ?>">Home</a></li>
	<?php if(!is_home()&&!is_admin()){

		if(is_category()){
		?>
			<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,false,''); ?></li>
		<?php } elseif(is_single()){ ?>
			<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,true,''); ?></li>
			<li class="breadcrumb__list"><?php echo $title; ?></li>
		<?php }; ?>
	<?php }; ?>
	</ul>
</nav>

・header.php側でbreadcrumb.phpを呼び出し

PHPの構文「include」を使って呼び出す。
header.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>オリジナルテーマを作成しよう</title>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset.css">
	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

	<?php wp_head(); ?>
	
</head>
<body>
	<header class="header">
		<div class="header__inner clearfix">
			<h1 class="header__logo"><a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Logo" width="110" height="50"></a></h1>
			<nav class="header__nav">
				<ul class="header__nav__menu">
					<?php
						$cat_all = get_terms( "category", "fields=all&get=all" );
						foreach($cat_all as $value):
					?>
					<li class="header__nav__list"><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></li>
					<?php endforeach; ?>
				</ul>
			</nav>
		</div>
	</header>

	<?php include( TEMPLATEPATH . '/breadcrumb.php' ); ?>

これの最後の行がポイントですね。これでbreadcrumb.phpを呼び出すことができます。このように、パンくずリストなど別ファイルにできそうなものは別ファイルで管理したほうがのちのち運営がしやすくなります。

記事一覧のページャーを作ってみよう

実際、自分でPHPのコードを書いてページャーを作成することができます。現にこのブログではそうしています。ですが、今回は初心者の方を対象にしています。そうするとページャーを一から作るのは結構大変なので、今回はWordPressのプラグインを使ってページャーを実装してみようと思います。

プラグインとは

WordPressのプログラムに機能を追加・拡張する、外部のプログラムのことをいいます。たとえば、簡単にお問い合わせページを作れるものや、ブログの記事をFacebookやTwitterに自動で同時に投稿してくれるものなど便利なプラグインがあります。
これらをうまく使うことであまりPHPやWordPressに詳しくなくても機能を実装することができます。初心者の方にはとてもおすすめです。ただし、なんでもかんでもプラグインにばかり頼っているとすごくページの表示が遅くなってしまったり、不具合が出たりもするので使う際には気をつけてくださいね。

WordPressのページャープラグイン WP-PageNaviを使う

WP-PageNaviというプラグインでページャーの実装をしましょう。

・WP-PageNaviのインストール

管理画面左メニュープラグイン > 新規追加

ページ右側の検索スペースに「WP-PageNavi」と入力したら「いますぐインストール」クリック

WP-PageNaviのインストール

インストールが終わったら、プラグインの有効化をクリックすれば、これだけでプラグインが使えます。

WP-PageNaviの使い方

見事プラグインのインストール、有効化が終わると

管理画面左メニュー設定 > PageNavi

が追加されてます。ここでWP-PageNaviの詳細な設定ができるようになっています。いろんな設定ができるようになっていますがとりあえず今回は

・pagenavi-css.css を使用 Yes
・常にページナビゲーションを表示 Yes
・表示するページ数 10

になっていることを確認してください。これでブラウザで確認すればページャーが表示されていますね。記事数が少ないとページャの2などが表示されないので、記事をたくさん投稿していただくと作業しやすいと思います。記事が全部で11件以上にしていただくといいです。

表示するページ数を変更する場合

現在は10件というようになっていますが、たとえば5件にしたいとか20件にしたいなどの場合、注意が必要になります。

PageNavi側で件数を変更だけでは、ブログ上の1ページの表示件数は変更されません。その場合は

管理画面左メニュー設定 > 表示設定

1ページに表示する最大投稿数もWP-PageNaviの表示件数と同じにしなければいけません。

CSSの調整

現在のデザインだとあまり見た目良くないですね。そもそもCSSのほうでpagerのデザインは作ってあるので、それを流用してみたいと思います。

管理画面左メニュー設定 > PageNavi

・pagenavi-css.css を使用 Noに変更してください。

CSSでは以下のようにpagerのスタイルは作ってあります。ですが、じつはこのままだと使えません。というのもWP-PageNavi側で独自のクラスを指定していまっているからなんです。
なので、もとのCSSからWP-PageNaviのクラスに合わせた書き方に変更を加えます。

元のCSS

/* pager
--------------------------------------------------------- */
.pager{
  text-align: center;
}

.pager__menu{
  display: inline-block;
}

.pager__list{
  display: inline-block;
  text-decoration: none;
  width:40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.4em;
  border:solid 1px #f8f8f8;
  margin:4px;
  text-align: center;
}

.pager__list a:link,
.pager__list a:visited,
.pager__list a:active{
  color:#666;
  text-decoration: none;
  display:block;
}

.pager__list a:hover{
  background: #9265cf;
  color:#fff;
}

.pager__list--current{
  background: #9265cf;
  color:#fff;
}

変更後のCSS

/* pager
--------------------------------------------------------- */
.pager{
  text-align: center;
}

.wp-pagenavi{
  display: inline-block;
}
.wp-pagenavi span,
.wp-pagenavi a{
  display: inline-block;
  text-decoration: none;
  width:40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.4em;
  border:solid 1px #f8f8f8;
  margin:4px;
  text-align: center;
}

.wp-pagenavi a:link,
.wp-pagenavi a:visited,
.wp-pagenavi a:active{
  color:#666;
  text-decoration: none;
}

.wp-pagenavi a:hover{
  background: #9265cf;
  color:#fff;
}

.wp-pagenavi .current{
  background: #9265cf;
  color:#fff;
}

これで以下のように表示されていればバッチリですね。

ページャーの完成例

おわりに

カテゴリメニュー・パンくずリスト・ページャー編ということでこれらの実装をしてみました。とくにパンくずリストやページャーがあることでブログを見に来てくれる方にとってとても使いやすい、記事を見つけやすいブログになりますね。

今回の完成例

※テーマのみのダウンロードなのでWordPressをインストールしなければ正常に動作しません。ご注意ください。

次回は、記事内の検索ができるようにしてみたいと思います!!ではでは、またよろしくお願いします。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ