メディア - 画像（Images） - 《WordPress開発者リソース》日本語

画像
WebPサポートとサブサイズ画像出力のデフォルトMIMEタイプ
- 参考文献

画像

このセクションでは、メディアライブラリにおける画像の取り扱いについて説明します。テーマディレクトリ内にある画像ファイルを表示したい場合は、imgタグで場所を指定し、CSSでスタイルを設定してください。

<img alt="" src="" />

imgコードの取得

メディアライブラリに画像を表示するには、wp_get_attachment_image()関数を使用します。

echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );

選択したサムネイルサイズで次のHTML出力が得られます

<img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... />

他のサイズを指定することもできます。例えば、元の画像のための「full」や、設定 > メディアで設定された「medium」や「large」、または任意の幅と高さのペアを配列として指定できます。また、add_image_size()を使用してカスタムサイズの文字列を設定することもできます。

echo wp_get_attachment_image( $attachment->ID, array(640, 480) );

画像のURLの取得

画像のURLを取得したい場合は、wp_get_attachment_image_src()を使用します。これは配列（URL、幅、高さ、is_intermediate）を返します。画像が利用できない場合は、falseを返します。

<?php
$image_attributes = wp_get_attachment_image_src( $attachment->ID );
if ( $image_attributes ) : ?>
   <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
<?php endif; ?>

配置

サイトに画像を追加する際、画像の配置を右、左、中央、またはなしとして指定できます。WordPressコアは自動的に画像を整列させるためのCSSクラスを追加します：

alignright
alignleft
aligncenter
alignnone

中央揃えが選択されたときのサンプル出力は次のとおりです

<img class="aligncenter size-full wp-image-131" src= ... />

これらのCSSクラスを整列やテキストの折り返しに利用するためには、テーマがメインスタイルシートファイルのようなスタイルシートにスタイルを含める必要があります。style.cssを使用して、Twenty Seventeenのような公式テーマを参考にすることができます。

キャプション

メディアライブラリの画像にキャプションが指定されている場合、HTML img要素はショートコード[caption]と[/caption]で囲まれます。

<div class="mceTemp">
  <dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px">
   <dt class="wp-caption-dt">
   <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" />
   </dt>
   <dd class="wp-caption-dd">Sun set over the sea</dd>
  </dl>
</div>

そして、HTMLではfigureタグとしてレンダリングされます：

<figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter">
  <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... />
  <figcaption class="wp-caption-text">Sun set over the sea</figcaption>
</figure>

配置と同様に、テーマは次のスタイルを含める必要があります。

wp-caption
wp-caption-text

WebPサポートとサブサイズ画像出力のデフォルトMIMEタイプ

WordPress 5.8は、WebP画像フォーマットのサポートを導入しました。これにより、ウェブ上の画像に対して改善されたロスレスおよびロス圧縮が提供されます。WebP画像は、JPEGやPNGの同等品よりも平均して約30%小さく、結果としてサイトがより速く、帯域幅を少なく使用します。WebPはすべての最新ブラウザでサポートされていますaccording to caniuse。

画像がアップロードされると、WordPressはadd_image_size()を使用して定義された小さいサブサイズを生成します。デフォルトでは、WordPressは元の形式と同じ形式でこれらのサブサイズを生成します。WebP形式のパフォーマンス上の利点から、サブサイズが元の形式ではなくWebPで生成されることが望ましい場合があります。


次の例は、JPG画像のすべてのサブサイズをWebPを使用して生成する方法を示しています：  
``````bash
<?php
function wporg_image_editor_output_format( $formats ) {
   $formats['image/jpg'] = 'image/webp';
   return $formats;
}
add_filter( 'image_editor_output_format', 'wporg_image_editor_output_format' );
`

注意：GDおよびImageMagickライブラリは、ロスとロスレスの両方でWebP形式をサポートしています。ただし、アニメーション画像をサポートしているのはImageMagickのみです。

出力形式をWebPに設定すると、ウェブサーバーがそれをサポートしているかどうかが確認され、サポートしていない場合は形式が変更されません。

参考文献

wp_get_attachment_image()
wp_get_attachment_image_src()
投稿とページの画像スタイリング
CSS (Codex)