Wordpress WP-PostViewsを使って人気記事をランキング表示する方法 ホームページ制作 | 墨田区

WordPress WP-PostViewsを使って人気記事をランキング表示する方法

LINEで送る
Pocket

WordPressでWP-PostViewsを使ってランキング表示する方法をご紹介します。
Wordpress WP-PostViewsを使ってランキング表示する方法 「WP-PostViews」プラグインを使うと、記事の閲覧回数を元にランキングをサイドバーに設置することができます。人気記事のランキングだけでなく、不人気記事のランキングも設置できます。(そんな使い方する人いるのかな・・^^;)

とはいえ、そのまま使ったのでは面白くないので、「WP-PostViews」プラグインのウィジェットを設置してランキングを表示する機能は一切使わず、オリジナルテーマに人気記事ランキングを表示する方法 をご紹介したいと思います。

このサイトでも導入している方法ですので、皆さんも試してみてください。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


WP-PostViewsプラグインをインストール

早速「WP-PostViews」プラグインをインストールしましょう。
Wordpress管理画面からプラグインを選択し「WP-PostViews」を検索してインストールします。
WP-PostViewsプラグインをインストール

有効化したらすぐにページビューの統計がはじまります。
投稿ページに行ってみましょう。投稿記事に「Views」という欄が増えています。
投稿記事「Views」欄


テーマを編集

sidebar.phpに移動して、以下を記述します。

<ol class="views-ranking">
<?php $posts = get_posts(array(
    'posts_per_page' => 5,
    'meta_key' => 'views',
    'orderby' => 'meta_value_num',
)); ?>
<?php foreach($posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>

それでは細かな説明をしていきます。

'meta_key' => 'views'

WP-PostViewsプラグインを有効化した時点から「views」という metaデータが付加されます。そのため、「meta_key」に「views」を指定してリストを取得します。

'posts_per_page' => 5,

ここではベスト5までランキング表示するため、「posts_per_page」を 5 と指定していますが、ベスト10を出したい場合は 10 とすれば10件取得できます。

<?php echo get_post_meta($post->ID, 'views', true); ?>

このサイトでは利用していませんが、上記を記述すると閲覧数を表示することもできます。

次に CSS を記述します。style.cssを開き、以下を記述します。

.views-ranking {
  counter-reset:wp-ranking;
  list-style:none;
  margin:0;
  padding:0;
  text-indent: -26px;
  padding-left: 26px;
}
.views-ranking li:before {
  color: navy;
  font-size: 12px;
  font-weight: bold;
  counter-increment: wp-ranking;
  content: counter(wp-ranking);
  background: url('画像パス') no-repeat; /* 任意の画像を指定 */
  background-position: top center;
  background-size: 22px;
  width: 22px;
  height: 19px;
  display: inline-block;
  text-align: center;
  line-height: 17px;
  margin-right: 4px;
  text-indent: 0;
}
.views-ranking li a {
  font-size: 11px;
}

それでは細かな説明をしていきます。

counter-reset:wp-ranking;

「wp-ranking」はランキングを意味する変数です。「counter-reset」で初期化しています。変数名はなんでも構いませんので好きに変更してください。

counter-increment: wp-ranking;
content: counter(wp-ranking);

「counter-increment」で数字をインクリメントして表示します。「content」を記述しないとうまく動かないので必ず記述しましょう。幅や高さは画像に合わせて変更してみてくださいね。

記述したらサーバーにアップして確認してみましょう。
「WP Super Cache」などをインストールしている場合、変更が確認できない場合がありますので、その場合はキャッシュをクリアするか、一度プラグインを停止するなどして確認しましょう。

まとめ

今回ご紹介した方法は「WP-PostViews」プラグインの機能を使うというより、閲覧数を保存するためだけに「WP-PostViews」プラグインを使うというのが正しいでしょうか。プラグインで記事ランキングを表示するのではなく、あくまでオリジナルの方法でテーマに記述するといった方法でした。

このサイトではこの方法でランキング表示していますが、もっといい方法もあると思いますので、色々試してみてくださいね。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Wordpressの勉強が思うように進まないときは!

Wordpressの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Wordpressコースあり!オンライン完結型 テックアカデミー TechAcademy [テックアカデミー]

どこかに通う必要なく、自宅でプログラミングやアプリ開発を学ぶことができるのが特徴のスクールです。未経験からプロになるまで最短4週間という、超短期集中型の学習ができます。年齢層は10代〜40代の男女が中心で、学引があり多くの学生が受講しているそうですよ。オンラインで受講ができるスクールですので、全国どこからでも学習ができますね。

更にさらに、パーソナルメンターにチャット質問できちゃうんです!!

これは素晴らしいことですよ!ハマったり困ったことが起こるのがプログラミングの世界。知っている誰かに聞けば数分で解決することが、自分だけだと何時間もかかったりしますから!

いやー、便利な世の中になりましたよねー。講師もバリバリのエンジニアということですから、なんとも素晴らしいスクールがあったものですね。学割を使えば社会人より半額以下で受講できますから、学生さんには超おすすめです。

オンラインスクールですから営業エリアは全国です。
気になる方は一度チェックしてみてください。無料の動画説明会も常時開催していますよ。


Wordpressコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Wordpressコースあり!現場のプロが直接教えてくれる 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL