今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと表示できるコードを書いてみたので、そのカスタマイズ方法の紹介です。
目次
アーカイブのリスト表示は更新するほど長くなる
WordPressのアーカイブウィジェットのリスト表示は、更新を長く続ければ続けるほど邪魔な存在になってきます。
というのも、更新をすればするほど、以下のように長いアーカイブリストになるからです。
僕なんか、たかだか2年ちょっとの更新期間なので、これぐらいで済んでいます。けれど、もっと長くブログを続けている場合、長さはこんなものでは済みません。
流石に、これでは長すぎるので、更新年ごとに折りたためるようにすれば、かなりすっきりするかと思います。
というわけで、いろいろ試行錯誤してコードを書いてみた結果、以下のように表示できるようになりました。
以下では、プラグインを使用せず、コピペのみで、このようにできるカスタマイズ方法を紹介します。
カスタマイズの主な手順
今回のカスタマイズに必要な主な手順は以下です。
- style.cssにCSSをコピペ
- jQueryコードをコピペ
- アーカイブウィジェットの確認
基本的に、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管理画面の「外観→ウィジェット」にあるアーカイブウィジェット確認します。
ウィジェットの設置
まず、アーカイブウィジェットが設置されていない場合はドラッグ&ドロップで設置してください。
アーカイブウィジェット設定の確認
アーカイブウィジェットの設定を確認します。
利用できるケース
折りたたみ式アーカイブが利用できる設定は、通常リストに投稿数を表示させている時と
デフォルト状態のアーカイブ設定の時のみです。
利用できないケース
以下のように「ドロップダウン表示」にチェックが入っていると、利用できない仕様になっています。
動作確認
以上のカスタマイズを終えると、以下のような「折り畳み式アーカイブウィジェット」を利用できるようになります。
投稿数を表示しない場合はこんな感じ。
もちろん、フッターのウィジェットエリアなどでも利用できます。
当サイトのサイドバーでも動作を確認できます。
まとめ
今回のカスタマイズでファイル編集することといえば、コピペでコードを貼り付けるくらいなので、誰にでも簡単にできるのではないかと思います。
というわけで、「ブログの更新を長く続けていると、アーカイブウィジェットが長くなりすぎて使いづらい」なんて場合や、「アーカイブを年ごとにまとめたい」なんて場合は、今回紹介したカスタマイズは、手軽にできておすすめです。
この機能は、Simplicity2.0.9にて実装されています。Simplicityを利用している場合は、コードが重複するのでカスタマイズは不要です。
ど素人なもので、質問も畑違いかもしれませんが、お伺いします。
テーマAttitudeを使用しており、アーカイブの設定が月別のものしかないのですが、
どこを変更したら記事と同じように年別表示ができますでしょうか?
そこから作り変えるのは無謀でしょうか?