特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

WordPress Popular Posts プラグインで人気記事を表示・カスタマイズする方法

記事のランキングを表示させることでPV数をあげることができたり、リピーターが増える確率が上がったりしますので、WordPressのサイト上で人気記事のランキングを表示する「WordPress Popular Posts」について解説します。

カテゴリ: WordPress

こんにちは!エンジニアの高澤です。
WordPressでサイト制作をしていて人気記事のランキングが必要になった場面はありませんか?
サイト上にランキングを表示するメリットは大きく、ご要望としては大変多いのではないでしょうか
今回は、WordPressのサイト上で人気記事のランキングを表示してくれる「WordPress Popular Posts」プラグインについて解説していきたいと思います。
当記事では、そんなWordPress Popular Postsプラグインの使い方を、ウィジェット高度なカスタマイズの2つの方法を解説するので、最後まで読んでいただければ実務で通用するレベルまでスキルアップできます。ぜひ、当記事を参考にしながら制作していただければと思います。

そもそもサイト上に記事のランキングを表示するメリット

サイト上に記事のランキングを表示させることにどんなメリットがあるかというと、大きく下記の2つメリットがあります。

  • 1人あたりのPV数をあげることができる。
  • クリック誘導が増加し、リピーターが増える確率が上がる。

まず1つ目のメリットですが、サイト上にランキングを表示させることでユーザーは質の高い需要のある記事をすぐに見つけることができます。その記事がユーザーにとって有益でかつ内容が優れているものであれば興味を持ってもらえる可能性が高いので、滞在時間や回遊率が上がりPV数(ページビュー数)が上がります。
2つ目のメリットは、ランキングを設けることによってクリック誘導が増えるきっかけができ、リピーターが増える確率が上がります

また、運用側のメリットとしてあげれば、記事を書いたライターのモチベーションにつながるということが言えます。自分が書いた記事がランキング上位に上がっていた時の喜びは大きいものです。

今回は上記のメリットからランキングを設置することに重要性を感じ、ランキングを簡単に実装してくれるWordPressのプラグイン「WordPress Popular Posts」について詳しく解説していきます。

WordPress Popular Posts とは

WordPress Popular Postsとは、人気記事を表示するプラグインです。使い方は簡単で、かつ自由にカスタマイズすることが可能なのでとても便利です。

WordPress Popular Posts を利用するメリット

WordPress Popular Postsはプラグインなので、WordPressの管理画面からインストールして、簡単な設定・実装をするだけでサイト上にランキングを表示することができます
そのため、Webサイトに携わるエンジニアの方からWebデザイナー、Web担当者の方、またプログラミングの知識をお持ちでないブロガーの方など幅広い方に扱うことができます。

WordPress Popular Posts のインストール方法

まずは「WordPress Popular Posts」プラグインをWordPressにインストールしましょう。下記の順番で進めばインストールすることができます。

1. WordPressの管理画面の左側にある「プラグイン」をクリックする。


2. 1の後にサブメニューが開くので、出てきた項目の1つの「新規追加」をクリックします。


3. 開いたプラグインの新規追加ページの右側に検索入力欄があるので、そこに「WordPress Popular Posts」と入力し検索します。


4. プラグインの一覧にWordPress Popular Postsが表示されるので、「今すぐインストール」をクリックします。


5. 4の「今すぐインストール」をクリック後に、「有効化」をクリックします。


以上の順番通りに進めばプラグインがインストールされます。

WordPress Popular Posts でランキングを表示する方法

では、WordPress Popular Posts を有効化したら、実際にサイト上に人気記事一覧を表示してみましょう。
ランキングを表示する方法は大きく、「ウィジェット」を使うか「専用のテンプレートタグ」を使う2つあります。今回は、WordPress初心者の方でも扱いが簡単なウィジェットの解説をし、そのあとWordPressをプログラムを利用して高度なカスタマイズをされる方向けに実装方法を解説いたします。

ウィジェットでランキングを表示させる方法

ウィジェットを使う方法は少しのプログラムを書き加えるのみなので簡単です。ここからはシンプルなランキングを表示させるための手順をご説明いたします。
※1〜6までありますが、1〜2の内容はテーマをスクラッチ開発する際に必要なものなので、一般に配布されているテーマをインストールする場合やすでにウィジェット機能があるテーマに関しては必要ありません。

1. functions.phpにregister_sidebar()関数を記述する

①WordPressの管理画面の左側にあるメニューから、「外観」をクリックします。
②開かれたサブメニューの1つに「テーマエディター(もしくはテーマの編集)」があるのでクリックします。
③画面右側にある「テーマファイル」の中の「functions.php」をクリックします。
④プログラムを記述できる欄があるので、そこに下記のコードを記述します。(コピペで大丈夫です)

register_sidebar(array(
    'name' => 'サンプルランキング',
    'id' => 'sample_ranking',
    'description' => 'サンプルサイトのランキングを表示するためのウィジェトです',
));

2. サイト上表示させたい箇所に、dynamic_sidebar()を記述する

①WordPressの管理画面の左側にあるメニューから、「外観」をクリックします。
②開かれたサブメニューの1つに「テーマエディター(もしくはテーマの編集)」があるのでクリックします。
③画面右側にある「テーマファイル」の中の「(例)sidebar.php」をクリックします。
④プログラムを記述できる欄があるので、そこに下記のコードを記述します。(コピペで大丈夫です)

if(is_active_sidebar('sample_ranking')):
    dynamic_sidebar('sample_ranking');
endif;

3. WordPress管理画面のウィジェットの設定をする

①WordPressの管理画面の左側にあるメニューから、「外観」をクリックします。
②開かれたサブメニューの1つに「ウィジェット」があるのでクリックします。
③画面右側に「サンプルランキング」というウィジェット追加項目が確認できます。
④画面左側にある「利用できるウィジェット」の中に「WordPress Popular Posts」があるので、それを③の「サンプルランキング」にドラック&ドロップします。
⑤ドラック&ドロップした「Wordpress Popular Posts」をクリックしていただくと各種設定できる項目が多数確認できると思いますが、とりあえず一旦表示がうまくいっているか確認したいので「完了」をクリックします。
⑥⑤まで完了したら、早速サイトを確認してみましょう。ランキングの表示ができていると思います。

4. 管理画面でのウィジェットの詳細な設定方法

①WordPressの管理画面の左側にあるメニューから、「外観」をクリックします。
②開かれたサブメニューの1つに「ウィジェット」があるのでクリックします。
③画面右側に「サンプルランキング」にある「WordPress Popular Posts」をクリックしたら各種設定できる入力欄が表示されるので、そこで様々な設定ができます。

ここからは、各種設定について解説していきたいと思います。
ここで説明させていただく項目はいずれもカスタマイズする必要性が高いかと思います。



(1)タイトル
ランキングの上部に表示されます。任意のタイトルを入力してください。

(2)最大表示数
ランキングの一覧を表示させる件数を指定できます。

(3)ソート順
コメント、総閲覧数、1日の平均閲覧数、の3つのいずれかを基準にしてソートできます。
基本的に総閲覧数でいいかと思います。



(4)計測期間
ランキングとして表示させるための対象期間を指定できます。
24時間、7日間、30日間、全期間、カスタム、の5つから設定できます。
ちなみに、カスタムはより柔軟に計測期間を設定できるもので、このカスタムの設定方法の手順はWordPress管理画面の「設定」→「WordPress Popular Posts」→「統計情報」→「カスタム」で設定できます。

(5)投稿タイプ
ランキング表示させたいデータを指定します。デフォルトは「post」となっていますが、取得したいデータは基本的に投稿データだと思うのでそのままで大丈夫です。

(6)除外する投稿ID
ランキング表示させたくない投稿データのIDを指定します。

(7)タクソノミー(カテゴリー・タグ・カスタム投稿タイプ)
ランキングに表示させる条件をタクソノミー基準で絞ることができます。
それぞれ投稿データごとのIDを指定します。

(8)投稿者ID
投稿者が複数存在し、ランキングに表示させたくない投稿者の投稿データがある場合投稿者のIDを指定します。



(9)投稿設定
ランキングに表示させる要素として、タイトルを短縮、抜粋を表示、アイキャッチ画像を表示、の3種類を設定できます。
タイトルを短縮・・・タイトルの文字数を指定して制限することができます。
抜粋を表示・・・抜粋文の文字数を指定して制限することができます。
アイキャッチ画像を表示・・・投稿データごとのアイキャッチ画像を表示できます。アイキャッチ画像の幅や高さを柔軟に設定できます。

(10)統計タグの設置
投稿データごとの、コメント数、閲覧数、投稿者名、日付、タクソノミーを表示するかどうかを設定できます。

(11)HTMLマークアップ設定
ランキングを構成するHTMLをより柔軟に設定できます。HTMLの知識がある方向けなので知識がない方は特に触る必要はないかなと思います。
設定できる内容としては、タイトルの前と後のHTML((1)のタイトルを設定した場合)、投稿の前と後のHTML(投稿データ(liタグまでの要素)を囲むulタグの部分)、投稿HTMLマークアップ(投稿データを構成するliタグまでの要素)を自由にカスタマイズできます。

以上がWordPress管理画面から設定できるウィジェットの項目の説明になります。
とても柔軟にカスタマイズすることができることがお分りいただけたかと思います。
サイトの必要性に応じて設定をしてください。

専用テンプレートタグでランキングを表示させる方法

ここからはプログラミング的な要素が大きく関わってきますので、主にWordPressでサイト制作を担当されているエンジニアの方、ウェブデザイナーの方、またどうしてもプログラムを利用して高度なカスタマイズを必要としている方向けにご紹介したいと思います。
プログラミング初心者の方でもできるだけわかりやすくを心がけておりますので、問題解決の参考にしていただけましたら幸いです。
WordPress Popular Postsには、wpp_get_mostpopular()関数という専用のテンプレートタグがあります。合わせてパラーメーターというWordPressの仕組みを利用して、ウィジェットよりも自由な設定ができるのがメリットと言えます。
パラメーターに関しては、WordPress管理画面のプラグイン専用画面(「WordPress管理画面」→「設定」→「WordPress Popular Posts」→「パラメーター」)から確認できます。
(当記事ではパラメーターをまとめた表がありますので、よろしければご利用ください。)
パラメータの全一覧表を確認する

専用テンプレートタグでのカスタマイズのやり方

それでは早速ランキングを表示させる基本の型となるPHPの記述をご説明します。
ランキングを表示させるには、PHPファイルの表示させたい場所に下記のコードを記述します。
パラメーターというものが指定されており、パラメータを利用して表示させる投稿データの条件を詳細に設定できます。
わかりづらい方は、先ほど解説した「ウィジェットでランキングを表示させる方法」の内容を今度はプログラミングで設定するという風にイメージすると理解しやすいのではないかと思います。
プログラミングで設定することによってより自由度が増し、より柔軟な設定が実現できます。

    <div>
        <h4>ランキング</h4>
        <?php
        $wpp = array (
            'range' => 'all',
            'limit' => 5,
            'post_type' => 'post',
            'stats_category' => '1',
            'thumbnail_width' => 90, 
            'thumbnail_height' => 90, 
            'wpp_start' => '<ul class="rank">',
            'wpp_end' => '</ul>',
            'post_html' => '<li class="ranking-box">
                                <a href="{url}">
                                    <div class="ranking-box-left">
                                        {thumb_img}
                                    </div>
                                    <div class="ranking-box-right">
                                        <h5>{text_title}</h5>
                                        <span class="ranking-category">{category}</span>
                                    </div>
                                </a>
                            </li>',
        ); ?>
        <?php wpp_get_mostpopular($wpp); ?>
    </div>

上記が人気順位の一覧を表示するための基本的なPHPの記述です。今回のサンプルでは、サムネイル、記事のタイトル、カテゴリーの3つで構成しています。
その他にタグや記事の抜粋文など表示したいコンテンツがあれば、下のパラメーター一覧表から必要なものを追加して表示できます。

では早速上記サンプルコードのパラメーターを1つずつ見ていきましょう。パラメーターは連想配列のキーと値で構成されていますので、プログラミングにある程度慣れている方であればそこまで難しくはないでしょう。

そもそもパラメーターとは

パラメータとは、WordPressにおいては「キー」と「値」で構成されており、ループで一覧表示させるデータの条件を詳細に指定して絞り込むためのプログラムです。
例えば、「’post_type’ => ‘post’」であれば、「投稿データのみを一覧表示する」という内容で条件を絞り込みます。

“range”とは

“range”はWordPress Popular Posts に指定した時間範囲で投稿データを取得できるパラメーターであり、ランキングの対象とする期間を設定する場面で必要になります。
今回のサンプルコードでは、値に”all”が指定されていることで全期間分の順位データを取得して表示しています。例えば、この値の部分を「週ごと」にしたければ”last7days”「月ごと」にしたければ “last30days”、と指定すれば表示させる範囲を時間で絞ることができます。

“limit”とは

”limit”はランキングをいくつまで表示させるかを指定する場合に必要になります。
今回はキーに”5”と指定があるので、5つ(5位まで)表示されているのがわかります。

“post_type”とは

”post_type”はランキングで表示させるデータの種類を指定する場合に必要になります。
キーには”post”とありますが、これは投稿ページのみ表示します。他に、固定ページを表示させたければ”page”を指定します。

“status_category”とは

”status_category”は各投稿の設定されたカテゴリーを表示する場面で必要になる記述です。
※このパラメーターの指定と併せて、パラメーターの1つの”post_html”の値の中に「{」と「}」で囲まれた専用のタグで{category}を記述すれば記事ごとにカテゴリーが表示されます。
逆に、パラメーターに”status_category”を指定しなければ{category}でカテゴリーを表示することはできません。必ず指定しておきましょう。

“thumbnail_width”、”thumbnail_height”とは

”thumbnail_width”,”thumbnail_height”は、ランキングごとのサムネイル画像の横幅、縦幅を設定する時に必要になります。
※この数値は横幅90ピクセル、縦幅90ピクセルを指定しており、また先述の”status_category”と同じくパラメーターに”thumbnail_width”,”thumbnail_height”を指定しなければ{thumb_img}でサムネイル画像を表示することはできません。必ず指定しましょう。

“wpp_start”、”wpp_end”とは

“wpp_start”,”wpp_end”の2つのキーが指定されています。
このキーはそれぞれ、「リストの開始タグ」と「リストの閉じタグ」を設定する時に必要になります。
今回の例ではulタグがそれにあたります。
次に説明する”post_html”で”wpp_start”と”wpp_end”で出力するulタグで囲むコンテンツを出力させます。なので基本的に”wpp_start”,”wpp_end”,”post_html”の3つはセットで使います

“post_html”とは

これは記事リストごとに HTML構造を設定します。今回の例では外側はulタグを使っているのでliタグを使います。この”post_html”の中で記事リストのコンテンツ(中身)を表示させるプログラムを記述します。
今回の例では専用タグである{thumb_img}、{text_title}、{category}を使ってサムネイル画像、記事のタイトル、カテゴリーの3つを表示させています。うまくdivタグなどを組み合わせて自由にCSSでレイアウトができるので、このパラメーターは必ず覚えましょう。

パラメータの全一覧表を確認する

ランキング一覧をデザインする方法①

下記は今回のwpp_get_mostpopular()関数で出力したタグをデザインするためのサンプルCSSです。

追加していただければすでにある程度デザインはできているかと思いますが、ご自身で好きなようにカスタマイズしていただければと思います。

h4{
    font-size:28px;
    color:#33333;
    margin-bottom:3%;
}
.ranking-box{
    display:flex;
    margin-bottom:3%;
    padding-bottom:3%;
    border-bottom:2px dotted #999;
}
.ranking-box-left{
	width:90px;
}
.ranking-box-left img{
}
.ranking-box-right{
	padding-left:2%;
}
.ranking-box-right h5{
    margin-bottom:2%;
	font-size:18px;
	color:#2E59D2;
}
.category{
    font-size:14px;
    color:#333;
}

ここまでの手順で完成するものがこちらです。

順位を表示させる方法

表示させたランキングリストに順位を数字で表示させるCSSです。
やり方は簡単で、下記のCSSをコピー&ペーストして追加すればできます。

/* 順位カウンタをリセットする記述 */
.rank {
    counter-reset: wpp-ranking;
}
/* 順位を表示する記述1 */
ul.rank li.ranking-box {
 position: relative;
    margin-bottom:2%;
    padding-bottom:2%;
    padding-left:10%;
 border-bottom: 1px dashed #ccc;
}
/* 順位を表示する記述2 */
ul.rank li.ranking-box:before {
    content: counter(wpp-ranking, decimal)'位';
    counter-increment: wpp-ranking;
    color:#333;
    font-weight:bold;
    font-size: 24px;
    line-height: 1;
    padding: 14px 18px;
    position: absolute;
    left: -3%;
    top: 23%;
    z-index: 1;
 border-radius:3px;
 letter-spacing:2px;
}

ここまでの手順で完成するものがこちらです。

順位ごとに色を変える方法

今度は先ほど実装した順位の数字の色を、1位、2位、3位ごとに変えるCSSです。
これもやり方は簡単で、下記のCSSを追加すればできてしまいます。

/* 1位 */
ul.rank li.ranking-box:nth-child(1):before{
    position:absolute;
    top:20%;
    left:-3%;
    color:#E2CB27;
}
/* 2位 */
ul.rank li.ranking-box:nth-of-type(2):before{
    position:absolute;
    top:20%;
    left:-3%;
    color:#A9A9A9;
}
/* 3位 */
ul.rank li.ranking-box:nth-of-type(3):before{
    position:absolute;
    top:20%;
    left:-3%;
    color:#BC7D38;
}

ここまでの手順で完成するものがこちらです。

応用として上記CSSを追加することで、数字の部分を変えることで4位以降の数字に対しても色を変えることができます。
ご自身でお好きなようにカスタマイズしてみてください。

画像で順位を表現する方法

画像で順位を表示というのは、例えば先ほど実装した順位数字の部分を、順位ごとに冠などのイラストで表現したい場合があると思います。
そんな時に1つの方法として、数字の部分をイラストの画像に変える方法として下記のCSSを使えば実現できます。

/* 1位 */
ul.rank li.ranking-box:nth-child(1):before{
    content: url('https://min-web.com/wp-content/uploads/2019/11/ranking-1.png');
    position:absolute;
    top:11%;
    left:-3%;
}
/* 2位 */
ul.rank li.ranking-box:nth-of-type(2):before{
    content: url('https://min-web.com/wp-content/uploads/2019/11/ranking-2.png');
    position:absolute;
    top:11%;
    left:-3%;
}
/* 3位 */
ul.rank li.ranking-box:nth-of-type(3):before{
    content: url('https://min-web.com/wp-content/uploads/2019/11/ranking-3.png');
    position:absolute;
    top:11%;
    left:-3%;
}

ここまでの手順で完成するものがこちらです。

中身を見ると、先ほどの順位ごとに色を変える方法のCSSにcontent:url();をつけ足しただけです。url()の中に画像のURLを指定すれば、指定した画像が表示されます。
あとは、ご自身で決められたランキング用の画像を用意していただき、表示させれば完成となります。

ランキング一覧をデザインする方法②

今度は、大変使い勝手の良いサンプルデザインをご紹介します。内容としてはアイキャッチ画像の左上に順位を表示させるサンプルです。
まず、下記のサンプルコードがランキングを表示させるPHPの記述になります。
先ほど解説したPHPの記述と同様のもので大丈夫です。

<div class="widget">
    <h2>人気記事ランキング</h2>
    <div class="ranking-box">
    <?php
    $wpp = array (
        'range' => 'all',
        'limit' => 5,
        'post_type' => 'post',
        'stats_category' => '',
        'thumbnail_width' => 90, 
        'thumbnail_height' => 90, 
        'wpp_start' => '<ul>',
        'wpp_end' => '</ul>',
        'post_html' => '<li>
                            <a href="{url}">
                                <div class="ranking-box-left wpp_thumb_wrapper">
                                    {thumb}
                                </div>
                                <div class="ranking-box-right">
                                    <h3>{text_title}</h3>
                                    <span>{views}view</span>
                                </div>
                            </a>
                        </li>',
    ); ?>
    <?php wpp_get_mostpopular($wpp); ?>
    </div>
</div>

下記のコードがデザインを実現するCSSになります。そのままCSSファイルにコピー&ペーストしてください。

.ranking-box ul li{
     margin-bottom:20px;
}
.ranking-box ul li a{
	  display:block;
}
.ranking-box-left{
    width:50px;
}
.ranking-box-right{
    width:220px;
    padding-left:30px;
}
.ranking-box-right h3{
    margin-bottom:10px;
    color:#69a4db;
    font-size:16px;
}
.ranking-box-right span{
    color:#333;
    font-size:14px;
}
body{
    counter-reset: rank_number;  
}
.wpp_thumb_wrapper{
    position: relative;
}
.wpp_thumb_wrapper:after{
    counter-increment: rank_number;
    content: counter(rank_number);
    display: block;
    position: absolute;
    top:0;
    left: 0;
    width: 24px;
    height: 20px;
    padding-top:5px;
    background: rgba(50, 50, 50, 0.8);
    color: white;
    font-size: 14px;
    text-align: center;
}

ここまでの手順で完成するものがこちらです。

順位ごとに色を変える方法

今度は先ほど実装した順位の数字の背景色を、1位、2位、3位ごとに変える方法を解説します。
下記のCSSを上記のCSSコードに追加していただければ実装できます。

.ranking-box ul li:nth-of-type(1) .wpp_thumb_wrapper:after{
    background: rgba(255,215,0,0.8);
}
.ranking-box ul li:nth-of-type(2) .wpp_thumb_wrapper:after{
    background: rgba(192,192, 192,0.8);
}
.ranking-box ul li:nth-of-type(3) .wpp_thumb_wrapper:after{
    background: rgba(129,90, 43,0.8);
}

ここまでの手順で完成するものがこちらです。

下記の表はパラメータとコンテンツタグの一覧になっております。プラグインを有効かしたあとWordPress管理画面の「設定」→「WordPress Popular Posts」→「パラメーター」で同様のものを確認することができます。

・パラメータ一覧

パラメータ必要な設定初期値
headerリストの見出しを設定するテキスト文字列なし
header_startリストの見出しの開始タグを設定テキスト文字列<h2>
header_endリストの見出しの閉じタグを設定テキスト文字列</h2>
limitリストに表示される人気の投稿の最大数を設定正の整数10
rangeWordPress Popular Posts に指定した時間範囲で人気記事を取得させます“last24hours”, “last7days”, “last30days”, “all”, “custom”last24hours
time_quantity時間範囲のカスタムの時間単位の数を指定正の整数24
time_unit時間範囲のカスタムの時間単位を指定minute, hour, day, week, monthhour
freshnessWordPress Popular Posts にあなたの指定した特定範囲内に公開された記事を取得させます1 (true), 0 (false)0
order_by人気の投稿の並べ替えオプションを設定する“comments”, “views”, “avg” (1日あたりの平均ビュー用)views
post_typeリスト表示させる投稿タイプを定義テキスト文字列post
pid特定の投稿IDを設定することで、WordPress Popular Posts のリストから除外できますテキスト文字列なし
cat設定されていると WordPress Popular Posts は指定されたカテゴリー ID をもとに投稿を取得するようになります。マイナス記号が使われている場合、それらのカテゴリーが設定された投稿は除外されます。テキスト文字列なし
taxonomy設定されていると WordPress Popular Posts は投稿をタクソノミーによって絞り込みますテキスト文字列なし
term_id設定すると、WordPress Popular Posts は指定されたターム ID に属するすべての投稿を取得します。マイナス記号が使われている場合、そのカテゴリーは除外されますテキスト文字列なし
author設定すると WordPress Popular Posts は指定されたユーザーIDに属するすべての投稿を取得します。テキスト文字列なし
title_length設定すると WordPress Popular Posts は可能な限り記事タイトルを”n”文字に短縮します正の整数25
title_by_wordsこれを1に設定すると、WordPress Popular Posts は投稿の抜粋を文字列に変わって、”n”ワードに短縮します1 (true), (0) false0
excerpt_length設定すると WordPress Popular Posts は各人気記事のコンテンツから長い”n”文字の抜粋が含まれ、構築されます正の整数0
excerpt_format設定すると WordPress Popular Posts は投稿の抜粋のすべてのスタイリングタグ(太字や斜体など)やリンクタグを保ちます1 (true), (0) false0
excerpt_by_wordsこれを1に設定すると、WordPress Popular Posts は投稿の抜粋を文字列に変わって、”n”ワードに短縮します1 (true), (0) false0
thumbnail_width現在のサーバー設定で許可されている状態でこれを設定すると、投稿のサムネイルを表示できます。この属性はサムネイルの幅を設定します正の整数0
thumbnail_height現在のサーバー設定で許可されている状態でこれを設定すると、投稿のサムネイルを表示できます。この属性はサムネイルの高さを設定します正の整数0
ratingWP-PostRatings プラグインが有効化されている状態でこれを設定すると、WordPress Popular Posts は各人気記事のレートを表示します1 (true), (0) false0
stats_comments設定されていると WordPress Popular Posts は指定された時間範囲内に獲得したコメント数を表示するようになります1 (true), 0 (false)0
stats_views設定されていると WordPress Popular Posts は指定された時間範囲内に獲得した表示数を表示するようになります1 (true), (0) false1
stats_author設定すると WordPress Popular Posts はリスト内に各人気記事を投稿した人の名前を表示します1 (true), (0) false0
stats_date設定すると WordPress Popular Posts はリスト内に各人気記事の投稿した日付を表示します1 (true), (0) false0
stats_date_format日付書式を設定するテキスト文字列0
stats_category設定されていると WordPress Popular Posts は各投稿の設定されたカテゴリーを表示するようになります1 (true), (0) false0
stats_taxonomy設定されていると WordPress Popular Posts は各投稿の設定されたタクソノミーを表示するようになります1 (true), (0) false0
wpp_startリストの開始タグを設定するテキスト文字列<ul>
wpp_endリストの閉じタグを設定するテキスト文字列</ul>
post_html各投稿の HTML 構造を設定するテキスト文字列、カスタム HTML<li>{thumb} {title} <span class="wpp-meta post-stats">{stats}</span></li></td>

・コンテンツタグ
※下記のタグを”post_html”の値に記述することで、それぞれを表示することができます。

タグ内容
{thumb}リンクありで投稿・固定ページのサムネイル画像を表示 (thumbnail_width と thumbnail_height が必要)
{thumb_img}投稿・固定ページへのリンクなしでサムネイル画像を表示 (thumbnail_width と thumbnail_height が必要)
{thumb_url}サムネイルの URL を返す (thumbnail_width と thumbnail_height が必要)
{title}リンクされた投稿・固定ページのタイトルを表示
{pid}投稿・固定ページの ID を表示
{summary}投稿・固定ページの本文の抜粋を表示 (excerpt_length に0より大きい数が指定されている必要があります)
{stats}デフォルト統計タグを表示
{rating}投稿・固定ページの現在のレートを表示 (WP-PostRatings がインストールされていて有効化されている必要があります)
{score}投稿・固定ページのレートを数値で表示 (WP-PostRatings がインストールされていて有効化されている必要があります)
{url}投稿・固定ページの URL を表示
{text_title}リンクなしで投稿・固定ページのタイトルを表示
{author}投稿者名を返す (stats_author=1 が必要)
{category}投稿のカテゴリーを返す (stats_category=1 が必要)
{taxonomy}リンクされたタクソノミー名を返す (stats_taxonomy=1 が必要)
{views}閲覧数のみを返す (テキストなし)
{comments}コメントカウントのみ (テキストなし) を返す (stats_comments=1 が必要)
{date}投稿/固定ページの投稿時間を返す (stats_date=1 が必要)
{total_items}outputs number of popular posts found)
{item_position}outputs the position of the post in the listing

上記一覧がwpp_get_mostpopular();を柔軟にカスタマイズするために使うパラメータとタグの一覧になります。

まとめ

ここまでの解説で、ご自身の理想通りにランキングを表示できましたでしょうか。
ブログサイト上ではユーザインタフェース的にもSEO的にもランキングはとても重要な要素です。
そのため、Wordpress Popolar PostプラグインはWordpressを利用したサイト制作では欠かせないツールの1つと言えます。
導入方法もとても簡単で初心者にも扱いやすく、また、エンジニア・プログラマーの方であれば自由に機能やデザインをカスタマイズできます。
ぜひ、当記事でご紹介したサンプルコードやパラメータ一覧表を使ってサイトをより一層充実したものにしていただければ幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

高沢 翔汰

フロントエンドエンジニアの高澤です。得意領域はWordPressやその他CMSを利用した開発。日々業務をこなす中でつちかったプログラミングやデザインの技術・知識や、自ら学習したことをまとめて皆様に発信してまいります。趣味は技術書を読むこと。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要