ウィジェットで表示される月別アーカイブを年別、年まとめ表示に変更する方法

ウィジェットで表示される月別アーカイブを年別、年まとめ表示に変更する方法

この記事ではサイドバーやフッターの月別アーカイブ表示を変更する方法をまとめています。
前半は改めて機能の説明、技術的な部分だけが必要な方は読み飛ばしてここからお読みください。
詳しくはこんな感じ…

ウィジェットとは

WordPressでは、ウィジェットと言ってページの表示をカスタマイズできる機能があります。
ウィジェットを使うと、ドラッグ&ドロップでブロックを組み合わせるようにメニューの見せ方を変えることができます。

サイドバーの表示を変更するときなど、視覚的に変更ができてページのイメージがつきやすいのが特徴です。

外観 ⇒ ウィジェットから進んだ先ですね。

アーカイブ機能とは

で、そんなウィジェットの項目の一つに、記事のアーカイブ機能があります。

こんな感じで “何年の何月に投稿した記事” をひとまとめにしてアーカイブしてくれる機能をメニューに追加できます。
使い勝手のいい機能ではあるのですが、長年運用し、記事がたまってくると

このようにアーカイブエリアがすごく長くなってしまい、UIとしても見た目としてもあまり綺麗とは言えなくなってしまいます。
一応ダッシュボードのウィジェットエリアで、ドロップダウンリストでの表示に切り替えることもできるのですが、

あんまり綺麗じゃないですよね。
というかかっこ悪い。

なのでここをもっとシンプルに表示できるようにする方法です。

アーカイブを整える

ここでは2つの方法で年月表示を綺麗に整えてる方法を紹介します。
どちらの方法もコピペで導入できますので、サイトに合わせて使用してみてください。

年別表示に切り替える

まずはシンプルに、年だけで表示する方法です。

イメージとしてはこんな感じ。
形は別途cssで整えてください。

<?php
add_filter( 'widget_archives_args','my_archives');
function my_archives( $content ){
	$content['type'] 	= 'yearly';
	$content['after'] 	= '<span class="year-name">年</span>'; //200Xの後に"年"を表示
	$content['limit'] 	= 5; //n年分を表示、この場合5年
	return $content;
}
?>

$content[‘type’] → ここで年別表示になるように指定しています。yearlyで年別表示、monthlyで月別表示になります。
$content[‘after’] → 上記の方法でアーカイブリストを年別表示に切り替えた場合、そのままだと2018、2017と数字だけの表示になりますので、afterで”年”を追加してやります。
$content[‘limit’] → リストを何行表示するかを決めます。3年分なら3、5年分なら5となります。

以上をfunctions.phpに書き加えてください。

ページを確認していただくと、アーカイブの表示が年月に変わっているかと思います。

投稿月を年ごとにまとめて表示にする

こちらの方がユーザーにとっては親切かもしれません。
あーでもないこーでもないと色々試していたのですが、こちらで紹介されている内容が一番わかりやすく使い勝手が良かったです。
ウィジェットに年別アーカイブを作成する事でカスタマイズ性も高くなります。すごい。

イメージとしてはこんな感じです。
(こちらも見た目はcssで調整が必要です)

<?php

class Widget_Archives2 extends WP_Widget {
 
    function __construct() {
        $widget_ops = array('classname' => 'widget_archives2', 'description' => 'サイトの投稿の年別/月別アーカイブ' );
        parent::__construct('archives2', 'アーカイブ (年別/月別)', $widget_ops);
    }
 
    function widget( $args, $instance ) {
        extract($args);
        $c = ! empty( $instance['count'] ) ? '1' : '0';
        $title = apply_filters('widget_title', empty($instance['title']) ? __('Archives') : $instance['title'], $instance, $this->id_base);
 
        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
 
        $this->get_archives(apply_filters('widget_archives2_args', array('show_post_count' => $c)));
 
        echo $after_widget;
    }
 
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $new_instance = wp_parse_args( (array) $new_instance, array( 'title' => '', 'count' => 0) );
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['count'] = $new_instance['count'] ? 1 : 0;
 
        return $instance;
    }
 
    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'count' => 0) );
        $title = strip_tags($instance['title']);
        $count = $instance['count'] ? 'checked="checked"' : '';
?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
        <p>
            <input class="checkbox" type="checkbox" <?php echo $count; ?> id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" />
            <label for="<?php echo $this->get_field_id('count'); ?>"><?php _e('Show post counts'); ?></label>
        </p>
<?php
    }
 
    function get_archives($args = '') {
 
        $defaults = array(
            'limit' => '',
            'before' => '',
            'after' => '',
            'show_post_count' => false,
            'echo' => 1,
            'order' => 'DESC',
        );
 
        $r = wp_parse_args( $args, $defaults );
        extract( $r, EXTR_SKIP );
 
        $arcresults = $this->get_monthly_archives_data($r);
 
        $output = $this->build_html($r, $arcresults);
 
        if ( $echo )
            echo $output;
        else
            return $output;
    }
 
    function get_monthly_archives_data($args) {
        global $wpdb;
        extract( $args, EXTR_SKIP );
 
        if ( '' != $limit ) {
            $limit = absint($limit);
            $limit = ' LIMIT '.$limit;
        }
 
        $order = strtoupper( $order );
        if ( $order !== 'ASC' )
            $order = 'DESC';
 
        //filters
        $where = apply_filters( 'getarchives2_where', "WHERE post_type = 'post' AND post_status = 'publish'", $args );
        $join = apply_filters( 'getarchives2_join', '', $args );
 
        $query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date $order $limit";
        $key = md5($query);
        $cache = wp_cache_get( 'get_archives2' , 'general');
        if ( !isset( $cache[ $key ] ) ) {
            $arcresults = $wpdb->get_results($query);
            $cache[ $key ] = $arcresults;
            wp_cache_set( 'get_archives2', $cache, 'general' );
        } else {
            $arcresults = $cache[ $key ];
        }
 
        return $arcresults;
    }
 
    function build_html($args, $arcresults) {
        extract( $args, EXTR_SKIP );
 
        if ( !$arcresults )
            return '';
 
        $cur_year = -1;
        $afterafter = $after;
 
        $output = '<ul class="yearArchiveList">'; // (1)
        foreach ( (array) $arcresults as $arcresult ) {
            if ( $cur_year != $arcresult->year ) {
                if ( $cur_year > 0 ) {
                    $output .= "</ul>"; // (/3)
                    $output .= "</li>\n"; // (/2)
                }
                $output .= '<li><span class="year">'  . $arcresult->year . "年</span>"; // (2)
                $output .= '<ul class="eachYear">'; // (3)
 
                $cur_year = $arcresult->year;
            }
 
            if ( $show_post_count )
                $after = " ({$arcresult->posts}){$afterafter}";
 
            $output .= '<li class="singleList">' . $this->get_archives_link($arcresult->year, $arcresult->month, $before, $after) . "</li>\n";
        }
        $output .= "</ul>"; // (/3)
        $output .= "</li>\n"; // (/2)
        $output .= "</ul>\n"; // (/1)
 
        return $output;
    }
 
    function get_archives_link($year, $month, $before = '', $after = '') {
        global $wp_locale;
 
        $url = get_month_link($year, $month);
        $url = esc_url($url);
 
        $text = $wp_locale->get_month($month);
        $text = wptexturize($text);
 
        $title_text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($month), $year);
        $title_text = esc_attr($title_text);
 
        $link_html = "$before<a href='$url' title='$title_text'>$text</a>$after";
        $link_html = apply_filters( 'get_archives2_link', $link_html );
 
        return $link_html;
    }
}

register_widget("Widget_Archives2");

?>

こちらをfunctions.phpに追加する事で年別/月別のアーカイブがウィジェットに追加されます。

後はこれをサイドバーなりフッターなりにドラッグ&ドロップすれば年でまとめられたアーカイブリストが表示されます。
便利ですね!

まとめ

これでだいぶサイドバーがすっきりしました。
どちらの方法を取ってもいいと思いますが、後者の方法がおすすめです。
自身のサイトと相談して追加してみてください。

functions.phpを触ることになりますので、必ずバックアップを取ってから作業してくださいね!

機能追加カテゴリの最新記事