先週少しだけブログテーマのカスタマイズをしました。カスタマイズしたのはトップページで記事一覧の表示をリスト型からグリッド型に変更。
Before
After
このように並べて見ると、大きなサムネイルを使うと見栄えが良くなりますね。そこでトップページだけでなく、サイドバーの最新記事や人気記事も大きなサムネイルを使って表示させようとカスタマイズしてみました。
新着記事を表示するNewpost Catchはサムネイルの縦横比がおかしい
Newpost Catchで使用されるサムネイルサイズがメディア設定（設定→メディア）の設定値に依存するようです。私の環境では幅220高さ220が設定されていたので、このサイズのサムネイルが使用されます。
つまり、ウィジェットやショートコードで任意のサムネイルサイズを設定しても、スタイルシートで見かけのサイズが変更されるだけで実際のサムネイルサイズは変わっていません。
これがNewpost Catchでサムネイルの縦横比がおかしくなる理由です。
この状況を改善するために対策を考えてみました。
- PHPかJQueryを用いて呼出されるサムネイルの変更する
- スタイルシートでoverflow:hiddenを用いてサムネイルの一部を隠す
- プラグインの中身を直接いじる
色々考えたのですが、自分の技術的な問題でプラグインの中身を直接いじることにしました。
<?php
// サムネイル設定
add_theme_support('post-thumbnails');
add_image_size( 'toppage_thumbnail', 210, 150, true );
add_image_size( 'original_thumbnail', 220, 220, true );
add_image_size( 'gridstyle_thumbnail', 350, 200, true );
?>
私が使っているテーマのfunctions.phpの一部です。3つのサムネイルサイズを設定しています。
<?php $thumb_id = get_post_thumbnail_id(); // アイキャッチ画像のIDを取得 // $thumb_url = wp_get_attachment_image_src($thumb_id); 変更前 // function.phpで設定したサムネイルサイズを引数に追加 $thumb_url = wp_get_attachment_image_src($thumb_id, 'gridstyle_thumbnail'); $thumb_url = $thumb_url[0]; // 画像のURLを変数に代入 ?>
Newpost Catchのclass.php（120~124行目付近）を変更しています。このように変更することで、functions.php内で設定したサムネイルサイズの使用が可能となります。
ただし、ここで設定した値はすべてのウィジェットに適用されるので注意が必要です。微調整はスタイルシートで行いましょう。
また、ショートコードで使用されるサムネイルサイズは別の場所で設定が必要です。class.phpの334行目付近に上記同様の記述があるので値を変えれば適用できると思います。
このカスタマイズは意外と簡単にできるのですが欠点があります。それはプラグインのアップデートで編集した箇所が消えることです。プラグインファイル全体をダウンロードしておくと、もしものときも安心です。
サムネイルを大きなものに変更して、最新記事の表示はこんな感じになりました。やはり画像が大きいと見栄えが良いですね。
最後にプラグインの中身を編集する今回の方法はあまりおすすめできるものではないので、試すときは自己責任でお願いします。
