WordPressで月間とデイリーの人気記事をスペースを節約しながら表示させる。


公開日:2013年10月02日 水曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:175 | Leave a comment

ランキング
先日の投稿で、

「人気記事のデータが溜まってきたから月間ランキングも考えなくっちゃ。」

と、結んだこともあり、色々考え、調べ、たどり着いたのがこちら。

【カスタマイズ】月間とデイリー、2つの人気記事ランキングを設置する : りくまろぐ
[Я]jQueryを使ってサイドバーの複数ウィジェットをタブ化する : りくまろぐ

こちらには、ほんと勉強させていただいてます。
ほんと、いつもためになる記事、ありがとうございます。
そして、ありがたくいただきまーす♪

いままで、表示していたデイリーランキングに加えて月間のランキングも表示し、かつ、タブ切り替えにしてスペースを節約しようという魂胆です。

もう、ほぼ丸パクリでお恥ずかしい限りですが、CSS(スタイルシート)なども合わせて載せときます。

ご参考になれば。
詳しいコードの解説などは元記事でご確認くださいませ。
注:ねこもりやは、直接ウイジェットにPHPコードを書くために、Exec-PHP というプラグインを入れてます。

追記

2013/10/7現在以下の様にExec.phpを使わない選択をしました。

ウイジェットに書いたコード

結果、シングルページでは、その記事が属するカテゴリーのデイリーランキングと月間ランキングを、トップページやアーカイブでは全体のデイリーランキング及び月間ランキングを表示。

スタイルシート(CSS)

サイドバーには、他に埋もれてる記事とか、10年日記ぽいものとか未来の投稿とかありますが、ちょっと目立たせました♪ div要素の背景(ピンク水玉)を生かして、li要素の背景は透過PNGを使っています。

head内に記述するjavascript

「/head」タグの直前でいいと思う。 一応、ほかのjavascriptやプラグインと競合しないか確認を・・・ たとえば、LightBoxとかスクロール系とか。 ランキング

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年10月02日 水曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:175 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

  • 鬼灯

Leave a Reply

Required fields are marked *


CAPTCHA