【WordPress】アイキャッチ画像などの画像サイズを追加する方法｜add_image_size()
今回は、WordPressのアイキャッチ画像などで使用する画像のサイズを追加する方法となります。
アイキャッチ画像などで使用する画像のサイズを追加する方法
アイキャッチ画像を有効にする方法
WordPressのデフォルトテーマTwenty Seventeenなど、アイキャッチ画像はじめから有効となっているテーマは多いと思いますが、有効になっていない場合には以下の関数をfunctions.phpに記述します。
add_theme_support( 'post-thumbnails' );画像サイズを追加｜add_image_size()
アイキャッチ画像などで使用できる画像サイズを追加するには、add_image_size関数を使用します。例では、以下の2種類の画像を追加します。
- 画像サイズ名thumbnail_image・画像サイズ130×80（ピクセル）・画像の切り抜きなし
- 画像サイズ名large_image・画像サイズ1308×808（ピクセル）・画像の切り抜きなし
以下がソースコードの例となり、functions.phpファイルに記述します。
add_image_size( 'thumbnail_image', 130, 80, false );
add_image_size( 'large_image', 1308, 808, false );WordPressでは画像を管理画面からアップロードすると、元の「フルサイズ」の画像以外に、3つ画像サイズが追加され利用できるようになります。
そのため、add_image_size関数で新しく画像サイズを追加する場面は少ないかもしれません。
デフォルトで追加される画像サイズの設定については以下のリンク先を参考にしてみてください。
パラメータ
add_image_size関数のパラメータでは、画像サイズ名・画像サイズなどを指定します。パラメータの詳細は下記となります。
add_image_size( $name, $width, $height, $crop );- $name（必須）
- 追加する画像サイズの名前。画像を取得する際に使用する名前。
- $width（省略可）
- アイキャッチ画像の幅の値。省略した場合は0
- $height（省略可）
- アイキャッチ画像の高さの値。省略した場合は0
- $crop（省略可）
- 画像リサイズの際に、切り抜きを行うか否かを指定。falseを指定した場合は画像の切り抜きなし。trueを指定した場合は 画像の切り抜きあり。省略した場合は false
追加した画像サイズのアイキャッチ画像を出力する例
以下のソースコードの例は、現在の投稿のアイキャッチ画像を出力する例となり、画像を表示したい箇所に記述します。出力するアイキャッチ画像は、今回の例で追加した画像サイズ名large_imageの画像となります。
echo get_the_post_thumbnail( large_image' );
アイキャッチ画像の取得する関数はいくつかありますが、今回の例ではimg要素でアイキャッチ画像を取得するget_the_post_thumbnail関数を使用しました。
get_the_post_thumbnail関数では引数に画像サイズ名のみを指定すると、現在の投稿のアイキャッチ画像を、引数に指定した画像サイズで取得します。
そのため、上記例では、add_image_size関数で追加した画像サイズ名large_imageの画像を取得しています。
get_the_post_thumbnail関数の詳細については、以下のリンク先を参考にしてみてください。
すでにライブラリ内にある画像サイズを追加する方法
add_image_size関数で画像サイズを追加したとしても、すでにアップロードされたライブラリ内にある画像に対しては適用されません。
ライブラリ内にある画像に対して、add_image_size関数で追加したサイズを生成するにはプラグインを利用する方法があります。
詳しくは、以下のリンク先を参考にしてみてください。
