錦カスタマイズメモ(2) パンくずリストを設置する

Nishikiは無料版であっても専用プラグイン「Nishiki Growing Beauty」をインストールさえしてあれば、プラグインの管理画面から有効化することでパンくずリストだけは利用可能です。…が、そのパンくずリストの表示位置が何故か記事タイトルの後なのです。他のCMSも含めていろんなサイト見てますけど、ほとんどが記事タイトルよりも先に出てきてるので「んん?」ってなっちゃいまして。これを斬新と見るか違和感と見るかは人それぞれだと思うのですが私は完全に後者でした、開発者様すんません…。

で、結局これまたプラグインを使わずに自前で実装することに。

WordPressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

Contents

サイトの階層が深くないならプラグインはいらんのです
実際に書いてみたもの
完成したもの

サイトの階層が深くないならプラグインはいらんのです

一番簡単なのはBreadcrumb NavXTを導入すれば何も考えなくても済むんですが、それはカテゴリの階層がかなり深いとか、階層が浅い場合でも大量にカテゴリやタグがある場合には煩わしくなくて良いのですが、うちのサイトの場合に関してはわざわざプラグインを使う必要性を感じないなと思ったのでした。そこで、function.phpに変数を書いて実装する方法をグーグル先生に尋ねてみていくつかのソースコードを試してみた結果、以下のサイトにあったものが一番しっくり来たのでこちらを実装することにしました。

404 File Not Found

実際に書いてみたもの

function.php

// パンくずリスト
function breadcrumb(){
    global $post;
    $str = '';
    $pNum = 2;
    $str.= '<ul class="breadcrumb">';
    $str.= '<li><a href="'.home_url('/').'">HOME</a></li>';

    /* 通常の投稿ページ  */
    if(is_singular('post')){
      $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.= '<li><a href="'. get_category_link($ancestor).'">'.get_cat_name($ancestor).'</a></li>';
        }
      }
      $str.= '<li><a href="'. get_category_link($cat-> term_id). '">'.$cat->cat_name.'</a></li>';
      $str.= '<li>'.$post->post_title.'</li>';
    }
    /* 固定ページ */
    elseif(is_page()){
      $pNum = 2;
      if($post->post_parent != 0 ){
        $ancestors = array_reverse(get_post_ancestors($post->ID));
        foreach($ancestors as $ancestor){
          $str.= '<li><a href="'. get_permalink($ancestor).'">'.get_the_title($ancestor).'</a></li>';
        }
      }
      $str.= '<li>'. $post->post_title.'</li>';
    }

    /* カテゴリページ */
    elseif(is_category()) {
      $cat = get_queried_object();
      $pNum = 2;
      if($cat->parent != 0){
        $ancestors = array_reverse(get_ancestors($cat->cat_ID, 'category'));
        foreach($ancestors as $ancestor){
          $str.= '<li><a href="'. get_category_link($ancestor) .'">'.get_cat_name($ancestor).'</a></li>';
        }
      }
      $str.= '<li>'.$cat->name.'</li>';
    }

    /* 検索結果ページ */
    elseif(is_search()){
      $str.= '<li>「'.get_search_query().'」で検索した結果</li>';
    }
    /* 404 Not Found ページ */
    elseif(is_404()){
      $str.= '<li>お探しの記事は見つかりませんでした。</li>';
    }

    /* その他のページ */
    else{
      $str.= '<li>'.wp_title('', false).'</li>';
    }
    $str.= '</ul>';
    echo $str;
  }

CSS

パンくずリストとは？作り方とCSSデザインサンプル12選

ウェブサイトやブログに設置する「パンくずリスト」について解説します。パンくずリストとは？から始まり、設置のメリット、設置方法、CSSデザインサンプルなどまで詳しく紹介します。

上記参考サイトののサンプルからコードを拝借して微調整。

.breadcrumb {
  margin-left:0;
  background: transparent;
  padding: 9px 10px;
  overflow: hidden;
  font-size: 88%;
}
.breadcrumb li {
  display:inline;
  list-style: none;
  font-weight: 400;
}
/* >を表示*/
.breadcrumb li:after {
  font-family: "FontAwesome";
  content: "\f105";
  padding: 0 0.5em !important;
  color: #828282;
}
.breadcrumb li:last-child { color: #0BA5C6; }
.breadcrumb li:last-child:after { content: ''; }
.breadcrumb li a {
  text-decoration: none;
  color: #828282 !important;
}
/*家アイコンを出す*/
.breadcrumb li:first-child a:before {
  font-family: "FontAwesome";
  content: '\f015';
  font-weight: normal;
  padding-right: 0.5em !important;
}
.breadcrumb li a:hover { text-decoration: underline; }

Nishikiの子テーマファイルに組み込む

最後に、parts/singular/content.php及びcategory.phpの<div class="page-header container">の次の行に、以下を記述。

<?php breadcrumb(); ?>

完成したもの

かなりの力技でやりましたが、自分がやりたかったことはあらかた出来ました。