読書とプログラミングを中心とした覚書ブログ

読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。

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

 公開日     更新日  2014/12/28

     

enter-452718-2

 

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

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

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

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

  1. パンくずリストがページ内一覧記事の中で1番目の記事のものになっている問題の対策
  2. 一覧された記事ごとのパンくずを表示する改善
  3. どの一覧ページを表示しているかわかるようにアイコンを設定
  4. パンくずリストが本文エリアの外側に出ている問題の対策 [STINGER5 ver20141011にて対策されました]
  5. (内部処理として)パンくずリストの表示処理が重複して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箇所に同じようなパンくずリスト作成処理があります。
今回さらに記事一覧ページにある各記事にもカテゴリを表示する処理を加えたいため、3箇所目を作らないといけなくなりました。

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

変更内容

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

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

breadcrumb.php  (新規作成)

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

archive.php

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

single.php

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

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

 itiran.php

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

style.css

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

 変更暦

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

レスポンシブ広告

Comment

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

STINGER5のパンくずリストの表示を変更する。 | 縦ぽん!! へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

  関連記事

パンくずリストの最後の”>”を削除するカスタマイズ

STINGERテンプレートだと、パンくずリスト(ブレッドクラム / トピックパス …

記事一覧に表示する各記事の抜粋を綺麗に整形表示する

STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …

広告フロートの動きがおかしい問題の回避方法

WordPressテーマSTINGERの サイドバーにある「スクロール広告用」は …

「続きを読む」ボタンのデザインをカスタマイズ

WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。 巷で …

スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)

 はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …

記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる

WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …

スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)

  WordPressのSTINGERテンプレートに対して、記事タイト …

WordPressテーマをSTINGER5にバージョンアップ

STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …

CSSファイル数を減らしてページ表示時間を最適化

STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …

記事の幅を広げるカスタマイズ(V5用)

以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …

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