Jetpackの人気記事のデザインをコピペでオシャレにカスタマイズする方法【人気の投稿とページウィジェット】
便利なんだけどイマイチ見た目がよくない、Jetpackの人気記事。
PHPとCSSをコピペして、見やすく＆おしゃれにしちゃいましょう。
ビフォーアフターはこんな感じ。
ビフォーは、サムネイル画像は小さいし、上下の記事との区切りが明確でなくタイトルも分かりづらいです。
そこでアフターは
画像を大きく
記事の区切りあり
順位表示
して分かりやすくしました！
事前準備・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アイコンを追加する方法