画像

2020.04.06 2020.04.06

TOPICS

画像

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

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" ... />

管理画面の「設定」>「メディア」で設定したサイズに対して、元画像のサイズを「フル」にしたり、「中」「大」にしたり、幅と高さの任意のペアを配列として指定することができます。また、add_image_size()でカスタムサイズの文字列を設定することもできます。

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

画像のURLを取得する

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

$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 core は、画像を整列させるための CSS クラスを自動的に追加します。

中央揃えを選択した場合のサンプル出力です。

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

配置やテキストの折り返しにこれらのCSSクラスを利用するためには、テーマがメインのスタイルシートファイルなどのスタイルシートにスタイルを含める必要があります。
Twenty Seventeenなどの公式テーマにバンドルされているstyle.cssを参考にしてください。

キャプション

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

<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 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>

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