WordPressに「slickスライダー」を簡単導入！初心者向け完全ガイド

WordPressに「slickスライダー」を簡単導入！初心者向け完全ガイド
2025.02.14
プログラミング
JavaScriptWordPressコーディングプログラミング
スポンサーリンク

WordPressで画像スライダーを作るなら「slickスライダー」がおすすめ！

slick.jsとは？他のスライダープラグインとの違い

Webサイトで画像スライダーを作成する方法はいくつかありますが、「slickスライダー（slick.js）」は特に人気のあるスライダーライブラリの一つです。

slick.jsとは？

slick.js は、jQueryベースのスライダーライブラリで、直感的な記述で簡単に導入できるのが特徴です。

主なポイントは以下の通りです。

  • 軽量で動作がスムーズ
  • 豊富なカスタマイズオプション（自動再生、矢印、ドットナビゲーションなど）
  • レスポンシブ対応で、スマホやタブレットでも最適な表示が可能

他のスライダープラグインとの違い

WordPressには「MetaSlider」や「Smart Slider 3」などのプラグインもありますが、slick.jsは以下の点で優れています。

スライダー特徴おすすめポイント
slick.js軽量でカスタマイズ自由デザインや動作を細かく調整したい人向け
Swiper.jsモダンで高機能最新技術を活用したスライダーを作りたい人向け
MetaSliderプラグインで簡単に導入コーディング不要で手軽に使いたい人向け
Smart Slider 3ビジュアルエディタで調整可能ドラッグ＆ドロップで直感的に作りたい人向け

WordPressでslickスライダーを使うメリット

1. 簡単に導入できる

プラグインを使用すれば、数回のクリックで導入可能。
手動で追加する場合も、シンプルなコードで実装できます。

2. 軽量で高速な動作

プラグインを利用すると、不要なコードが含まれることがありますが、slick.jsは必要な部分のみ導入可能なので、サイトの表示速度を最適化しやすいです。

3. 豊富なカスタマイズオプション

  • 矢印（arrows）やドットナビゲーションのデザイン変更
  • スライドの自動再生や速度調整（autoplay, speed）
  • スマホ・タブレット向けのレスポンシブ設定

4. WordPressとの相性が良い

WordPressは標準でjQueryを読み込んでいるため、追加のライブラリを導入しなくてもslick.jsを活用できるのも大きなメリットです。

【簡単】WordPressにslickスライダーを導入する方法（初心者向け）

ここでは、WordPressにslickスライダーを導入する2つの方法を紹介します。

方法①：プラグインを使って簡単に実装する

最も簡単な方法は、WordPressのプラグインを利用することです。

おすすめのプラグイン「WP Slick Slider and Image Carousel」

このプラグインを使えば、ショートコードを貼るだけでslickスライダーを簡単に設置できます。

導入手順

  1. WordPress管理画面で「プラグイン」→「新規追加」を開く
  2. 「WP Slick Slider and Image Carousel」と検索し、インストール＆有効化
  3. 「Slick Slider」のメニューからスライダーを作成
  4. 作成したスライダーのショートコードをコピーし、投稿や固定ページに貼り付ける

プラグインを使用すれば、コードを書かなくても簡単にスライダーを追加できます。

方法②：手動でslick.jsを追加する（jQuery版）

コードを編集できる方は、手動でslick.jsを追加する方法もおすすめです。

手動導入の手順

手動導入の手順
  • STEP1
    slick.jsをダウンロード

    公式サイト から slick.min.js と slick.css をダウンロード

  • STEP2
    ファイルをアップロード

    WordPressの wp-content/themes/使用テーマ/ フォルダに slick フォルダを作成し、ファイルを格納

  • STEP3
    スクリプトを読み込む（functions.php）

    以下のコードを functions.php に追加して、slick.jsとCSSを読み込みます。

    function add_slick_slider()
{
  wp_enqueue_style('slick-css', get_template_directory_uri() . '/slick/slick.css');
  wp_enqueue_script('slick-js', get_template_directory_uri() . '/slick/slick.min.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'add_slick_slider');
  • STEP4
    HTMLにスライダーを記述
    <div class="your-slider">
    <div><img src="image1.jpg" alt="画像1"></div>
    <div><img src="image2.jpg" alt="画像2"></div>
    <div><img src="image3.jpg" alt="画像3"></div>
</div>
  • STEP5
    JavaScriptでslickを適用
    <script>
    jQuery(document).ready(function($) {
        $('.your-slider').slick({
            autoplay: true,
            arrows: true,
            dots: true,
            speed: 500
        });
    });
</script>

手動で導入すると、不要な機能を省きながらカスタマイズの自由度が高いスライダーを作成できます。

slickスライダーの基本設定と動作確認

最小構成のHTML・CSS・JavaScript

slickスライダーを動作させるための最小構成のコードを紹介します。

HTML

<div class="slick-slider">
    <div><img src="slide1.jpg" alt="スライド1"></div>
    <div><img src="slide2.jpg" alt="スライド2"></div>
    <div><img src="slide3.jpg" alt="スライド3"></div>
</div>

CSS

.slick-slider img {
    width: 100%;
    height: auto;
}

JavaScript

<script>
    jQuery(document).ready(function($) {
        $('.slick-slider').slick({
            autoplay: true,
            dots: true,
            arrows: true
        });
    });
</script>

WordPressテーマでslickスライダーを表示する方法

テーマのテンプレートファイルにスライダーを組み込む場合、以下のように記述します。

<?php echo '<div class="slick-slider">'; ?>
    <div><img src="<?php echo get_template_directory_uri(); ?>/images/slide1.jpg" alt="スライド1"></div>
    <div><img src="<?php echo get_template_directory_uri(); ?>/images/slide2.jpg" alt="スライド2"></div>
    <div><img src="<?php echo get_template_directory_uri(); ?>/images/slide3.jpg" alt="スライド3"></div>
<?php echo '</div>'; ?>

よくあるエラーと解決策

1. スライダーが動かない

  • jQueryが正しく読み込まれているか確認する
  • slick.jsが読み込まれているか確認する

2. 矢印が表示されない

  • CSSで display: none; になっていないか確認する
  • slickの arrows: true が設定されているか確認する

次の章では、slickスライダーのカスタマイズ方法について詳しく解説します！

slickスライダーのカスタマイズ方法（デザイン・動作変更）

矢印（arrows）のデザインを変更する

slickスライダーの矢印のデザインを変更するには、CSSでカスタマイズできます。

.slick-prev, .slick-next {
    background-color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

ドットナビゲーションをカスタマイズする

ドットのデザインを変更する場合も、CSSを適用します。

.slick-dots li button {
    background-color: #ddd;
}

.slick-dots li.slick-active button {
    background-color: #ff6600;
}

スライドの自動再生を設定する（autoplay, speed）

スライダーを自動再生するには、以下のオプションを設定します。

$('.slick-slider').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 800
});

レスポンシブ対応！スマホ・タブレット向けの設定

異なるデバイスに対応するためのレスポンシブ設定は、responsive オプションを使用します。

$('.slick-slider').slick({
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1,
                arrows: false
            }
        },
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 2
            }
        }
    ]
});

これで、スマホやタブレットでも適切にスライダーが表示されます。

次の章では、WordPressのfunctions.phpを使ったslickスライダーの管理方法について解説します！

【上級編】WordPressのfunctions.phpでslickスライダーを管理する

functions.phpにslick.jsを登録する方法

WordPressの functions.php に slick.js を追加することで、テーマ全体でスライダーを利用できるようになります。

手順 1: slick.js をテーマ内に追加

まず、slick.min.js と slick.css をテーマフォルダの assets/js/ および assets/css/ に配置します。

手順 2: functions.php にスクリプトを登録

以下のコードを functions.php に追加し、slick.js を読み込みます。

function enqueue_slick_slider() {
    wp_enqueue_style('slick-css', get_template_directory_uri() . '/assets/css/slick.css');
    wp_enqueue_script('slick-js', get_template_directory_uri() . '/assets/js/slick.min.js', array('jquery'), null, true);
    wp_enqueue_script('slick-init', get_template_directory_uri() . '/assets/js/slick-init.js', array('slick-js'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_slick_slider');

手順 3: slick-init.js にスライダー設定を追加

jQuery(document).ready(function($) {
    $('.slick-slider').slick({
        autoplay: true,
        autoplaySpeed: 3000,
        dots: true,
        arrows: true,
        slidesToShow: 1
    });
});

WordPressのカスタム投稿タイプとslickスライダーを連携

WordPressのカスタム投稿タイプを使えば、投稿データを動的に取得してスライダーを作成できます。

手順 1: カスタム投稿タイプを作成

functions.php に以下のコードを追加し、カスタム投稿タイプ slider を作成します。

function create_slider_post_type() {
    register_post_type('slider', array(
        'labels' => array('name' => 'スライダー', 'singular_name' => 'スライド'),
        'public' => true,
        'supports' => array('title', 'thumbnail')
    ));
}
add_action('init', 'create_slider_post_type');

手順 2: 投稿データを取得し、スライダーを表示

スライダーを表示したいテンプレートファイル (front-page.php など) に、以下のコードを追加します。

<?php
$args = array(
    'post_type' => 'slider',
    'posts_per_page' => -1
);
$slider_query = new WP_Query($args);
if ($slider_query->have_posts()) : ?>
    <div class="slick-slider">
        <?php while ($slider_query->have_posts()) : $slider_query->the_post(); ?>
            <div>
                <?php the_post_thumbnail('full'); ?>
            </div>
        <?php endwhile; ?>
    </div>
<?php endif; wp_reset_postdata(); ?>

この設定により、カスタム投稿タイプ slider に登録した画像をスライダーとして表示できます。

次の章では、slickスライダーをさらに活用するためのまとめと追加リソースを紹介します！

まとめ：WordPressでslickスライダーを活用しておしゃれなサイトを作ろう！

ここまで、WordPressにslickスライダーを導入する方法やカスタマイズ手順を詳しく解説しました。slickスライダーを活用することで、シンプルながらも美しく動作するスライダーを作成できます。

追加で学べるリソース紹介（公式ドキュメント・参考サイト）

slickスライダーをさらに深く理解し、カスタマイズを楽しむために、以下のリソースも参考にしてみてください。

他のおすすめスライダープラグインもチェック！

slickスライダー以外にも、WordPressには多くのスライダープラグインがあります。それぞれの特徴を理解し、用途に応じて選択しましょう。

プラグイン名特徴
Swiper.js高機能でモダンなスライダー。CSSアニメーションが強力
MetaSlider初心者向けの簡単なスライダープラグイン
Smart Slider 3ビジュアルエディタ搭載で直感的に作成可能

これで、WordPressにslickスライダーを導入し、カスタマイズするための一通りの手順を紹介しました。

ぜひこの記事を参考に、自分のサイトにslickスライダーを取り入れて、おしゃれで魅力的なページを作成してください！

タイトルとURLをコピーしました