WordPress Popular Posts応用|人気記事の記事上表示・条件分岐

記事上に人気記事一覧を作る

人気記事や関連記事の表示はサイト回遊率を上げ、PVのアップにつながる

サイドバーや記事下に人気記事や関連記事を一覧表示させる → サイト回遊率をアップ → PVがアップする

ということで、これを実現するためのプラグインはたくさんあるのですが、

『記事上に』人気記事や関連記事を表示させ、更なる回遊率アップを狙う

には少々カスタマイズが必要です。

また、個人的な意見では、ページ上部にあまり重いデータ(:大きな画像や動画)を入れるとページの読み込み速度が遅くなるので、

  • テキストデータで表示させる
  • サムネイルを表示させたい場合は、小さな画像にする

といった配慮が必要だと思いますし、

モバイルの場合は検索結果から記事ページに訪れた時に、読みたい記事がすぐに目に入ってこないことで検索ユーザーさんを迷わせたり、イライラさせたりしてしまうと、回遊率どころか離脱率をアップしてしまいかねない・・・とも思います。ですので、

  • モバイルの場合は非表示

という設定にする方が良いように思います。

以上を踏まえて、ここでは、WordPressプラグイン・WordPress Popular Postsの力を借りながら、

「PC表示の際に、記事上に人気の記事を表示する方法」を見ていきましょう。

まず、WordPress Popular Postsをインストール・有効化しておいてください。

WordPress Popular Postsのパラメーターをチェックする

WordPress Popular Postsには、phpファイル内で使うことのできるパラメーター(:変数・動作を制御するために指定する条件・情報といったところ)が用意されています。

このパラメータは、プラグイン管理画面からWordPress Popular PostsのSettingsをクリック、
WordPress Popular Postsのsettingsを開く

Parameters というタブを開くと表示されます。
WordPress Popular Postsのパラメーター

たくさんのパラメーターが用意されており、phpファイル内に記述する場合の例:Exampleも一番右に表示されています。

複数のパラメーターを使いたい場合は、パラメーターを&でつなげればOKです。

ここでは、以下の条件でパラメーターを組み合わせると、

  • 週単位
  • 記事数:5
  • ビュー(閲覧)数順

下の様なコードになります。

<?php if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular('range=weekly&limit=5&order_by="views"');?>

コード図解
WordPressPopularPostsコード

作成したコードに投稿・PCオンリー・ブログのトップページでは非表示の条件分岐をつける

コードができたら、これに

  1. 投稿記事ページのみ : is_single()
  2. モバイル表示ではない : ! wp_is_mobile()
  3. ブログトップページでは非表示 : ! is_home()

という条件を付けると、条件分岐タグは、以下のようになります。

<?php if ( is_single && ! wp_is_mobile() && ! is_home() ) : ?>
--ここに条件を課す記述を入れる--
<?php endif ; ?> 

ここに先ほどのコードを組み合わせると、

<?php if ( is_single && ! wp_is_mobile() && ! is_home() ) : ?>
<?php if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular('range=weekly&limit=5&order_by="views"');?>
<?php endif ; ?>

となります。

作成したコードをテーマ内のphpファイルに貼り付ける

作成したコードを記事上に表示される場所に貼り付けます。

テーマによってファイルが違うので、一概にココ、と言えないのですが、記事上なら投稿ページ用php(例:single.php)の content のスタート直後に置くのが一番わかりやすいのではないかと思います。

デフォルトテーマ、Twenty Twelve、Twenty Thirteen、Twenty Fourteen、Twenty Fifteenの場合は、外観 → テーマの編集 をクリックし、content.phpを開き、content.php 内の


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
--ここに入れる--

のすぐ下に設置すれば、デフォルトの状態で使用している場合、投稿記事ページのサムネイル(アイキャッチ画像)の上に表示されます。
※–ここに入れる– はすべて消去してください^^;

後はお好みでCSSを使って見映えを整えるだけでOKです!!(^^)

記事上一覧の例

ではでは、今日はこの辺で。

「Wordpress Popular Posts応用|人気記事の記事上表示・条件分岐」でした。

お役に立ちましたら、いいねボタンなどをクリックしていただけると嬉しいです。

Published:2015/10/01

Written by

WordPress Popular Posts応用|人気記事の記事上表示・条件分岐」への2件のフィードバック

  1. ピンバック: wordpress メモ | sample

コメントを残す