jetpackの人気記事ウィジェットをカスタマイズする

jetpackはとても便利ですね。人気記事ウィジェットなんてのもあるのですから。

しかしこのウィジェット、cssがあまりイケてません。画像も小さいんですよね。というわけでカスタマイズしちゃいましょう。

画像の解像度を変更する

人気記事ウィジェットを司ってるのは「top-posts.php」です。「jetpack/modules/widgets/」に入っています。ここで画像の解像度が決定づけられています。

$get_image_options['avatar_size'] = 200;
} else {
$get_image_options['avatar_size'] = 40;

「40」で検索して出た部分を好みの数字に変更します。

CSSを除外する

jetpackに含まれるcssファイル「widget-grid-and-list.css」を直接編集しても見た目を変更する事が出来ますが、jetpackをアップデートしてしまうと、上書きされてしまいます。影響はできるだけ少なくありたいものですね。というわけでこのCSSファイルはそもそもwordpressで読み込まないように除外してしまいましょう。

add_action('wp_print_styles', 'deregister_styles', 100);
function deregister_styles() {
wp_deregister_style('widget-grid-and-list');
}

テーマのfunction.phpに上記コードを追加しましょう。これでcssファイルを読み込まなくなります。あとはテーマファイルの方のstyle.cssの方で見た目をカスタマイズしていきましょう!