ウィジェットのアーカイブが長すぎるので、短くカスタマイズしてみた

このblogの構成についてSEO担当者よりいろいろこんこんとお説教をいただきました。表示すべきものが表示されていない、と。目立つところにリンクなどを貼りたいと思ったのですが、左ブロックには今時点でもかなりたくさんの要素が詰め込まれていてどんどんページが長くなってしまいます。ということを考えていたら年月別のアーカイブが1月につき1行を消費しているので、そこをカスタマイズすれば全体も短くなるんじゃないかなと思ってカスタマイズしてみました。

修正前のアーカイブ表示はこんなに長かった！

ということでカスタマイズ前のアーカイブ表示は

こんな感じでした。最初は特に気になりませんでしたが、このblogも始めてから19ヶ月が経過して、その結果アーカイブの表示も19行になっています！

このblogはTwentyFourteenの子テーマなのですが、念のためにTwentyFifteenで表示してみたら、

文字が大きいせいかもっと縦に伸びてしまいました(^_^;。

最初のうちはいいけど長いこと続けている場合、アーカイブの表示はもちょっと短くしたいですよね。

カスタマイズしたら１/３に縮まりました

結果から先に書くと、

こんな感じに縮めてみました(^^)/。年を１つにして月ごとの改行も無くしたので３行で１年分が表示できる感じです。

TwentyFifteenでも同じようにしてみたら

やはりぐっと縮まりました(^^)/

並べて見るとだいたい１/３ぐらいに縮まっています。

カスタマイズ方法 functions.php にこれを書くだけ

カスタマイズ方法ですが、ウィジェットを表示するときに通るフィルターを使いました。

get_archives_link

これを利用して使っている子テーマのfunctions.phpに以下のコードを追加します

/* ウィジェットで表示されるアーカイブを短く表示させます */
function my_archives_link($link_html){
    // 現在の年月
    $currentMonth = date('n');
    $currentYear = date('Y');
    // アーカイブの年月HTMLを編集
    $ym = explode('年', $link_html);
    $monthArray = explode('月', $ym[1]);
    $month = $monthArray[0];
    $year = intval(strip_tags($ym[0]));
    $linkMonth = substr('0'.$month, -2);
    
    $url = site_url('/').$year.'/'.$linkMonth.'/';
    $linkString = '%s<a href="'.$url.'" style="white-space: nowrap;">%s</a>'.
    
    $linkYear = '';
    $yearHtml = '<span style="font-weight:bold;">%s</span><br />';
    if (($currentMonth == $month) AND ($currentYear == $year)){
        $linkYear = sprintf($yearHtml, $year);
    } else {
        if ((intval($month) == 12) AND ($currentYear != $year)){
            $linkYear = '<br />'.sprintf($yearHtml, $year);
        }
    }

    return sprintf($linkString, $linkYear, $ym[1]);
}
add_filter('get_archives_link', 'my_archives_link');

概要は

add_filter('get_archives_link', 'my_archives_link');

というところでアーカイブを表示するときにそれぞれ編集済みのリンク($link_html)を my_archives_link で編集するようにしています。

my_archives_link　では、受け取ったHTML編集済みの文字列をばらばらにして年と月に分けて

もし年月が本日の年月と一致したら　年を表示して改行して月のリンク(リンクは年月)を表示する
もし月が１２で年が今年でなければ　改行して年を表示して改行して月のリンク(リンクは年月)を表示する
それ以外だったら　月のリンク(リンクは年月)を表示する

という感じのコードになっています。

これで左ブロックに空きがだいぶできました(^^)/。よろしければお使いの子テーマで試してみてください♪

[amazon_searchlink search=”WordPress”]