Toolset Typesで画像のカスタムフィールドを使う＠WordPress

WordPressの「カスタム◯◯」を便利、手軽に実装できるプラグイン「Toolset Types」について、いくつか基本的なことを公開してきましたが、画像のカスタムフィールドを使う場合にはいくつか配慮する点があるので、その点（Toolset Typesで画像のカスタムフィールドを扱う場合）に絞って説明します。

これまでのToolset Types関連投稿

導入とカスタム投稿タイプについてはこちら
カスタム投稿をプラグイン「Toolset Types」で実装する＠WordPress - ショウジンブログ

カスタムフィールドを作る例はこちら
カスタムフィールドをプラグイン「Toolset Types」で実装する＠WordPress - ショウジンブログ

カスタムタクソノミー（分類）についてはこちら
カスタムタクソノミー（カスタム分類）をプラグイン「Toolset Types」で実装する＠WordPress - ショウジンブログ

MW WP Formの連携はこちら
カスタムフィールド（Toolset Types）の内容をメールフォーム（MW WP Form）に渡す＠WordPress - ショウジンブログ

ユーザー用のカスタムフィールドはこちら
ユーザー用カスタムフィールドを作る＠WordPress - ショウジンブログ

投稿フィールドに画像フィールドを追加する

投稿フィールド（投稿 Fields）に画像用のフィールドを追加します。

f:id:showjinx:20160708115653p:plain

このフィールドグループが適用される投稿タイプ（カスタム投稿タイプ）の投稿画面を見ると、このように画像フィールドが追加されていますので、画像を登録してみます。（画像の登録はデフォルトのメディアのアップロードと同じです）

f:id:showjinx:20160708115711p:plain

ここでは画像特有の「縦横比」について必要なことを解説したいので、縦横の比率が異なる写真を使います。

要点に絞ってますが、こちらの投稿でも画像（縦横比が異なる場合のオプションの指定等）について説明しています。（最後のほうです）

blog.showzine.co

フロント側で出力する

カスタムフィールドの値をフロント側（ユーザー閲覧画面）へ出力するには二つありますが、Toolset Typesで用意されているAPIを利用すると便利です。

Types Fields API

画像フィールドはこちらに詳しくあります。

Image - Types Fields API

APIを使った場合の記述

<?php
$post_title = get_the_title();
echo types_render_field( "billboard", array( "alt" => $post_title, "width" => "300", "height" => "200", "proportional" => "true" ) );
?>

出力された状態を見てみるとこうなってます。

f:id:showjinx:20160708115953p:plain

Google Chromeのインスペクタでhtmlソースも一緒に表示しています。この記述例では幅を300ピクセル、高さを200ピクセルに指定した上で縦横比を固定するように引数「proportional」を有効にしています。この画像は縦長なので、高さの指定「200ピクセル」に合わせて幅が150ピクセルになっています。

幅や高さを固定サイズにすることが前提のデザインでなければ、縦横比を保持して自動で変換してくれるのでこれでいいかと思います。画像ひとつで1行を確保する成り行きで問題ないデザインの場合とかですね。

また、APIのオプションでimg要素のalt属性も出力するようにしています。この例ではセミナーのイメージに合わせた写真を投稿するという設定なので、投稿タイトル（セミナー名にあたる）をget_the_title()で取得し、変数に代入して使っています。

APIを使わない場合の記述

<?php echo post_custom('wpcf-billboard'); ?>

フィールドのスラッグの前に「wpcf」をハイフンでつないでつけます。

APIを介さない場合は、画像のパス（絶対パス）が文字列でそのまま出力されますので、img要素としてブラウザで表示したい場合には

<img src="<?php echo post_custom('wpcf-billboard'); ?>" alt="">

このように記述しますが、これだとアップロードした画像のサイズのまま表示されるので、アップロード前に手動でリサイズするかCSSでサイズを制御する必要があります。

サイズを指定してクロップ（切り抜く）

APIを介してだと縦横比固定で指定サイズで出力と、指定サイズ（縦横）でクロップして出力を選べます。

先の例では指定したサイズで縦横比固定を紹介したので、次に指定サイズでクロップした場合を紹介します。

<?php
$post_title = get_the_title();
echo types_render_field( "billboard", array( "alt" => $post_title, "width" => "300", "height" => "200" ) );
?>

縦横比固定でつけていたオプションの「proportional」を除いただけです。この指定だと下のキャプチャ画面のように（右がオリジナル画像、左がブラウザ側で出力された状態）中心から指定サイズの幅300ピクセル、高さ200ピクセルでクロップしてくれます。

f:id:showjinx:20160708120059p:plain

URLだけを取得（出力）したい

先述の「APIを使わない場合の記述」にありますが、APIを介するやり方もあります。

引数で出力するデータの形式をraw（データベースに格納されている画像のパスをそのまま出力）かhtml（htmlのimg要素としてラップ）が選べます。htmlにラップしての出力であれば、先のやり方でいいかと思いますが。

カスタムフィールドでバナー画像とそのリンク先（バナー画像に張ったリンク）を登録して使うような場合にはリンク先URLもimg要素も、素（raw）のデータが必要です。あとはOPGの画像とか、素のURLが必要なときはこのオプションを使います。

<?php
$post_title = get_the_title(); // 投稿タイトル
if(types_render_field("billboard")){
    $billboard = types_render_field("billboard", array("raw"=>"true", "separator"=>";"));
    echo '<img src="' . $billboard . '" alt="' . $post_title . '">';
};
?>

引数「raw」を「true」で有効化しています。

画像、URLを使ってリンクを張った画像を出力する例はこんなふうに。（altは空ですが、これも登録出来るようにするならばそれ用のフィールドを追加すればいいですね）

<?php
/* バナー画像とリンク先が登録されている時だけ出力 */
if(types_render_field("bnr1") && types_render_field("bnr1-url")){
    $image_bnr1 = types_render_field("bnr1", array("raw"=>"true", "separator"=>";"));
    $url_bnr1 = types_render_field("bnr1-url", array("raw" => "true"));
    echo '<li><a href="' . $url_bnr1 . '"><img src="' . $image_bnr1 . '" alt="" class="hover"></a></li>';
};
?>