HOME
Tech
パンくずリストをAMP対応のページで自作
カテゴリー
Tech

パンくずリストをAMP対応のページで自作

公開日:2020年8月19日
最終更新日:2020年8月19日

English page is here

パンくずリストは便利ですよね。便利なだけでなく、構造化データの要素にもなっているようです。今回、プラグインを使わずにAMP対応のページでパンくずリストを自作しました。

パンくずリストのプラグインがエラー

私はサイトをAMP化しています。wordpressをAMP化中に送信ボタンのエラー

パンくずリストを作成しようとプラグインを試したのですが、何故かうまくいきません。AMPのエラーが起きてしまいます。一体何故……

コードの自作

プラグインが使えないのであれば仕方ありません。自作することにしました。色々見たところ、ウィンドミル様のページが一番参考になりました。

ウィンドミル様のコードページ

下記は変更点です。

  • data-vocabulary.orgの参照をschema.orgに変更
    • AMPの構造化データでshema.orgを参照するようエラーがあったため
  • 上記に伴い構造化データの記述を変更
  • 現在のページが表示されるように変更

完成したコード

このコードを子テーマのfunctionsに書きます。

<?php
function breadcrumb(){
global $post;
    $str ='';
    if(!is_home()&&!is_admin()){
		$str.= '<div itemscope itemtype="http://schema.org/BreadcrumbList">';
		$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
		$str.= '<meta itemprop="position" content="1">';
     	$str.= '<a itemprop="item" href="'. home_url() .'"><span itemprop="name">HOME</span></a> &gt;&#160;</div>';	
        if(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
				$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
				$str.= '<meta itemprop="position" content="2">';
      			$str.= '<a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'. get_the_title($ancestor) .'</span></a> &gt;&#160;</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 itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
					$str.= '<meta itemprop="position" content="2">';
      				$str.= '<a href="'. get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'. get_cat_name($ancestor). '</span></a>→</div>';
                }
            }
			$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
			$str.= '<meta itemprop="position" content="2">';
      		$str.= '<a href="'. get_category_link($cat -> term_id). '" itemprop="item"><span itemprop="name">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';		
        }
        $str.='<div>'. wp_title('', false) .'</div>';
    }
    echo $str;
}
?>

さらに、下のコードをパンくずリストを表示させたいページに書いて下さい。AdInserterというプラグインを使っている場合、blockに書き写せばよいです。

<?php breadcrumb(); ?>

お試し下さい。