スポンサーリンク

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

2020年3月16日WordPress

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

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

スポンサーリンク

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

きらり

きらり

今日はアーカイブウィジェットのカスタマイズをするのね。

結耶

結耶

そうそう!まずはアイコンを付けたりしてみよう!

CSS
/*--------------------
  月別アーカイブウィジェット
--------------------*/
.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が表示されてしまいます。

$link_html = “<li>$before<a href=’$url’>$text$after</a></li>n“;

2020年3月24日 追記

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

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

結耶

結耶

当サイトでは投稿数は表示していませんので、今回は投稿数付きのカスタマイズは紹介しません。ご了承ください。

年別にまとめる

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

きらり

きらり

今年の分は月別で表示してその前の年の分は年別とかにできるとスッキリするよね。

結耶

結耶

だよね。私でも2018年1月から今日までで月別だと27個も表示されるからね(^^;)

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

プラグインを使う

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

jQuery Archive List Widget

インストール方法

  1. WordPress管理画面から[プラグイン][新規追加]
  2. jQuery Archive List Widget』を検索
  3. [今すぐインストール]して[有効化]する

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

使い方

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

ウィジェットの設定

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

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

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

CSS

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は最初に紹介したものが使えます。)

注意!

こちらのコードは「function.php」を編集します。編集する前に必ずバックアップをとってください。

【WordPress】バックアップをとるにはどうすればいい!?


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

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

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

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

CSS追加分

最初の「.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ヶ月だけの表示にしてみたりしてスッキリさせるのも読んでくれるユーザーのためになるんではないでしょうか。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM