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

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

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

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

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

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

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

WordPress初心者におすすめ！多機能なプラグインJetpack ～導入編～

  今回はWordPressを「始めたばかり」という人におすすめな多機能なプラグイン『Jetpack by WordP ...

 https://kirari-yums.net/post-8423/

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

Jetpack 人気記事の設置

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

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

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

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

検索して有効にする

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

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

一覧から有効にする

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

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

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

結耶

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

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

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

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

表示形式

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

テキストリスト

画像リスト

画像グリッド

きらり

わーい！簡単に人気記事が設置できたー(^o^)/

結耶

静かだからいないかと思った(^^;
簡単に設置できたでしょ！？この人気記事は24～48時間以内の統計情報を元に人気順に表示しているんだよ。

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

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

function.phpに追加

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

Jetpack 人気の投稿ウィジェットの画像サイズを変更する方法 | デフよん

　サイドバーにウィジェットで人気の投稿（Recent Posts）リストを出すのに、プラグインJetpackの人気 ...

 https://def-4.com/jetpack-recent-posts-widget/

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

※子テーマをお使いの方は子テーマの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は以下のサイトの記事を参考に自分のサイトに合わせました。

【WordPress】Jetpackプラグインを利用して人気記事を表示する方法 | うらなか書房の

Jetpackの機能「人気の投稿とページ」を有効化したり（「設定」に見当たりませんが深くさぐっていくと ...

 https://uranaka-shobou.com/jetpack-top-posts/

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

/* 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の人気記事に順位を付けたい場合は以下のサイトを参考にしてみてください。

WordPress Popular Postsで人気記事に順位を表示する方法 - 西沢直木のIT講座

WordPressプラグインのWordPress Popular Postsで人気記事に順位を表示する方法を紹介します。仕上がり ...

 https://www.nishi2002.com/17731.html

最後に

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

きらり

でも結耶違うプラグインを使って人気記事を設置してるよね？

結耶

うん。Jetpackの人気記事より高機能だからね。
Jetpackの人気記事に変えようと思ったけどね～やめました(^^;

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

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター

きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM