まだ、そんなに記事も無いのにもかかわらず何をしとるんだ？と言われそうですが、ランキングのページを作りました！方法としては、
- 期間別にページを3つに分割
- ポピュラーポストのショートコードでランキングを表示
- jQuery Masonryをつかって短冊にレイアウト
ということを行いました。
期間別にページを3つに分割
これにはページを3つ作ってもよかったのですが、ちょっと面倒だったので <!–nextpage–>をつかってページ分割を行いました。HTMLモードにして <!–nextpage–>を入力するだけでいくらでもページが簡単に分割できて楽ちんですね。
ポピュラーポストのショートコードでランキングを表示
これはちょっとやってみて、このプラグインのよく出来てる具合に感動しました。なにもしなくてもディフォルトのプラグインの機能でショートコードがつかえるんですね。おじさんしらなかったよ。。 プラグイン設定のところのヘルプを参考にしながら、
[php]【wpp
range=”all”
limit=”12″
order_by=”views”
thumbnail_width=”180″
thumbnail_height=”180″
wpp_start=”
wpp_end=”
”
post_start=”
post_end=”
”
stats_comments=0】[/php]
こんな感じです（ショートコードなので【】は[]と取り替えて、改行の代わりに半角スペースを入れてください）。
上記のだと 期間を全期間（all）で最大12個（limit）で閲覧数順（views）でサムネイル画像のサイズは縦横180で、最初にrengaというdivで囲って、個別にはpppというdivで囲って、コメント数は表示しない
そんな感じです。
jQuery Masonryをつかって短冊にレイアウト
そんでちょっと並べてみてから、お！そういえばはやりのあれを使ってみよう！ってことでそれぞれのdivをレンガを重ねるように短冊風に高さ調整してくれるjQueryを利用しました。
とりあえずjquery.min.jsとjquery-1.7.1.min.jsを読み込んで
[php]
[/php]
といった感じで全体と個別のクラスもしくはIDの指定をすればOKな感じです。
さらにこのスクリプトはこのページでしか使わないので、
[php]
スクリプトの記述
[/php]
という感じで、ランキングページ以外では読み込まないようにしました。
いやー、はじめて条件分岐やら、テンプレートタグやらを触ってます。ちょっとできるとうれしいですね。たぶん周りの人にいわせれば何言ってるんだこいつは程度のことで恐縮です。
またちょいちょいいじっていきたいです。
実は連休中風邪で、ずっと家にいたので、よい勉強の時間になりました。
あしたからまたがむばりましょう！
ではおやすみなさい。