カスタム投稿タイプを利用して作る並び替え可能なスライダー
<!--
カスタム投稿タイプとカスタムフィールドを使用して作るスライダー。
スライダーは、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 -->