2016
9
26

WordPressの月別アーカイブをプラグインを使わずに年単位で開閉させる

長くなりすぎた月別アーカイブリンクを、年ごとにjQueryでアコーディオン開閉させたいなと思って書きました。プラグインを使わず実装できたので、ひとつの方法としてシェアします。


月別アーカイブ長すぎ問題

このブログはPCとスマホで別テーマを作ってあります。PC版のアーカイブは、Compact Archivesというプラグインを使って

160926-1

フッターにこんな感じで表示してました。

で、スマホ版は数年前にこのあたりの記事で書いたように、

こんなふうによくある形で書いてすっかり放置してしまい、先日なんとなくスマホのメニューを見ていて

160926-2

なんとなくタップしてみたら

160926-3

ウワァァァァァアァアアアァァ!!! (>’A`)>

あんまりひどかったので何とかしたいと思って書きました。勢いでPHPまで書いて、できたできたー! って喜んだものの、それから調べてみたら同じような結果になるプラグインや方法を提示している記事もたくさんありまして、今更感なのですが…。

でもせっかく書いたし、コードは人それぞれだし! と思って記事にしておきます。

結果

160926-4 160926-5

現在の月からさかのぼって、一番古い投稿のある月までのアーカイブリンクを出力します。最初の年はデフォルトで開き、それより前の年はたたまれます。他の年を開くと、連動して開いていたところが閉じます。

スマホ向けで作ったのでアイコンやリストマークはCSSで出来ています。PCはモダンブラウザ推奨ということで。

デモ

デモというか動作確認はこのブログのアーカイブリストのページをご覧ください。スマホ用に作ったページなので普段PCからはリンクしてないのですが、PCからでも動きは見れます。

実装

目指すHTML

こういう形のHTMLを出力するためのPHPを書きます。

span部分がプラスのアイコンになるところです。最初の年は開いておくので、3行目にacv_openというクラスをつけて、アイコンを変えたりjQueryで開く処理に使います。

次の年からは閉じておくためにulhideというクラスをつけて、あとは一番古い投稿日がある年まで続きます。

functions.php

それではここから実際に書くコード。

指定した年の投稿数、指定した年月の投稿数、それと一番古い記事の投稿年を取得する関数を書きます。

WPのデータベースにSQLを投げて投稿数とかをもらってきます。

このへんは、昔自分で書いた記事が役に立ちました。まとめとくもんだと思った!

任意のテンプレートファイル

上で書いた関数を使って、アーカイブリストを出したい場所に以下を書きます。

16行と25行が「YYYY年 (n)」を出力しているところで、40行が「YYYY年MM月 (n)」のリンクを出力しているところなので、表記を変えたい方はここを変更してください。

CSS

色を変えたい場合はハイライト部を変更してください。

リセット部分とか、いろんなところのpx数なんかは環境によって異なると思いますので適宜調整してください。

CSSはこちらを参考にさせていただいてます。Naoyaさんいつもありがとうございますー!

jQuery

動きは、こんな感じ。jQueryの読み込みは別途行ってくださいね。

関連記事&参考はこちらです! かちびとさんには何度お世話になっていることか!

あとがき

と、いう感じで実装しました。もっと早く気づけばよかったと反省です。このPHPを書いてるうちに、あっこれPCテーマの月別アーカイブもプラグイン外して自分で書けちゃうなと思って、ついでにそれもやっちゃったので、次はそのことについても書こうかなと思ってます。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2016/09/26


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top