2016/08/03

カスタムフィールドＩＤが連番のときに処理をくり返す

例えばギャラリーページなどの出力で活躍すると思います。
まだまだphpの構文がおぼつかないので無駄ばかりのコードですが。
$numに1から10までの値を入れてくり返します。
work_img_1からwork_img_10までのカスタムフィールドを出力できます。

コードではカスタム投稿で入れたimgをeasy funcy boxでポップアップします。

[PHP]

<ul class="work_entry_list">
<!--最大10までくり返す-->
<?php $num = 1;
while ($num < 11) { ?>
<?php if (get_post_meta($post->ID, 'work_img_' . $num, true)) : ?>
<li>
<div class="work_entry_list_inner " style="background-image:url(<?php the_field('work_img_' . $num); ?>);">
<a href="<?php $image = wp_get_attachment_image_src(get_post_meta($post->ID, 'work_img_' . $num, true), 'full');
echo $image[0]; ?>" rel="lightbox">
<img src="<?php the_field('work_img_' . $num); ?>" alt="<?php echo post_custom('work_img_' . $num . '_alt'); ?>" width="auto" height="auto">
</a>
<?php if (post_custom('work_img_' . $num . '_alt')) : ?>
</div>
<p class="work_entry_list_under">
<?php echo post_custom('work_img_' . $num . '_alt'); ?>
</p>
<?php else : ?>
<?php endif; ?>
</li>
<?php endif; ?>
<?php $num++;
} ?>
</ul>

[css]

/*--------------------work_entry_list-----------------------*/
.work_entry_list {
text-align: left;
}


.work_entry_list>li {
display: inline-block;
width: 250px;
margin: 0 7px 20px;
vertical-align: top;
}


.work_entry_list_inner {
position: relative;
width: 250px;
height: 250px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}


.work_entry_list_inner>a {
position: absolute;
width: 250px;
height: 250px;
top: 0;
left: 0;
}


.work_entry_list_inner img {
width: 250px;
height: 250px;
opacity: 0;
}