2013
6
21

WP-PostViewsで、現在とそれ以外のカテゴリ人気記事(サムネイル付き)を表示

WordPress Popular Postsというプラグインを使って、サイドバーと記事終わりに人気記事を表示していたのですが、不具合が生じたのでWP-PostViewsというプラグインで同じ事ができないか試してみました。


WordPress Popular Postsにて

こんなレイアウトにしてました

130621-1

これが、プラグインのアップデートでどうも思わしくなくなってしまったのです。。

WP-PostViewsを採用

違うプラグインで同じレイアウトに挑戦!

重要な追記(2014/5/7)

これよりプラグイン編集などの方法を紹介していますが、WP-PostViewsを使ったもっともっと簡単な方法を末尾に追記してありますので、是非そちらをご参照ください。

サムネイル表示

このプラグインはサムネイル標準装備ではないので、こちらを参考に手を加えさせて頂きました。

wp-postviews/wp-postviews.php(ダッシュボード→プラグイン編集)

130621-2

この部分を、

このようにハイライト部分を追加。サイドバーに出力するほうを基準にサイズを指定して、altとtitleも入れてみました。

Post Viewsオプション(ダッシュボード→設定)

130621-3

リスト形式で、サムネイルとタイトルだけにしています。

直接テーマに書き込む

WordPress Popular Postsのときも思ったのですが、ウィジェットを使うより直接テーマに書き込んだほうがカスタマイズしやすいですよね。こちらのサイトを参考にさせて頂きながら、パラメータを設定してテーマに書いていきます。

総合人気記事

130621-4

サイドバーに出してるやつ。出来上がりはこんなイメージ。

sidebar.php

3,5行目で存在確認、4行目が出力です。対象は記事のみ(固定ページを含まない)で5件、先ほど設定したとおりli形式で出てきます。。HTML5を意識するなら、ここはサイドバーなのでdivではなくasideが良さそうですね。

style.css

昔書いたことがあるのでこちらをご参照ください。

先ほどプラグイン編集で設定したサイズの画像が出力されるので、大きさなどはいじらなくて大丈夫ですね。

現在のカテゴリの人気記事

130621-5

出来上がりはこんなイメージ。子カテゴリまでは検証しておりません。

single.php

6行目で、現在のカテゴリIDを取得しています。前回書いたものは、ひとつの記事に複数のカテゴリが設定されていたとき、ひとつのカテゴリしか取得できていなかったので、配列ですべて取得できるようにしました。wp_get_post_categoriesという関数を使っています。

8行目はWP-PostViewsのカテゴリ別での出力です。6行目で取得したカテゴリID配列を指定、対象は記事のみ(固定ページを含まない)で4件表示しています。

style.css

このブログで使っているCSSです。前も書いたと思うのですが、ちょっと変わってたりするので一応。ol要素の番号を背景画像をつけてサムネイルの上に重ねています。55行目以降、マウスホバーでサムネイルがちょっと透けるようにしたらIE8以下でol要素の背景画像が消えちゃうっぽいです。お好みでどうぞ。

ここでは出力された画像と違う大きさに設定したいので、ハイライト部分で画像サイズを調節しています。全部の大きさが一緒ならこんなことしなくても済むんですけどね。。

他カテゴリの人気記事

130621-6

出来上がりはこんなイメージ。子カテゴリまでは検証しておりません。

肝は現在のカテゴリ以外のカテゴリIDを配列で取得…。いろいろ調べた結果、get_termsという関数を使うのが良さそうでした。

7行目で、先ほど取得した現在のカテゴリID配列を、取得したくないIDとして指定しておきます。で、10行目で変数$termsに特定以外のカテゴリID配列が入るので、12行目で目的が果たせました!

cssはさっきと一緒なので割愛します。

勉強になりました

このプラグインでは週間や月間の期間指定ができないのがちょっと残念ですが…、でも自分で調べて実装できると嬉しいですね!WP-PostViewsお使いの方は参考にしてみてください!

2014/5/7追記

こちらにあるとおり、WP-PostViewsは有効化するだけでもっと簡単な使い方があります…!これまで紹介したプラグイン編集などはまるっきり必要ありません。そもそもプラグイン編集は、あんまりしないほうが良いですよね…(;´Д`)

このようにsingle.phpで現在のカテゴリを配列で取得したら、

こうやって書けば良いだけ。現在以外のカテゴリは、頑張ってget_terms使って配列を取得…とかしなくても、

こうやってnot_inで書いてあげれば良いだけ!こんなに簡単に出来るんですね…(*´ω`*)

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

公開日:2013/06/21
更新日:2014/05/07


2件のコメント

  • bum
    2013年12月25日 1:28 AM

    大変参考になりました。
    よろしければ教えていただきたいのですが、
    サムネイルと記事タイトルに加え、記事に設定したタグ名を表示するにはwp-postviews.phpにどんな記述を加えればよいのでしょうか?

    • *you
      2013年12月26日 2:41 PM

      bumさん、コメントありがとうございます。

      と書けば%TAGS%で出力できるようになります。

      4行目のaタグの頭は意図的に外してあるので、お使いの際は追記してください。リンクを入れるとnofollowが入ってしまって(;´Д`)

      当初the_tags()が使えれば楽かなと思ったのですが、投稿IDの指定が出来なさそうなのでget_the_tags()を使って指定記事のタグ情報を配列に格納して、nameslugを取り出してリンクの形に生成して出力、という形にしています。

      • WordPress › フォーラム » the_tags()の表示順カスタマイズ

      こちらを参考にさせていただきました。

      ちなみに蛇足かもですが、リンク無しなら

      このように書けば良いかと思います。

コメントを残す




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


back to top