【WordPress】アーカイブウィジェットのカスタマイズをしてみた！

2020年3月16日2020年3月24日WordPress

以前WordPressのカテゴリーウィジェットのカスタマイズをしてみました。

シンプルで行間が狭くちょっと使いづらいカテゴリーウィジェットをわかりやすく使いやすくしてみました。そして今回は『アーカイブウィジェット』のカスタマイズをしてみたので紹介してみたいと思います。

デザイン(見た目のカスタマイズ)

/*--------------------
  月別アーカイブウィジェット
--------------------*/
.widget_archive ul li a{
    display:block;
    margin:0;
    padding:0 10px !important;
}

/*アイコン*/
.widget_archive ul li a:before {
    font-family:"Font Awesome 5 Free";
    content: "f067";
    font-weight:900;
    margin-right: 5px;
    color:#00c;    /*アイコンの色*/
}

/*ホバー時(マウスが乗ったとき)*/
.widget_archive ul li a:hover,
.widget_archive ul li a:hover:before{
    background:#00c;
    color:#fff;
}

月の前にアイコンをつけてホバー時に背景色と文字色が変わるようにしてみました。

アイコンはFont Awesomeを使用しています。Font Awesomeについてはこちらの記事を参考にしてください。

投稿数

投稿数を表示する場合はウィジェットの「投稿数の表示」にチェックを入れると表示されます。

カテゴリーウィジェットのカスタマイズの記事でも書きましたが、投稿数はaタグの中に入っておらず投稿数にはリンクがついていません。投稿数をaタグの中に入れたいときは以下の記事でaタグの中に入れるコードを掲載されていますのでこちらを参考にしてください。

※上記の記事のコードを使用する際、3行目の後ろの方にある「n」は削除してください。そのままにすると月の下に「nlが表示されてしまいます。

---

2020年3月24日 追記

もうひとつaタグの中に投稿数を含めるコードを紹介している記事を紹介します。

こちらの記事のコードはカテゴリーとアーカイブの投稿数をaタグの中に入れ、CSSでスタイルをつけやすくするために( )を消し、クラス名(post-count)が付くようになっています。

年別にまとめる

WordPressのアーカイブウィジェットは月別で表示されます。そして記事を書けば毎月増えていきます。ブログの運営が長くなればなるほど増え表示が長くなって言ってしまいます。

ということで月別から年別にする方法などを紹介します。

プラグインを使う

プラグイン『jQuery Archive List Widget』を使えば簡単に年別にすることができます。

インストール後すぐに使えます。

使い方

［外観］［ウィジェット］と進み、ウィジェット設定画面を開きます。「jQuery Archive List Widget」というウィジェットが追加されているのでそれをサイドバーなどの設置したい箇所に追加してください。

設定はほぼデフォルトのままでOKですが、「Title」と「Trigger Symbol」を設定します。

• Titleウィジェットのタイトル
• Trigger Symbol
  「年」の前に付く記号です。CSSでアイコンを設定する場合は『Empty Space』にしてください。

あとはそのままでいいので［保存］してください。

CSSは上で紹介したものでも適用されます。

以下のコードを必要に応じて追加してください。

/*月の前のアイコンを消す*/
.widget_archive ul li ul li > a:before {
    content:none;
}

月の前に別のアイコンをつける場合はここにアインを記述してください。

/*開いた状態のときに「-」にする*/
.expanded a.jaw_years:before {
    font-family:"Font Awesome 5 Free";
     content: "f068";
    font-weight:900;
}

※このコードはこちらの記事のCSSを参考にさせていただきました。

/*年(西暦)の後ろに「年」をつける*/
a.jaw_years:after {
    content: '年';
}

※こちらのコードもまるっと様のコードを使わせてもらいました。

上記のコードを追加するとこんな感じになります。

プラグインなしでまとめる

アーカイブを年別にまとめる方法を検索してみるとプラグインを使わずに年別にまとめる方法を紹介した記事がたくさん出てきます。ただ、上位表示される記事は古いものが多いのでちょっと尻込みしてしまいます。

いくつか試してちゃんと表示できた記事を紹介します。

こちらの記事ではアーカイブを12ヶ月分のみ表示させるコードや年別にするためのコードが掲載されています。(CSSは最初に紹介したものが使えます。)

---

こちらはjQueryを利用し、アーカイブを折りたたみ式(アコーディオン)で表示できます。CSSコードはこちらの記事に書かれています。

jQueryコードの挿入場所が分からない方は以下のプラグインをお使いください。こちらのプラグインを使う場合は表示されているjQueryコードの下の下にある</body>前用のコードを入れてください。(詳しくは記事をお読みください。)

当サイトのアーカイブはこちらのコードを使わせていただいています。CSSもこちらのCSSを使わせていただき、アイコンとホバー時のCSSを追加しています。一応、私が追加したCSSコードを書いておきます。

Luxeritasをお使いの方は［Luxeritas］［子テーマ編集］の「JavaScript」に入れてください。

最初の「.widget_archive a.year」にdisplayとpaddingを追加

.widget_archive a.year{
  cursor: pointer;
  text-decoration: none;
   display:block;
   padding:2px 8px;
}

※追加したものです。これをコピーして差し替えしてください。

次はアイコンとホバー時のCSSです。コピーして追加してください。

/*年の前のアイコン*/
.widget_archive ul li a.year:before{
    font-family:"Font Awesome 5 Free";
    content:"f067";
    font-weight:900;
    margin-right:7px;
    color:#ff6893;
}

/*ホバー時*/
.widget_archive a.year:hover,.widget_archive a.year:hover:before{
   background:#ff6893;
   color:#fff;
}

最後に

今回はアーカイブウィジェットのカスタマイズをしてみたので書いてみました。

ブログを書いている期間が長くなればなるほど月別アーカイブの表示は増えていき長くなってしまいます。年別にまとめたり、12ヶ月だけの表示にしてみたりしてスッキリさせるのも読んでくれるユーザーのためになるんではないでしょうか。