パンくずリストをワードプレスに表示する方法:プラグイン不要
WordPressにパンくずリストを表示する方法です。プラグインなしで数行追加するだけでOKです。
プラグインを使わず、パンくずリストを噛み砕いてみます。パンだけに(・∀・)
パンくずリストとは記事の文頭に多く用いられるナビゲーションの一種でこの変わった名前は童話「ヘンゼルとグレーテル」で森で迷子にならないよう目印としてパンくずを置いていったエピソードに由来します。「◯◯◯>△△△>現在のページ」のようなやつです。
訪問者が迷子にならないよう、いま見ているページはサイト内のどこにあるのか分かるように階層を表示する役目があります。このパンくずリストは階層が深く進むサイトなどに適していると思いますが、もちろんワードプレスでも設置可能です。
ひとつずつ噛み砕いていき最後にはブログにパンくずリストを表示してみます。
01 . get_category_parents()で表示する
ワードプレスのパンくずリストではその記事がどこに属しているかを表示するような形になりますので親カテゴリーを取得するテンプレートタグ:get_category_parents()を利用します。
パラメータ(引数)はcategory, display link, separator, nice name
・category:記事のカテゴリーID
・display link:true(各カテゴリーへのリンクを出力する)/false(出力しない)
・separator:区切り文字、シングルクォーテーションでくくる
・nice name:true(英数字小文字のみのカテゴリー名を出力)/false(大文字、日本語を含むカテゴリー名を出力)
パンくずリストの多くは各記事の上部に表示しますのでsingle.phpに次のような形で書きます。(※まだこのままだとエラーになります)
<?php echo(get_category_parents(category, true,' > ', false)); ?>
表示例)カテゴリー名 >
これにthe_title()を追加し、現在みているページのタイトルも追加したいと思います。
<?php echo(get_category_parents(category, true,' > ', false)); the_title(); ?>
表示例)カテゴリー名 > 現在のページタイトル
このままだと第一引数のカテゴリーIDを渡していないためエラーになります。カテゴリーIDは記事によって異なるためカテゴリーIDを取得する処理を入れます。
02 . get_the_category()でカテゴリーIDを取得
テンプレートタグ:get_the_category()は記事のカテゴリーIDやカテゴリースラッグ、親カテゴリーなどを配列として返します。これを利用してカテゴリーIDを取得します。
配列を受け取るには変数で受けます。ここらはPHPの話になりますので使い方だけ紹介します。容器を用意してそこに値を受け取る感じです。
<?php $cat=get_the_category(); ?>
変数$cat(名前はなんでも可)にget_the_category()の戻り値を格納しています。配列で返ってきているので必要なカテゴリーIDだけ取得します。以下を追加します。
<?php $cat=$cat[0]; ?>
PHPでのイコールは代入を意味しますので、右辺の$cat[0](配列の一番目の値:term_id)を左辺の$catに入れ直しています。これで$catには記事のカテゴリーIDが取得されました。
03 . パンくずリストを表示
カテゴリーIDが取得できたのでパンくずリストを表示してみます。1ステップ目の処理に2ステップ目で取得したカテゴリーIDを渡します。これでエラー無しで表示されます。
<?php $cat=get_the_category(); ?> <?php $cat=$cat[0]; ?> <?php echo(get_category_parents($cat, true,' > ',false)); the_title(); ?>
表示例)カテゴリー名 > 現在のページタイトル
04 . HOMEを追加してみる
カテゴリーへのリンクの前にHOMEを追加して「HOME > カテゴリー名 > 現在のページタイトル」という形にしたいと思います。
<div id="pan"> <?php $cat=get_the_category(); ?> <?php $cat=$cat[0]; ?> <a href="<?php bloginfo('url'); ?>">HOME</a> >> <?php echo(get_category_parents($cat, true,' > ',false)); the_title(); ?> </div>
HOMEへのリンクのあとにスペース、>>、スペースを入れています。CSSで調整しやすいようにdivでくくりました。id名はなんでもOKです。
#pan{ font-size: 12px; color: #CCCCCC; }
数行で出来ますのでぜひ試してみてください:)
Comments