sponsor

変更する前にバックアップすることをオススメします。

WordPress Popular Postsで人気記事を表示する方法【ウィジェット・ショートコード】

WordPress Popular Posts WP プラグイン
WordPress Popular Posts
WP プラグイン
sponsor

人気記事を貼るWordPress Popular Posts

人気記事に順位をつけると、いつも決まった記事が上位を占め、同じ記事に多くの人が関心を持っていることがわかります。

人気記事の順位は載せておいた方がいいのかもしれません。人気記事を載せる方法を記載しておきます。プラグインWordPress Popular Postsを使用します。

このプラグインは人気ですが、高負荷であり、サーバーに負担をかけると言われています。

sponsor

インストール

  1. プラグインの新規追加で、WordPress Popular Postsを検索
  2. インストールする
  3. 有効化する

プラグインをインストールする前にはバックアップをとっておきます。

sponsor

WordPress Popular Postsの設定

WordPressの管理画面より設定を選び、WordPress Popular Postsを開きます。

ツールの設定

ツールをクリックします。

WordPress Popular Posts
設定→WordPress Popular Posts

アイキャッチ画像の設定

1.デフォルトのアイキャッチ画像

投稿毎のアイキャッチ画像の設定がなかった場合に、デフォルトの画像が使われます。

2.画像の取得元

どの画像を利用するか指定します。

  • アイキャッチ画像を利用
  • 本文中の最初の画像を利用
  • 最初の添付ファイルを使用
  • カスタムフィールド

3.キャッシュされた画像データーをクリア

ランキングデータの設定

1.閲覧を記録する対象者

ランキングに使用する対象者を選びます。

  • 訪問者のみ
  • ログインしているユーザーのみ
  • 全員

2.ログ上限

データ保存期間の設定ができます。

3.ウィジェットをAJAX化

キャッシュ系のプラグインを利用している場合、有効にします。

4.データキャッシュ

指定された時間の人気のリストをキャッシュすることができます。

有効にするとキャッシュ更新間隔が表示され、時間を指定できます。

 5.データサンプリング

データベースへの負担を減らすために設定します。

Miscellaneou その他の設定

1.リンクの開き方

別ウィンドウまたは別タブで開くかどうが設定します。

2.プラグインのスタイルシートを使う

このプラグインのデフォルトのスタイルシートを使う場合は、プラグインの更新時にスタイルシートも更新されてしまうので、コピーしておくように注意書きがあります。※下記参照

最後に保存を忘れずに

データの削除

  • キャッシュを削除
  • すべてのランキングデータを削除
sponsor

ウィジェットで人気記事を設置する

一覧からWordPress Popular Postsを選択し、表示の仕方について様々な設定ができます。

WordPress Popular Posts
WordPress Popular Posts

人気記事 表示する内容

タイトルタイトル
最大表示数何位まで表示するかを設定
ソート順何のデータで順位を並べぶか選択します。
・コメント数
・総閲覧数
・1日の平均閲覧数)

フィルター

計測時間は、その期間内に公開された記事のみ表示されます。

WordPress Popular Posts
WordPress Popular Posts
計測時間ランキングの期間を、24時間、7日間、30日間、前記かんの中から選択します。
投稿タイプ人気記事として表示したければpostと入力します。カンマで区切ることで、複数設定することができます。
除外する投稿 表示させたくない記事をIDで指定します。
タクソミー表示させたいカテゴリーやタグを選びます。また表示したいまたは除外したい記事のIDを指定します。
投稿者ID 表示させたい投稿者のIDを指定します。

投稿設定

画像タイトル、抜粋記事の表示方法を指定します。

投稿設定表示するものを指定します。タイトル、抜粋、画像を表示するか否か

投稿設定の詳細を指定する

画像やタイトル、抜粋記事、日付、HTMLのカスタムを行う場合は、一度表示するサイドバーと位置を選択してウィジェットを保存して下さい。その後、追加した「WordPress Popular Posts」の編集をクリックすれば、画像やタイトル、抜粋記事、日付の表示方法とHTMLのカスタムする項目が表示されます。

WordPress Popular Posts

統計タグの設定・マークアップの設定

統計タグの設定表示するものを指定します。コメント数、閲覧数、著者名、日付、カテゴリー名
HTMLマークアップ設定 記事の表示のカスタムズを行う場合に記載
WordPress-Popular-Posts5
WordPress-Popular-Posts5
sponsor

文字のサイズや余白などの変更

カテゴリーの記事や新着記事と画像の位置や文字の大きさを揃えるためにwpp.cssで調整します。wpp.cssは、

  • wp-content>plugins>wordPress-popular-posts>style>wpp.css

このwpp.cssに記載しますが、先述した「メッセージ」に記載しているように、このスタイルシートはプラグインが更新されるとスタイルシートも更新されてしまうので、wpp.cssをコピーして、テーマまたは子テーマのフォルダ内にペーストしておくと良いです。

wpp.cssの記載

  1. /*人気記事 画像の下に文字を入れる*/
  2. .sidebar ul.wpp {
  3. overflow:hidden;
  4. margin:0px 5px 0px;
  5. }
  6. .sidebar ul.wpp li {
  7. height: 90px;
  8. margin: 5px 0 0 5px;
  9. }
  10. .wpp-post-title {
  11. width: 200px;
  12. height: 50px;
  13. display: inline-block;
  14. vertical-align:top;
  15. font-size:12px;
  16. margin: 0 ;
  17. }
sponsor

WordPress Popular Postsカスタムズ

投稿にショートコードで表示する

ショートコードで稿記事に表示できます。

  • [wpp]

テンプレートに表示する

テンプレートタグwpp_get_mostpopular()を使い、投稿や固定ページなどテンプレートに表示することができます。

テンプレートタグwpp_get_mostpopular()を使う

  1. <?php
  2. if (function_exists(‘wpp_get_mostpopular’)) {
  3. wpp_get_mostpopular(); }
  4. ?>

テンプレートタグwpp_get_mostpopular()を使う

  1. <?php
  2. if (function_exists(‘wpp_get_mostpopular’)) {
  3. $arg = array (
  4. ‘range’ => ‘daily’, /*集計期間する機関*/
  5. ‘limit’ => 5, /*表示数*/
  6. ‘post_type’ => ‘post,page’, /*投稿・固定ページで指定*/
  7. ‘title_length’ => ’25’, /*表示させるタイトルの文字数*/
  8. ‘stats_views’ => ‘1’, /*閲覧数を表示*/
  9. ‘thumbnail_width’ => ’30’, /*画像の幅*/
  10. ‘thumbnail_height’ => ’30’, /*画像の高さ*/
  11. ‘post_html’ => ‘<li>{thumb}<span>{title}</span></li>’, /*htmlのカスタム*/
  12. );
  13. wpp_get_mostpopular($arg);}
  14. ?>

WordPress Popular Postsのパラメーターの確認

wppのパラメーターの確認はWordPress Popular Postsの設定の「Parameters」で一覧を確認することができます。

range‘range’ => ‘daily’weekly、monthly、all集計する期間
order_by‘order_by’ => ‘avg’comments、views順位を決めるデータ
limit‘limit’ => 5 表示数
post_type‘post_type’ => ‘post’post、page投稿か固定ページか
cat‘cat’ => ‘1,55,-74’ 表示するカテゴリー
thumbnail_width‘thumbnail_width’ => 30 画像の幅(px)
thumbnail_height‘thumbnail_height’ => 30 画像の高さ(px)

その他パラメーターは設定で確認してください。