こんにちは
Lightbox系のjQueryプラグインはいくつかありますが、ここではLightboxを使ってみます。
まず、Lightboxをダウンロードして解凍し、WordPressの投稿画面で読み込まれるようにします。
テーマのfunctions.phpなどに以下のような感じで記述します。
テーマディレクトリにlightboxフォルダを作成し、解凍したファイルのdistフォルダの中身をアップロードしています。
function theme_enqueue_styles() {
wp_enqueue_style( 'lightbox', get_stylesheet_directory_uri() . '/lightbox/css/lightbox.min.css' );
wp_enqueue_script( 'lightbox', get_stylesheet_directory_uri() . '/lightbox/js/lightbox.min.js', array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
参考：
関数リファレンス/wp enqueue script
関数リファレンス/wp enqueue style
Lightbox自体の使い方はインターネットにいっぱい転がっていると思うので、そちらを参照してみてください。
また、wp_enqueue_scriptの最後はtrueでないとLightboxが動きません。
投稿を表示するテンプレート（single.phpなど）に以下のように記述します。
Advanced Custom fieldsでは、画像フィールドを画像オブジェクトに設定している前提です。
<?php
while ( have_posts() ) : the_post();
$thumbnail = get_field('150thum')['url'];
$original = get_field('full_img')['url'];
?>
<a href="<?php echo $original; ?>" data-lightbox="image-1" data-title="My caption">
<img src="<?php echo $thumbnail; ?>" alt="" />
</a>
<?php endwhile; ?>
ループの記述などは、お使いのテーマやテンプレートに沿った状態で構いません。
URLを取得し、aタグをimgタグを生成している箇所をご参考になさってください。
jsとcssが読み込まれていれば、これでLightboxにはなるはずです。
普通に考えると
＜?php if( get_field(‘150thum’) && get_field(‘full_img’) ): ?＞
＜a href=”＜?php echo wp_get_attachment_url(get_field(‘full_img’)) ?＞”＞
＜?php echo wp_get_attachment_image(get_field(‘icon’, $parentdata->ID), ‘thumbnail’); ?＞
＜/a＞
＜?php endif; ?＞
になりますが、これではまずいでしょうか。
コードテストをしていないので、エラーが出るかもしれません。
ごめんなさい、間違えてb-quoteしてしまいました。読みづらいですね。
<?php if( get_field(‘150thum’) && get_field(‘full_img’) ): ?>
<a href=”<?php echo wp_get_attachment_url(get_field(‘full_img’)) ?>”>
<?php echo wp_get_attachment_image(get_field(‘icon’, $parentdata->ID), ‘thumbnail’); ?>
</a>
<?php endif; ?>
ちなみに、別のフィールドの画像をリンクに設定したいと読み取れたため、lightbox系の記述は一切省いています。
munyagu様
ありがとうございます。
以下を子テーマのfunctions.phpに追記しますと、なぜか該当ページは真っ白になってしまいます。
function theme_enqueue_styles() {
wp_enqueue_style( 'lightbox', get_stylesheet_directory_uri() . '/lightbox/css/lightbox.min.css' );
wp_enqueue_script( 'lightbox', get_stylesheet_directory_uri() . '/lightbox/js/lightbox.min.js', array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
なお子テーマのfunctions.phpには以下が記載されております。
最後の行の//ライトボックスの下に追記いたしました。
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles()
{ wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, ‘ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
//バージョン削除削除
add_filter( ‘style_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
add_filter( ‘script_loader_src’, ‘vc_remove_wp_ver_css_js’, 9999 );
//サイドバー追加
register_sidebar(array(
‘name’ => __(‘SidebarA’),
‘description’ => __(‘sidebar-blog.php’),
‘id’ => ‘sidebarA’,
‘before_widget’ => ‘<div class=”sidebar-widget widget_archive clr”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h5 class=”widget-title”>’,
‘after_title’ => ‘</h5>’,
));
//ライトボックス
?>
そのため先に進めません。
どうしてでしょうか。
同じ名前の関数があるためです。
すでにあるtheme_enqueue_styles関数の中に
wp_enqueue_style( 'lightbox', get_stylesheet_directory_uri() . '/lightbox/css/lightbox.min.css' );
wp_enqueue_script( 'lightbox', get_stylesheet_directory_uri() . '/lightbox/js/lightbox.min.js', array('jquery'), '', true);
を記述すれば良いです。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );の追加も不要です。
munyagu様
ryo000様
ありがとうございます。
何故か普通に画像を表示するだけでもできなくなってしまいました。
Advanced Custom fieldsでは、画像フィールドおよび返り値を画像オブジェクトに設定されております。
<?php if( get_field('150thum') ): ?>
<img src="<?php the_field('150thum'); ?>" />
<?php endif; ?>
と入力してアップしたところ画像が壊れた状態になりました。
画像の個所のソースを見ると以下のようになっておりました。
<img src="221, , 150, , , image/jpeg, http://nekonoteworks.fem.jp/nekonoteworks/wp-content/uploads/2016/10/150.jpg, 150, 150, Array">
いらぬものまで出力されている状態でしょうか。
一度カスタムフィールドを作り直したほうが良いか、何か確認すべき設定項目があるのでしょうか。
このような状況のためまだryo000様のコードは試せておりません。
munyagu様
functions.phpの件、ありがとうございました！
正常にファイルは読み込めました。
続けてみたいと思います。
画像オブジェクトにすると配列（またはオブジェクト？）で値を返しますので、画像サイズやmimeタイプなども返しています。
詳しくはこちらの記事がわかりやすいのではないでしょうか。
Advanced Custom Fields で画像を出力する方法 – いさろぐβ ウェブサイト制作の備忘録
ちなみに、私が提示したコードは返り値が画像IDの場合に有効です。
ryo000様
ありがとうございます！
わたくしも記載頂きましたサイトを見ながらやっておるのですが、最初は画像がちゃんと表示されたのになんだかわけがわからなくなってしまいました。
こちらはもっと勉強が必要そうです。
画像オブジェクトで指定した場合とIDで指定した場合の勉強をしてもっと活用したいです。
一旦進めたいと思います。
munyagu様
ありがとうございます！
頂きましたコードでやりたい通りに表示させる事ができました。
本当にありがとうございました。
ryo000様
IDでのコードありがとうございました！
IDだと活用の幅が広がるとの事ですので今後勉強をしていきたと思います。
本当にありがとうございました。
