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

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

1 そもそもサイト上に記事のランキングを表示するメリット
2 WordPress Popular Posts とは
3 WordPress Popular Posts を利用するメリット
4 WordPress Popular Posts のインストール方法
5 WordPress Popular Posts でランキングを表示する方法
6 ウィジェットでランキングを表示させる方法
7 専用テンプレートタグでランキングを表示させる方法
8 ランキング一覧をデザインする方法①
9 ランキング一覧をデザインする方法②
- 9.1 順位ごとに色を変える方法
10 パラメータ・コンテンツタグまとめ
11 まとめ

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

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

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

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

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

今回は上記のメリットからランキングを設置することに重要性を感じ、ランキングを簡単に実装してくれる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の後にサブメニューが開くので、出てきた項目の１つの「新規追加」をクリックします。
3. 開いたプラグインの新規追加ページの右側に検索入力欄があるので、そこに「WordPress Popular Posts」と入力し検索します。
4. プラグインの一覧にWordPress Popular Postsが表示されるので、「今すぐインストール」をクリックします。
5. 4の「今すぐインストール」をクリック後に、「有効化」をクリックします。
以上の順番通りに進めばプラグインがインストールされます。

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

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

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

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

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

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

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

register_sidebar(array(

'name' => 'サンプルランキング',

'id' => 'sample_ranking',

'description' => 'サンプルサイトのランキングを表示するためのウィジェトです',

));

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

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

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

if(is_active_sidebar('sample_ranking')):

dynamic_sidebar('sample_ranking');

endif;

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

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

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

①WordPressの管理画面の左側にあるメニューから、「外観」をクリックします。 ②開かれたサブメニューの１つに「ウィジェット」があるのでクリックします。 ③画面右側に「サンプルランキング」にある「WordPress Popular Posts」をクリックしたら各種設定できる入力欄が表示されるので、そこで様々な設定ができます。
ここからは、各種設定について解説していきたいと思います。ここで説明させていただく項目はいずれもカスタマイズする必要性が高いかと思います。

(1)タイトルランキングの上部に表示されます。任意のタイトルを入力してください。
(2)最大表示数ランキングの一覧を表示させる件数を指定できます。
(3)ソート順コメント、総閲覧数、1日の平均閲覧数、の３つのいずれかを基準にしてソートできます。基本的に総閲覧数でいいかと思います。

(4)計測期間ランキングとして表示させるための対象期間を指定できます。 24時間、7日間、30日間、全期間、カスタム、の５つから設定できます。ちなみに、カスタムはより柔軟に計測期間を設定できるもので、このカスタムの設定方法の手順は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>

<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">

{thumb_img}

</div>

<h5>{text_title}</h5>

<span class="ranking-category">{category}</span>

</div>

</a>

</li>',

); ?>

<?php wpp_get_mostpopular($wpp); ?>

</div>

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

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

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

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

“range”とは

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

“limit”とは

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

“post_type”とは

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

“status_category”とは

”status_category”は各投稿の設定されたカテゴリーを表示する場面で必要になる記述です。 ※このパラメーターの指定と併せて、パラメーターの１つの”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”の３つはセットで使います。

“post_html”とは

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

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

今度は、大変使い勝手の良いサンプルデザインをご紹介します。内容としてはアイキャッチ画像の左上に順位を表示させるサンプルです。まず、下記のサンプルコードがランキングを表示させる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>

<h2>人気記事ランキング</h2>

<?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>

{thumb}

</div>

<h3>{text_title}</h3>

<span>{views}view</span>

</div>

</a>

</li>',

); ?>

<?php wpp_get_mostpopular($wpp); ?>

</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;
}

.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;

}

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

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

今度は先ほど実装した順位の数字の背景色を、１位、２位、３位ごとに変える方法を解説します。下記の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);
}

.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
range	WordPress Popular Posts に指定した時間範囲で人気記事を取得させます	“last24hours”, “last7days”, “last30days”, “all”, “custom”	last24hours
time_quantity	時間範囲のカスタムの時間単位の数を指定	正の整数	24
time_unit	時間範囲のカスタムの時間単位を指定	minute, hour, day, week, month	hour
freshness	WordPress 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) false	0
excerpt_length	設定すると WordPress Popular Posts は各人気記事のコンテンツから長い”n”文字の抜粋が含まれ、構築されます	正の整数	0
excerpt_format	設定すると WordPress Popular Posts は投稿の抜粋のすべてのスタイリングタグ（太字や斜体など）やリンクタグを保ちます	1 (true), (0) false	0
excerpt_by_words	これを1に設定すると、WordPress Popular Posts は投稿の抜粋を文字列に変わって、”n”ワードに短縮します	1 (true), (0) false	0
thumbnail_width	現在のサーバー設定で許可されている状態でこれを設定すると、投稿のサムネイルを表示できます。この属性はサムネイルの幅を設定します	正の整数	0
thumbnail_height	現在のサーバー設定で許可されている状態でこれを設定すると、投稿のサムネイルを表示できます。この属性はサムネイルの高さを設定します	正の整数	0
rating	WP-PostRatings プラグインが有効化されている状態でこれを設定すると、WordPress Popular Posts は各人気記事のレートを表示します	1 (true), (0) false	0
stats_comments	設定されていると WordPress Popular Posts は指定された時間範囲内に獲得したコメント数を表示するようになります	1 (true), 0 (false)	0
stats_views	設定されていると WordPress Popular Posts は指定された時間範囲内に獲得した表示数を表示するようになります	1 (true), (0) false	1
stats_author	設定すると WordPress Popular Posts はリスト内に各人気記事を投稿した人の名前を表示します	1 (true), (0) false	0
stats_date	設定すると WordPress Popular Posts はリスト内に各人気記事の投稿した日付を表示します	1 (true), (0) false	0
stats_date_format	日付書式を設定する	テキスト文字列	0
stats_category	設定されていると WordPress Popular Posts は各投稿の設定されたカテゴリーを表示するようになります	1 (true), (0) false	0
stats_taxonomy	設定されていると WordPress Popular Posts は各投稿の設定されたタクソノミーを表示するようになります	1 (true), (0) false	0
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を利用したサイト制作では欠かせないツールの１つと言えます。導入方法もとても簡単で初心者にも扱いやすく、また、エンジニア・プログラマーの方であれば自由に機能やデザインをカスタマイズできます。ぜひ、当記事でご紹介したサンプルコードやパラメータ一覧表を使ってサイトをより一層充実したものにしていただければ幸いです。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

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

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

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

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

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

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

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

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

運営：株式会社セルリア

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

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

WordPress Popular Posts とは

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

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

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

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

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

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

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

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

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

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

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

“range”とは

“limit”とは

“post_type”とは

“status_category”とは

“thumbnail_width”、”thumbnail_height”とは

“wpp_start”、”wpp_end”とは

“post_html”とは

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

順位を表示させる方法

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

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

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

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

まとめ

運営会社

記事を検索する

人気の記事TOP20

CATEGORY

解析ツール

広告・マーケティング

デザイン・Web制作

Google Workspace

SNS運用

運営：株式会社セルリア

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

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

WordPress Popular Posts とは

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

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

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

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

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

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

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

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

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

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

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

“range”とは

“limit”とは

“post_type”とは

“status_category”とは

“thumbnail_width”、”thumbnail_height”とは

“wpp_start”、”wpp_end”とは

“post_html”とは

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

順位を表示させる方法

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

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

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

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

パラメータ・コンテンツタグまとめ

まとめ

運営会社

記事を検索する

人気の記事TOP20

CATEGORY

解析ツール

広告・マーケティング

デザイン・Web制作

Google Workspace

SNS運用