【プラグインなし】WordPressでリッチリザルト対応のぱんくずリストを実装する
Webコーディング
2021.03.10
2024.03.04
こんにちは、Web it Worksの伊東です。
今回は、WordPressでリッチリザルトに対応したぱんくずリストを実装する方法をご紹介します。
パンくずリストについての説明は以下の記事をご覧ください!
https://webitworks.jp/web/breadcrumb-seo-rich-result/
本記事の対象者
- 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).'" /> > </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).'" /> > </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(); ?>
これだけです。
スタイルシートによってデザインは異なりますが、以下のような表示になります。
まとめ
functions.php 、少し難しそうでしたが、読み解いていくと単純なので、コピペする前に一度読んでみることをおすすめします。