サイドバーに表示することができる
“月別アーカイブウィジェット”
設置してあるサイトが多いので説明不要かとは思いますが、年月でピックアップして記事を探すことができます。
私は“数年前の同じ時期にどんな魚が釣れていたか”を、遡って自分の過去記事を見るのによく使っています。
アーカイブの表示方法（デフォルト）
設定画面で２つの表示方法が選べますが、
リスト表示
ドロップダウン
ブログを長く続けるほどびろーんと長くなって見た目も操作性が悪くなってしまう…ドロップダウンも無機質なデザインが好きじゃないなぁ…
そんなときにオススメなカスタマイズがあるよ。
カスタマイズ後
カスタマイズを行うとだいたいこんな感じになるイメージです。
特徴
- 直近の年は最初から月を表示
- その他の月は年をクリックすることにより開閉できる
- 年の右側に、折り畳み式であることを示すアイコンをつける
カスタマイズの手順
- STEP1jQueryコードをコピペする
- STEP2CSSコードをコピペする
- STEP3設定でドロップダウンのチェックを外す
今回はjavascriptを編集するけど、子テーマで行うことかできるのでサイトが真っ白などといった致命的なエラーは起こりにくいよ。ただしバックアップは忘れずに行いましょう。
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を作成されたわいひらさんの運営されている別サイト「寝ログ」を参考にさせていただきました。ありがとうございます。
Comment