折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。

今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと表示できるコードを書いてみたので、そのカスタマイズ方法の紹介です。

スポンサーリンク
レクタングル(大)広告

アーカイブのリスト表示は更新するほど長くなる

WordPressのアーカイブウィジェットのリスト表示は、更新を長く続ければ続けるほど邪魔な存在になってきます。

というのも、更新をすればするほど、以下のように長いアーカイブリストになるからです。

Wordpressアーカイブウィジェットのデフォルト表示

僕なんか、たかだか2年ちょっとの更新期間なので、これぐらいで済んでいます。けれど、もっと長くブログを続けている場合、長さはこんなものでは済みません。

流石に、これでは長すぎるので、更新年ごとに折りたためるようにすれば、かなりすっきりするかと思います。

というわけで、いろいろ試行錯誤してコードを書いてみた結果、以下のように表示できるようになりました。

折りたたみ式Wordpressアーカイブウィジェット

以下では、プラグインを使用せず、コピペのみで、このようにできるカスタマイズ方法を紹介します。

カスタマイズの主な手順

今回のカスタマイズに必要な主な手順は以下です。

  1. style.cssにCSSをコピペ
  2. jQueryコードをコピペ
  3. アーカイブウィジェットの確認

基本的に、2回コピペするだけと非常に簡単です。テンプレートファイルでPHPすら編集しないので、カスタマイズを誤っても致命的なエラーになることもないと思います。

style.cssにCSSをコピペ

まずは、折り畳みアーカイブウィジェットで使用するスタイル記入します。

style.cssに以下のコードをコピペしてください。

/************************************
** 折り畳みアーカイブウィジェット
************************************/
.widget_archive a.year{
  cursor: pointer;
  text-decoration: underline;
}

.widget_archive .years ul {
  -webkit-transition: .3s ease;
  transition: .3s ease;
  margin: 0;
  margin-bottom: 1em;
}

#sidebar .widget_archive ul.years li{
  margin-bottom: 0;
}

.widget_archive ul.years .hide {
  margin: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}
テーマによってデザインが変わるので、テーマごとにスタイルシートを調節する必要はあるかもしれません。

jQueryコードをコピペ

次に、jQueryコードを記入します。

テーマに、JavaScriptコードを記載するためのファイルがあれば、そこに以下のようにコピペします。

/////////////////////////////////
// 折り畳み式アーカイブウィジェット
/////////////////////////////////
(function($) {
  $(function() {
    var wgts = $(".widget_archive");//アーカイブウィジェット全てを取得
    //アーカイブウィジェットを1つずつ処理する
    wgts.each(function(i, el) {
      wgt = $(el);

      //日付表示+投稿数か
      var has_date_count = wgt.text().match(/\d+年\d+月\s\(\d+\)/);
      //日付表示だけか
      var has_date_only = wgt.text().match(/\d+年\d+月/) && !has_date_count;

      //日付表示されているとき(ドロップダウン表示でない時)
      if ( has_date_count || has_date_only ) {
        var
          clone = wgt.clone(),//アーカイブウィジェットの複製を作成
          year = [];
        //クローンはウィジェットが後に挿入。クローンはcssで非表示
        wgt.after(clone);
        clone.attr("class", "archive_clone").addClass('hide');

        var
          acv = wgt; //ウィジェット
          acvLi = acv.find("li"); //ウィジェット内のli全て
        //ul.yearsをアーカイブウィジェット直下に追加してそのDOMを取得
        var acv_years =  acv.append('<ul class="years"></ul>').find("ul.years");

        //liのテキストから年がどこからあるかを調べる
        acvLi.each(function(i) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示+投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月\s\((\d+)\)/;
          }
          var dt = $(this).text().match(reg);
          year.push(dt[1]);

        });
        $.unique(year); //重複削除

        acvLi.unwrap(); //liの親のulを解除

        //投稿年があるだけ中にブロックを作る
        var
          yearCount = year.length,
          i = 0;
        while (i < yearCount) {
          acv_years.append("<li class='year_" + year[i] + "'><a class='year'>" + year[i] + "年</a><ul class='month'></ul></li>");
          i++;
        }

        //作ったブロック内のulに内容を整形して移動
        //オリジナルのクローンは順番に削除
        var j = 0;
        acvLi.each(function(i, el) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示+投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月\s\((\d+)\)/;
          }
          var
            dt = $(this).text().match(reg),
            href = $(this).find("a").attr("href");

          //月の追加
          var rTxt = "<li><a href='" + href + "'>" + "" + dt[2] + "月</a>";
          //日付表示+投稿数か
          if ( has_date_count ) {
            rTxt += " (" + dt[3] + ")" + "</li>"; //投稿数の追加
          }

          //作成した月のHTMLを追加、不要なものは削除
          if (year[j] === dt[1]) {
            acv_years.find(".year_" + year[j] + " ul").append(rTxt);
            $(this).remove();
          } else {
            j++;
            acv_years.find(".year_" + year[j] + " ul").append(rTxt);
            $(this).remove();
          }
        });

        //クローン要素を削除
        clone.remove();

        //直近の年の最初以外は.hide
        acv.find("ul.years ul:not(:first)").addClass("hide");

        //年をクリックでトグルshow
        acv.find("a.year").on("click", function() {
          $(this).next().toggleClass("hide");
        });
      }//if has_date_count || has_date_only
    });//wgts.each

  });

})(jQuery);

テーマや子テーマに、JavaScriptコード記述用のファイルがない場合は、フッターの</body>手前に以下のように記述してください。

<script type="text/javascript">
/////////////////////////////////
// 折り畳み式アーカイブウィジェット
/////////////////////////////////
(function($) {
  $(function() {
    var wgts = $(".widget_archive");//アーカイブウィジェット全てを取得
    //アーカイブウィジェットを1つずつ処理する
    wgts.each(function(i, el) {
      wgt = $(el);

      //日付表示+投稿数か
      var has_date_count = wgt.text().match(/\d+年\d+月\s\(\d+\)/);
      //日付表示だけか
      var has_date_only = wgt.text().match(/\d+年\d+月/) && !has_date_count;

      //日付表示されているとき(ドロップダウン表示でない時)
      if ( has_date_count || has_date_only ) {
        var
          clone = wgt.clone(),//アーカイブウィジェットの複製を作成
          year = [];
        //クローンはウィジェットが後に挿入。クローンはcssで非表示
        wgt.after(clone);
        clone.attr("class", "archive_clone").addClass('hide');

        var
          acv = wgt; //ウィジェット
          acvLi = acv.find("li"); //ウィジェット内のli全て
        //ul.yearsをアーカイブウィジェット直下に追加してそのDOMを取得
        var acv_years =  acv.append('<ul class="years"></ul>').find("ul.years");

        //liのテキストから年がどこからあるかを調べる
        acvLi.each(function(i) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示+投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月\s\((\d+)\)/;
          }
          var dt = $(this).text().match(reg);
          year.push(dt[1]);

        });
        $.unique(year); //重複削除

        acvLi.unwrap(); //liの親のulを解除

        //投稿年があるだけ中にブロックを作る
        var
          yearCount = year.length,
          i = 0;
        while (i < yearCount) {
          acv_years.append("<li class='year_" + year[i] + "'><a class='year'>" + year[i] + "年</a><ul class='month'></ul></li>");
          i++;
        }

        //作ったブロック内のulに内容を整形して移動
        //オリジナルのクローンは順番に削除
        var j = 0;
        acvLi.each(function(i, el) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示+投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月\s\((\d+)\)/;
          }
          var
            dt = $(this).text().match(reg),
            href = $(this).find("a").attr("href");

          //月の追加
          var rTxt = "<li><a href='" + href + "'>" + "" + dt[2] + "月</a>";
          //日付表示+投稿数か
          if ( has_date_count ) {
            rTxt += " (" + dt[3] + ")" + "</li>"; //投稿数の追加
          }

          //作成した月のHTMLを追加、不要なものは削除
          if (year[j] === dt[1]) {
            acv_years.find(".year_" + year[j] + " ul").append(rTxt);
            $(this).remove();
          } else {
            j++;
            acv_years.find(".year_" + year[j] + " ul").append(rTxt);
            $(this).remove();
          }
        });

        //クローン要素を削除
        clone.remove();

        //直近の年の最初以外は.hide
        acv.find("ul.years ul:not(:first)").addClass("hide");

        //年をクリックでトグルshow
        acv.find("a.year").on("click", function() {
          $(this).next().toggleClass("hide");
        });
      }//if has_date_count || has_date_only
    });//wgts.each

  });

})(jQuery);
</script>

上記のコードは、Simplicityフォーラムhidekichiさんが書き込まれた、以下のコードを参考に書かせていただきました。ありがとうございます。

参考 Simplicity フッターアーカイブのデザイン案 | codepen

hidekichiさんの案の方が、デザイン的には格好いいと思います。

今回書き加えた部分としては、フッター以外で、投稿数を表示していなくても使用でき、また複数アーカイブウィジェットを使用しても全てが折り畳みアーカイブとなるようにしてみました。

アーカイブウィジェットの確認

あとは、Wordpress管理画面の「外観→ウィジェット」にあるアーカイブウィジェット確認します。

ウィジェットの設置

まず、アーカイブウィジェットが設置されていない場合はドラッグ&ドロップで設置してください。

2016-02-16_11h21_25

アーカイブウィジェット設定の確認

アーカイブウィジェットの設定を確認します。

利用できるケース

折りたたみ式アーカイブが利用できる設定は、通常リストに投稿数を表示させている時と

アーカイブで投稿数を表示している時

デフォルト状態のアーカイブ設定の時のみです。

通常のアーカイブリスト

利用できないケース

以下のように「ドロップダウン表示」にチェックが入っていると、利用できない仕様になっています。

「トップダウン表示」にチェックが入っていると折り畳みされない

タイトル部分の設定は、今回の折り畳み式アーカイブには影響しません。

動作確認

以上のカスタマイズを終えると、以下のような「折り畳み式アーカイブウィジェット」を利用できるようになります。

折りたたみ式Wordpressアーカイブウィジェット[3]

投稿数を表示しない場合はこんな感じ。

折りたたみ式アーカイブウィジェット(投稿数を表示してないバージョン)

もちろん、フッターのウィジェットエリアなどでも利用できます。

折りたたみ式アーカイブはフッターでも利用可能

当サイトのサイドバーでも動作を確認できます。

折り畳み表示がされていない場合は、ブラウザをリロードするか、ブラウザキャッシュを削除してみてください。

まとめ

今回のカスタマイズでファイル編集することといえば、コピペでコードを貼り付けるくらいなので、誰にでも簡単にできるのではないかと思います。

というわけで、「ブログの更新を長く続けていると、アーカイブウィジェットが長くなりすぎて使いづらい」なんて場合や、「アーカイブを年ごとにまとめたい」なんて場合は、今回紹介したカスタマイズは、手軽にできておすすめです。

この機能は、Simplicity2.0.9にて実装されています。Simplicityを利用している場合は、コードが重複するのでカスタマイズは不要です。

『折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。』へのコメント

  1. 名前:土屋 和花子 投稿日:2017/04/05(水) 16:41:56 ID:17145daf4

    ど素人なもので、質問も畑違いかもしれませんが、お伺いします。
    テーマAttitudeを使用しており、アーカイブの設定が月別のものしかないのですが、
    どこを変更したら記事と同じように年別表示ができますでしょうか?
    そこから作り変えるのは無謀でしょうか?

  2. アバター画像 名前:わいひら 投稿日:2017/04/05(水) 20:31:27 ID:71cbf412f

    Attitudeというテーマが以下のものであれば、このページのカスタマイズ通りに行えばうまくいきました。
    https://wordpress.org/themes/attitude/
    JavaScriptコードは、footer.phpの</body>手前に、本文中にある以下のように書かれた下にあるコードを貼る必要はあります。

    テーマや子テーマに、JavaScriptコード記述用のファイルがない場合は、フッターの</body>手前に以下のように記述してください。

  3. 名前:TSUN 投稿日:2017/07/27(木) 12:00:53 ID:92aecebcb

    分かりやすい記事のおかげでド素人の私でも実装することができました。
    ありがとうございます!

    ひとつだけご質問が…
    最初の年も閉じたい場合はどうしたら良いでしょうか?

    //直近の年の最初以外は.hide
    acv.find(“ul.years ul:not(:first)”).addClass(“hide”);

    このコード部分かと思いますが…教えて頂けると助かります。
    よろしくお願いします。

  4. アバター画像 名前:わいひら 投稿日:2017/07/27(木) 13:19:43 ID:7dfe7bde4

    記事がお役に立てたようでよかったです。
    全部閉じるのは、実際に試したわけではないですがご指摘の場所の「:not(:first)」を削除すれば多分いけるかと思います。

  5. 名前:TSUN 投稿日:2017/07/27(木) 22:07:30 ID:92aecebcb

    早速のご返答ありがとうございます!初めから閉じた状態にできました。これからも参考にさせて頂きます。

  6. 名前:ちかちか 投稿日:2018/03/13(火) 23:39:02 ID:3d1cc6ad1

    「折り畳み式アーカイブウィジェット」実装できました!
    わかりやすい解説、ありがとうございます。
    しかしながら、スマホ(iPhone)からだと上手く動作しません…
    スマホとPCの表示画面が同じになるようにしてあるのですが、
    それが原因でしょうか…
    なにか解決方法がありましたら
    ご教授頂けたら幸いです。
    テーマはThe Boxを使用しております。

  7. アバター画像 名前:わいひら 投稿日:2018/03/15(木) 17:58:28 ID:58683e455

    申し訳ないですが、僕はiPhoneをもっていないので、ちょっと確認のしようがないです。
    なので対策方法もちょっとわからないです;
    確実にiPhoneで表示させるには、条件分岐を書いてiPhoneの場合はスクリプト読み込まないようにするしかないかもしれません。
    iPhoneの判別方法はこちら。
    https://whitebear-seo.com/wordpress-conditional-mobile-pc/