パンくずリストをもっとカッコよくする

公開日 2014/10/03 更新日 2014/12/28

STINGERテンプレートは、WordPressサイトのテーマとしてアップロードしただけでほとんど何も手を付けなくても綺麗に表示できるため、お手軽な作りです。
しかしながら、いくつかの設定はそのままだと物足りないので、気になったところは改善します。
それらのうちパンくずリストの表示について、これまで以下に示す記事で改善をしましたが、今回、さらなる改善をしたいと思います。

なお本記事では、上記の修正をすべて含みます。
そのため変更内容として説明されない箇所については、上記記事を由来にしたものであると思われます。

Contents

1 対策したい項目(詳しい説明)
2 変更内容
3 変更暦

対策したい項目(詳しい説明)

今回STINGERに対して、以下の項目をすべて対策したいと思います。

パンくずリストがページ内一覧記事の中で1番目の記事のものになっている問題の対策
一覧された記事ごとのパンくずを表示する改善
どの一覧ページを表示しているかわかるようにアイコンを設定
~~パンくずリストが本文エリアの外側に出ている問題の対策~~ [STINGER5 ver20141011にて対策されました]
(内部処理として)パンくずリストの表示処理が重複して2箇所ある実装のリファクタリング

1. パンくずリストがページ内一覧記事の中で1番目の記事のものになっている問題の対策

対象：日付アーカイブ、カテゴリ、タグ

この問題は、WordPressとSTINGERの両者の動作上の課題に対する対策となります。

WordPressでは、テンプレート処理の先頭にてカテゴリを取得する際(get_the_category)、対象にあるアーカイブ系のページだった場合、1番目の記事に対するカテゴリが取得される動きです。
そしてSTINGERでは、アーカイブ系のページだった場合もパンくずリストの元ネタとして、カテゴリを取得する処理となっています。
そのため、対象にあるページには、1番目の記事に対するカテゴリが表示されています。

しかしながらページ先頭に表示するパンくずリストとして、今表示しているページの一覧形式が分かる情報を示すべきです。
ここでは次のような規則でパンくずリストを作成するように修正します。

対象テンプレート	STINGER5	本記事の修正後
日付アーカイブ	1番目の記事のパンくずリスト	ホーム > {yyyy年mm月}
カテゴリ	1番目の記事のパンくずリスト	ホーム > {カテゴリ名}
タグ	1番目の記事のパンくずリスト	ホーム > {タグ名}

2. 一覧された記事ごとのパンくずを表示する改善

対象：ホーム、日付アーカイブ、タグにある各記事

対象にあるアーカイブ系のページで表示対象にリストアップした各記事について、カテゴリがバラバラだった場合どのカテゴリであるかを把握するために併記してほしい場合があります。

STINGERの場合、直接所属しているカテゴリについてはタグと同じ並びで表示しています。
しかしながらリストアップされた各記事について、Google検索結果と同じ書式で表示したいので、それぞれのパンくずリストの形式で併記するように修正します。

なおカテゴリの一覧ページであれば必ず同じカテゴリだから、わざわざ併記する必要はないのですが、処理の簡単さから全て併記という修正となります。

3. どの一覧ページを表示しているかわかるようにアイコンを設定

対象：ホーム、日付アーカイブ、カテゴリ、タグ

パンくずリストとしてカテゴリ以外の要素を表示するように変更したため、カテゴリとの違いがわかるように表示した要素を表すアイコンを設定します。
なおカテゴリについてのみ2階層以上ありえるので、アイコンを設定すると主張し過ぎる気がしたので、カテゴリのみアイコンは設定しません。

4. パンくずリストが本文エリアの外側に出ている問題の対策

※これはSTINGER5 ver20141011で対策されました。以下はSTINGER5 ver20140902に対する変更点です。
対象：日付アーカイブ、カテゴリ、タグ

もともとのSTINGERの動きでは、対象にあるアーカイブ系のページの場合はパンくずリストは本文エリアの外側(白いパネルの外)に表示するデザインでした。
対して、記事ごとのページを見ると、本文エリア(白いパネル)の中に表示されるデザインとなっています。

どちらかに統一したほうが見やすいため、私はデザインとしてページ先頭に表示するパンくずリストは、本文エリア(<article>タグ内)に表示すべきと思いますので、アーカイブ系の場合のパンくずリスト出力位置を修正します。

5. (内部処理として)パンくずリストの表示処理が重複して2箇所ある実装のリファクタリング

対象：日付アーカイブ、カテゴリ、タグ(archive.php)、および記事ごとのページ(single.php)

STINGERの構成ファイルとして「archive.php」と「single.php」の2箇所に同じようなパンくずリスト作成処理があります。
今回さらに記事一覧ページにある各記事にもカテゴリを表示する処理を加えたいため、３箇所目を作らないといけなくなりました。

さすがにこれ以上の類似する処理は作ることは許されないと思いますので、もともとのSTINGERの部分もあわせて集約してしまいたいと思います。

変更内容

以下のファイルに対する修正をします。修正の詳細は以降順に示します。

breadcrumb.php [新規作成]
archive.php
single.php
itiran.php
style.css

breadcrumb.php (新規作成)

このファイルにパンくずリスト作成処理を集約します。
使い方は呼び出し元から「get_breadcrumb()」という関数を呼ぶだけにしてあり、この関数内で呼び出し元テンプレートの種類に応じパンくずリストを使い分けるという作りになっています。

<!--ぱんくず -->
<?php

if( ! function_exists('get_breadcrumb')){
    
    function get_breadcrumb()
    {
        if( is_single() || in_the_loop() ) {
            $postcats = get_the_category();
            foreach($postcats as $postcat){
                $catid = $postcat->cat_ID;
                disp_category_breadcrumb($catid);
            }
        }
        elseif( is_category() ){
            $catid = get_query_var('cat');
            disp_category_breadcrumb($catid);
        }
        elseif( is_tag() ){
            disp_simple_breadcrumb(single_tag_title('', false), 'fa-tag');
        }
        elseif( is_day() ) {
            disp_simple_breadcrumb(get_the_time('Y年m月d日'), 'fa-calendar-o');
        }
        elseif( is_month() ) {
            disp_simple_breadcrumb(get_the_time('Y年m月'), 'fa-calendar-o');
        }
        elseif( is_year() ) {
            disp_simple_breadcrumb(get_the_time('Y年'), 'fa-calendar-o');
        }
    }

    function disp_category_breadcrumb($catid)
    {
        $catids = array($catid);

        while(!$catid==0) {
            $mycat = get_category($catid);
            $catid = $mycat->parent;
            array_push($catids, $catid);
        }
        array_pop($catids);
        $catids = array_reverse($catids);

        echo '<div id="breadcrumb">';
        
        $homestr = 'ホーム';
        if(in_the_loop()){
            $homestr = '';
        }
        disp_breadcrumb_inner(home_url(), $homestr, 'fa-home', false);

        foreach($catids as $catid){
            disp_breadcrumb_inner(get_category_link($catid), get_cat_name($catid), '', true);
        }
        foreach($catids as $catid){
            echo '</div>';
        }
        echo '</div>'
         . '</div>';
    }

    function disp_simple_breadcrumb($value, $icon_name)
    {
        echo '<div id="breadcrumb">';

        //表示中のURL
        $the_current_url = $_SERVER['REQUEST_URI'];
        
        $homestr = 'ホーム';
        if(in_the_loop()){
            $homestr = '';
        }
        disp_breadcrumb_inner(home_url(), $homestr, 'fa-home', false);
        disp_breadcrumb_inner($the_current_url, $value, $icon_name, true);
        echo   '</div>'
           . '</div>'
         . '</div>';
    }

    function disp_breadcrumb_inner($url, $name, $icon_name, $child_flag)
    {
        $iconstr  = $icon_name !== ''    ? '<i class="fa ' . $icon_name . '"></i>&nbsp;' : '';
        $childstr = $child_flag === true ? 'itemprop="child "' : '';
        $sepstr   = $child_flag === true ? '&nbsp<i class="fa fa-angle-right"></i>&nbsp;'  : '';
        
          echo $sepstr
            . '<div ' . $childstr . 'itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'
              . '<a href="' . $url . '" itemprop="url">'
                . '<span itemprop="title">'
                  . $iconstr
                  . $name
                . '</span>'
              . '</a>';
    }
}

?>
<!--/ ぱんくず -->

<?php

if( ! function_exists('get_breadcrumb')){

function get_breadcrumb()

{

if( is_single() || in_the_loop() ) {

$postcats = get_the_category();

foreach($postcats as $postcat){

$catid = $postcat->cat_ID;

disp_category_breadcrumb($catid);

}

elseif( is_category() ){

$catid = get_query_var('cat');

disp_category_breadcrumb($catid);

}

elseif( is_tag() ){

disp_simple_breadcrumb(single_tag_title('', false), 'fa-tag');

}

elseif( is_day() ) {

disp_simple_breadcrumb(get_the_time('Y年m月d日'), 'fa-calendar-o');

}

elseif( is_month() ) {

disp_simple_breadcrumb(get_the_time('Y年m月'), 'fa-calendar-o');

}

elseif( is_year() ) {

disp_simple_breadcrumb(get_the_time('Y年'), 'fa-calendar-o');

}

function disp_category_breadcrumb($catid)

{

$catids = array($catid);

while(!$catid==0) {

$mycat = get_category($catid);

$catid = $mycat->parent;

array_push($catids, $catid);

}

array_pop($catids);

$catids = array_reverse($catids);

echo '<div id="breadcrumb">';

$homestr = 'ホーム';

if(in_the_loop()){

$homestr = '';

}

disp_breadcrumb_inner(home_url(), $homestr, 'fa-home', false);

foreach($catids as $catid){

disp_breadcrumb_inner(get_category_link($catid), get_cat_name($catid), '', true);

}

foreach($catids as $catid){

echo '</div>';

}

echo '</div>'

. '</div>';

}

function disp_simple_breadcrumb($value, $icon_name)

{

echo '<div id="breadcrumb">';

//表示中のURL

$the_current_url = $_SERVER['REQUEST_URI'];

$homestr = 'ホーム';

if(in_the_loop()){

$homestr = '';

}

disp_breadcrumb_inner(home_url(), $homestr, 'fa-home', false);

disp_breadcrumb_inner($the_current_url, $value, $icon_name, true);

echo '</div>'

. '</div>'

. '</div>';

}

function disp_breadcrumb_inner($url, $name, $icon_name, $child_flag)

{

$iconstr = $icon_name !== '' ? '<i class="fa ' . $icon_name . '"></i> ' : '';

$childstr = $child_flag === true ? 'itemprop="child "' : '';

$sepstr = $child_flag === true ? '&nbsp<i class="fa fa-angle-right"></i> ' : '';

echo $sepstr

. '<div ' . $childstr . 'itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'

. '<a href="' . $url . '" itemprop="url">'

. '<span itemprop="title">'

. $iconstr

. $name

. '</span>'

. '</a>';

}

archive.php

「<!–★ここにあるパンくずリストに関する元々の処理を削除 –>」
で省略した箇所に、元々のパンくずリスト作成処理がありますが、これらは集約により削除します。

<div id="content" class="clearfix">
  <div id="contentInner">
    <!--★ここにあるパンくずリストに関する元々の処理を削除 -->
    <main>
      <article>
        <?php get_template_part('breadcrumb'); ?>
        <?php if(function_exists('get_breadcrumb')){
            get_breadcrumb();
        } ?>
        <section> 
          <!--ループ開始-->

<main>

<?php get_template_part('breadcrumb'); ?>

<?php if(function_exists('get_breadcrumb')){

get_breadcrumb();

} ?>

single.php

<div id="content" class="clearfix">
  <div id="contentInner">
    <main>
      <article>
        <div class="post">
          <!--★ここにあるパンくずリストに関する元々の処理を削除 -->

          <?php get_template_part('breadcrumb'); ?>
          <?php if(function_exists('get_breadcrumb')){
            get_breadcrumb();
          } ?>
          <section> 
            <!--ループ開始 -->

<main>

<?php get_template_part('breadcrumb'); ?>

<?php if(function_exists('get_breadcrumb')){

get_breadcrumb();

} ?>

「<!– …★もともとのカテゴリ表示処理の削除 –>」
は対策したい項目2の、元々のカテゴリ出力箇所ですが、パンくずリストを表示する方式に変更するため削除します。

          <p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
            <!-- <?php the_category(', ') ?> ★もともとのカテゴリ表示処理の削除-->
            <?php the_tags('', ', '); ?>
          </p>

<p class="tagst"><i class="fa fa-tags"></i> -

<?php the_tags('', ', '); ?>

</p>

itiran.php

<div id="topnews">
  <?php get_template_part('breadcrumb'); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <dl class="clearfix">

<?php get_template_part('breadcrumb'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <h3><a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
        </a></h3>
      <div class="blog_info">
        <p>
          <?php if(function_exists('get_breadcrumb')){
            get_breadcrumb();
          } ?>
        </p>
        <p>
          <i class="fa fa-calendar"></i>

<?php the_title(); ?>

</a></h3>

<p>

<?php if(function_exists('get_breadcrumb')){

get_breadcrumb();

} ?>

</p>

<p>

          <?php the_time('Y/m/d') ?>
          &nbsp;<span class="pcone"><i class="fa fa-tags"></i>&nbsp;
          <!-- <?php the_category(', ') ?> ★もともとのカテゴリ表示処理を削除 -->
          <?php the_tags('', ', '); ?>

<?php the_time('Y/m/d') ?>

<?php the_tags('', ', '); ?>

style.css

もともとパンくずリストの箇所のスタイルに「clear: both」が指定されてましたが、今回の修正で期待しない改行が入ってしまったことと、そもそもこの指定を期待している箇所が見つけられなかったことから、削除しています。

div#breadcrumb {
    padding: 0 0 5px;
    margin: 0 0 0px;
    //clear: both;                        //★削除
}

div#breadcrumb {

padding: 0 0 5px;

margin: 0 0 0px;

//clear: both; //★削除

}

変更暦

2014年10月03日 : 初版
2014年10月13日：STINGER5 ver20141011にてパンくずリストの位置が修正されたので、対策項目の4番(パンくずリストが本文エリアの外側に出ている問題の対策)は不要になりました。

Comment

STINGER5のパンくずリストの表示を変更する。 | 縦ぽん!! より:

2015年04月21日 23:07

[…] WordPressにSTINGER5のテーマを適用して使っていたのだが、記事上部にある「パンくずリスト」の表示がどうにも腑に落ちない。どうにかして改善する方法が無いものかと調べてみたところ、とても良い記事（パンくずリストをもっとカッコよくする）が見つかったのでそれを参考にカスタマイズを行ってみた。 […]

返信
- beyond より:
  
  2015年04月22日 22:33
  
  ナイスです！
  
  返信