<!-- WordPressのウィジット「アーカイブ」で出力されるHTMLの例 -->
<div id="archives-2" class="widget widget_archive">
<h4 class="widget-title">月別アーカイブ</h4>
<ul>
    <li><a href="https://example.com/2018/02/">2018年2月</a> (1)</li>
    <li><a href="https://example.com/2018/01/">2018年1月</a> (2)</li>
    <li><a href="https://example.com/2017/12/">2017年12月</a> (3)</li>
    <li><a href="https://example.com/2017/11/">2017年11月</a> (5)</li>
    <li><a href="https://example.com/2017/10/">2017年10月</a> (7)</li>
    <li><a href="https://example.com/2017/09/">2017年9月</a> (8)</li>
    <li><!-- 過去記事がある限り、以下同様にズラズラ〜っと --></li>
</ul>
</div>

<!-- 目指すHTMLのイメージ -->
<div class="widget">
<h4 class="monthly-archive-title">月別アーカイブ</h4>

<!-- wp_get_archives()関数を使って、実装していく部分 -->
<!-- ここから -->
<ul class="archive-list">
  <li class="year current acv_open">2018
    <ul class="month-archive-list">
      <li><a href="https://cosybench.local/2018/02/">2018年2月</a> (1)</li>
      <li><a href="https://cosybench.local/2018/01/">2018年1月</a> (2)</li>
    </ul>
  </li>
  <li class="year">2017
    <ul class="month-archive-list">
      <li><a href="https://cosybench.local/2017/12/">2017年12月</a> (3)</li>
      <li><a href="https://cosybench.local/2017/11/">2017年11月</a> (5)</li>
      <li><a href="https://cosybench.local/2017/10/">2017年10月</a> (7)</li>
      <li><a href="https://cosybench.local/2017/09/">2017年9月</a> (8)</li>
      <li><a href="https://cosybench.local/2017/08/">2017年8月</a> (8)</li>
      <!-- 以下、月ごとに同様 -->
    </ul>
  </li>
  <!-- 以下、年ごとに同様 -->
</ul>
<!-- ここまで -->

</div>

<!-- footer.phpに記述したコード -->
<!-- Monthly Archive -->
<div class="widget">
    <h4 class="monthly-archive-title">月別アーカイブ</h4>

    <?php
        /*== 解説（1） 参照 ==*/
        // 月別アーカイブリストを取得する
        $monthly_archives = wp_get_archives(
            $args = array(
                'type' => 'monthly',
                'show_post_count' => true,
                'before' => '',
                'after' => ',',
                'echo' => 0,
            ));
        $monthly_archives = explode(',', $monthly_archives); //配列化
        array_pop($monthly_archives); //末尾の空白要素を削除

        // 年別アーカイブリストを取得する
        $yearly_archives = wp_get_archives(
            $args = array(
                'type' => 'yearly',
                'format' => 'custom',
                'before' => '',
                'after' => ',',
                'echo' => 0,
            ));
        $yearly_archives = explode(',', $yearly_archives); //配列化
        array_pop($yearly_archives); //末尾の空白要素を削除

        /*== 解説（2） 参照 ==*/
        $this_year = (string)idate('Y'); //現在の年を、4桁の文字列で取得

        // HTMLとして出力するコードの記述部分
        // ここから
        $out = '<ul class="archive-list">';

        foreach ($yearly_archives as $year) {
            $the_year = substr($year,-8,4); // 「年」を表す部分のみ抽出する

            if ($the_year === $this_year):　// 今年だったら
                $out .= '<li class="year acv_open current">' . $the_year;
                $out .= '<ul class="month-archive-list">';
            else: // それ以外の年の場合
                $out .= '<li class="year">' . $the_year;
                $out .= '<ul class="month-archive-list">';
            endif;

                /*== 解説（3） 参照 ==*/
                foreach ($monthly_archives as $month) {
                    //月毎アーカイブの文字列中に、ターゲットとなる年が含まれているか
                    $pos = strpos($month, $the_year);

                    // 含まれている限り、li要素を出力
                    if ($pos !== false): // 該当する文字列が含まれているときは、その位置が返ってくるので、!==falseという判定文を使用
                        $out .= $month;
                    endif;
                }
            $out .= '</ul>'; // 閉じる <ul class="month-archive-list">
        }
        $out .= '</li>'; // 閉じる <li class="year"> （ここ落としてしまっていたので追記しました！: 2020/03/01）
        $out .= '</ul>'; // 閉じる <ul class="archive-list">
        // ここまで

        // HTMLの出力
        echo $out;
    ?>

</div>
<!-- /Monthly Archive -->

<!-- $yearの中身の例 -->
<a href="http://example.com/2017/">2017</a>

<!-- $monthly_archivesの中身 -->
array(n) {
[0] ="<li><a href="https://example.com/2018/02/">2018年2月</a></li>"
[1] ="<li><a href="https://example.com/2018/01/">2018年1月</a></li>"
[2] ="<li><a href="https://example.com/2017/12/">2017年12月</a></li>"
[3] ="<li><a href="https://example.com/2017/11/">2017年11月</a></li>"
<!-- 以下、略 -->
}

/* acv_openクラスをもたないリスト項目の子リスト（month-archive-list）は、デフォルト非表示に */
.archive-list > li:not(.acv_open) > ul {
    display: none;
}

/* 年別アーカイブリストのアイコン設定 */
.archive-list > li.acv_open::before { /* リストが開かれているとき */
    font-family: 'fontello';
    content: '\e815'; /* -マーク */
    margin-right: .5em;
}

.archive-list > li:not(.acv_open)::before { /* リストが閉じられているとき */
    font-family: 'fontello';
    content: '\e814'; /* +マーク */
    margin-right: .5em;
    }

/* 月別アーカイブリストのアイコン設定 */
.month-archive-list > li::before {
    font-family: 'fontello';
    content: '\e802'; /* > マーク */
    margin-right: .5em;
    margin-left: 3px;
    color: rgba(0,0,0,.54);
}

jQuery( document ).ready( function( $ ) {
  // @link: http://kachibito.net/snippets/basic-panel
  //年月別アーカイブ表示用
  $(".archive-list > li").click(function() {
    //@link: https://stackoverflow.com/questions/6656202/jquery-slidedown-child-ul
    if($(this).next(".month-archive-list").is(":visible") || $(this).hasClass("acv_open")){ //既に開いている場所なら
        $(".month-archive-list", this).slideUp("fast"); //閉じる
        $(this).removeClass("acv_open"); //.acv_open削除

    }
    else { //閉じている場所なら
        $(this).siblings().children(".month-archive-list").slideUp("fast"); //その他のリストを閉じる
        $(".month-archive-list", this).slideDown("fast"); //開く
        $(".year").removeClass("acv_open"); //.acv_open削除
        $(this).addClass("acv_open"); //.acv_open付加
    }
  });
});