今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと表示できるコードを書いてみたので、そのカスタマイズ方法の紹介です。
スポンサーリンク
アーカイブのリスト表示は更新するほど長くなる
WordPressのアーカイブウィジェットのリスト表示は、更新を長く続ければ続けるほど邪魔な存在になってきます。
というのも、更新をすればするほど、以下のように長いアーカイブリストになるからです。
僕なんか、たかだか2年ちょっとの更新期間なので、これぐらいで済んでいます。けれど、もっと長くブログを続けている場合、長さはこんなものでは済まみません。
流石に、これでは長すぎるので、更新年ごとに折りたためるようにすれば、かなりすっきりするかと思います。
というわけで、いろいろ試行錯誤してコードを書いてみた結果、以下のように表示できるようになりました。
以下では、プラグインを使用せず、コピペのみで、このようにできるカスタマイズ方法を紹介します。
カスタマイズの主な手順
今回のカスタマイズに必要な主な手順は以下です。
- style.cssにCSSをコピペ
- jQueryコードをコピペ
- アーカイブウィジェットの確認
基本的に、2回コピペするだけと非常に簡単です。
style.cssにCSSをコピペ
まずは、折り畳みアーカイブウィジェットで使用するスタイル記入します。
style.cssに以下のコードをコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/************************************ ** 折り畳みアーカイブウィジェット ************************************/ .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コードを記載するためのファイルがあれば、そこに以下のようにコピペします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
///////////////////////////////// // 折り畳み式アーカイブウィジェット ///////////////////////////////// (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>手前に以下のように記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<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
今回書き加えた部分としては、フッター以外で、投稿数を表示していなくても使用でき、また複数アーカイブウィジェットを使用しても全てが折り畳みアーカイブとなるようにしてみました。
アーカイブウィジェットの確認
あとは、Wordpress管理画面の「外観→ウィジェット」にあるアーカイブウィジェット確認します。
ウィジェットの設置
まず、アーカイブウィジェットが設置されていない場合はドラッグ＆ドロップで設置してださい。
アーカイブウィジェット設定の確認
アーカイブウィジェットの設定を確認します。
利用できるケース
折りたたみ式アーカイブが利用できる設定は、通常リストに投稿数を表示させている時と
デフォルト状態のアーカイブ設定の時のみです。
利用できないケース
以下のように「ドロップダウン表示」にチェックが入っていると、利用できない仕様になっています。
タイトル部分の設定は、今回の折り畳み式アーカイブには影響しません。
動作確認
以上のカスタマイズを終えると、以下のような「折り畳み式アーカイブウィジェット」を利用できるようになります。
![折りたたみ式Wordpressアーカイブウィジェット[3]](http://nelog.jp/wp-content/uploads/2016/02/Wordpress3.gif "折りたたみ式Wordpressアーカイブウィジェット[3]")
投稿数を表示しない場合はこんな感じ。
もちろん、フッターのウィジェットエリアなどでも利用できます。
当サイトのサイドバーでも動作を確認できます。
折り畳み表示がされていない場合は、ブラウザをリロードするか、ブラウザキャッシュを削除してみてください。
まとめ
今回のカスタマイズでファイル編集することといえば、コピペでコードを貼り付けるくらいなので、誰にでも簡単にできるのではないかと思います。
というわけで、「ブログの更新を長く続けていると、アーカイブウィジェットが長くなりすぎて使いづらい」なんて場合や、「アーカイブを年ごとにまとめたい」なんて場合は、今回紹介したカスタマイズは、手軽にできておすすめです。
