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

例えばギャラリーページなどの出力で活躍すると思います。
まだまだ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;
}
  • コーダーのための計算機