WordPress Popular Posts

WordPress Popular Postsで人気記事を画像と表示させる



人気記事を貼るWordPress Popular Posts

ブログを始めて数か月が過ぎ、いつも決まった人気記事が上位です。人気記事の順位は載せておいた方がいいかも知れないと思ったので、人気記事を載せる方法を記載しています。まず、プラグインWordPress Popular Postsです。このWordPress Popular Postsは人気です。

インストール

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

インストールを済ませます。日本語化もできますが私の場合は日本語化せずに設定しています。

メッセージ

インストール後にこのようなメッセージが表示されます。

WordPress Popular Posts

WordPress Popular Posts(wpp)のデフォルトのcssファイルに加えた変更は、プラグインの更新時に初期化されてしまいます。それを防ぐためにいは、テーマのディレクトリーにwpp.cssファイルをコピーしてください。(wp-content/plugins/wordpress-popular-posts/style)

WordPress Popular Postsの設定

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

「Tools」タブの設定

「Tools」タブをクリックします。

WordPress Popular Posts

Thumbnails 画像の設定

1.Default thumbnail

デフォルトの画像で、画像の指定がなかった場合にはデフォルトの画像が使われます。

2.Pick image from

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

  • Featured image アイキャッチ画像を利用します。
  • First image on post 投稿の一番最初の画像を利用します。
  • Custom field カスタムすることができます。カスタムを選ぶと次の設定をすることになります。
Custom field name

Custom fieldを選んだ場合、ここに名前を入れます。

Resize image from Custom field?

カスタムフィールドの画像をリサイズするか指定します。

3.Responsive support

レスポンシブデザインを有効にすると画像の高さと幅の属性を削除します。レスポンシブデザインとは、ページのレイアウト・デザインを柔軟に調整することです。

  • enabled 有効
  • Disabled 無効、デフォルトでは無効になってます。
4.Empty image cache

キャッシュされた画像データーをクリアします。

データ ランキングデータの設定

1.Log views from

ランキングに使用するアクセスを選びます。

  • Visitors only 訪問者のみ
  • Logged-in users only ログインしているユーザーのみ
  • Everyone 全員
2.Ajaxify widget

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

3.WPP Cache Expiry Policy

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

Refresh cache every

WPP Cache Expiry Policyを有効にすると表示され、時間を指定します。

 5.Data Sampling

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

Miscellaneou その他の設定

1.Open links in

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

2.Use plugin’s stylesheet

プラグインのスタイルシートを使うかどうかを設定します。

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

最後に保存を忘れずに

データの削除

Empty cache

24時間、1週間、1か月のランキングのランキングデータを削除します。

Clear all data 

すべてのデータを削除します。

ウィジェットで設定

WordPress Popular Posts

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

WordPress Popular Posts

Title タイトル
Show up to 何位まで表示するかを設定
Sort posts by 何のデータで順位を並べぶか選択します。
・Comments(コメント数)
・Total views(総アクセス数)
・Avg. daily views(1日当たりの平均アクセス数)

Filters

Time Range ランキングの期間を、24時間、7日間、30日間、前記かんの中から選択します。 
□Display only posts published within the selected Time Range
その期間内に公開された記事のみ表示されます。  
Post type(s) 人気記事として表示したければpostと入力します。カンマで区切ることで、複数設定することができます。
Post(s) ID(s) to exclu  表示させたくない記事をIDで指定します。
Category(ies) ID(s): 表示させたいカテゴリーのIDを指定します。その記事だけ表示されます。
Author(s) ID(s)  表示させたい投稿者のIDを指定します。

画像やタイトル、抜粋記事の表示方法

Posts settings

表示するものを指定します。

  •  タイトルの文字数を指定する
  • 抜粋記事の表示を指定する
  • 画像の表示を指定する
Stats Tag settings

表示するものを指定します。

  • コメント数
  • 閲覧数
  • 著者名
  • 日付
  • カテゴリー名 
HTML Markup settings  記事の表示のカスタムズを行う場合に記載

利用するサイドバーに●を付け、サイドバーの位置の番号を選択し、ウィジェットを保存します。

注意

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

WordPress Popular Posts

デフォルトでは画像のサイズは150×150pxですが、100×100pxに変更しています。

WordPress Popular Posts

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

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

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

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

wpp.cssの記載

/*人気記事 画像の下に文字を入れる*/
.sidebar ul.wpp {
    overflow:hidden;
    margin:0px 5px 0px;
}
.sidebar ul.wpp li {
    height: 90px;
    margin: 5px 0 0 5px;
}
.wpp-post-title {
    width: 200px;
    height: 50px;
    display: inline-block;
    vertical-align:top;
    font-size:12px;
    margin: 0 ;
}

WordPress Popular Postsカスタムズ

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

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

テンプレートに表示する

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

<?php

if (function_exists(‘wpp_get_mostpopular’)) {

wpp_get_mostpopular(); }

?>

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)

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

WordPress Popular Posts