【WordPress自作テーマ】パンくずリストを設置！プラグインなしでパンくずリストを設置する方法！
どうも、もちです。
前回まではサイドバー作成をしていましたが今回からはコンテンツエリア部分も少しずつ作っていこうかと思います。
今回はパンくずリストについてWordPressでパンくずリストを設置する方法を紹介しながらこのサイトにも設置していこうかと思います！
そもそもパンくずリストとは
パンくずリストとは、記事上にある階層を示したリンクのことを表します。Wikipediaの言葉を借りると
パンくずリストは、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。
https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88
とのことです。
実際の見た目は
家のマークの隣にホームがあってその隣にカテゴリー、次に記事タイトルがあるこの形よく見ますよね。
これがパンくずリストです
demo
何のためのパンくずリスト？
この記事のカテゴリーやひと目でわかったりトップページへの移動が楽だったりとUX(ユーザー体験)が向上します。
具体的には内部リンクが増えてサイト内移動がしやすくなり使いやすくなります。
直接ページにアクセスした場合はどのページがどの階層にいるかすぐに分かって便利です。
パンくずリストはどこで使う？
パンくずリストの設置場所ですね、まれに記事下にあることもありますが基本的には記事上におきます。
WordPressではプラグインで出力する方法や自分で設置する方法などがありますが今回はプラグイン無しで導入しようかと思います。
プラグインでも設置できる
一応プラグインでも導入できるので使えるプラグインを紹介しておきます。
自分が使った中だとこのプラグインが便利でした。
管理画面から、[プラグイン]>[新規追加]の検索欄にBreadcrumbと入力すると、パンくずリスト追加のプラグインが出てきます。
お好きなものをお使いください。
テーマによっては最初から使える場合も、、
このサイトは自作テーマをしているので無いですが、テーマの機能として最初からパンくずリストが使える場合もあります。
その場合今から紹介する方法は一切必要なくなるので、テーマの公式ページなどで確認してみてください。
SEO的にも有利になる
パンくずリストにより、構造化されたリンクや階層の可視化はクロールのしやすさが向上します。
パンくずリストによりカテゴライズされることによって、クローラにこのーページがどのカテゴリーに属するかなどの情報が伝わりやすくなります。
functions.phpにコードを追加
まずは使用中のテーマのfunctions.phpに以下のコードを追加してください
functions.php
function breadcrumbs( $args = array() ){
global $post;
$str ='';
$defaults = array(
'id' => "breadcrumbs",
'home' => "HOME",
'search' => "で検索した結果",
'tag' => "タグ",
'author' => "投稿者",
'notfound' => "404 Not found",
'separator' => ' » '
);
$args = wp_parse_args( $args, $defaults );
extract( $args, EXTR_SKIP );
if( is_home() ) {
echo '<div id="'. $id .'" >'.'<ul><li>'. $home .'</li></ul></div>';
}
if( !is_home() && !is_admin() ){
$str.= '<div id="'. $id .'" >';
$str.= '<ul>';
$str.= '<li class="breadcrumb-top" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. home_url() .'/" itemprop="url"><span itemprop="title">'. $home .'</span></a></li>';
$str.= '<li>'.$separator.'</li>';
$my_taxonomy = get_query_var( 'taxonomy' );
$cpt = get_query_var( 'post_type' );
if( $my_taxonomy && is_tax( $my_taxonomy ) ) {
$my_tax = get_queried_object();
$post_types = get_taxonomy( $my_taxonomy )->object_type;
$cpt = $post_types[0];
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="' .get_post_type_archive_link( $cpt ).'" itemprop="url"><span itemprop="title">'. get_post_type_object( $cpt )->label.'</span></a></li>';
$str.='<li>'.$separator.'</li>';
if( $my_tax -> parent != 0 ) {
$ancestors = array_reverse( get_ancestors( $my_tax -> term_id, $my_tax->taxonomy ) );
foreach( $ancestors as $ancestor ){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_term_link( $ancestor, $my_tax->taxonomy ) .'" itemprop="url"><span itemprop="title">'. get_term( $ancestor, $my_tax->taxonomy )->name .'</span></a></li>';
$str.='<li>'.$separator.'</li>';
}
}
$str.='<li>'. $my_tax -> name . '</li>';
}
elseif( 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 itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link( $ancestor ) .'" itemprop="url"><span itemprop="title">'. get_cat_name( $ancestor ) .'</span></a></li>';
$str.='<li>'.$separator.'</li>';
}
}
$str.='<li>'. $cat -> name . '</li>';
}
elseif( is_post_type_archive() ) {
$cpt = get_query_var( 'post_type' );
$str.='<li>'. get_post_type_object( $cpt )->label . '</li>';
}
elseif( $cpt && is_singular( $cpt ) ){
$taxes = get_object_taxonomies( $cpt );
$mytax = $taxes[0];
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="' .get_post_type_archive_link( $cpt ).'" itemprop="url"><span itemprop="title">'. get_post_type_object( $cpt )->label.'</span></a></li>';
$str.='<li>'.$separator.'</li>';
$taxes = get_the_terms( $post->ID, $mytax );
$tax = get_youngest_tax( $taxes, $mytax );
if( $tax -> parent != 0 ){
$ancestors = array_reverse( get_ancestors( $tax -> term_id, $mytax ) );
foreach( $ancestors as $ancestor ){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_term_link( $ancestor, $mytax ).'" itemprop="url"><span itemprop="title">'. get_term( $ancestor, $mytax )->name . '</span></a></li>';
$str.='<li>'.$separator.'</li>';
}
}
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_term_link( $tax, $mytax ).'" itemprop="url"><span itemprop="title">'. $tax -> name . '</span></a></li>';
$str.='<li>'.$separator.'</li>';
$str.= '<li>'. $post -> post_title .'</li>';
}
elseif( is_single() ){
$categories = get_the_category( $post->ID );
$cat = get_youngest_cat( $categories );
if( $cat -> parent != 0 ){
$ancestors = array_reverse( get_ancestors( $cat -> cat_ID, 'category' ) );
foreach( $ancestors as $ancestor ){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link( $ancestor ).'" itemprop="url"><span itemprop="title">'. get_cat_name( $ancestor ). '</span></a></li>';
$str.='<li>'.$separator.'</li>';
}
}
$str.='<li 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></li>';
$str.='<li>'.$separator.'</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 itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink( $ancestor ).'" itemprop="url"><span itemprop="title">'. get_the_title( $ancestor ) .'</span></a></li>';
$str.='<li>'.$separator.'</li>';
}
}
$str.= '<li>'. $post -> post_title .'</li>';
}
elseif( is_date() ){
if( get_query_var( 'day' ) != 0){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_year_link(get_query_var('year')). '" itemprop="url"><span itemprop="title">' . get_query_var( 'year' ). '年</span></a></li>';
$str.='<li>'.$separator.'</li>';
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_month_link(get_query_var( 'year' ), get_query_var( 'monthnum' ) ). '" itemprop="url"><span itemprop="title">'. get_query_var( 'monthnum' ) .'月</span></a></li>';
$str.='<li>'.$separator.'</li>';
$str.='<li>'. get_query_var('day'). '日</li>';
}
elseif( get_query_var('monthnum' ) != 0){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_year_link( get_query_var('year') ) .'" itemprop="url"><span itemprop="title">'. get_query_var( 'year' ) .'年</span></a></li>';
$str.='<li>'.$separator.'</li>';
$str.='<li>'. get_query_var( 'monthnum' ). '月</li>';
}
else {
$str.='<li>'. get_query_var( 'year' ) .'年</li>';
}
}
elseif( is_search() ) {
$str.='<li>「'. get_search_query() .'」'. $search .'</li>';
}
elseif( is_author() ){
$str .='<li>'. $author .' : '. get_the_author_meta('display_name', get_query_var( 'author' )).'</li>';
}
elseif( is_tag() ){
$str.='<li>'. $tag .' : '. single_tag_title( '' , false ). '</li>';
}
elseif( is_attachment() ){
$str.= '<li>'. $post -> post_title .'</li>';
}
elseif( is_404() ){
$str.='<li>'.$notfound.'</li>';
}
else{
$str.='<li>'. wp_title( '', true ) .'</li>';
}
$str.='</ul>';
$str.='</div>';
}
echo $str;
}
function get_youngest_cat( $categories ){
global $post;
if(count( $categories ) == 1 ){
$youngest = $categories[0];
}
else{
$count = 0;
foreach( $categories as $category ){
$children = get_term_children( $category -> term_id, 'category' );
if($children){
if ( $count < count( $children ) ){
$count = count( $children );
$lot_children = $children;
foreach( $lot_children as $child ){
if( in_category( $child, $post -> ID ) ){
$youngest = get_category( $child );
}
}
}
}
else{
$youngest = $category;
}
}
}
return $youngest;
}
function get_youngest_tax( $taxes, $mytaxonomy ){
global $post;
if( count( $taxes ) == 1 ){
$youngest = $taxes[ key( $taxes )];
}
else{
$count = 0;
foreach( $taxes as $tax ){
$children = get_term_children( $tax -> term_id, $mytaxonomy );
if($children){
if ( $count < count($children) ){
$count = count($children);
$lot_children = $children;
foreach($lot_children as $child){
if( is_object_in_term( $post -> ID, $mytaxonomy ) ){
$youngest = get_term($child, $mytaxonomy);
}
}
}
}
else{
$youngest = $tax;
}
}
}
return $youngest;
}そして任意のパンくずリストを出力したいところにこのコードを添付してください
breadcrumbs();そうしたらパンくずリストが現れます！
アーカイブや、カテゴリーの表示に対応しています、出力されるコードを変更したい場合は先程追加したコードを変更してください
見た目変更するには、テーマ内で読み込まれるCSSでid breadcrumbsを指定すると変更できます、三項ほどに出力されるコード例を書いておきます
<div id="breadcrumbs">
<ul>
<li class="breadcrumb-top" itemscope=""itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://blog.sumahotektek.com/" itemprop="url">
<span itemprop="title">HOME</span>
</a>
</li>
<li> » </li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://blog.sumahotektek.com/category/uncategorized/" itemprop="url">
<span itemprop="title">未分類</span>
</a>
</li>
<li> » </li>
<li>【WordPressで自作テーマをする話】サイドバーレイアウトDisplay:tableの使い方#5</li>
</ul>
</div>
このサイトではこんな感じにしています。
参考ほどにCSSもどうぞ。
CSS
#breadcrumbs ul{width:100%;font-size:1.2rem;text-align:left;padding:0}
#breadcrumbs ul li{display:inline-block;vertical-align:top}
完成です！
まとめ
今回はパンくずリストを追加していきました！
足りていなかったUXがだんだんと改善していっていく感じがして楽しいですね！
まだまだ足りない所だらけですが、、
次回は、タグ一覧を表示できるようにしていこうと思います！
この記事はテーマ3.2までの内容です。