当サイトには広告が含まれております

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

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

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

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

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

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

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

カスタマイズしたら1/3に縮まりました

結果から先に書くと、

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

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

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

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

カスタマイズ方法 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編集済みの文字列をばらばらにして年と月に分け

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

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

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

[amazon_searchlink search=”WordPress”]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

コメントを残す

記事をざっと見る