Blog

【WordPress】カスタムフィールドの画像URLを取得してLightboxで拡大

2016/06/09

カスタム投稿 Wordpress

備忘録です。

以前、アイキャッチ画像のLightboxについて記述しましたが、
今回は、カスタムフィールドで登録した画像のURLを取得して、
Lightboxで拡大する方法です。

<a href="<?php echo wp_get_attachment_url(get_post_meta($post->ID,"image1",true));?>" rel="lightbox-1">
<?php echo wp_get_attachment_image( post_custom( 'image1' ), 'photo-list' ); ?>
</a>

image1がカスタムフィールドのフィールド名になります。

複数のサブ画像をLightboxで表示したい場合には、
上記のように「lightbox-1」としてグループ化します。

さらにLightboxでカスタムフィールドに入力したテキストを表示します。
サンプルでは「text」というカスタムフィールドを想定してtitleにタグを入れています。
Ligntboxで拡大すると画像下にテキストが表示されます。

<a href="<?php echo wp_get_attachment_url(get_post_meta($post->ID,"image1",true));?>" rel="lightbox-1" title="<?php echo post_custom('text'); ?>">
<?php echo wp_get_attachment_image( post_custom( 'image1' ), 'photo-list' ); ?>
</a>



カテゴリー

月間アーカイブ

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ