WordPressのテーマ「simplicity」の記事一覧は、通常設定の場合正方形の画像がサムネイルに指定されます。
各記事のアイキャッチに設定した画像が、自動的に正方形にリサイズされサムネイルとして表示される仕組みです。
大抵画像のサイズを変更したいときは、CSSを使って「width」や「height」を設定するだけで簡単に出来ます。
しかし、simplicityの場合は自分がアップロードした画像そのものではなく、自動的にリサイズされた150×150の画像が使われるようになっているので、そう簡単にはいきません。
そんなわけで今回は、simplicityでサムネイルを自由な縦横比率・サイズで表示する方法を紹介します。
PHPを使いますが、ほぼコピペのみで簡単にカスタマイズ出来るので参考にしてみてください。
ちなみに実装後の変化は、このサイトのトップページ等で確認できます。
simplicity 一覧リストのスタイル
まず念のために、simplicityの記事一覧の表示形式の変更方法を紹介しておきます。
これは、simplicityにもともと備わっているものです。
WordPressダッシュボードの、「外観」→「カスタマイズ」→「レイアウト（全体・リスト）」の「一覧リストのスタイル」で変更できます。
下記の種類から選べるので、この中で気に入ったものがあればそれを使うのが一番楽です。
まだ試してない人は一度見てみてください。
- エントリーカード（デフォルト）
- 大きなエントリーカード
- 最初だけ大きなエントリーカード
- 本文表示
- 最初だけ本文表示
- サムネイル大
- タイル2列
- タイル3列
- タイル2列 画像縦横比保存（要再生成）
- タイル3列 画像縦横比保存（要再生成）
ちなみに今回は一番上の「エントリーカード（デフォルト）」を使ってのカスタマイズ方法です。
サムネイル画像を横長にカスタマイズ（任意のサイズに変更）
それでは、本題に入ります。
simplicityの記事一覧サムネイルの画像を任意のサイズにしてみましょう。
大まかに分けると全部で3つの手順となります。
順番に見ていきましょう。
1、任意のサイズのサムネイル画像を生成する
先ほどsimplicityには一覧リストの表示形式を変える機能があることを紹介しました。
それらに対応するために、自動的にアイキャッチ画像をリサイズしてサムネイル画像を生成する仕組みがあるんです。
これは画像を準備するための作業といった感じでしょうか。
ちなみにこの作業は、親テーマの「テーマのための関数 (functions.php)」の中にこんな感じで記述されています。
//サムネイルサイズ
add_image_size('thumb100', 100, 100, true);
add_image_size('thumb150', 150, 150, true);
add_image_size('thumb320', 320, 180, true);これが、サムネイルに使う画像を生成するコードなんです。
このように標準では「100×100」「150×150」「320×180」の3種類が備わっています。
サムネイル画像を生成するコードが見つかったので、この記述に則って自分の好きなサイズの画像を生成してみましょう。
しっかり子テーマ内の「テーマのための関数 (functions.php)」に記述しましょうね。（記述位置はどこでもいいです。）
add_image_size('thumb750',750,450,true);
add_image_size()の引数が4つありますね。簡単に説明します。
1つ目の引数は次の手順で使うんですが、画像サイズの名前だと思っておきましょう。
「thumb750」の数字部分を好きなものに変更してください。
横幅と同じ数字にしておくと分かりやすいですね。
※「thumb100」「thumb150」「thumb350」はすでにあるので、これ以外にしておきましょう。
2つ目、3つ目が画像のサイズを表しています。
「2つ目が横幅（width）」「3つ目が高さ（height）」です。
好きな縦横比を設定できますが、できればアイキャッチに設定した画像の比率に合わせることをお勧めします。
そうすることで画像が切り取られません。
4つ目の引数は画像の切り抜きをするかしないかですが、「true」のままでOKです。
無視してください。
2、生成した画像をサムネイルに設定
次は、先ほど準備した画像を実際にサムネイル画像として登録する作業です。
これは、「entry-card.php」に記述されています。
対応しているコードはこの部分です。
割とはじめの方に記述されているので見つけやすいと思います。
<?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb150', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>
それでは、親テーマの「entry-card.php」を子テーマにコピーしてきて、対応箇所を変更します。
上記コードの2行目後半にこんなコードがあるので探してください。
<?php the_post_thumbnail( 'thumb150', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?>
これを、先ほどadd_image_size()の1つ目の引数で設定した名前に変更することで、記事一覧サムネイルの画像が切り替わります。
３、CSSでサムネイル画像のサイズを調整
最後にこの作業を忘れてはいけません。
上記の2つの手順で、サムネイルに適用される画像は変更されました。
しかしCSSはそのままなので、まだ画像は正方形のままです。
生成したサムネイル画像に合ったCSSを記述してあげましょう。
PCサイト用（style.css）、スマホサイト用（mobile.css）それぞれに合ったスタイルを記述します。
ちなみに、記事一覧のサムネイル画像を指すセレクタは「.entry-thumb img」です。
例えばこんな感じになります。
.entry-thumb img{
width: 200px;
height: 120px;
border-radius:0px;
}
最後に
以上が、記事一覧サムネイル画像をカスタマイズする手順となります。
cssだけでサイズ変更出来なかった時は、正直「マジかよ・・・」と思いましたが、PHPの記述が単純なコードで助かりました。
今回のカスタマイズなら、PHPの知識がなくても出来るのでぜひ試してみてください。
