パンくずリストをもっとカッコよくする
公開日 更新日 2014/12/28
STINGERテンプレートは、WordPressサイトのテーマとしてアップロードしただけでほとんど何も手を付けなくても綺麗に表示できるため、お手軽な作りです。
しかしながら、いくつかの設定はそのままだと物足りないので、気になったところは改善します。
それらのうちパンくずリストの表示について、これまで以下に示す記事で改善をしましたが、今回、さらなる改善をしたいと思います。
なお本記事では、上記の修正をすべて含みます。
そのため変更内容として説明されない箇所については、上記記事を由来にしたものであると思われます。
Contents
対策したい項目(詳しい説明)
今回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箇所に同じようなパンくずリスト作成処理があります。
今回さらに記事一覧ページにある各記事にもカテゴリを表示する処理を加えたいため、3箇所目を作らないといけなくなりました。
さすがにこれ以上の類似する処理は作ることは許されないと思いますので、もともとのSTINGERの部分もあわせて集約してしまいたいと思います。
変更内容
以下のファイルに対する修正をします。修正の詳細は以降順に示します。
- breadcrumb.php [新規作成]
- archive.php
- single.php
- itiran.php
- style.css
このファイルにパンくずリスト作成処理を集約します。
使い方は呼び出し元から「get_breadcrumb()」という関数を呼ぶだけにしてあり、この関数内で呼び出し元テンプレートの種類に応じパンくずリストを使い分けるという作りになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!--ぱんくず --> <?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 ? ' <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
「<!–★ここにあるパンくずリストに関する元々の処理を削除 –>」
で省略した箇所に、元々のパンくずリスト作成処理がありますが、これらは集約により削除します。
1 2 3 4 5 6 7 8 9 10 11 |
<div id="content" class="clearfix"> <div id="contentInner"> <!--★ここにあるパンくずリストに関する元々の処理を削除 --> <main> <article> <?php get_template_part('breadcrumb'); ?> <?php if(function_exists('get_breadcrumb')){ get_breadcrumb(); } ?> <section> <!--ループ開始--> |
single.php
「<!–★ここにあるパンくずリストに関する元々の処理を削除 –>」
で省略した箇所に、元々のパンくずリスト作成処理がありますが、これらは集約により削除します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> <!--ループ開始 --> |
「<!– …★もともとのカテゴリ表示処理の削除 –>」
は対策したい項目2の、元々のカテゴリ出力箇所ですが、パンくずリストを表示する方式に変更するため削除します。
1 2 3 4 |
<p class="tagst"><i class="fa fa-tags"></i> - <!-- <?php the_category(', ') ?> ★もともとのカテゴリ表示処理の削除--> <?php the_tags('', ', '); ?> </p> |
itiran.php
1 2 3 4 |
<div id="topnews"> <?php get_template_part('breadcrumb'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <dl class="clearfix"> |
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
「<!– …★もともとのカテゴリ表示処理の削除 –>」
は対策したい項目2の、元々のカテゴリ出力箇所ですが、パンくずリストを表示する方式に変更するため削除します。
1 2 3 4 |
<?php the_time('Y/m/d') ?> <span class="pcone"><i class="fa fa-tags"></i> <!-- <?php the_category(', ') ?> ★もともとのカテゴリ表示処理を削除 --> <?php the_tags('', ', '); ?> |
style.css
もともとパンくずリストの箇所のスタイルに「clear: both」が指定されてましたが、今回の修正で期待しない改行が入ってしまったことと、そもそもこの指定を期待している箇所が見つけられなかったことから、削除しています。
1 2 3 4 5 |
div#breadcrumb { padding: 0 0 5px; margin: 0 0 0px; //clear: both; //★削除 } |
変更暦
- 2014年10月03日 : 初版
- 2014年10月13日:STINGER5 ver20141011にてパンくずリストの位置が修正されたので、対策項目の4番(パンくずリストが本文エリアの外側に出ている問題の対策)は不要になりました。
レスポンシブ広告
関連記事
-
WordPressテーマをSTINGER5にバージョンアップ
STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …
-
広告フロートの動きがおかしい問題の回避方法
WordPressテーマSTINGERの サイドバーにある「スクロール広告用」は …
-
記事一覧に表示する各記事の抜粋を綺麗に整形表示する
STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …
-
スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)
WordPressのSTINGERテンプレートに対して、記事タイト …
-
「続きを読む」ボタンのデザインをカスタマイズ
WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。 巷で …
-
CSSファイル数を減らしてページ表示時間を最適化
STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …
-
記事の幅を広げるカスタマイズ(V5用)
以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …
-
記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる
WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …
-
記事一覧に表示する各記事の概要を「続きを読む」タグまでにする
Information この記事はSTINGER v3用のカスタマイズ方法です。 …
-
スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)
はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …
- PREV
- 記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる
- NEXT
- JUnit速効レシピ
Comment
[…] WordPressにSTINGER5のテーマを適用して使っていたのだが、記事上部にある「パンくずリスト」の表示がどうにも腑に落ちない。 どうにかして改善する方法が無いものかと調べてみたところ、とても良い記事(パンくずリストをもっとカッコよくする)が見つかったのでそれを参考にカスタマイズを行ってみた。 […]
ナイスです!