スポンサード

Types プラグインのカスタムフィールドにアップロードした画像の情報を取得して表示する方法のご紹介です。

※WordPress の Types でカスタムフィールドを作成する方法は、以前に紹介させていただいた記事 も合わせて参考にしてみてください。

カスタムフィールドにアップロードした画像情報の取得

Types のカスタムフィールドからアップロードした画像をブログに表示させる場合は、画像を表示させたい場所に以下のような記述を行います。
※fieldスラグ名 の部分は変更してください。

<?php echo (types_render_field("fieldスラグ名", array())); ?>

↓出力結果はこのようになります。
但し、img タグ内のAlt やTitle にも画像のURLが出力されてしまうので、これはあまり宜しくありません。

<img alt="https://www.webantena.net/wp-content/uploads/2014/05/sample.jpg" title="https://www.webantena.net/wp-content/uploads/2014/05/sample.jpg" src="https://www.webantena.net/wp-content/uploads/2014/05/sample.jpg" />

画像のAlt を指定する

上記の方法では画像のAlt が指定できないので、以下のような記述にしてあげます。

<?php echo (types_render_field("fieldスラグ名", array(
'alt' => get_the_title(),
'title' => get_the_title()
))); ?>

↓出力結果はこのようになります。
この例では、get_the_title()で記事のタイトルをAlt（とTitle）にしています。

<img alt="記事タイトル" title="記事タイトル" src="https://www.webantena.net/wp-content/uploads/2014/05/sample.jpg" />

img タグのAlt やTitle に記事のタイトルが指定されるようになりました。

画像のサイズを指定する

Types プラグインのカスタムフィールドからアップロードした画像を、サイズを指定して表示させることも可能です。

<?php echo (types_render_field("fieldスラグ名", array(
'width' => '180',
'height' => '180',
'alt' => get_the_title(),
'title' => get_the_title()
))); ?>

↓出力結果はこのようになります。

<img alt="記事タイトル" title="記事タイトル" src="https://www.webantena.net/wp-content/uploads/2014/05/sample-wpcf_180x180.jpg" />

例えば、上記のように幅180px、高さ180px とサイズを指定して出力した場合、画像のアップロード先フォルダ内に「ファイル名-wpcf_180x180.jpg」のような画像が生成されるようになります。
今回のケースだと「sample-wpcf_180x180.jpg」という画像ファイルです。

オリジナルの画像をリサイズして表示しているのではなく「画像をリサイズして生成」している点に注意が必要です。

また、アップロードされた元々の画像サイズが幅、高さ共に180px に満たない場合は、wpcf_180x180.jpg のような画像は生成されません。
width と height は元の画像サイズと「同じ」か「小さい」値である必要があります。

サムネイルサイズの画像を出力

上記のように直接サイズを指定する以外にも「サムネイルサイズの画像が欲しい」なんて場合はこのような記述になります。

<?php echo (types_render_field("fieldスラグ名", array(
'size' => 'thumbnail',
'alt' => get_the_title(),
'title' => get_the_title()
))); ?>

出力結果はこの通りです。

<img width="150" height="150" src="https://www.webantena.net/wp-content/uploads/2014/05/sample-150x150.jpg" class="attachment-thumbnail" alt="記事タイトル" style="" title="記事タイトル" />

sizeは full、large、medium、thumbnail が指定できますので、
サムネイルサイズ（画像サイズ小）を使いたい場合は'size' => 'thumbnail' となります。


Types のカスタムフィールドを利用してアップロードした画像の場合、画像の「URL」だけ欲しい場合はこちらのTypes でカスタムフィールドにアップした画像のURLを取得する方法 の記事で紹介している方法を使うことができますので、是非参考にしていただければと思います。

スポンサード