WordPress、パンくずリストを設置

SEO対策にマストな「パンくずリスト」。
ユーザーに現在ページがサイト上のどの位置にあるのかを示すのにも有効です。

WordPressの場合、パンくずリストはプラグインを使って設置する方法が一番簡単かとは思うんですが、プラグインを増やすことでサイトの表示スピードが遅くなったりするのがイヤなんですよね。

なお、WordPressのパンくずリストのプラグインですと「Breadcrumb NavXT」ってのがあります。

Breadcrumb NavXT

上記の理由から僕はパンくずリストをテンプレートファイルに加筆して設置することにしています。

このブログで実際に実装しているパンくずリストのソースコードは以下のものになります。
是非お試しください。

1.functions.phpに以下のものを書く

function breadcrumb(){
  $html = '<ul>';

  $breadcrumb = getBreadcrumbData();
  if(empty($breadcrumb)){
    return '';
  }

  $positionNum = 1;
  foreach($breadcrumb as $item){
    $html .= '<li>';
    $html .= '<a href="' . $item['url'] . '">';
    $html .= $item['name'];
    $html .= '</a>';
    $html .= '</li>';
  }
  $html .= '</ul>';
  return $html;
}

function getBreadcrumbData(){
  $breadcrumbs = array();
  $breadcrumbs[] = array(
    'name' => 'HOME',
    'url' => home_url()
  );

  // トップページの場合
  if(is_front_page() && is_home()){
    return $breadcrumbs;
  }

  // 自身のページ情報を取得
  $pageInfo = get_queried_object();

  // 固定ページの場合
  if(is_page()){
      $breadcrumbs[] = array(
        'name' => $pageInfo->post_title,
        'url' => get_the_permalink()
      );
      return $breadcrumbs;
  }

  // タグページの場合
  if(is_tag()){
    $breadcrumbs[] = array(
      'name' => $pageInfo->name,
      'url' => get_tag_link($pageInfo->term_id)
    );
    return $breadcrumbs;
  }

  // 日付別のページの場合
  if(is_date()){
    $breadcrumbs[] = array(
      'name' => get_query_var('year') . '年' . get_query_var('monthnum') . '月',
      'url' => get_month_link(get_query_var('year'), get_query_var('monthnum'))
    );
    return $breadcrumbs;
  }

  $category = get_the_category();
  if(empty($category)){
    return $breadcrumbs;
  }

  $breadcrumbs[] = array(
    'name' => $category[0]->name,
    'url' => get_category_link($category[0]->term_id)
  );

  // カテゴリページの場合
  if(is_category()){
    return $breadcrumbs;
  }

  // 記事ページの場合
  if(is_single()){
    $breadcrumbs[] = array(
      'name' => $pageInfo->post_title,
      'url' => get_the_permalink()
    );
    return $breadcrumbs;
  }
  return $breadcrumbs;
}

function breadcrumb(){

$html = '<ul>';

$breadcrumb = getBreadcrumbData();

if(empty($breadcrumb)){

return '';

}

$positionNum = 1;

foreach($breadcrumb as $item){

$html .= '<li>';

$html .= '<a href="' . $item['url'] . '">';

$html .= $item['name'];

$html .= '</a>';

$html .= '</li>';

}

$html .= '</ul>';

return $html;

}

function getBreadcrumbData(){

$breadcrumbs = array();

$breadcrumbs[] = array(

'name' => 'HOME',

'url' => home_url()

);

// トップページの場合

if(is_front_page() && is_home()){

return $breadcrumbs;

}

// 自身のページ情報を取得

$pageInfo = get_queried_object();

// 固定ページの場合

if(is_page()){

$breadcrumbs[] = array(

'name' => $pageInfo->post_title,

'url' => get_the_permalink()

);

return $breadcrumbs;

}

// タグページの場合

if(is_tag()){

$breadcrumbs[] = array(

'name' => $pageInfo->name,

'url' => get_tag_link($pageInfo->term_id)

);

return $breadcrumbs;

}

// 日付別のページの場合

if(is_date()){

$breadcrumbs[] = array(

'name' => get_query_var('year') . '年' . get_query_var('monthnum') . '月',

'url' => get_month_link(get_query_var('year'), get_query_var('monthnum'))

);

return $breadcrumbs;

}

$category = get_the_category();

if(empty($category)){

return $breadcrumbs;

}

$breadcrumbs[] = array(

'name' => $category[0]->name,

'url' => get_category_link($category[0]->term_id)

);

// カテゴリページの場合

if(is_category()){

return $breadcrumbs;

}

// 記事ページの場合

if(is_single()){

$breadcrumbs[] = array(

'name' => $pageInfo->post_title,

'url' => get_the_permalink()

);

return $breadcrumbs;

}

return $breadcrumbs;

}

2.設置したい箇所に以下のものを書く

<div class="breadcrumb"><?php echo breadcrumb(); ?></div>

1	<div class="breadcrumb"><?php echo breadcrumb(); ?></div>

3.CSSでデザイン調整

.breadcrumb{
	background-color:#efefef;
    display: flex;
    margin-top: 2px;padding:0 15px;
	}
.breadcrumb ul li{
	color:#888;
	float:left;
	font-size:11px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:lighter;
	}.breadcrumb ul li a{color:#888;}
.breadcrumb ul li:after{content:'　>　';}
.breadcrumb ul li:last-child:after{content:'';}