Neioumi
12/8/2014 - 11:42 AM

カスタム投稿タイプを利用して作る並び替え可能なスライダー

カスタム投稿タイプを利用して作る並び替え可能なスライダー

<!--
カスタム投稿タイプとカスタムフィールドを使用して作るスライダー。
スライダーは、owl-carouselを使用。
テキストなどを含むdivごと動かせるので便利。

▼カスタム投稿タイプ構成

カスタム投稿タイプ:slider

title: 表示なし。管理用に適当なタイトルを入れる運用。
editor: スライド上に表示するテキストなど編集用
page-attiributes: 昇順で並び変えができるように。

カスタムフィールド:
- スライドリンク:slider_url
- スライド背景画像:slider_img

-->

<div id="top_slide">
    <div id="top_slide_contents" class="owl-carousel owl-theme">

        <?php
        $slide_archive_post_args = array(
          'post_type' => 'slider',
          'orderby' => 'menu_order',
          'order' => 'ASC',
          'posts_per_page' => 30
        );
        $slide_archive_post = get_posts( $slide_archive_post_args );
        foreach ( $slide_archive_post as $post ) : setup_postdata( $post );
        ?>

        <?php
        $postImgSrc = wp_get_attachment_image_src(post_custom('Slider_img'), false);
        ?>

            <div class="item">
                <!-- 画像全体にリンクがある場合 -->
                <?php if(post_custom('Slider_url')): ?>
                    <a href="<?php echo post_custom("Slider_url")?>">
                        <div class="slide_img" style="background-image:url(<?php echo $postImgSrc[0]; ?>)">
                            <?php the_content(); ?>
                        </div>
                    </a>

                <!-- 画像全体のリンクが無い場合 -->
                <?php else : ?>

                    <div class="slide_img" style="background-image:url(<?php echo $postImgSrc[0]; ?>)">
                        <?php the_content(); ?>
                    </div>
                <?php endif; ?>
            </div>

        <?php endforeach; wp_reset_postdata(); ?>

    </div>
</div><!-- /#top_slide -->