arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[WordPress]パンくずリストを設置しよう

久しぶりにWordpressの記事です。最近ようやくSEOについて少しづつ勉強し始めたので、その一環としてパンくずリストを設置しました。アクセシビリティの面からも必要なパーツですし…
また、Wordpressの仕組みを勉強するための資料として記録しておきます。

パンくずリストについて

通常ページの上部に表示され、今訪問者がサイトのどこの階層にいるのかを伝えるリンクのことです。
童話「ヘンゼルとグレーテル」でヘンゼルが森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来しているのだそうです。

パンくずリストを設置すると何がいいの？

  • ユーザーに今サイト内のどこにいるのかを伝える(わかりやすさ)
  • 検索エンジンのロボットがサイト内を循環しやすくなる(検索されやすくなる)

簡単にではありますが、そのような役割があります。
今回はテンプレートファイルを編集することでパンくずリストを作りました。

参考にしたサイト

テンプレートを編集するにあたっては以下のサイトを参考にしました。

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない | Web Design Recipes
WordPressでプラグインを使わずにパンくずリストを実装する | UKlab

ありがとうございました。助かりました。

実際にパンくずリストを設置してみよう

実際にパンくずリストを設置してみましょう。
手順は以下です。

  1. functions.phpへ記述
  2. リストの見た目を整形
  3. 必要箇所に関数を埋め込む

注意点：functions.phpは必ずバックアップを取ってから書き換えましょう。
テスト環境を作っておいて、テストをしてから本番環境へアップロードしましょう。

僭越ながら、Wordpressのテスト環境の作り方についての記事を書いています。よかったら参考になさってください。

1.functions.phpへ記述

functions.phpへ以下のコードを記述します。

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
//パンくずリスト
function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "clearfix")){
global $post;
$str ='';
if(!is_home()&&!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
$tagAttribute = '';
foreach($divOption as $attrName => $attrValue){
$tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
}
$str.= '<div'. $tagAttribute .'>';
$str.= '<ol>';
$str.= '<li><a href="'. home_url() .'/">Home</a></li>';
$str.= '<li>&gt;</li>';
if(is_category()) { //カテゴリーのアーカイブページ
$cat = get_queried_object();
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
$str.='<li>&gt;</li>';
}
}
$str.='<li>'. $cat -> name . '</li>';
} elseif(is_single()){ //ブログの個別記事ページ
$categories = get_the_category($post->ID);
$cat = $categories[0];
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor). '</a></li>';
$str.='<li>&gt;</li>';
}
}
$str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>';
$str.='<li>&gt;</li>';
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_page()){ //固定ページ
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></li>';
$str.='<li>&gt;</li>';
}
}
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_date()){ //日付ベースのアーカイブページ
if(get_query_var('day') != 0){ //日別アーカイブ
$str.='<li><a href="'. get_year_link(get_query_var('year')). '">' . get_query_var('year'). '年</a></li>';
$str.='<li>&gt;</li>';
$str.='<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
$str.='<li>&gt;</li>';
$str.='<li>'. get_query_var('day'). '日</li>';
} elseif(get_query_var('monthnum') != 0){ //月別アーカイブ
$str.='<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
$str.='<li>&gt;</li>';
$str.='<li>'. get_query_var('monthnum'). '月</li>';
} else { //年別アーカイブ
$str.='<li>'. get_query_var('year') .'年</li>';
}
} elseif(is_search()) { //検索結果表示ページ
$str.='<li>「'. get_search_query() .'」で検索した結果</li>';
} elseif(is_author()){ //投稿者のアーカイブページ
$str .='<li>投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</li>';
} elseif(is_tag()){ //タグのアーカイブページ
$str.='<li>タグ : '. single_tag_title( '' , false ). '</li>';
} elseif(is_attachment()){ //添付ファイルページ
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_404()){ //404 Not Found ページ
$str.='<li>404 Not found</li>';
} else{ //その他
$str.='<li>'. wp_title('', true) .'</li>';
}
$str.='</ol>';
$str.='</div>';
}
echo $str;
}

…長いコードですね。大雑把に掴めるといいのですが…まず「 ホーム > 親カテゴリー > 子カテゴリー > 孫カテゴリー 」となるような構造をPHP内に書いています。
パンくずリストを表示させた時に展開される文書構造は大体以下のようになります。

1
2
3
4
5
6
7
8
9
<div id="breadcrumb" class="clearfix">
<ol>
<li><a href="http://pilgrim-guild.com/">Home</a></li>
<li>&gt;</li>
<li><a href="http://pilgrim-guild.com/category/wordpress/">Wordpress</a></li>
<li>&gt;</li>
<li>[Wordpress]パンくずリストを設置しよう</li>
</ol>
</div>

そして、function.phpで書いたコードの中身は「条件に当てはまるカテゴリーがあれば表示し、なければ表示しない」とif文で条件分岐をしています。

2.リストの見た目を整形

文書構造だけでは、横並びにならないので、CSSを編集します。
今回は横並びに display: inline-block; を使いました。もちろんfloatでもいいと思うのですが…

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#breadcrumb {
    list-style: none;
}
 
#breadcrumb ul {
    margin: 0;
    padding: 0;
}
 
#breadcrumb li {
    display: inline-block;
    padding: 0 5px;
}
 
#breadcrumb li a {
    color: #666;
}

ここは適宜想定されるデザインに合わせて変えていきましょう。

3.必要箇所に関数を埋め込む

最後は functions.php に書いた機能を呼び出すために、表示させたいテンプレートへ埋め込みます。

1
<?php breadcrumb(); ?>

breadcrumb() で呼び出します。
私は個別投稿ページ（single.php）と、固定ページ（page.php）、404ページ（404.php）に挿入しました。
今回はこれでおしまいです。お疲れ様でした！

SEO対策的には…

矢印マークとなる「>」は、本来なら背景画像として挿入したほうがいい、と言われています。
正規表現が使えるWordpressに限って言えばそれほど気にすることはないのかな…と思っていたのですが、時間を作ってCSSで設置したいですね。

もっと簡単にパンくずリストを設置

WordPressのプラグインがあります。プラグインが少ない方にはプラグインで解決する方法もアリではないでしょうか。
Breadcrumb NavXT
インストール方法はこちらです。

上記以外にもプラグインがあるようですね。
DP RDFa Breacrumb Generator　
Breadcrumb

WordPressはPHPで書かれたアプリケーションですので、どこをどうすればいいのかがわかると、細かい条件分岐が可能になったりプラグインを使わずに表示できたりと、さらにカスタマイズの幅が広がると思います。
これからも少しずつでもいいから学習していきたいですね。ねこま（@necomacustom）でした。

Share

Leave a comment

PAGE TOP