【プラグイン不使用】WordPressにスライダーを実装する【slick】

Program
スポンサーリンク

どうもnakattyです。

WordPressにスライダーを設置したいと思った時、プラグインで簡単に設置できたりするのですが、今回はプラグインを使わずスライダーを設置する方法をご紹介いたします。

今回使うのは、jQueryのスライダープラグインの「slick」をというものを使っていきます。

スライド画像1 スライド画像2 スライド画像3 スライド画像4 スライド画像5

↑こんなやつを実装します٩(๑òωó๑)۶

スポンサーリンク

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のダッシュボードの「外観」→「テーマエディター」と進めば見つかると思います。
読み込むのは↓のコードです。

テーマにまだjQueryを読み込むコードが無い場合は↓のコードも一緒にheadタグの中に入力してくさい。

これでheadタグへの入力は完了です。

slickをWordPressで表示させる

WordPressにslickを表示させる準備ができたので、いよいよスライダーを表示させます。やり方としてはHTMLにコンテンツを記入してから、「footer.php」にスライドさせるJavaScriptを入力します。

順番にやっていきます。

表示させるコンテンツをHTMLに記入する

表示させるコンテンツは「ulタグ」でも「div」でもOKです。

・ulタグをつかう場合

・divをつかう場合

スライダーの表示条件を入力する

次に「footer.php」のbodyタグの終了直前にスライダーの表示条件を入力します。
スライドさせるだけであれば基本となる以下のコードを入力するだけで動きます!

↓こんな感じになります。

スライド画像1 スライド画像2 スライド画像3 スライド画像4 スライド画像5

オプションでslickをカスタマイズする

slickがスゴイのはオプションが豊富にあってスライダーを細かくカスタマイズできることです!
↓のように真ん中に1枚の画像で両サイドにちょびっとだけ表示とかもできます٩(๑òωó๑)۶

スライド画像1 スライド画像2 スライド画像3 スライド画像4 スライド画像5

↑のスライドは「footer.php」に下記のように入力してます。

こんな感じで簡単にスライダーが実装できました!

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