slick

2024年10月9日2024年10月14日

WordPressでの使い方

シンプルなパターン

functions.php

<?php
function enqueue_custom_styles() {
    wp_enqueue_style('destyle', 'https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.css');
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/assets/css/style.css', array('destyle'));

    // slick-carouselのスタイルシートを読み込む
    wp_enqueue_style('slick-carousel', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
    wp_enqueue_style('slick-carousel-theme', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

function enqueue_custom_scripts() {
  // jQueryを読み込む
  wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.5.1.min.js', array(), null, true);
  
  // slick-carouselのスクリプトを読み込む
  wp_enqueue_script('slick-carousel', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);
  
  // ローカルのスクリプトを読み込む
  wp_enqueue_script('custom-script', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

index.php

    <div class="slider">
      <div>
        <div class="slider-img"><img src="<?php echo get_template_directory_uri(); ?>/assets/image/works1.jpg" alt=""></div>
        <p>スライド1</p>
      </div>
      <div>
        <div class="slider-img"><img src="<?php echo get_template_directory_uri(); ?>/assets/image/works2.jpg" alt=""></div>
        <p>スライド2</p>
      </div>
      <div>
        <div class="slider-img"><img src="<?php echo get_template_directory_uri(); ?>/assets/image/works3.jpg" alt=""></div>
        <p>スライド3</p>
      </div>
      <div>
        <div class="slider-img"><img src="<?php echo get_template_directory_uri(); ?>/assets/image/works4.jpg" alt=""></div>
        <p>スライド4</p>
      </div>
      <div>
        <div class="slider-img"><img src="<?php echo get_template_directory_uri(); ?>/assets/image/works5.jpg" alt=""></div>
        <p>スライド5</p>
      </div>
      <div>
        <div class="slider-img"><img src="<?php echo get_template_directory_uri(); ?>/assets/image/works6.jpg" alt=""></div>
        <p>スライド6</p>
      </div>
    </div>

script.css

// 「$」マーク→jQuery
jQuery(document).ready(function(){
    jQuery('.slider').slick({
    autoplay: true,
    dots: true,
    slidesToShow: 3, // デフォルトは3つ並べて表示
    responsive: [
        {
        breakpoint: 768, // 768px以下になったら
        settings: {
            slidesToShow: 1 // スライド1つだけ表示
        }
        }
    ]
    });
});

style.css

.slider-img {
    padding: 1rem;
}

.slider-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

最新の投稿をスライダーで表示する、矢印をカスタム

slider.php

<?php
// 最新の投稿を取得
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 5, // 表示する投稿数
    'orderby' => 'date',
    'order' => 'DESC'
);
$latest_posts = new WP_Query($args);

if ($latest_posts->have_posts()) : ?>
    <div class="slider-container">
        <div class="slider">
            <?php while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>
                <div class="slider-item">
                    <?php if (has_post_thumbnail()) : ?>
                        <div class="slider-img">
                            <a href="<?php the_permalink(); ?>">
                                <?php the_post_thumbnail('medium'); ?>
                            </a>
                        </div>
                    <?php endif; ?>
                    <h2 class="slider-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p>最新の投稿がありません。</p>
<?php endif; ?>

script.js

// 「$」マーク→jQuery
jQuery(document).ready(function(){
    jQuery('.slider').slick({
    autoplay: true,
    dots: true,
    arrows: true, // 矢印ボタンを表示

    // 「slick-prev」「slick-next」とクラス名を付けると、
    // slick-theme.cssのstylesheetが適用されてしまう
        prevArrow: '<button type="button" class="custom-prev-arrow"></button>',
        nextArrow: '<button type="button" class="custom-next-arrow"></button>',
    slidesToShow: 4, // デフォルトは3つ並べて表示
    responsive: [
        {
        breakpoint: 768, // 768px以下になったら
        settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: '10%', // 両サイドの見えている部分の幅
        }
        }
    ]
    });
});