Typesプラグインのカスタムフィールドにアップロードした画像の情報を取得して表示する方法のご紹介です。
※WordPressのTypesでカスタムフィールドを作成する方法は、以前に紹介させていただいた以下の記事も合わせて参考にしてみてください。
カスタムフィールドにアップロードした画像情報の取得
Typesのカスタムフィールドからアップロードした画像をブログに表示させる場合は、画像を表示させたい場所に以下のような記述を行います。|
1 |
<?php echo (types_render_field("fieldスラグ名", array())); ?> |
※fieldスラグ名 の部分は変更してください。
↓出力結果はこのようになります。
|
1 |
<img alt="https://webantena.net/wp-content/uploads/2014/05/sample.jpg" title="https://webantena.net/wp-content/uploads/2014/05/sample.jpg" src="https://webantena.net/wp-content/uploads/2014/05/sample.jpg" /> |
但し、img タグ内のAlt やTitle にも画像のURLが出力されてしまうので、これはあまり宜しくありません。
画像のAlt を指定する
上記の方法では画像のAltが指定できないので、以下のような記述にしてあげます。|
1 2 3 4 |
<?php echo (types_render_field("fieldスラグ名", array( 'alt' => get_the_title(), 'title' => get_the_title() ))); ?> |
↓出力結果はこのようになります。
|
1 |
<img alt="記事タイトル" title="記事タイトル" src="https://webantena.net/wp-content/uploads/2014/05/sample.jpg" /> |
この例では、get_the_title()で記事のタイトルをAlt（とTitle）にしています。
imgタグのAltやTitleに記事のタイトルが指定されるようになりました。
画像のサイズを指定する
Typesプラグインのカスタムフィールドからアップロードした画像を、サイズを指定して表示させることも可能です。|
1 2 3 4 5 6 |
<?php echo (types_render_field("fieldスラグ名", array( 'width' => '180', 'height' => '180', 'alt' => get_the_title(), 'title' => get_the_title() ))); ?> |
↓出力結果はこのようになります。
|
1 |
<img alt="記事タイトル" title="記事タイトル" src="https://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は元の画像サイズと「同じ」か「小さい」値である必要があります。
サムネイルサイズの画像を出力
上記のように直接サイズを指定する以外にも「サムネイルサイズの画像が欲しい」なんて場合はこのような記述になります。|
1 2 3 4 5 |
<?php echo (types_render_field("fieldスラグ名", array( 'size' => 'thumbnail', 'alt' => get_the_title(), 'title' => get_the_title() ))); ?> |
出力結果はこの通りです。
|
1 |
<img width="150" height="150" src="https://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」だけ欲しい場合は、以下の記事で紹介している方法を使うことができますので、是非参考にしていただければと思います。
https://webantena.net/wordpress/plugin-types-render-field-img-url/
コメント