cssコピペで、固定ページで
サムネイル付きカテゴリ一覧をつくる
皆さんも人気記事を表示させたくて「WordPress Popular Posts」のプラグインを使用していることではないでしょうか。
しかし、このプラグインはとても便利なのですが、サイドバーのみしか簡単に表示させることができません。
投稿記事内やトップページ表示させたけど、英語ばかりだし、カスタマイズの方法が良くわからない！
といって断念したことはありませんか。
今回は、「WordPress Popular Posts」の人気記事を記事内に表示させるやり方を3つ教えます。
Contents
WordPress Popular Postsの表示サンプル
今日のPVランキング
こんな感じにプラグインが集計したPVによって上位5記事が表示されるようにしています。
WordPress Popular Postsの応用方法（１）
関数「wpp_get_mostpopular」の使用
任意の記事内に表示させるにはすでにプラグイン側で用意してある[wpp_get_mostpopular()]関数を使用します。
wpp_get_mostpopular()
phpを使用するため、以前ご紹介したプラグイン[Exec-php]を入れといてください。
こちらの関数に様々なパラメータを付与してあげることにより、
表示させることが可能です。
パラメータ一覧
| パラメーター | 値（デフォルトの値） | 説明 |
| header | テキスト（’ ‘） | 「’」「’」の中に見出しを記入する |
| header_start | テキスト（'<h2>’） | 見出しの前に挿入するHTMLタグを設定する |
| header_end | テキスト（'</h2>’） | 見出しの後に挿入するHTMLタグを設定する |
| limit | 数値（10） | 表示する記事の最大数を指定する |
| range | “daily”, “weekly”, “monthly”, “all”（’daily’） | 集計する期間の指定する（1日、1週間、月間、全期間） |
| freshness | 1 (true), 0 (false)（0） | 指定した期間内に投稿された記事のみを表示する |
| order_by | “comments”, “views”, “avg”（’views’） | 集計する基準を指定（コメント数、PV数、1日の平均PV数） |
| post_type | テキスト（post,page） | 表示する投稿タイプを指定、カスタムポストも使える（「,」区切りで複数設定） |
| pid | テキスト（’ ‘） | 表示させない記事のIDを指定（「,」区切りで複数設定） |
| cat | テキスト（’ ‘） | 指定したカテゴリーの中から表示する（「,」区切りで複数設定） |
| author | テキスト（’ ‘） | 指定した投稿者の中から表示する（「,」区切りで複数設定） |
| title_length | 数値（25） | タイトルの文字数を制限する |
| title_by_words | 1 (true), 0(false) （0） | タイトルの制限数を文字数では無く単語数で制限する |
| excerpt_length | 数値（0） | 本文の抜粋を表示する時に抜粋する文字数を指定する |
| excerpt_format | 1 (true), (0) false（0） | 本文を抜粋する際にHTMLタグが使用されていた場合そのまま使用する |
| excerpt_by_words | 1 (true), (0) false（0） | 本文を抜粋する際に文字数では無く単語数で抜粋する |
| thumbnail_width | 数値（0） | 表示するサムネイルの幅を指定する |
| thumbnail_height | 数値（0） | 表示するサムネイルの高さを指定する |
| rating | 1 (true), (0) false（0） | WP-PostRatingsプラグインを使用している場合、訪問者のエントリの評価を表示する |
| stats_comments | 1 (true), (0) false（1） | 記事に対してコメントがある場合表示する |
| stats_views | 1 (true), (0) false（1） | 記事のトータルの閲覧数を表示する |
| stats_author | 1 (true), (0) false（0） | 記事の投稿者を表示する |
| stats_date | 1 (true), (0) false（0） | 記事の投稿日時を表示する |
| stats_date_format | テキスト（’ ‘） | 投稿日時の表示形式を指定する |
| stats_category | 1 (true), (0) false（0） | カテゴリーを表示する |
| wpp_start | テキスト（<ul>） | リスト出力前に挿入するHTMLタグを設定する |
| wpp_end | テキスト（</ul>） | リスト出力後に挿入するHTMLタグを設定する |
| post_html | テキスト、HTMLタグ（<li>{thumb} {title} {stats}</li>） | 表示させる投稿記事のHTMLコードを設定する |
こちらの表示させたい項目の値をプラグインに渡してあげます。
それでは実際に表示させてみます。
実際のコードを記載いたします。
<?php
if (function_exists('wpp_get_mostpopular')) {
$arg = array(
'header' => '今日のPVランキング',
'header_start' => "<h3 style='margin:0px 50px;font-size:18px;line-height:1.5em;font-weight: bold;color:#000;text-decoration:none;border:none;'>", //見出しの前に挿入するHTMLタグ
'header_end' => '</h3>', //見出しの後に挿入するHTMLタグ
'limit' => 5, //表示させる数
'range' => 'daily', //集計する期間（daily,weekly monthly,all）
'order_by' => 'views', //集計の基準（comments,views,avg）
'post_type' => 'post', //ポストタイプを指定（post,page,カスタムポスト名）
'title_length' => 25, //タイトルの文字数を指定
'thumbnail_width' => 50, //サムネイルの幅
'thumbnail_height' => 50, //サムネイルの高さ
'stats_views' => 1, //アクセス数を表示（1,0）
'wpp_start' => '<ul>', //リストの出力の前に挿入するHTMLタグ
'wpp_end' => '</ul>', //リストの出力の後に挿入するHTMLタグ
'post_html' => "
<li style='padding: 5px;margin: 5px;background: #DDE7C7;border: 1px solid #98C9A3;border-radius: 3px;-moz-border-radius: 3px;-webkit-borde-radius: 3px;'>
<div style='position:relative;height: 50px;overflow: hidden;'>
<span style='margin: 0 10px 0 0;max-width: 50px;max-height: 50px;'>{thumb_img}</span>
<span style='position:absolute;top:0;left:60px;height:50px;font-size:12px;line-height:1.5em;font-weight: normal;color:#000;text-decoration:none;'>{text_title}■{stats}</span>
<span><a href='{url}' style='display: block;position: absolute;left: 0;top: 0;height: 100%;width: 100%;text-indent: -999px;'>.</a></span>
</div>
</li>
" //表示するHTMLの設定
);
wpp_get_mostpopular($arg);
}?>
このようにwpp_get_mostpopularを実行し、変数の配列の中に各パラメータの値を記載していきます。
そうすることで、簡単に人気記事を記事内表示させることが可能に！
また、phpで記載しているため簡単にcssでデザイン回りもカスタマイズすることができるのも利点です。。
WordPress Popular Postsの応用方法（２）
ショートコードの使用
今説明したwpp_get_mostpopular関数を用いるやり方が良くわからないという方のために、WordPress Popular Postsではショートコードが用意されています。
それが「wpp」です。
wppタグを使い下記のようにパラメータ渡してあげることにより、簡単に表示させることが出来ます。
※実際使用する場合「【】」→「[]」に変更してください。
【wpp limit=5 range=weekly stats_views=1 order_by=view】
- リスク有り！2016年9月よりグーグルアドセンスが... 12ビュー
- WEBライターでも原稿の校正・校閲時に使う校正記号... 11ビュー
- cssコピペでオシャレな囲み線や枠をメイクキング！ 5ビュー
- JQuery Accordion Menu Wid... 4ビュー
- HTML・CSSコピペで簡単！facebookなど... 3ビュー
こちらはさらに簡単に表示させることができ、cssを使用しデザインもお好みのに修正できます。
WordPress Popular Postsの応用方法（３）
さらに上級編「wpp_custom_html」
もっとコテコテにカスタムしたいという方にぴったり。
ここから、
プラグインのドキュメントを見ることができます。
wpp_custom_htmlの関数を使用にもっと柔軟にカスタマイズすることが可能です。
私のもうひとつのサイトでは、プラグインを入れただけでトップページの人気記事が表示されるようにカスタムしちゃいました。
皆さんもいろいろ試してみてください。
（ 前回の記事も見る）
コメントを残す