slick.jsをWordPressに設置してみよう

slick.jsをwordpressに設置してみようTOP

人気のスライダー「slick.js」をWordPressに設置したいんだけど、どうやったらできるの?って思っていませんか?レスポンシブやタッチデバイスに対応した「slick.js」は、オプション設定も豊富なスライダープラグインですね。

今回は、WordPressで「slick.js」のスライダーを動かす方法をご紹介します。

Sponsored Links

WordPressにslick.jsを導入する方法

slick.jsをダウンロードしよう

まずはじめに、以下の「slick.js」公式サイトを開きましょう。

slick.js公式サイトダウンロードページ

slick.js公式サイトダウンロードページ

「slick.js」公式サイトを開いたら、ナビゲーションの「get it now」をクリックするか、ページ下にスクロールしましょう。

get it nowまたはスクロール

「get it now」をクリックすると、ページ下の「Download Now」ボタンへ飛びます。また、スクロールしていくと「Download Now」ボタンがあるのでクリックしてファイルをわかりやすい場所にダウンロードしましょう。

slick.jsをダウンロードするボタン

slick.jsファイルをアップロードしよう

先ほど公式サイトからダウンロードした「slick.zip」ファイルを解凍しましょう。

解凍したファイルフォルダーを開くと、「slick」というフォルダーがあります。

slickフォルダ

FFFTPなどのソフトを使い、WordPressで使用しているテーマ内に「slick」フォルダーを丸ごとアップロードしましょう。

slickフォルダをアップロード

WordPressのテーマにslick.cssを読み込もう

「slick」フォルダーを丸ごとアップロードすることができたら、スライダーを設置したいテーマのheader.phpのhead内にslickのCSSファイルを読み込むために以下のコードを記述しましょう。

以下のコードは子テーマに設置するときのコードになります。

子テーマの場合

親テーマの場合

「slick.js」を設置したいテーマにjQueryを読み込んでない場合は以下も記述しましょう。

WordPressのテーマにslick.jsを読み込もう

次に以下のslickのjsファイルをfooter.phpの</body>直前に記述しましょう。

子テーマの場合

親テーマの場合

slick.jsを footer.phpの</body>直前 ではなくて、functions.phpで読み込む場合は、以下のように記述しましょう。(子テーマの場合)

slick.jsの使い方

HTMLの記述

slick.jsスライダーを設置したいコンテンツ(front-page.phpなど)に以下を記述しましょう。

ulを使用した例

divを使用した例

スライドさせるJavaScriptを記述

スライダーを動かすためのJavaScriptを、footer.phpの</body>直前に記述しましょう。

たったこれだけでスライダーが表示されます。

基本のスライダー

オプション設定したスライダー例

slick.jsの詳しいオプション設定は以下の公式サイトをご覧ください。

参考https://github.com/kenwheeler/slick/

Sponsored Links

おわりに

いかがでしたか?人気のスライダーslick.jsをWordPressのテーマに設置する方法をご紹介しました。slick.jsは豊富なオプション設定からスライダー表示のほかカルーセル表示でも簡単に設置することができます。ぜひ試してみてくださいね。

Sponsored Links