Lognote

ネット集客に強い整体院サイトを制作

affinger4-breadcrumb-careless

【AFFINGER4】年月別アーカイブのパンくずリストリンクの修正方法

公開日:

AFFINGER4の年月別アーカイブのパンくずリストで明らかにおかしい点を発見。

AFFINGER4だけでなくSTINGER8も共通のコードなので参考にしてください。

下のコードがAFFINGER4、STINGER8のアーカイブのパンくずリスト。

<div id="breadcrumb">
<ol>
  <li><a href="<?php echo home_url(); ?>"><span>HOME</span></a> >  </li>
    <?php if(is_day()): //日別アーカイブ ?>
      <li><a href="<?php echo get_year_link(get_query_var('year')); ?>"><?php echo get_query_var('year'); ?>年</a> > </li>
      <li><a href="<?php echo get_month_link(get_query_var('year'), get_query_var('monthnum')); ?>"><?php echo get_query_var('monthnum'); ?>月</a> > </li>
      <li><?php echo get_query_var('day'); ?>日</li>
    <?php elseif(is_month()): //月別アーカイブ ?>
      <li><a href="<?php echo get_year_link(get_query_var('year')); ?>"><?php echo get_query_var('year'); ?>年</a> > </li>
      <li><?php echo get_query_var('monthnum'); ?>月</li>
    <?php elseif(is_year()): //年別アーカイブ ?>
      <li><?php echo get_query_var('year'); ?>年</li>
    <?php endif; ?>
</ol>
</div>

おかしい点は7行目。

<li><?php echo get_query_var('day'); ?>日</li>

10行目。

<li><?php echo get_query_var('monthnum'); ?>月</li>

さらに12行目。

<li><?php echo get_query_var('year'); ?>年</li>

アンカーリンクに挟まれていません。

私はパンくずリストをボタン風にカスタマイズしていますが、アンカーリンクが外れることで以下のように最後の月の部分だけデザインが反映しなくなります。

affinger4-breadcrumb-careless-01

「現在のページだからリンクがなくてもいいんじゃない?」

という意見もあるかもしれません。

ですが、それだとカテゴリーにはなんでリンクがあるのかということになります。

affinger4-breadcrumb-careless-02

リンクうんぬんではなくこの3行自体必要がなさそうなので、気になる人は削除した方がいいような気もします。

修正方法

修正するには以下のコードを上書きすればOK。

<section id="breadcrumb">
<ol>
  <li><a href="<?php echo home_url(); ?>"><span><?php bloginfo( $show ); ?></span></a></li>
    <?php if(is_day()): //日別アーカイブ ?>
      <li><a href="<?php echo get_year_link(get_query_var('year')); ?>"><?php echo get_query_var('year'); ?>年</a></li>
      <li><a href="<?php echo get_month_link(get_query_var('year'), get_query_var('monthnum')); ?>"><?php echo get_query_var('monthnum'); ?>月</a></li>
      <li><a href="<?php echo get_month_link(get_query_var('year'), get_query_var('day')); ?>"><?php echo get_query_var('day'); ?>日</a></li>
    <?php elseif(is_month()): //月別アーカイブ ?>
      <li><a href="<?php echo get_year_link(get_query_var('year')); ?>"><?php echo get_query_var('year'); ?>年</a></li>
      <li><a href="<?php echo get_month_link(get_query_var('year'), get_query_var('monthnum')); ?>"><?php echo get_query_var('monthnum'); ?>月</a></li>
    <?php elseif(is_year()): //年別アーカイブ ?>
      <li><a href="<?php echo get_year_link(get_query_var('year')); ?>"><?php echo get_query_var('year'); ?>年</a></li>
    <?php endif; ?>
</ol>
</section>

これで、アンカーリンクのCSSが反映してボタン風になります。

最後に、このブログで使っているパンくずのCSSを載せておきます。

CSSはこちらのブログからお借りしました。

矢印にFontAwesomeを使っているので、その点だけご注意ください。

/*--------------------------------------
ぱんくずリスト
--------------------------------------*/
#breadcrumb {
    margin: 20px 5px;
}
#breadcrumb ol {
    padding:0px 0px 2px;
}
#breadcrumb ol li {
    color: #333;
    font-size: 18px;
    display: inline-block;/
}
#breadcrumb ol li a {
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    background: rgba(0,0,0,0.4); 
    padding: 5px;
    border-radius: 5px;
    margin-right: 1px;
    margin-left: -5px;
}
#breadcrumb ol li:after {
    font-family: 'FontAwesome';
    content: '\f105';
    padding: 0 .5em;
}
#breadcrumb ol li:first-child a {
    padding: 5px;
}
#breadcrumb ol li a:hover {
    color: #fff;
	background: rgba(0,0,0,0.8); 
}
#breadcrumb ol li:first-child a:before{
    font-family: FontAwesome;
    content: "\f015";
    color: #fff;
    font-weight: normal;
    font-size: 1.1em;
    margin-right: 2px;
}
#breadcrumb ol li a:before{
    font-family: FontAwesome;
    content: "\f07c";
    color: #fff;
    font-weight: normal;
    font-size: 1.0em;
    margin-right: 2px;
}

以上、「【AFFINGER4】年月別アーカイブのパンくずリストリンクの修正方法」という記事をお届けしました。

-STINGER

この記事のタイトルとURLをコピーする
【AFFINGER4】年月別アーカイブのパンくずリストリンクの修正方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-newentry-toppage-hide-thumbnail

STINGER8の「最近のエントリ」をトップページだけ非表示にする方法

STINGER8のトップページには新着記事一覧が表示されています。 そして、サイドバーには「最近のエントリ」と …

affinger4-difficult-thumbnail

AFFINGER4をアフィリエイター以外にオススメできない理由

WordPressの初心者用テーマの走りとして名高い「STINGERシリーズ」。その第一弾としてSTINGER …

footer-3column-customize-thumbnail

ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!

STINGER7のフッターをもう少し華やかにしたい!そう思ったことはないでしょうか?この記事では、フッタ...

stinger8-pager-css-customize-thumbnail

STINGER8のページネーションを少しおしゃれにするCSSデザイン例

WordPressの記事が増えてくると、ページネーションのデザインも気になってきます。STINGER8のページネー...

stinger8-404-and-search-customize-thumbnail

STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた

意外とカスタマイズで見落としがちな検索結果ページと404エラーページ。 この二つのページはあまり人の目に触れる …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい