どうもnakattyです。
WordPressにスライダーを設置したいと思った時、プラグインで簡単に設置できたりするのですが、今回はプラグインを使わずスライダーを設置する方法をご紹介いたします。
今回使うのは、jQueryのスライダープラグインの「slick」をというものを使っていきます。
↑こんなやつを実装します٩(๑òωó๑)۶
slickをWordPressで使える様にする
slickをWordPressに導入するには、slickの公式サイトからファイルをダウンロードして、そのファイルをWordPressで読み込ませる必要があります。
その方法を書いていきます。
slickのダウンロード
先ずはslickの公式サイトにアクセスします。
slickの公式サイトに入りましたら↓のような画面になります。赤い枠の部分「get it now」をクリックしてください。
するとファイルのダウンロードボタンの所までスルスル〜っと移動します。
「Download Now」ボタンを押したら圧縮ファイルのダウンロードが始まります。
slickのアップロード
公式サイトからダウンロードした「slick.zip」ファイルを解凍すると、いくつかファイルがありますので、
その中の「slick」というフォルダを探します！↓の赤い枠で囲っているやつです。
slickというフォルダが見つかったら、FFFTPなどのソフトを使ってWordPressで使用しているテーマ内にアップロードします。
アップロードが無事に完了しましたら、次はテーマ内に色々記述していきます。
slickを読み込ませる
スライダーを設置したいテーマの「header.php」のheadタグの中にslickのファイルを読み込むために以下のコードを入力します。
※「header.php」はWordPressのダッシュボードの「外観」→「テーマエディター」と進めば見つかると思います。
読み込むのは↓のコードです。
|
1 2 3 4 |
<!-- slick css --> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen" /> <script src="<?php echo get_template_directory_uri(); ?>/slick/slick.min.js"></script> |
テーマにまだjQueryを読み込むコードが無い場合は↓のコードも一緒にheadタグの中に入力してくさい。
|
1 2 |
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
これでheadタグへの入力は完了です。
slickをWordPressで表示させる
WordPressにslickを表示させる準備ができたので、いよいよスライダーを表示させます。やり方としてはHTMLにコンテンツを記入してから、「footer.php」にスライドさせるJavaScriptを入力します。
順番にやっていきます。
表示させるコンテンツをHTMLに記入する
表示させるコンテンツは「ulタグ」でも「div」でもOKです。
・ulタグをつかう場合
|
1 2 3 4 5 6 |
<ul class="slider-class"> <li><a href="#"><img src="画像パス" alt="sample"></a></li> <li><a href="#"><img src="画像パス" alt="sample"></a></li> <li><a href="#"><img src="画像パス" alt="sample"></a></li> <li><a href="#"><img src="画像パス" alt="sample"></a></li> </ul> |
・divをつかう場合
|
1 2 3 4 5 6 |
<div class="slider-class"> <div><a href="#"><img src="画像パス" alt="sample"></a></div> <div><a href="#"><img src="画像パス" alt="sample"></a></div> <div><a href="#"><img src="画像パス" alt="sample"></a></div> <div><a href="#"><img src="画像パス" alt="sample"></a></div> </div> |
スライダーの表示条件を入力する
次に「footer.php」のbodyタグの終了直前にスライダーの表示条件を入力します。
スライドさせるだけであれば基本となる以下のコードを入力するだけで動きます！
|
1 2 3 4 5 |
<script> $(function() { $('.slider-class').slick(); }); </script> |
↓こんな感じになります。
オプションでslickをカスタマイズする
slickがスゴイのはオプションが豊富にあってスライダーを細かくカスタマイズできることです！
↓のように真ん中に１枚の画像で両サイドにちょびっとだけ表示とかもできます٩(๑òωó๑)۶
↑のスライドは「footer.php」に下記のように入力してます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(function() { $('.slider2').slick({ infinite: true,//スライドの無限ループ slidesToShow: 1,//スライドの表示枚数 slidesToScroll: 1,//スライドする数 centerMode: true,//表示外のスライドが見切れる centerPadding: '20%',//見切れるスライドの表示％ autoplay: true,//自動スライド autoplaySpeed: 2500,//自動再生のスピード speed: 800//スライドアニメーションのスピード }); }); </script> |
こんな感じで簡単にスライダーが実装できました！