スポンサーリンク

Jetpack ブログに人気記事設置とカスタマイズしてみた!

2019年6月22日便利なプラグイン

WordPressプラグイン『Jetpack』は30種類もの機能があります。
その中でも便利だと思う機能を紹介しています。

そこで今回はJetpackを使ってブログに人気記事を表示させる方法です。

Jetpackではブログ(サイト)の統計を集計する機能があるためその統計情報を利用して『人気記事』を表示させることができるんです。

私は別のプラグインを使って人気記事をブログに表示していますが、Jetpackの人気記事を表示させる機能を使ってみました。

※WordPressプラグイン『Jetpack』のインストール方法はこちらを参考にしてください。

※Jetpackのその他の機能については便利なプラグイン Jetpackタブ で一覧が表示されます。

スポンサーリンク

Jetpack 人気記事の設置

Jetpackでブログに人気気を設置するためには「サイト統計情報」と「追加サイドバーウィジェット」の2つを使用します。

サイト統計情報はデフォルトで使える(集計)ようになっているはずですが、もし機能が有効化されていない場合はサイト統計情報機能を有効化してください。

追加サイドバーウィジェットの有効化

人気記事を表示するための「追加サイドバーウィジェット」の有効化をします。有効化の方法は2つあります。どちらかの方法で有効化してください。

検索して有効にする

場所Jetpack 設定

設定画面を開くと右上に 虫眼鏡があります。 をクリックすると検索枠が出るので「追加サイドバーウィジェット」と入力して検索してください。

「ウィジェット」をONにしてください。

一覧から有効にする

場所Jetpack 設定 またはダッシュボード

1 設定またはダッシュボードを開いて一番下までスクロールして、右側にある「デバッグ」をクリック。

2 「デバッグセンター」というページが表示されますので一番下までスクロールし、「使いのサイトで使用可能な Jetpackモジュールの全一覧を表示します」をクリックしてください。

3 一覧の中から「追加サイドバーウィジェット」を探して有効化してください。

結耶
結耶
有効化すればすぐにブログに人気記事を設置できます。

人気記事をサイドバーに設置

場所外観 ウィジェット

ウィジェットの一覧の中に「人気の投稿とページ(Jetpack)」というウィジェットがあるのでサイドバーなど設置したいエリアに挿入してください。

「タイトル」「表示するページの種類」「表示形式」を設定してください。

表示形式

表示形式のサンプルです。参考に載せておきます。

テキストリスト

画像リスト

画像グリッド

きらり
きらり
わーい!簡単に人気記事が設置できたー(^o^)/
結耶
結耶
静かだからいないかと思った(^^; 簡単に設置できたでしょ!?この人気記事は24~48時間以内の統計情報を元に人気順に表示しているんだよ。

スポンサーリンク

画像リストのカスタマイズ

私は画像リストで表示してみて…「サムネイル画像が小さいのが気になったのでカスタマイズしてみました。」

function.phpに追加

まず画像サイズを変更するためにはfunction.phpにコードを追加しなくてはいけないということで以下のサイトでコードを参考にさせていただきました。

 注意!function.phoに上手く挿入しないとサイトが表示されなくなる可能性があります。 追加する前にバックアップをとってください。 またできれば子テーマを使うことをオススメします。

以下のコードをfunction.phpに追加してください。

場所外観 テーマ編集 function.php
※子テーマをお使いの方は子テーマのfunction.phpに追加してください。
Luxeritasをお使いの方Luxeritas 子テーマの編集 function.php タブ
function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 150;
 
        return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

※2行目の「150」がサムネイル画像のサイズ(150px×150px)になります。表示するためのサイズはあとでCSSで指定しますので大きめに「150」としています。サイズを小さくすると画像が荒くなるので大きめにしてください。

CSSを追加する

続いて表示する画像サイズと見た目をカスタマイズしました。

CSSは以下のサイトの記事を参考に自分のサイトに合わせました。

私は以下のようにしてみました。

/* Jetpack 人気記事のサムネイルサイズ */
.widgets-list-layout .widgets-list-layout-blavatar {
	max-width: 100px !important;  /*サムネイル画像のサイズ*/
	width: 100% !important;
	margin: 2px 8px 2px 0;  /*画像周りの外側の余白*/
	padding: 3px 1px 3px 0;  /*画像周りの内側の余白*/
}

/*人気記事の記事タイトル部分*/
.widgets-list-layout-links{
	margin-top: 2px;
	font-size: 16px;  /*記事タイトルの文字サイズ*/
	font-weight:bold;  /*記事タイトルを太字*/
	line-height: 1.7em;  /*行間*/
	float: none !important;
	width: auto !important;
}

※3行目の「max-width:100px」が表示されるサムネイル画像のサイズです。「100px」をご自分のサイトに合わせて変更してください。

【完成!】
きらり
きらり
これでサムネイル画像が大きくなるんだね!
結耶
結耶
そうだよ~♪いい感じでしょ!?(*^^*) 参考にさせてもらった記事では他にもカスタマイズ方法が書かれているので参考にしてみてください。

人気記事に順位を表示する

Jetpackの人気記事に順位を付けたい場合は以下のサイトを参考にしてみてください。

最後に

今回は「Jetpackで人気記事を設置」してみたので備忘録を兼ねて書いてみました。
簡単に設置できてとても便利です(*^^*)

きらり
きらり
でも結耶違うプラグインを使って人気記事を設置してるよね?
結耶
結耶
うん。Jetpackの人気記事より高機能だからね。 Jetpackの人気記事に変えようと思ったけどね~やめました(^^;

気軽に簡単に設置したいという方にはいいと思います。ぜひ使ってみてください。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。