皆さんはネットショッピングをしたりしますか？
Webを使って勉強をしたりしますか？
Webサイトを見ていると、
と思われたことはあるのではないでしょうか？
そんなときに有効なのがパンくずリストです。
今回はWordPressにパンくずリストを設定したいと思います。
パンくずリストって？
まず、「パンくずリスト」とは何でしょうか？
パンくずリスト
ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。
パンくずナビ、トピックパス、フットパスとも言う。
「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。引用：wikipedia
今どこにいるか、
どこから来たのか、迷わないようにするための目印ですね。
ページが少ないサイトではその効果はあまりありませんが、
大規模なウェブサイトであるほど、必要性が高くなります。
パンくずリストの種類
パンくずリストは大きく以下3種類に分類されます。
- パス型
- 位置型
- 属性型
①パス型
『ヘンゼルとグレーテル』のパンくずのように、どこを通ってそこまで来たのかを示すものです。
そのため、同じページであっても、そのページへのたどり方が違えば、パンくずのリストは異なります。
例えば、このサイトにはどのようにたどり着きましたか？
Aさんは、検索から。
Bさんは、Twitterから。
Cさんは、知り合いから。
それぞれたどり方が違うので、パンくずも変わりますね。
②位置型
そのページが、Webサイト上のどこにあるかを示すものです。
そのため、誰が見ても同じリストになります。
Windowsパソコンのエクスプローラのアドレスバーが位置型ですね。
③属性型
ショッピングサイトのパンくずで使われているのはこの属性型が多いと思います。
どのカテゴリに分類されているかでリストが変わります。
例えば、パンだったら、このようなパンくずリストになりますね。
例） 食品 ≫ パン・ジャム・シリアル ≫ パン
パンくずリストの設定に必要なファイル
パンくずリストを設定する プラグインはたくさんあります。
デザイン性にも優れ、簡単に使うことができるものが多いです。
今回は、プラグインは使わず、パンくずリストを設定したいと思います。
パンくずリストを設定するには、以下3か所の設定が必要です。
- functions.php
- single.php
- style.css
①functions.php
利用しているテーマ内で汎用的に使われるコードを記載するファイルです。
共通的に利用する関数などを記載しておき、
その関数を使いたい場所（例えば投稿画面）で、呼び出すことで使うことができます。
このファイルに、パンくずリストの関数を記述します。
②single.php
投稿画面用のテンプレートファイルです。
1つの投稿ページではなく、
すべての投稿ページに設定するため、テンプレートファイルでパンくずリストの関数を呼び出します。
③style.css
見え方を設定するファイルです。
パンくずリストのデザイン設定コードを記述します。
属性型パンくずリストを設定しよう①（functions.php）
今回は、属性型のパンくずリストを設定したいと思います。
まずは、バックアップを取ってから、設定をしていきましょう。
functions.phpの編集手順
※「Snippets」というプラグインを使って編集をします。
①Snippetsプラグインの「Add New」をクリックする。
②任意のタイトルをつけ、以下コードを記入する。
※＜＞は全角で書いてあります。半角に変更してください。
function get_breadcrumb() {
echo '＜a href="'.home_url().'" rel="nofollow"＞Home＜/a＞';
if (is_category() || is_single()) {
echo " » ";
the_category(' • ');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Search Results for... ";
echo '"';
echo the_search_query();
echo '"';
}
}
③「Run snippet everywhere」を選択し、「Save changes」をクリックする。
④追加したsnippetが有効になっていることを確認する。
各行の意味を確認したいと思います。
- echo ‘<a href=”‘.home_url().'” rel=”nofollow”>Home</a>’;
home_url()で、サイトのトップページのアドレスを取得し、
「HOME」という名前のリンクにしています。
- if (is_category() || is_single()) {
- echo “ » ”;
カテゴリーページ、もしくは、投稿ページのとき、「 ≫ 」を出力します。
| コード | 意味 |
|---|---|
| | 半角スペース |
| » | ≫の文字 |
- the_category(‘ • ‘);
カテゴリへのリンクを中点（•）で区切って表示します。
| コード | 意味 |
|---|---|
| • | 中点 |
- if (is_single()) {
- echo ” » “;
- the_title();
- }
投稿ページの場合、「 ≫ 」を出力し、
その後に、投稿ページのタイトルを出力します。
- elseif (is_page()) {
- echo “ » ”;
- echo the_title();
- }
固定ページの場合、「 ≫ 」を出力し、
その後に、固定ページのタイトルを出力します。
- } elseif (is_search()) {
- echo “ » Search Results for… “;
- echo ‘”<em>’;
- echo the_search_query();
- echo ‘</em>”‘;
- }
カテゴリーページでも、投稿ページでも、固定ページでもない場合、
「 ≫ Search Results for… 」を出力し、
その後に検索クエリ（検索窓に入力した語句）を強調して表示します。
※<em></em>は間にいれる文字を強調するためのHTMLタグ。
属性型パンくずリストを設定しよう②（single.php）
functions.phpが設定できたので、
次はそれを呼び出す投稿ページ用のテンプレートファイルを編集していきましょう。
single.phpファイルを編集する必要があるので、SCP等を使って、サーバにアクセスします。
※以前作ったローカル環境の場合、
XAMPPのフォルダに直接配置すればOKです。
single.phpの編集手順
①SCPにログインする。
②以下フォルダを開く
③single.phpのバックアップを取る（コピーする）。
④single.phpをダウンロードする。
⑤Atomなどのテキストエディタで、single.phpを開く。
⑥以下コードをsingle.phpの、パンくずリストを表示させたい場所に記入し、保存する。
＜div class="breadcrumb"＞＜?php get_breadcrumb(); ?＞＜/div＞
⑦保存したsingle.phpを、SCPでアップロードする。
属性型パンくずリストを設定しよう③（style.css）
最後に、パンくずリストの見せ方をCSSファイルに設定します。
style.cssの編集手順
※ここでは、Simple Custom CSS and JSプラグインでCSSを追加しますが、
外観＞カスタマイズ＞追加CSSに記載しても構いません。
①Simple Custom CSS and JSプラグインで、「カスタムCSSの追加」をクリックする。
②任意の名前をつけ、コード記入欄に例えば以下を入力する。
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
| コード | 意味 |
|---|---|
| padding | ボックス内側の余白 |
| margin-bottom | ボックス外側下部の余白 |
| list-style | リストの先頭に表示するマーカー文字の種類 |
| background-color | 背景色 |
| border-radius | 要素の境界の外側の角の丸め方 |
| color | 文字の色 |
| text-decoration | テキストの装飾 |
③表示位置をフッターにして、「公開」をクリックする。
確認しましょう
設定できたら、いよいよ確認をしてみましょう。
投稿一覧ではなく、投稿ページを見てみてください。
パンくずリスト、ありましたか？
サイトに合わせて、CSSをカスタマイズしてみてくださいね。
