カスタムフィールドを使いWordPressでjQuery FlexSlider v2.2.2を使うメモ

Tweet

Pocket

カスタム投稿タイプslideを作成してアイキャッチにアップロードした画像を表示する。

<?php
query_posts(
    array(
        'ignore_sticky_posts' => 1,
        'posts_per_page'      => 5,
        'post_type'           => 'slide'
    )
);
?>
<?php if ( have_posts() ) : ?></p>

<div class="slideshow">
        <div class="flexslider">
            <div id="loader"><div id="loading"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/ajax-loader.gif"></div></div>
            <ul class="slides">
                <?php
                $i = 1;
                while ( have_posts() ) : the_post(); ?>
                    <?php
                    //Get slide options
                    if ( ! wp_is_mobile() ) {
                        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 1920, 1280 ) );
                    } else {
                        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'small' );
                    }
                    $slide_background_img = $thumbnail[0];

                    $s_styles = "";
                    $s_class  = "";
                    if ( $slide_background_img ) {
                        $s_styles .= "background-image: url(" . $slide_background_img . ");";
                        $s_styles .= "background-repeat: no-repeat;";
                        $s_styles .= "background-position: center center;";
                        $s_styles .= "background-size: cover;";
                    }
                ?>
                    <li id="slide<?php echo $i; ?>" <?php post_class( $s_class ); ?> style="<?php echo $s_styles; ?>">
                        <div class="block--slide">
                            <div class="block--slide__body">
                                <h2><?php the_title(); ?></h2>
                                <?php the_content(); ?>
                            </div><!-- .slide-box__body -->
                            <div class="block--slide__footer text-center">
                                <a href="#main-wrap"><i class="fa fa-angle-double-down fa-5x"></i></a>
                            </div><!-- .block--slide__footer -->
                        </div><!-- .slide-box -->
                    </li>
                    <?php $i ++; ?>
                <?php endwhile; ?>
            </ul><!-- .slide -->
        </div><!-- .flexslider -->
    </div>

<p><!-- #slide -->
<?php endif; ?>
<?php wp_reset_query();?>

$( window ).load(function() {
        $('.flexslider').flexslider({
            slideshowSpeed: 5000,
            directionNav: false,
            slideshow: true,
            animation: 'fade',
            animationLoop: true,
            start: function( slider ){
                $('#loader').remove();
            }
        });
    });

sass

.slideshow {
  position: relative;
  margin: 0 0 30px !important;
  padding: 0 !important;
  background: none repeat scroll 0 0 #000000;
  max-height: 700px;
  overflow: hidden;
  .flexslider {
    margin: 0 !important;
    position: relative;
    .cpt_slide {
      display: block;
      width: 100%;
      height: 700px !important;
    }
    #loader {
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      width: 100%;
      height: 700px;
      z-index: 10;
      #loading {
       margin: auto;
      }
    }
  }
}
.block--slide {
  margin: 0 auto;
  padding-top: 80px;
  max-width: 980px;
  min-width: 200px;
}
.block--slide__body {
  max-width: 400px;
  min-width: 200px;
  h2 {
    color: $bg-color-secondary;
    font-family: 'Droid Serif', serif;
    font-size: 20px;
    margin-bottom: 25px;
  }
}
.block--slide__footer {
  max-width: 400px;
  min-width: 200px;
}