WordPress プラグインなしでパンくずリストを表示
WordPress プラグインなしでパンくずリストを表示
WordPressで記事ページにパンくずリストを表示する方法は、プラグインなど様々な方法があります。
いろんな方法がありますが、テンプレートタグを使えば、かなり簡単に表示させる事ができます。
最近のWordPress用ブログテンプレートは、いわしブログでも使用しているStinger3を始め、最初からパンくずリスト出力が標準装備されるようになってきました。
でも、企業向けのWordPressサイトを一から作る場合は、やはり自前でパンくずリストを設置する必要があります。WordPressにはパンくずリスト表示用プラグインがたくさんありますが、今回はプラグインを使わずにパンくずリストを設置する方法を紹介します。
パンくずリストとは?
パンくずリストとは、webサイトやブログ内での位置を視覚的にわかりやすくするために、滞在中のページを階層順にリスト化して表示したものです。このブログにもタイトルの上にパンくずリストが表示されていますね。
規模の大きいサイトだと、現在どの階層のページを見ているのかがわかりにくいのですが、パンくずリストがあれば、サイト内の現在位置が直感でわかるようになります。
また、パンくずリストは、ユーザビリティの向上だけではなく、SEOにも重要な役割を果たしています。
検索エンジンにサイトの構造を正しく認識させることは、SEOの重要なポイントの一つなのですが、パンくずリストを表示させることで、検索エンジンにサイトの階層や構造を正確に把握させることができます。
ちなみに、「パンくず」という名称の由来ですが、童話「ヘンゼルとグレーテル」の中で、主人公が森の中で迷わないように、パンくずを落としながら歩いたというお話から来ています。英語では「breadcrumbs」と表記します。
プラグインなしでパンくずリストを設定
WordPressには、パンくずリストを表示するためのプラグインがたくさんありますが、今回はプラグインを使わずにパンくずリストを表示させることにしました。
パンくずリスト表示コードは、bl6.jpさんの記事から引用させていただきました。ありがとうございます。
パンくずリスト表示コード functions.php記載用
まずはfunctions.phpに以下のコードを記載します。このコードは投稿ページだけでなく、カテゴリや固定ページにも対応、固定ページが親子構造になっている場合でもパンくずリストを出力させることができます。
また、microdata形式による構造化マークアップにも対応しています。自動的にmicrodataコードがパンくずと共に生成されるので、検索結果にパンくずを表示させることができます。
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
|
// パンくずリスト
function breadcrumb(){
global $post;
$str ='';
if(!is_home()&&!is_admin()){
$str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
$str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> ></div>';
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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> ></div>';
}
}
$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
} elseif(is_page()){
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></div>';
}
}
} 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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> ></div>';
}
}
$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
} else{
$str.='<div>'. wp_title('', false) .'</div>';
}
$str.='</div>';
}
echo $str;
}
|
パンくずリスト表示コード single.php page.php記載用
続いて、パンくずリストを表示させたい場所に以下の呼び出し用コードを貼り付けてください。
1
|
<?php breadcrumb(); ?>
|
ダッシュボード左側のメニューから「外観」→「テーマ編集」と進み、右側に表示されるテンプレートの中からsingle.php・page.phpを選択してコードを貼り付けます。パンくずリストはそのページのタイトル前後に表示させるのが一般的ですね。
また、archive.phpに貼り付けると、カテゴリや月別アーカイブでもパンくずリストを表示させることができます。カテゴリやアーカイブはテーマによって該当するテンプレートが違うので注意してくださいね。
Googleウェブマスターツール 構造化データテストツール
パンくずリストがきちんと認識されているかどうかは、Googleウェブマスターツールの構造化データテストツールにURLを入力することで確認できます。
Google Structured Data Testing Tool
URLを入力して「プレビュー」をクリックしてください。このようにパンくずが表示されていれば、microdataコードがきちんと認識されています。
「抽出された構造化データ」にも、ちゃんとパンくずが表示されていますね。
WordPress パンくずリスト設定プラグイン
WordPressには、パンくずリストを表示するためのプラグインがたくさんあります。「wordpress プラグイン パンくず」で検索してみると、Breadcrumb NavXTというプラグインの情報がたくさん出てきました。パンくずリスト表示ならこれが定番のようです。
プラグインを使ってパンくずリストを表示させたい方は、この記事がオススメです。 https://wordpress.org/plugins/breadcrumb-navxt/