WordPressで最近のアクセス数が多い人気記事をサイドバーに表示する方法

作成:2014/01/14 更新:2014/09/25

Jetpack for WordPressロゴ
今自分のブログでどの記事がよく読まれているか表示されていると、検索やソーシャルメディアから来た一見さんにアピールでき、ブログ内の巡回も良くなります。

自分のブログのファンを増やすために、人気のある記事を紹介しましょう。

「WordPress.com Stats」と「Jetpack」を導入してある前提で、WordPressでアクセス数の多い人気記事をサイドバーに表示する方法を紹介します。

ウィジェットから登録する

「WordPress.com Stats」と「Jetpack」を導入していれば、ウィジェットから登録することができます。

「Jetpack」の設定画面からではないので注意。

ダッシュボード左メニューの「外観」→「ウィジェット」を選択し、「利用できるウィジェット」から「人気の投稿とページ（Jetpack）」を表示させたい位置にドラッグ＆ドロップする。

画像リスト表示のレイアウト変更

画像リストの表示を選択したいのですが、画像が小さいし、テキストと離れてしまっているので修正方法も紹介。この方法はプラグインを直接書き換えるのでJetpackをアップデートしたら変更が元に戻る可能性大です。アップデート後にもう一度設定する必要があるので承知起きお願いします。（アップデートによって変更方法が変わる可能性もあります。）

また、プラグインを直接書き換えるので、バックアップをとり、自己責任で作業をしてください。

ダッシュボード左メニューの「プラグイン」→「プラグイン編集」をクリック。
「編集するプラグインを選択」で「Jetpack by WordPress.com」を選択し、「選択」をクリック。
ファイルが多すぎるので、「jetpack/modules/」で始まるファイルはなんでもいいのでクリック。
「modules」内のファイルがすべて表示されるので、「jetpack/modules/widgets/top-posts.php」を編集する。見つけにくい場合は「control + F」で「top-posts.php」を検索。

編集画面で、「control + F」で「$get_image_options[‘avatar_size’] = 40;」という部分を探す。

この40を変えれば取得する画像のサイズを指定できるので、表示させたい画像のサイズに変更して「ファイルを更新」をクリックして保存。とりあえずサイズは100にしました。
jetpack人気の投稿とページの画像のサイズを変更

次にCSSも変更する。「jetpack/modules/widgets/widget-grid-and-list.css」をクリックし、編集画面が開いたら、「.widgets-list-layout-blavatar」を検索し、その中に書かれている「max-wides」を先ほどの画像サイズと同じにする。
jetpack cssを変更する

以上が画像サイズの変え方です。
「jetpack/modules/widgets/top-posts.php」と「jetpack/modules/widgets/widget-grid-and-list.css」を編集すれば表示は自由に変えられます。

自分用

このブログ用で更に変更した所の自分用メモ。
「jetpack/modules/widgets/top-posts.php」のdivを外しaタグの中に画像を入れる。

　↓

divを外す

$get_image_options['avatar_size'] = 80;

80に変更。

「ul」のクラスを削除。imgタグのクラスを「image photo」aタグのクラスを「clearfix」に変更。

「jetpack/modules/widgets/widget-grid-and-list.css」にコードを追加

.widgets-list-layout img{
float: left;
display: block;
margin: 0px 10px 5px;
border: solid 1px #ccc;
padding: 4px;
background-color: #fff;
}

.widgets-list-layout li {
padding: 0 0 10px 0;
border-bottom: 1px solid #e2e2e2;
}

.widgets-list-layout li a{
display:block;
height: 75px;
}