Web it Works

2021.03.10

【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する

【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する

こんにちは、Web it Worksの伊東です。

今回は、WordPressでリッチリザルトに対応したぱんくずリストを実装する方法をご紹介します。

パンくずリストについての説明は以下の記事をご覧ください!

本記事の対象者

  • WordPress の functions.php が難なく触れる人
  • WordPress カスタマイズに挑戦してみたい人
  • SEOに考慮したコーディングをしたい人
  • リッチリザルトの実装方法について知りたい人

早速、ソースコード紹介

まずは functions.php に以下の関数を作成しましょう。

// パンくずリスト
function breadcrumb(){
	global $post;
	$str ='';
	$item_prop_content = 0;

	if(!is_home()&&!is_admin()){
		$item_prop_content++;
		// $str.= '<a href="'.home_url().'" class="home" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><i class="fas fa-home" title="home"></i><meta itemprop="position" content="'.strval($item_prop_content).'" /></a> > ';
		$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.home_url().'" class="home" itemprop="item"><span><i class="fas fa-home" title="home"></i><span class="no_v" style="display:none" itemprop="name">ホーム</span></span></a> > <meta itemprop="position" content="'.strval($item_prop_content).'" /></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){
					$item_prop_content++;
					$str.='<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">'. get_cat_name($ancestor) .'</span><meta itemprop="position" content="'.strval($item_prop_content).'" /> &gt; </div>';
				}
			}
			$item_prop_content++;
			$str.='<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. get_category_link($cat->term_id). '" itemprop="item"><span itemprop="name">'. $cat-> cat_name . '</span></a><meta itemprop="position" content="'.strval($item_prop_content).'" /></div>';
		} elseif(is_page()){
			$post_name = $post->post_title;
			if($post->post_parent != 0 ){
				$ancestors = array_reverse(get_post_ancestors( $post->ID ));
				foreach($ancestors as $ancestor){
					$item_prop_content++;
					$str.='<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'. get_the_title($ancestor) .'</span></a><meta itemprop="position" content="'.strval($item_prop_content).'" /></div>';
				}
			}
			$item_prop_content++;
			$str.=' <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">'.$post_name.'</span><meta itemprop="position" content="'.strval($item_prop_content).'" /></div>';
		} elseif(is_single()){
			$categories = get_the_category($post->ID);
			$cat = $categories[0];
			$post_name = $post->post_title;
			if($cat->parent != 0){
				$ancestors = array_reverse(get_ancestors( $cat->cat_ID, 'category' ));
				foreach($ancestors as $ancestor){
					$item_prop_content++;
					$str.='<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'. get_cat_name($ancestor). '</span></a><meta itemprop="position" content="'.strval($item_prop_content).'" /> &gt; </div>';
				}
			}
			$item_prop_content++;
			$str.='<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. get_category_link($cat->term_id). '" itemprop="item"><span itemprop="name">'. $cat->cat_name . '</span></a><meta itemprop="position" content="'.strval($item_prop_content).'" /></div> > ';
			$item_prop_content++;
			$str.='<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">'.$post_name.'</span><meta itemprop="position" content="'.strval($item_prop_content).'" /></div>';
		} else{
			$str.='<div>'. wp_title('', false) .'</div>';
		}
	}
	echo $str; 
}

長いですが、それぞれの用途に合わせた調整をしましょう。

そして、テンプレートでこの関数を使用しましょう。

header.php や footer.php で共通パーツとして扱うと便利です。

<?php breadcrumb(); ?>

これだけです。

スタイルシートによってデザインは異なりますが、以下のような表示になります。

「home > カテゴリ名 > 記事名」といった形で表示されます。

まとめ

functions.php 、少し難しそうでしたが、読み解いていくと単純なので、コピペする前に一度読んでみることをおすすめします。

 
>
Web制作
>
【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する