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

2018-04-07Web制作

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

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

Jetpack人気記事プラグイン デザイン変更のビフォーアフター

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

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

そこでアフターは

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

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

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

スポンサーリンク

事前準備・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に以下のコードをコピペします。

.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;
}

 

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

マウスオンした状態

画像は、マウスオンした時の状態。

線と線の間であれば、どこを触ってもリンクが飛べますし、マウスオンすれば灰色になるんです!

パソコンからの閲覧は少なめなのでマウスオンに関してはどちらでもいいのですが、線と線の間全体にリンクが貼られているのは重要!

リンクが貼られているかと思ったのに、ここには貼られてない! というちょっとしたストレスを無くすことができます。

高負荷なプラグインを減らしてJetpackに集約しよう

WordPress Popular Postを代表する人気記事プラグインは、WordPressでブログを運営しているほとんどの人が設置しているかと思います。

人気記事プラグインの違い

WordPress Popular Postはアクセスがある度に、カウントデータを自サイトのデータベースに書き込む仕様。

対してJetpackの人気記事は統計情報のデータを用いています。これは外部のデータベース(wordpress.com)からデータを呼び出しているんです。

自サイトのデータベースを圧迫することなく、人気記事が作成できるならそのほうが良いですよね。

プラグインをインストールすればするほど、読み込むものが余計に増え、サイトの表示速度が低下します。

Jetpackは様々な機能を盛り込んだプラグイン。これで解決できるのであれば、それに越したことはありません。

 

Jetpackの人気記事プラグインは、見た目が良くないのが難点でした。

ですが、この記事のコードをコピペするだけで見やすく変更できますので、「サイトの表示速度が遅い…」とお悩みの方は一度Jetpackの人気記事に切り替えてみてはいかがですか?

 

他にもJetpackのカスタマイズ記事を書いてますので、興味のある方はどうぞ!

関連記事Jetpack共有ボタンに丸いLINEアイコンを追加する方法

 

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます