タイトル・URLをコピー
記事タイトルWordPress Popular Posts プラグインで人気記事を表示・カスタマイズする方法
記事URLhttps://digitor.jp/textbook/wordpress_popular_posts/
記事タイトルWordPress Popular Posts プラグインで人気記事を表示・カスタマイズする方法
記事URLhttps://digitor.jp/textbook/wordpress_popular_posts/
POINTこの記事をざっくり言うと
サイトに記事のランキング一覧機能を追加することができる
この記事を読めば記事のランキングを表示できるスキルが身につく
サイトへの流入やPV数増加の可能性を高めるスキルが身につく
こんにちは!エンジニアの高澤です。
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の内容はテーマをスクラッチ開発する際に必要なものなので、一般に配布されているテーマをインストールする場合やすでにウィジェット機能があるテーマに関しては必要ありません。
①WordPressの管理画面の左側にあるメニューから、「外観」をクリックします。
②開かれたサブメニューの1つに「テーマエディター(もしくはテーマの編集)」があるのでクリックします。
③画面右側にある「テーマファイル」の中の「functions.php」をクリックします。
④プログラムを記述できる欄があるので、そこに下記のコードを記述します。(コピペで大丈夫です)
|
register_sidebar(array( 'name' => 'サンプルランキング', 'id' => 'sample_ranking', 'description' => 'サンプルサイトのランキングを表示するためのウィジェトです', )); |
①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ファイルの表示させたい場所に下記のコードを記述します。
パラメーターというものが指定されており、パラメータを利用して表示させる投稿データの条件を詳細に設定できます。
わかりづらい方は、先ほど解説した「ウィジェットでランキングを表示させる方法」の内容を今度はプログラミングで設定するという風にイメージすると理解しやすいのではないかと思います。
プログラミングで設定することによってより自由度が増し、より柔軟な設定が実現できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
<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”の中で記事リストのコンテンツ(中身)を表示させるプログラムを記述します。に設定できます。HTMLの知識がある方向けなので知識がない方は特に触る必要はないかなと思います。
今回の例では専用タグである{thumb_img}、{text_title}、{category}を使ってサムネイル画像、記事のタイトル、カテゴリーの3つを表示させています。うまくdivタグなどを組み合わせて自由にCSSでレイアウトができるので、このパラメーターは必ず覚えましょう。
パラメータの全一覧表を確認する
ランキング一覧をデザインする方法①
下記は今回のwpp_get_mostpopular()関数で出力したタグをデザインするためのサンプルCSSです。
追加していただければすでにある程度デザインはできているかと思いますが、ご自身で好きなようにカスタマイズしていただければと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
|
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をコピー&ペーストして追加すればできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
|
/* 順位カウンタをリセットする記述 */ .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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
/* 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
/* 1位 */ ul.rank li.ranking-box:nth-child(1):before{ content: url('https://digitor.jp/textbook/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://digitor.jp/textbook/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://digitor.jp/textbook/wp-content/uploads/2019/11/ranking-3.png'); position:absolute; top:11%; left:-3%; } |
ここまでの手順で完成するものがこちらです。
中身を見ると、先ほどの順位ごとに色を変える方法のCSSにcontent:url();をつけ足しただけです。url()の中に画像のURLを指定すれば、指定した画像が表示されます。
あとは、ご自身で決められたランキング用の画像を用意していただき、表示させれば完成となります。
ランキング一覧をデザインする方法②
今度は、大変使い勝手の良いサンプルデザインをご紹介します。内容としてはアイキャッチ画像の左上に順位を表示させるサンプルです。
まず、下記のサンプルコードがランキングを表示させるPHPの記述になります。
先ほど解説したPHPの記述と同様のもので大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
|
<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ファイルにコピー&ペーストしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
|
.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 |
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を利用したサイト制作では欠かせないツールの1つと言えます。
導入方法もとても簡単で初心者にも扱いやすく、また、エンジニア・プログラマーの方であれば自由に機能やデザインをカスタマイズできます。
ぜひ、当記事でご紹介したサンプルコードやパラメータ一覧表を使ってサイトをより一層充実したものにしていただければ幸いです。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルWordPress Popular Posts プラグインで人気記事を表示・カスタマイズする方法
記事URLhttps://digitor.jp/textbook/wordpress_popular_posts/
記事タイトルWordPress Popular Posts プラグインで人気記事を表示・カスタマイズする方法
記事URLhttps://digitor.jp/textbook/wordpress_popular_posts/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。