「twenty ereven」テーマに追加してみました


前の記事で、「Custom Field Template」プラグインを使って、画像カスタムフィールドを作成する方法を解説しました。

このプラグインは、ひとつのフィールドで複数画像を扱うことも可能です。 単数の場合との差分を解説します。

カスタムフィールドの設定をする

複数画像を許可する場合は、以下のコードを「テンプレートコンテンツ」欄に記入します。

メディアライブラリを参照したり、自由に項目の追加ができるようになります。

[HOGEImage]
type = file
label = 画像をアップロードしてください。(幅480px・高さ360px)
mediaLibrary = true
mediaPicker = true
mediaRemove = true
multiple = true
multipleButton = true

コードに間違いが無ければ、投稿画面に画像カスタムフィールドが現れます。


画像情報を取得する

複数画像を許可すると、カスタムフィールドに保存されるアタッチメントIDが配列となり、単数のときのように、wp_get_attachment_image関数に直接渡すことができません。 なので、foreach文を使って、配列の中身を繰り返し取り出して処理する必要が出てきます。

投稿のループ内に、以下のコードを貼り付けて保存してください。 カスタムフィールドに画像があると、画像が順番に表示されます。

<?php
//サイズの定義
$size = 'thumbnail';
//エントリーに属しているアタッチメントIDを取得する
$postCustomMulti = post_custom('HOGEImage');

if($postCustomMulti) {
?>
<p><strong>HOGEImage</strong></p>
<?php
//アタッチメントIDの配列から画像を取得する
foreach($postCustomMulti as $var) {
$postImg = wp_get_attachment_image($var, $size);
?>
<figure class="postImg"><?php echo $postImg; ?></figure>
<?php } //foreach ?>
<?php } //if ?>

wp_get_attachment_image関数のサイズは、常に原寸表示させたり、「設定」→「メディア」で定義した「サムネイル」「中」「大」を指定することも可能です。 それぞれ文字列で「full」「thumbnail」「medium」「large」を渡します。

このサンプルではサムネイルを指定しています。

ギャラリー機能との違い

バージョン1.9.8の時点で、Custom Field Templateプラグインでは一括アップロードや順番変更ができません。 このため、WordPress既存の「ギャラリー」機能の方が直感的で操作性が良いです。

ただし、ギャラリー機能は生成されるHTMLの自由度が低いため、jQueryのスライドショーなどに併せたい場合、jQueryでDOMを強引に書き替えるか、add_action関数でのコア関数の大幅な上書きが必要となります。

作成するテーマの仕様や、アップロードする画像の枚数などを考慮した上で、どちらを採用すべきかの判断が求められます。