都城市のホームページ製作、ネットショップ構築・コンサル

都城市のホームページ制作、ネットショップ・運営コンサルならヒロクリエイト｜HIROCREATE TOP
bxslider
ACFカスタムフィールドが空（入力なし）の場合、非表示にする方法

ACFカスタムフィールドが空（入力なし）の場合、非表示にする方法

2019年10月03日 [bxslider]

CPTUIでカスタム投稿タイプを使い、AdvancedCustomFieldでカスタムフィールドを作成し、CMS化している項目について

bxsliderで不動産物件の詳細ページなどによくある、大きい写真とその下に、サムネイル画像でリンクボタンを設置しているような場合に、
bxsliderでは、全てのカスタムフィールドの入力項目に値を入れていないと、loadingが表示されて、サムネイル画像が表示されない仕組みになっています。

なので、不動産物件の登録時に、画像を10枚まで登録できるようにCMSを作っていて、
実際は5枚しか登録しない場合、

残りの5箇所のフィールドは何も登録していないので、

実際の画面では、loadingが表示されたままサムネイルは表示されません。
（bxsliderのloading画像のリンクがおかしかったり、loading画像をサーバーにアップし忘れていると、loading画像クルクルも表示されずに、サムネイルが表示されるはずの部分が真っ白になります。）

それが、bxsliderのサムネイル画像ボタンとか出なければ、特にそこが見えないだけなので不都合は気付かないのですが、
実際は、その部分はHTMLソース自体には、

というコードが追加されて、loadingマークが出ているはずです。

今回は、不動産の物件詳細ページ、single-bukken.phpの中で、

bxsliderを使い、物件の写真を見せるパーツを作るためだったので、サムネイルが表示されないのは困りました。

やりたかったのは以下の感じです。

参考にしたサイト
https://www.plusdesign.co.jp/blog/?p=3037

実際に私がやりたかったのは、↑のに加えてカスタムフィールドにお客さんが入力したものでやりたかったので、以下のようにしました。
↓

<div class="slider">
<!--メインスライダー-->
<ul class="bxslider01">

<li>
<?php
    $attachment_id = get_field('main_photo');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('main_photo') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'main_photo',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>

<li>
<?php
    $attachment_id = get_field('photo01');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo01') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo01',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo02');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo02') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo02',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>"/></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo03');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo03') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo03',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo04');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo04') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo04',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo05');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo05') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo05',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo06');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo06') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo06',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo07');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo07') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo07',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo08');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo08') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo08',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo09');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo09') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo09',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
<li>
<?php
    $attachment_id = get_field('photo10');
    $size = "full"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo10') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<a href="<?php echo wp_get_attachment_url( get_field( 'photo10',$post->ID) ); ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" /></a>
</li>
 
</ul>
<!--// メインスライダー-->
 
<!--サムネイル-->
<div class="controlWrap">
<ul id="bx-pager" class="bxslider02">

<?php if( get_field('main_photo') ): ?>
<li><a data-slide-index="0" href="">
   <?php
    $attachment_id = get_field('main_photo');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('main_photo') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo01') ): ?>
<li><a data-slide-index="1" href="">
   <?php
    $attachment_id = get_field('photo01');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo01') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo02') ): ?>
<li><a data-slide-index="2" href="">
   <?php
    $attachment_id = get_field('photo02');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo02') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo03') ): ?>
<li class="last"><a data-slide-index="3" href="">
   <?php
    $attachment_id = get_field('photo03');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo03') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo04') ): ?>
<li class="last"><a data-slide-index="4" href="">
   <?php
    $attachment_id = get_field('photo04');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo04') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo05') ): ?>
<li class="last"><a data-slide-index="5" href="">
   <?php
    $attachment_id = get_field('photo05');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo05') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo06') ): ?>
<li class="last"><a data-slide-index="6" href="">
   <?php
    $attachment_id = get_field('photo06');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo06') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo07') ): ?>
   <li class="last"><a data-slide-index="7" href="">
   <?php
    $attachment_id = get_field('photo07');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo07') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo08') ): ?>
<li class="last"><a data-slide-index="8" href="">
   <?php
    $attachment_id = get_field('photo08');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo08') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo9') ): ?>
<li class="last"><a data-slide-index="9" href="">
   <?php
    $attachment_id = get_field('photo09');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo09') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
	?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

<?php if( get_field('photo10') ): ?>
<li class="last"><a data-slide-index="10" href="">
   <?php
    $attachment_id = get_field('photo10');
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $attachment = get_post( get_field('photo10') );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
	?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt; ?>" />
</a></li>
<?php else: ?>
<?php #条件に当てはまらないので表示なし ?>
<?php endif; ?>

</ul>

<p id="PrevIcon"></p>
<p id="NextIcon"></p>
</div>
<!--// サムネイル-->
</div>

因みに、10個登録可能にしている物件写真の登録部分で、10個全部登録するとは限らないので、
もし、画像の登録が無かったら、その項目自体非表示にしたいので、＜li＞中身＜/li＞を丸ごと条件指定分で囲んでいます。

↑こうしないと、そのlistの部分だけサムネイルのカルーセルで空白が表示されておかしいので、
＜li＞ごと非表示にするようにしています。

やれやれ。。

（参考サイト）
■bxSlider でローディング画像のままスライダーが表示されない　
http://blog.livedoor.jp/kuworks/archives/50536316.html

■Advanced custom fields で値が設定された時だけ表示する

Advanced custom fields で値が設定された時だけ表示する

ACFカスタムフィールドが空（入力なし）の場合、非表示にする方法

ACFカスタムフィールドが空（入力なし）の場合、非表示にする方法

関連記事はこちら！

人気記事ランキング