プラグイン「WordPress Popular Posts」の応用方法3つを伝授

large-10

cssコピペで、固定ページで
サムネイル付きカテゴリ一覧をつくる

システムエンジニア(SE)かっきーです。

皆さんも人気記事を表示させたくて「WordPress Popular Posts」のプラグインを使用していることではないでしょうか。

しかし、このプラグインはとても便利なのですが、サイドバーのみしか簡単に表示させることができません。
投稿記事内やトップページ表示させたけど、英語ばかりだし、カスタマイズの方法が良くわからない!
といって断念したことはありませんか。

今回は、「WordPress Popular Posts」の人気記事を記事内に表示させるやり方を3つ教えます。

WordPress Popular Postsの表示サンプル

今日のPVランキング

  • WEBライターでも原稿の校正・校閲時に使う校正記号は覚えよう
    WEBライターでも原稿の校正・校閲時に使う校正記号は覚えよう■39ビュー
    .
  • リスク有り!2016年9月よりグーグルアドセンスが4つ以上掲載可能に
    リスク有り!2016年9月よりグーグルアドセンスが4つ以上掲載可能に■36ビュー
    .
  • HTML・CSSコピペで簡単!多階層のドロップダウンメニュー作成
    HTML・CSSコピペで簡単!多階層のドロップダウンメニュー作成■18ビュー
    .
  • HTML・CSSコピペで簡単!facebookなどSNSフォローボタンの実装
    HTML・CSSコピペで簡単!facebookなどSNSフォローボタンの実装■13ビュー
    .
  • JQuery Accordion Menu Widgetでカテゴリー一覧を表示できるサイドバーを作成【コピペで即使えるプラグイン】
    JQuery Accordion Menu Widgetでカテゴリー一覧を表示できるサイドバーを作成【コピペで即使えるプラグイン】■13ビュー
    .


 

こんな感じにプラグインが集計したPVによって上位5記事が表示されるようにしています。

WordPress Popular Postsの応用方法(1)
関数「wpp_get_mostpopular」の使用

任意の記事内に表示させるにはすでにプラグイン側で用意してある[wpp_get_mostpopular()]関数を使用します。

wpp_get_mostpopular()

phpを使用するため、以前ご紹介したプラグイン[Exec-php]を入れといてください。

こちらの関数に様々なパラメータを付与してあげることにより、
表示させることが可能です。

パラメータ一覧

wpp_get_mostpopular()のパラメーター

 パラメーター  値(デフォルトの値)  説明
 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の応用方法(2)
ショートコードの使用

今説明したwpp_get_mostpopular関数を用いるやり方が良くわからないという方のために、WordPress Popular Postsではショートコードが用意されています。

それが「wpp」です。
wppタグを使い下記のようにパラメータ渡してあげることにより、簡単に表示させることが出来ます。
※実際使用する場合「【】」→「[]」に変更してください。

【wpp limit=5 range=weekly stats_views=1 order_by=view】

こちらはさらに簡単に表示させることができ、cssを使用しデザインもお好みのに修正できます。

WordPress Popular Postsの応用方法(3)
さらに上級編「wpp_custom_html」

もっとコテコテにカスタムしたいという方にぴったり。

ここから、
プラグインのドキュメントを見ることができます。
wpp_custom_htmlの関数を使用にもっと柔軟にカスタマイズすることが可能です。

私のもうひとつのサイトでは、プラグインを入れただけでトップページの人気記事が表示されるようにカスタムしちゃいました。
皆さんもいろいろ試してみてください。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です