※必ずUnite Galleryでバックエンドで動くギャラリーを作成して吐き出したソースを確認
ACFの設定：UGギャラリーにACFから画像+キャプション追加
- 画像01：画像/gazo01/戻り値の形式＝画像 ID
- キャプション01：テキスト/caption01/※条件判定＝画像01に値
コード（page-xxx.php）：
①ギャラリー呼び込み＆表示
- 囲みdivのidとclass＝unite-gallery必要
- id（unitegallery_2_1）はjavascriptが参照する
<!-- ギャラリー -->
<div id='unitegallery_2_1' class='unite-gallery' style='margin:0px auto;'>
<?php //gazo01-06までのカスタムフィールド画像IDを取得表示
if( get_field('gazo01') ): ?>
<?php
$attachment_id = get_field('gazo01'); // ACFの画像IDを取得
$fsize = "large"; // 下記で使用
$msize = "medium"; // 下記で使用
$fimage = wp_get_attachment_image_src( $attachment_id, $fsize ); // 表示画像
$mimage = wp_get_attachment_image_src( $attachment_id, $msize ); // タイル画像（サムネイル）
$caption01 = get_field('caption01'); // 画像altテキスト＝ACFキャプション
$alt = !empty($caption01) ? $caption01 : 'Awards and Honors image of Prof. Yue Kuo.a.'; // 代替テキスト
?>
<img
src="<?php echo $fimage[0]; ?>"
data-thumb="<?php echo $mimage[0]; ?>"
alt="<?php echo $alt; ?>"
title="<?php echo $alt; ?>"
style="display:none">
<?php endif; ?>
<!-- 画像に合わせて増やす（例gazo01-06） -->
</div>
<script type='text/javascript'>
window.onload = function(e) {
if(typeof ugCheckForErrors == "undefined"){
document.getElementById("unitegallery_2_1").innerHTML = "<span style='color:red'>Gallery Error</span>";}
else{ ugCheckForErrors("unitegallery_2_1", "jquery");}
};
</script>②テンプレート下部＞スタイルシート、javascript
- 呼び込みのURLにはhome_url()関数を使う＝移動を考えて
<!-- Gallery code -->
<link rel='stylesheet' id='unite-gallery-css-css' href='<?php echo home_url(); ?>/wp-content/plugins/unite-gallery-lite_20250204/unitegallery-plugin/css/unite-gallery.css?ver=1.7.62' type='text/css' media='all' />
<script type="text/javascript" src="<?php echo home_url(); ?>/wp-content/plugins/unite-gallery-lite_20250204/unitegallery-plugin/js/unitegallery.min.js?ver=1.7.62" id="unitegallery_main-js"></script>
<script type="text/javascript" src="<?php echo home_url(); ?>/wp-content/plugins/unite-gallery-lite_20250204/unitegallery-plugin/themes/tiles/ug-theme-tiles.js?ver=1.7.62" id="unitegallery_tiles_theme-js"></script>
<script type='text/javascript'>
var ugapi1;
jQuery(document).ready(function(){
var objUGParams = {
gallery_theme:"tiles",
gallery_width:"100%",
load_api_externally:true,
lightbox_textpanel_enable_title:false,
lightbox_textpanel_enable_description:true,
lightbox_type:"compact",
tiles_type:"justified"
};
if(ugCheckForErrors('#unitegallery_2_1', 'cms'))
ugapi1 = jQuery('#unitegallery_2_1').unitegallery(objUGParams);
});
</script>
<!-- /Gallery code -->
