WordPressの月別アーカイブをモーダルウィンドウ風の表示に変えてみた

2012.12.27

simplemodal

このブログも来年には8年目に突入するのですが、長いこと続けていて困るのが過去のアーカイブへのリンクメニュー。最近はプルダウンで選択するようにしていたのですがイマイチ使い勝手が悪かったのでずっと気になってました。かといってずらずらと書き出してしまうのも邪魔くさい。そんなわけで、jQueryでLightbox風というかモーダルウィンドウ風に月別アーカイブのリストが表示されるようにしてみました。

もちろん自分で一から作れるわけもなく、すでに公開されているスクリプトを使用します。今回使わせてもらったのは、こちらのSimpleModalWindows

設置方法はリンク先にある通りで難しいことはありません。
[html]
<div id="hogehoge">
表示したい内容
</div>
[/html]
という内容を”display:none”で用意しておき、
[html]
<a class="modal" href="#hogehoge">~</a>
[/html]
という感じでclass名に”modal”、リンク先に用意しておいた表示したい内容のIDを書いておくと、その内容がモーダルウィンドウで表示されます。

私の場合上記のhogehogeの中身に月別アーカイブを登録しているだけです(そのままwp_get_archives()で取得すると「2012年12月」という感じでずらずらと並んでしまうのでこちらを参考に年別に分けて表示しています)。

これで少しは使いやすくなったかな?まぁ、一番使っているのは私の気がしますけども。

タグ: , ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

Amazon、最大3000円オフになる「IIJmio × SIMフリースマホ セット割特集」開催中

Amazonで格安SIMとSIMフリースマートフォンのセットが最大で3000円割引になる「【最大3,000円OFF】IIJmio × SIMフリースマホ セット割特集」を開催しています。SIMはIIJmioとBIC SI ...

News >モバイル

Xiaomi、次世代フラッグシップ Mi6を発表 Snapdragon 835にデュアルカメラ搭載。

先週水曜日の話ですが、Xiaomiが最新フラッグシップとなるMi 6を発表しました。全体的な雰囲気は前モデルとなるMi5に近いものの、やや丸みを帯びた印象です。 ディスプレイは最近はやりの全面ディスプレイでもエッジディス ...

News >モバイル

BlackBerry Keyoneの発売はさらに遅れる?

英Cloveで5月5日に発売とアナウンスされていたBlackBerry Keyoneですが、どうやらさらに遅れるようです。 関連:BlackBerry Keyone、英Cloveには5月5日に入荷。米国での発売も5月にな ...

雑記

HUAWEI Mate 9のブートアニメをPorsche Designのものに変えてみた

HUAWEI Mate 9には、Nate 9 Proと同じデザインのMate 9 Porsche Designというちょっとお高いモデルがあります。 関連:HUAWEI、次期フラッグシップ「HUAWEI Mate 9」発 ...

News >モバイル

HUAWEI P10 / P10 Plusのストレージには3つの規格が混在するもHUAWEIは「問題ない」という見解。さらにMate 9も混在?

HUAWEIの最新フラッグシップ P10。フロントにもライカレンズを採用するなどフラッグシップにふさわしい意欲的な(ただP9、Mate 9からあまり変わり映えがしないけど)端末となっていますが、そのP10にちょっとした騒 ...

MENU

back to top