Jetpackの人気記事のデザインをコピペでオシャレにカスタマイズする方法【人気の投稿とページウィジェット】

2018-04-072018-04-08Web制作

便利なんだけどイマイチ見た目がよくない、Jetpackの人気記事。

PHPとCSSをコピペして、見やすく＆おしゃれにしちゃいましょう。

ビフォーアフターはこんな感じ。

ビフォーは、サムネイル画像は小さいし、上下の記事との区切りが明確でなくタイトルも分かりづらいです。

そこでアフターは

画像を大きく
記事の区切りあり
順位表示

して分かりやすくしました！

WordPressをカスタマイズする際は、子テーマを作成することをおすすめします。
関連記事【画像付き解説】子テーマを作成してWordPressのカスタマイズを楽にしよう！

Contents

1. 事前準備・Jetpackの「人気の投稿とページ」ウィジェットを有効化する
2. Jetpack「人気の投稿とページ」ウィジェットのサムネイル画像を大きくする
3. Jetpack人気記事ウィジェットのデザインをCSSで変更する
4. 高負荷なプラグインを減らしてJetpackに集約しよう

事前準備・Jetpackの「人気の投稿とページ」ウィジェットを有効化する

まず、Jetpackの追加サイドバーウィジェットを有効化します。追加サイドバーウィジェットという名前ですが、サイドバー以外でも使えます。

手順は追加ウィジェットの有効化手順をご覧ください。

有効化したら、外観 → ウィジェットで、人気の投稿とページウィジェットをどこでもいいので追加します。

そして表示形式で画像リストを選択します。このページに記載されているコードは、画像リストのデザインを改変するためのコードです。

人気の投稿とページプラグインはJetpackの統計情報を利用します。無効化されている場合は有効化しておきましょう。（インストール時にはデフォルトで有効化されています）

Jetpack「人気の投稿とページ」ウィジェットのサムネイル画像を大きくする

外観 → テーマの編集 → functions.phpに以下のコードをコピペして、サムネイル画像を大きく出力させるようにします。

function jeherve_custom_thumb_size( $get_image_options ) {
	$get_image_options['avatar_size'] = 100;

	return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

$get_image_options['avatar_size’] = 100; の100という数値は画像サイズ（px）です。

ご希望のサイズに合わせてお好きに変更してください。

Jetpack人気記事ウィジェットのデザインをCSSで変更する

外観 → テーマの編集 → style.cssに以下のコードをコピペします。

CSS

.widgets-list-layout .widgets-list-layout-blavatar {
	float: none !important;
	margin-right: 10px;
	width: 100px !important;
	max-width: 100px !important;
}
.widgets-list-layout li > a {
	display: inline-block;
	height: 100%;
}
.widgets-list-layout-links {
	float: none !important;
	overflow: hidden;
	width: auto !important;
}
.widgets-list-layout-links a{
	color: #333;
	height: 100%;
	margin-top: 10px;
	padding-top: 5px;
	padding-left: 110px;
	position: absolute;
	top: -10px;
}
.widgets-list-layout-links a:hover{
	text-decoration: none;
	transition: all .3s ease-in-out;
}
.widget_top-posts ul {
	counter-reset: post-rank;
	margin: 0px;
}
.widget_top-posts ul li {
	list-style-type: none;
	min-height: 100px;
	padding-top: 10px !important;
	position: relative;
}
.widget_top-posts ul li:before {
	color: #eee;
	content: counter(post-rank, decimal);
	counter-increment: post-rank;
	font-size: 40px;
	position: absolute;
	bottom: -10px;
	right: 5px;
	z-index: 0;
}
.widget_top-posts ul li:after {
	content: "";
	border-bottom: 1px solid #eee;
	width: 100%;
	height: 10px;
}
.widget_top-posts ul li:last-child:after {
	content: "";
	border: none;
}
.widget_top-posts ul li:hover{
	background-color: #f5f5f5;
	transition: all .3s ease-in-out;
}
.widget_top-posts ul li:hover:before{
	color: #fff;
	transition: all .3s ease-in-out;
}

自己満足かもしれませんが、すっごいこだわったところがあるんです。マウスオンしたときの挙動とリンクの位置です。