2012
12
20

WordPress Popular Postsで、現在とそれ以外のカテゴリの人気記事をそれぞれ表示する

このブログでは、wordpress popular postsというプラグインを使ってサイドバーに人気記事を表示しているんですが、カテゴリごとの人気記事や、特定のカテゴリを除外したランキングなどもできるみたいなので色々試してみました。


ご注意

現在はこのプラグインを使っておりませんので、記事内容が古い可能性があります。

PV向上を考える

この記事を拝読して、なるほど新規訪問だけじゃなくて、訪問別ページビューを上げるというのも重要だなぁと思いました。現在、記事終わりに関連記事を表示していますが、これは同じタグがついているものを新しいものから5件表示するだけなので、過去の記事は出にくい構造になっています。

そこで、こちらを参考にさせて頂いて関連記事に加えて人気記事も表示させてみよう!と思いました。丁度wordpress popular postsを使っており、サイドバーに全記事の人気5つを表示させているので、現在のカテゴリの人気記事とかいいなぁ…という妄想からスタート。

特定カテゴリ除外もできるらしい

カテゴリを絞っての人気表示ってたしかできたはず…と、Popular Postsのテンプレートタグを眺めていたら、こんな記述を発見。

121220-1

マイナスするとそのカテゴリを除外できる…!これは素敵機能だ!

それなら、現在のカテゴリの人気記事と、それ以外のカテゴリの人気記事とか表示したら素敵じゃないかしらと妄想が加速。

完成図

121220-2

関連記事の下に、このように出してみました。数字アイコンはモダンブラウザのみ表示されます。

※現在は件数を変えています。

実装

single.php

8行目までで現在のカテゴリー情報を取得して、10~27行目で同じカテゴリの出力、29~46行目でそれ以外カテゴリの出力を行っています。11行目では、現在のカテゴリへのリンクもつけた見出しです。

thumbnail_widththumbnail_heightなどの各種パラメータはお好みで変更してください。今回の場合、数字を出してランキングっぽくしたかったのでol要素を使ってますが、ulでも良いかと。19行目がカテゴリID指定、38行目がマイナスしてカテゴリ指定することでそのカテゴリが除外になります。

上記の方法では、カテゴリが複数に跨った場合にひとつしか取得できません。全て取得する方法は記事末尾に追記がありますのでご参照ください。

追記:脆弱性への対処を!

WordPress Popular Posts内のtimthumb.php脆弱性が見つかっているそうです!回避するには、wp-content/plugins/wordpress-popular-posts内のwordpress-popular-posts.phpの、

の箇所を

へ書き換えて、timthumb.phpを削除します。

こちらの記事を参考にさせて頂きました!どのような脆弱性なのかも詳しく書かれているので、ご一読されることをおすすめします。

※注記:ver2.3.3からtimthumb.phpが無くなっているそうです!

style.css

こんな感じのCSSにしています。olでWebフォントを使った数字つきリストにして、背景画像と一緒にちょっと透過させてみてます。IE7以下には表示されません。

こんな簡単画像でよろしければ、フリー素材として使って頂いて構いません。著作権表示もバックリンクも要りませんよー。

ol要素のカスタマイズ方法などはこちらの記事でもご紹介しています。

で、56行目なんですが…IE8だとフォントの背景画像がサムネイル画像よりも後ろにいってしまい、z-indexで指定してもうまくいかず…数字だけ見えててもおかしいし、どうせIE7以下じゃ見れないので、IE8もCSSハックで非表示にすることにしました。。

※IE8に効くハックのはずなんですけど私のIE9ブラウザで表示されないんですがどういうことなの…(´A`) chromeとかではOKだと思うんですが。変なところありましたら情報頂けたら嬉しいです!

前よりちょっと見栄えも良くなったかな?w しばらくこんな感じで様子を見てみます!

2013年7月追記

サムネイル表示が一時的に出なくなった

2013年6月中旬頃より、一時的にサムネイルが読み込めなくなる不具合が発生しました。このプラグインは2013年6月6日にバージョンが2.3.5にアップデートされたようでして、読み込めなくなる症状を初めて確認したのが6月12日。うーん…関係があるのかなー。

サムネイルさえなければ読み込みも正常で、勝手に画像が作られることもないようなのでとりあえず暫定でサムネイル無しで運用して様子を見ていたら、間もなく直ったようでした。

指定サイズの画像が生成される仕様に…?

以前は、元ファイルは違う大きさでも、サイズ指定(例えば、横220縦150とします)しておくと、元のファイルを

のようにして表示してくれる仕様だったはずなのですが、見てみたら

という指定したサイズの画像が自動生成されていました…!私の個人的な好みだとは思うのですが、画像が勝手に増えるのは…!いやだッ…!((└(:3」┌)┘))

2013年5月末までは、画像が自動で追加されているということはなかったので(バックアップで四苦八苦してたものでちょうど覚えてました)新しい仕様だと思うのですが…!

ということで、画像を自動生成しないでどうにか同じことはできないものか…!と、WP-PostViewsというプラグインで同じレイアウトにしてみた記事がこちらになります。

2014年3月4日追記

またもやこちらのプラグインに舞い戻ってきましたw やはり週間や月間などで範囲を区切れるのがすごく魅力的…ッ!画像を自動生成しないで表示する方法や、上記のコードだと複数カテゴリにまたがっているときにひとつしか取得できていないので、そのへんも含めた+αカスタマイズを書き残しておきます。

現在の記事を除外

パラメーターの中にこれを追記してやればOK。現在表示されている記事IDを指定してやります。

複数カテゴリにまたがる記事がある場合

現在のカテゴリを配列で取得しておいて(3行目)、その配列をカンマ区切りで文字列化したものを入れてやります(9行目)

他カテゴリは、さっき取得した現在カテゴリ以外のカテゴリを配列に入れて(17, 18行目)、カンマ区切りの文字列化して入れ込む(24行目)という感じ。

サムネイルを自動生成しないで表示

こちらの方法は、プラグイン編集からwordpress-popular-posts.phpを直接いじる形になるので、あんまりお勧めはしません…。アップデートなどで元に戻ってしまう恐れもありますので、自己責任の上ご参照ください。

今まではこのように書いていましたが、

こう書いてみます。こうすると、wordpress-popular-posts.phpの1234行目あたりに書いてある、

この部分が{title}で呼び出されます。なのでここを、

このようにサムネイルも一緒に呼び出すように書いてあげます。この例ではサムネイルの大きさが長辺が100px、altにタイトルが入るように書いてあります。

2014年5月27日追記

また違うプラグインに移行しました(;´Д`) 詳しくはこちら。

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

公開日:2012/12/20
更新日:2014/05/27


12件のコメント

  • わこう
    2013年4月8日 10:40 AM

    参考にさせていただきました!
    ありがとうございます。

    こちらのサイトのセンスの良さにひかれてしまいましたよー

    • *you
      2013年4月8日 12:47 PM

      わこうさん、コメントありがとうございます!
      なんて…なんて嬉しいお言葉…。・゚・(ノД`)・゚・。
      是非また遊びにきてくださいー(*´∀`*)

  • わこう
    2013年4月14日 10:26 PM

    いえいえ!めっちゃありがたいソースコードのご提供だったんですが、
    れいの脆弱性のコードを消しちゃうと・・・
    サムネイルのサイズってどうやって処理すればいいのでしょうか?
    サイドバーにサムネイルをつきの記事をいれたくって・・・・こんなこときいちゃってごめんなさい。

    • *you
      2013年4月15日 10:02 AM

      ウィジェットの使えるテーマならそこからも設定できますし、この記事のsingle.phpの例で示した17,18行目のように書けば、縦横のサイズを指定できるはずですよー!

  • わこう
    2013年5月1日 10:20 PM

    すいません。返事が遅くなってしまいました!
    ありがとうございます。
    設定できました!感謝感謝です。
    これからもいろいろと教えてくださいませ!

    • *you
      2013年5月2日 4:42 PM

      いえいえお返事なんていいんですよー!
      でもありがとうございます(*´∀`*)

  • belle
    2015年4月12日 6:50 PM

    すごくわかりやすかったです。
    カテゴリ除外といい、レイアウトといい、やりたいことが全て書いてありました。
    ありがとうございました!

    • *you
      2015年4月13日 4:08 AM

      belleさん、コメントありがとうございます。お役に立てて光栄です!(*゚ω゚*)

  • ライトニング
    2016年2月2日 3:51 AM

    *youさん初めまして。
    こちらの記事を参考にさせて頂きました。
    なぜか私の環境ではwp_get_post_categories()で抽出できない問題が発生。。。
    うーむ何故なんでしょう??
    一応下記の記事にも書きましたが
    http://lightning2014.ensyutsubu.com/blog/post-6279/
    余計な作業が増えてしまっています。
    一応 ご報告まで

    • *you
      2016年2月2日 10:27 AM

      ライトニングさん、コメントありがとうございます。

      そんなことあるんですね! 試せないので何とも言えませんが、ウィジェット内だからなのかもしれませんね。別の方法で実装できていれば良いと思いますよー、ご報告ありがとうございます!

  • 渡辺
    2016年2月4日 12:23 PM

    管理人様
    いつも楽しく拝見させてもらってます。
    良かったらこれにカスタムフィールドで設定した値を追加する方法も教えていただけたらありがたいですσ^_^;
    調べてもよく分からなかったのでσ^_^;

4件のトラックバック

コメントを残す




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


back to top