• RSS

[WP]Types でカスタムフィールドにアップした画像を取得して表示する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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="記事タイトル" />
sizefulllargemediumthumbnail が指定できますので、
サムネイルサイズ(画像サイズ小)を使いたい場合は'size' => 'thumbnail' となります。


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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください