ゆるい海釣りの記録と、ブログのカスタマイズを綴る趣味ブログです。すべての記事一覧はこちら >>

Cocoon(コクーン)/月別アーカイブウィジェットを折り畳み式にして年別にまとめるカスタマイズ

月別アーカイブ カスタマイズ

この記事はワードプレスのテーマCocoon(コクーン)のカスタマイズになります

サイドバーに表示することができる

月別アーカイブウィジェット

設置してあるサイトが多いので説明不要かとは思いますが、年月でピックアップして記事を探すことができます。

私は“数年前の同じ時期にどんな魚が釣れていたか”を、遡って自分の過去記事を見るのによく使っています。

アーカイブの表示方法(デフォルト)

設定画面で2つの表示方法が選べますが、

リスト表示

ドロップダウン

ブログを長く続けるほどびろーんと長くなって操作性が悪くしまう…ドロップダウンも無機質なデザインが好きじゃないなぁ…

そんなときにオススメなカスタマイズがあるよ。

カスタマイズ後

カスタマイズを行うとだいたいこんな感じになるイメージです。

月別アーカイブ
特徴
  • 直近の年は最初から月を表示
  • その他の月は年をクリックすることにより開閉できる
  • 年の右側に、折り畳み式であることを示すアイコンをつける
  • ←左についているこのアイコンはサイドバーで一括指定しているもので今回のカスタマイズには含まれていません。

カスタマイズの手順

  • STEP01
    jQueryコードをコピペする
  • STEP02
    CSSコードをコピペする
  • STEP03
    設定でドロップダウンのチェックを外す

コードの編集は子テーマで行うことかできるので、サイトが真っ白などといった致命的なエラーはおこりにくいよ。バックアップは忘れずに!

jQueryのソースコード

下記のjQueryコードをCocoon Child(子テーマ)のjavascript.jsに貼り付けます。

※こちらのコードは後述するわいひらさん(このテーマを作られた方)のサイトよりコピペさせていただいたものです。

///////////////////////////////////
// 折り畳み式アーカイブウィジェット
/////////////////////////////////
(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);

CSSコード

下記のコードを、「外観」→「テーマエディター」Cocoon Child(子テーマ)のstyle.cssに貼り付けます。

/* 折り畳み月別アーカイブのデザイン---------------------------------------------- */

.widget_archive a.year{ /*各年*/
	cursor: pointer;
}

/*各年右横のアイコン*/
.widget_archive a.year::after{ 
font-family: "Font Awesome 5 Free";
content: '\f107'; /* アイコンの指定 */
position: relative; /* 相対配置 */
left: 5px; /* アイコンの位置 */
font-weight: bold;
}

/*各月*/
.widget_archive .years ul { 
display:block;
margin-left: 20px; /*インデント*/
font-size: 1em;
-webkit-transition: 300ms ease;
  transition: 300ms ease-out;
}

.widget_archive ul.years li {
border-bottom: 2px dotted #ccc;
}

/*マウスホバー時*/
#sidebar .widget_archive ul.years li :hover {
	background: none;
}

 /*各年をクリックすると開閉*/
.widget_archive ul.years .hide {
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

アイコンについては「Font Awesome5」を利用しています。(Cocoonには標準装備されています)

ウィジェットの設定確認

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

  • ドロップダウンで表示:チェックを外しましょう

以上でカスタマイズは完了です。

折り畳みできるすっきりした表示になっているかと思います^^

参考にさせていただいたサイト

Cocoonを作成されたわいひらさんの運営されている別サイト「寝ログ」を参考にさせていただきました。ありがとうございます。


カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、まずは下記の点を確認してみてください。

  • コードは半角英数字になっているか
  • 余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSのメモ書きはきちんと/* */で囲んでいるか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズの多くは他のサイトを参考にしながらも、自分で調べて試行錯誤しながら手間隙をかけてコードを書いています。

このデザインにするにはどう書けばよい?CSSが効かなかったり、コードの不備でデザインが崩れてしまったり修復したり、あーでもない、こーでもない!

コピペされた際にはコメント欄に一言(カスタマイズできた、不具合ありなど何でも)、足跡を残していただくと大変励みになります^^

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

コメント


タイトルとURLをコピーしました