WEB系キャンパス

sidebarとかに表示させるアーカイブリストの種類まとめ(WordPress)

ブログ系のサイトとかである月別アーカイブページ
記事の分量やデザインのタイプによって表示方法は色々あるので、特にコーディングからのWordPress案件とかで違うパターンをリストで持っておけば何かと便利なので、まとめておきます。

【1】一般的な月別アーカイブリスト

自分がよく使うのはカウント(記事数)部分を<span>で囲み、数字部分だけ個別にレイアウトできるようにアーカイブリストを表示させます。

    <ul class="archive_list">
      <?php
          $string = wp_get_archives(array(
                          'show_post_count' => 1,
                          'echo' => 0
                      ));
          echo preg_replace('/<\/a>&nbsp;(\([0-9]*\))/', ' <span class="count">$1</span></a>', $string);
          ?>
    </ul>

【抽出されるHTML】

<ul class="archive_list">
  <li><a href=''>2018年11月 <span class="count">(1)</span></a></li>
  <li><a href=''>2018年10月 <span class="count">(14)</span></a></li>
  <li><a href=''>2018年9月 <span class="count">(1)</span></a></li>
</ul>

【2】一般的な年月アーカイブリスト

wp_get_archivesはデフォルトが月別リストになるので、年月リストを出したい場合は、単純にtypeを「yearly」にするだけ

   <ul class="archive_list">
    <?php
        $string = wp_get_archives(array(
                        'show_post_count' => 1,
                        'type' =>  yearly,
                        'echo' => 0
                    ));
        echo preg_replace('/<\/a>&nbsp;(\([0-9]*\))/', ' <span class="count">$1</span></a>', $string);
      ?>
    </ul>

【抽出されるHTML】

<ul class="archive_list">
  <li><a href=''>2018 <span class="count">(16)</spn></a></li>
</ul>

【3】セレクトボックス型のアーカイブリスト(月別)

セレクトボックスの初期値を「月を選択して下さい」とする場合

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
  <option value=""><?php echo attribute_escape(__('月を選択してください')); ?></option>
  <?php wp_get_archives (array(
      'type' => 'monthly',
      'format' => 'option',
      'show_post_count' => '1'
      ));
  ?>
</select>
<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
  <option value="">月を選択してください</option>
  <option value=''> 2018年11月 (1)</option>
  <option value=''> 2018年10月 (14)</option>
  <option value=''> 2018年9月 (1)</option>
</select>

※こちらもtypeを「monthly」から「yearly」に変更すると年月アーカイブを出せます。

【4】カスタム投稿のアーカイブリスト

こちらもけっこうシンプルです。
カスタム投稿タイプが「product」の場合は「post_type」を指定して上げる以外は一緒です。

    <?php
        $string = wp_get_archives(array(
          'post_type'     => 'product',
          'show_post_count' => 1,
          'echo' => 0
        ));
        echo preg_replace('/<\/a>&nbsp;(\([0-9]*\))/', ' <span class="count">$1</span></a>', $string);
    ?>

【5】アーカイブリストをアコーディオンにする

年別リストだけ並んでいて、その2019年(5)とかのテキストをクリックすると、月別リストが出てくるあのタイプですね。

<div class="side_archive_menu">
    <?php
    $year_prev = null;
    $months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,
                                      YEAR( post_date ) AS year,
                                      COUNT( id ) as post_count FROM $wpdb->posts
                                      WHERE post_status = 'publish' and post_date <= now( )
                                      and post_type = 'post'
                                      GROUP BY month , year
                                      ORDER BY post_date DESC");
    foreach($months as $month) :
    $year_current = $month->year;
    if ($year_current != $year_prev){
    if ($year_prev != null){?>
        <?php } ?>
  <p class="toggle_btn"><?php echo $month->year; ?>年</p>
  <ul class="child">
    <?php } ?>
    <li>
        <a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>">
            <?php echo date("n", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>月
            (<?php echo $month->post_count; ?>)
        </a>
    </li>
    <?php $year_prev = $year_current;
    endforeach; ?>
  </ul>
</div>
<!-- /.side_archive_menu -->

【抽出されるHTML】

<div class="side_archive_menu">
<p class="toggle_btn">2018年</p>
  <ul class="child">
    <li><a href="">11月(1)</a></li>
    <li><a href="">10月(14)</a></li>
    <li><a href="">9月(1)</a></li>
  </ul>
</div>
<!-- /.side_archive_menu -->

年号を抽出して、その下に月別リストを出します。
あとは、CSSとjQueryでアコーディオンを入れます。

【CSS】

.child {
  display: none;
}

※基本的なCSSしか入れてません。レイアウトは適正調整して下さい。

【jQuery】

$(".toggle_btn").on("click", function() {
     $(this).next().slideToggle();
     $(this).toggleClass("active");
 });

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です