2014/05/23 11:42:27 | WordPress, メモ

ここ二週間くらいで久し振りにしっかりWordPressに触ったので、今回覚えたことメモ。

カスタムフィールドの画像をライトボックスで表示したい

使ったプラグインはカスタムフィールドテンプレートとWP Lightbox 2。

まず、カスタムフィールドテンプレートでtype = fileというファイルアップロード用の枠を作ったのだけど、それをそのまま画像として吐き出すと、上げたままの画像が表示されるだけで、サムネイル表示も出来ない。

次に、画像アップロードの枠をtype = textareaにしてみる。
これはこのサイトのライブアーカイブページでも使ってる方法で、エントリー本文と同じようにWordPressのシステムに則ったサムネイル表示ができるようになる。

けど、このサイトもだけど、それだとなぜかライトボックスが適用されなくて、ただのリンクになってしまうのです。
いちいち画像に飛ぶのもめんどくさいし、どうしてもライトボックスで表示したい。
且つ、あまり詳しくない人でもいじれるように、カスタムフィールドも使いたい。

なんでライトボックスが適用されないのか

詳しくはわからなかったのだけど、ライトボックス系のプラグインが適用されるのはエントリー本文のみというのを見かけた。
完全に私の予想だけど、カスタムフィールドって直接テンプレートにフィールド内に書いた文字なりを吐き出しちゃうから、Aタグの中にライトボックス用のタグを埋め込むことができないんだと思う。relとかいうやつね。
どうすれば埋め込まれるようになるんだろう。
本文としてカスタムフィールドを吐き出すことはできないんだろうか？

そう言えば、このサイトでは[cft format=0]ってショートコードを入れることで、カスタムフィールドを本文として吐き出しているブログがある。
worksとかまさにそうなんだけど。
ただ、詳しくない人に引き渡すというのに、「毎回本文にショートコード書いてくださいね」とは言いたくない。

とは言っても、やっぱり本文じゃないと変換できないんだろうし……。

変換できないなら自分で書いてやれば良いのでは

煮詰まって一晩寝て、思いつきました。
画像のURLだけ取得して、AタグもIMGタグもテンプレートに書いちゃえば良いのでは。テンプレートでAタグの中にrelを入れてしまえば、ライトボックスで表示されるはず。

カスタムフィールドでファイルをアップすると、フィールドが吐き出すのはファイルのID。そこから画像のURLを取得するのは、ググればすぐに分かることでしょう。
ということで、以下ですよ。

<?php
$files = get_post_meta($post->ID, カスタムフィールドのID, false);
foreach($files as $file){
	$file = wp_get_attachment_url($file);
	echo $file;
}
?>

これで画像のURLが取得できる。

で、実際に使ったのが以下。

<a href="<?php
$files = get_post_meta($post->ID, Image02, false);
foreach($files as $file){
	$file = wp_get_attachment_url($file);
	echo $file;
}
?>" rel="lightbox"><img src="<?php
$files = get_post_meta($post->ID, Image02, false);
foreach($files as $file){
	$file = wp_get_attachment_url($file);
	echo $file;
}
?>" /></a>

AとIMGに入ってるのはどちらも同じ、IDから取得した画像のURL。で、Aにはライトボックスの為に予めrelを入れてあります。

これでできたー！

おわりに

これができたことによって、このサイトの変な作りも色々わかってしまいました。
ライブのページでライトボックス効いてないのも解決しますね……。
それと、画像用のタグがずらっと長いので、4枚も画像を使うとソースがずらっと長くなってしまい……。
できればこれをショートコードですっきりとまとめると良いのかも知れない。
それはまあ、また今度考えます。