芝生やDIY等のライフハックやWeb制作情報を発信するメディア

【WordPress】サイドバーの月別・年別アーカイブをcssとjsでスッキリさせる方法

WordPress2016年11月3日

WordPressでサイドバーに「月別アーカイブ」や「年別アーカイブ」をよく表示しますが、ブログの歴史が長くなると、単純にこれを縦方向のリストで表示している場合、とんでもなく縦長になったりします。基本的に月別や年別のアーカイブはユーザーにとってニーズが高いものではないため、アーカイブリストのために縦幅を陣取るのはサイトとして非常にもったいないです。

そこで、以下のようなUIにすることで月別アーカイブリストの省スペース化を図りましたので、手順をご紹介させていただきます。

今年度の年別と月別アーカイブのみを初期表示し、[さらに見る]ボタンで昨年以前のアーカイブが表示されます。月別アーカイブは4カラムのボタンUIにしました。
ただリストを羅列するよりも情報が整理され、全てのアーカイブへの導線を損なうことなく省スペース化を実現しています。

まだまだWeb屋の芝生DIYは歴史が浅いので特に困っていませんが、歴史あるブログほど効果は高いのではないでしょうか。

実装手順

  1. サイドバーに月別アーカイブのphpを追加
  2. cssで昨年以前のアーカイブを非表示に
  3. jsで「さらに見る」機能を追加

①サイドバーに月別アーカイブのphpを追加

サイドバーを実装しているphpファイルの該当箇所に、年別および月別のアーカイブリストを表示するphpを記述します。

<dl class="archive">
<?php
    $htmlMonthly = wp_get_archives('type=monthly&format=custom&after=|&echo=0');
    $arr = explode("|", $htmlMonthly);
    $lastyear = substr(trim(strip_tags($arr[0])), 0, 4);
    $firstyear = substr(trim(strip_tags($arr[count($arr)-2])), 0, 4);
    $cnt = 0;
    $wrapper = null;
    for($year=$lastyear;$year>=$firstyear;$year--){
        $wrapper .= "<dt><a href='"."/{$year}/'>{$year}年</a></dt>n<dd>n<ul>n";
        $item = '';
        for($month=12;$month>0;$month--){
            if(!preg_match("/年".$month."月/u", $arr[$cnt])){}
            else{
                $item = "<li>".preg_replace("/d{4}年/u", "", trim($arr[$cnt]))."</li>n" . $item;
                $cnt++;
            }
        }
        $wrapper .= $item . "</ul>n</dd>n";
    }
    echo $wrapper;
?>
</dl>
<p class="more2"><a href="#">さらに見る</a></p>
  • ※個人的に定義リストが望ましいのでdlでマークアップしました
これで、以下のようなhtmlが出力されるようになります。

<dl class="archive">
<dt><a href="/2016/">2016年</a></dt>
<dd>
<ul>
<li><a href='/2016/01/'>1月</a></li>
<li><a href='/2016/02/'>2月</a></li>
<li><a href='/2016/03/'>3月</a></li>
<li><a href='/2016/04/'>4月</a></li>
<li><a href='/2016/05/'>5月</a></li>
<li><a href='/2016/06/'>6月</a></li>
～省略～
</ul>
</dd>
<dt><a href="/2015/">2015年</a></dt>
<dd>
<ul>
<li><a href='/2015/01/'>1月</a></li>
<li><a href='/2015/02/'>2月</a></li>
<li><a href='/2015/03/'>3月</a></li>
<li><a href='/2015/04/'>4月</a></li>
<li><a href='/2015/05/'>5月</a></li>
<li><a href='/2015/06/'>6月</a></li>
～省略～
</ul>
</dd>
</dl>
<p class="more2"><a href="#">さらに見る</a></p>

②cssで昨年以前のアーカイブを非表示に

最低限、以下のスタイルは必要になります。
dl.archive内にある2個目以降のdtとddはdisplay:noneで非表示しておきます。

dl.archive　dt:nth-child(n + 2),
dl.archive　dd:nth-child(n + 3){
	display: none;
}

サイトデザインやテーマに応じて適切なスタイルは異なりますが、参考としてWeb屋の芝生DIYで使用しているcssを貼り付けておきます。

dl.archive dt{
    border-top:1px dotted #ccc;
    margin-top:10px;
    padding-top:10px
}

dl.archive dt a{
    display:inline-block;
    margin-bottom:10px;
    padding:0 0 0 14px;
    background:url("任意のアイコン画像のパス") no-repeat 0 0.65em;
    -webkit-background-size:5px 8px;
    background-size:5px 8px;
}

dl.archive dt:first-child{
    border-top:none;
    margin-top:0;
    padding-top:0;
}

dl.archive dd{
    margin-bottom:10px;
}

dl.archive dd ul:before,
dl.archive dd ul:after{
    content:"";display:table;
}


dl.archive dd ul:after{
    clear:both;
}

dl.archive dd ul li{
    float:left;
    width:22.4444444%;
    margin:0 10px 10px 0;
}

dl.archive dd ul li a{
    display:block;
    padding:1px 4px;
    text-align:center;
    background:#fff;
    border-radius:4px;
}

dl.archive dd ul li:nth-child(4n){
    margin-right:0
}

dl.archive dd ul li.current a{
    background:#006599;
    color:#fff;
}

dl.archive dd ul li a:hover,
dl.archive dd ul li a:focus{
    text-decoration:none;
}

dl.archive dt:nth-child(n+2),
dl.archive dd:nth-child(n+3){
    display:none;
}

③jsで「さらに見る」機能を追加

本機能は、前述のcssとjsの合わせ技で完成します。サイドバーの「最新の記事」と「人気の記事」にトグルボタンを実装する方法の記事でご紹介したjsを流用し、「さらに見る」ボタンをクリックすると昨年以降のアーカイブが表示されるようにします。

(function () {

$(function(){

    $('p.more2 a').on('click',function(event){
        event.preventDefault();
        var $className = 'open';
        var $moreContentsTitle = $(this).parent().prev().find("dt:gt(0)");
        var $moreContentsArticle = $(this).parent().prev().find("dd:gt(0)");
        if($(this).hasClass($className)){
            $(this).removeClass($className);
            $(this).text("さらに見る");
            $moreContentsTitle.stop().slideUp('fast');
            $moreContentsArticle.stop().slideUp('fast');
        }else{
            $(this).addClass($className);
            $(this).text("閉じる");
            $moreContentsTitle.stop().slideDown('fast');
            $moreContentsArticle.stop().slideDown('fast');
        }
    });
});

})(jQuery);
  • ※jQueryを読み込んでいる場合のスクリプトとなります
これで、昨年までのアーカイブリストは隠され、今年度の年別+月別アーカイブのみが初期表示されることになるため、かなりサイドバーがスッキリします。ブログを長期間継続しても、極端に肥大化することもありません。
全てのアーカイブを見るには「さらに見る」でワンクリックが必要にはなりますが、最低限の導線は残されているため、UIとしてはこれで十分と言えるでしょう。

そもそもですが、昨年以前のアーカイブはそうそうユーザーが期待しているものでもありません。

まとめ

今回ご紹介させていただい内容は若干実装難易度は高いかもしれませんが、UI一つ改善するだけでサイトのクオリティは大きく変わりますので、ぜひ上手にcssを設定してみてください。
一度実装してしまえば、リニューアルでもしない限りメンテナンスが発生することもないと思います。

セレクトボックスで実装する方法もありますが、あまりオススメしません。メニューを表示するとどうしても縦に表示せざるを得ないため、アーカイブ数が多くなればなるほど使いにくいものになり、ユーザビリティを損なうことになります。

ご紹介した方法であればサイドバーのコンテンツ肥大化を防ぐことができると思いますので、ぜひご活用いただければ幸いです。

「WordPress」の他の記事を読む

ページの先頭に戻る