こんにちは。
なかなか怒らないtomita@atuwebです。

ブログ歴が長くなってくると、「あー、なんかアーカイブやカテゴリがすごく縦長になってるなぁー」と思う瞬間がやってきますね。

その対策として行ったカスタマイズで、前回はカテゴリのカスタマイズ方法をご紹介いたしました。

[WordPress][Simplicity]カテゴリをコンパクトなタイル状にカスタマイズ
ふと気がつくと縦長になってしまうアーカイブやカテゴリをすっきりとまとめるカスタマイズ、やってみました。 今回はCSSのみの変更...

間が空いてしまいましたが、今回はアーカイブに対して行ったカスタマイズをご紹介いたします。

今回のはテーマに紐づかないカスタマイズですよ。
ただし、プラグインを2点新たに導入します。

完成イメージ

完成イメージ

before


こちらはSimplicityデフォルト状態のアーカイブです。

過去のものは折りたたまれた状態で表示されますが、12ヶ月分の縦スペースは消費してしまうため、それなりに縦長感が出てきてしまいます。

after

バーン!
項目を最小にして、大変シンプルな形にカスタマイズしました。

投稿がない月はグレーアウトし、区別できるようにしております。

環境

  • PHP 5.6
  • WordPress 4.7(投稿時最新)

追加するプラグイン

Compact Archives

All Things Seen and Unseen – Compact Archives
http://rmarsh.com/plugins/compact-archives/

アーカイブを大変コンパクトに表示することができるプラグインです。

このプラグインは「月の投稿数」出力に対応していないようです。
その点ご了承ください。

PHP Code Widget

PHP Code Widget
https://ja.wordpress.org/plugins/php-code-widget/

このプラグインはPHPコードをウィジェットに埋め込むためのものです。

自由文を入力するための通常のテキストウィジェットはPHPコードを扱うことができません。

そのため、このプラグインを併用してウィジェットからCompact Archivesを埋め込んでいきます。
(テンプレートを直接編集する場合、当プラグインは不要ですよ。)

カスタマイズ方法

プラグインの追加

WordPress管理ツールの[ プラグイン > 新規追加 ]に遷移してください。


検索フォームに上記プラグインの名称を打ち込んで検索実行すると簡単にプラグインが見つかると思います。



上記にあるインストールボタンをクリックし、インストール完了後には忘れず有効化を行ってください。

CSS

次に[ 外観 > テーマの編集 ]に遷移しstyle.cssを開きます。

style.cssに次のコードを追記してください。

.execphpwidget {
  margin-left: -16px;
}
.widget-c-archive span,
.widget-c-archive a {
  display: inline-block;
  margin:0px 6px 4px 0px;
  padding: 3px 6px;
  background-color: #efefed;
  border: dashed 1px #999;
  color: #ccc;
  font-size: 10pt !important;
  font-weight: normal;
}
.widget-c-archive a.year {
  width: 48px;
  text-align:center;
}
.widget-c-archive li :nth-child(8) {
  margin-left: 68px;
}
.widget-c-archive span.emptymonth {
  color: #ccc;
}
.widget-c-archive a {
  text-decoration: none;
  color:#292929 !important;
}
.widget-c-archive a:hover,
.widget-c-archive a:active {
  text-decoration: underline;
}

プラグインに手を入れる

素のCompact Archivesでは、どーしても合わない部分があったため、失礼してプラグインに若干手を入れます。

WordPressの管理ツールにログインし[ プラグイン > インストール済みプラグイン ]に遷移してください。

Compact Archivesの[ 編集 ]ボタンからプラグインのPHPコードを表示して手を加え、[ ファイルを更新 ]ボタンを押下して変更内容を保存してください。

変更箇所

  • 113行目: strongタグを削除、yearクラスを追加、スペースを削除
- $result .= $before.'<strong><a href="'.get_year_link($year).'">'.$year.'</a>: </strong> ';
+ $result .= $before.'<a href="'.get_year_link($year).'" class="year">'.$year.'</a>';
  • 133行目: monthクラスを追加、スペースを削除
- $result .= '<a href="'.get_month_link($year, $month).'" title="'.$month_name.' '.$year.'">'.$month_abbrev.'</a> ';
+ $result .= '<a href="'.get_month_link($year, $month).'" title="'.$month_name.' '.$year.'" class="month">'.$month_abbrev.'</a>';
  • 135行目: スペースを削除
- $result .= '<span class="emptymonth">'.$month_abbrev.'</span> ';
+ $result .= '<span class="emptymonth">'.$month_abbrev.'</span>';

PHPコードの編集をミスした場合画面が真っ白になる恐れがあります。
編集は慎重に行ってくださいね!

ウィジェットの設置

ようやく新しいアーカイブウィジェットの配置ができます。

WordPress管理ツールの[ 外観 > カスタマイズ ]に遷移してください。
利用できるウィジェットにあるPHP Codeウィジェットをドラッグ&ドロップして任意の位置に配置します。

画像のようにPHPコードを記述し、保存してください。

<ul class="widget-c-archive"><?php compact_archive($style='numeric'); ?></ul>

これでカスタマイズは完了です。
お疲れ様でした。

おわりに

PHPコードにまで手を入れるちょっと手間がかかるカスタマイズでした。
多少Web系の知識があれば柔軟にカスタマイズでき、ブログの改造が楽しくなりますよ!

マウスオーバーで「月の投稿数」をポップアップするなど、アーカイブはもうちょっとカスタマイズをしていこうと検討中です!

参考

アーカイブをコンパクトにまとめてキレイに見せるWordPressプラグイン『Compact Archives 』| InfinityScope
http://infinityforest.net/home/archives/1794

今回Simplicityはなしで、、、

私はベースのテーマとしてSimplicityを利用しております。
このテーマは多機能で本当に使いやすいですね。

Simplicityはデフォルトでアーカイブがアコーディオンの状態になっています。
具体的には「年をクリックすると月に相当する部分が展開される」という形で、通常はこのままでもかなり使いやすいと思います。

今回アーカイブをカスタマイズするにあたって、Simplicityのソースを調べたところ、このアコーディオンを組み立てるためにJavaScriptでアーカイブのDOMをゴリゴリ操作していることがわかりました。
そこからさらにJSで手を加えていくことはちょっとコストオーバーかなと思い、別プラグインを追加することを選択しました。

通常はSimplicityのアーカイブで十分使いやすいと思いますよ!


スポンサーリンク
ad_336
コメントの入力は終了しました。