今日のブログでは人気のスライダーjQuery「slick.js」をWordpressで利用する方法をご紹介いたします。slickを利用すれば、画像スライダーから記事スライダーまでどんなスライダーでも実装することができます。そのうえWordPressのスライダー系プラグインよりも動作が軽いので、サイトの表示速度を遅くしたくない方にとてもおすすめのスライダーです。レスポンシブにも完全対応しています!slickの導入方法まずはWordpressのテーマ上でslickを利用できるように導入しましょう。導入は簡単で、下記の3ステップでおこないます。slickファイルを公式サイトからダウンロードslickファイルをサーバーにアップロードslickの読み込みそれぞれ説明していきます。1slickファイルを公式サイトからダウンロード最初にslickの公式サイトからslickのファイルをダウンロードしましょう。Now」ボタンがあるので、こちらをクリックしてください。するとslickの圧縮ファイルを取得できます。2slickファイルをサーバーにアップロードslickの圧縮ファイルを解凍すると中に「slick」というフォルダがあるので、このフォルダを丸ごとWordpressのテーマディレクトリ(=自分が使用しているテーマ内)にアップロードしましょう。使用するファイルだけを選んでアップロードしても良いのですが、面倒だし全部足してもファイルサイズは微々たるものなので僕はそのまま全部アップロードしちゃいます。slickの読み込みアップロードが完了したらslickのファイルをサイト内に読み込むためにheader.phpのheadタグ内に下記コードを追加しましょう。?>/slick/slick.min.js"></script>slickはjQueryを利用するプラグインなのでjQueryの読み込みも一緒におこないます。jQueryを読み込んでいる場合はslickの読み込みのみで大丈夫です。これでサイト内でスライダーを利用するための準備ができました。slickの利用方法それでは実際にスライダーを実装してみましょう。実装は簡単で、下記の2ステップでおこないます。[HTML]スライダー表示させるコンテンツを記述[Javascript]スライダーの表示条件を記述それぞれ説明してきます。1[HTML]スライダー表示させるコンテンツを記述まずはスライダー表示させたいコンテンツをHTML上に記述します。記述は下記のようにスライダー表示させたいコンテンツの親要素にクラス「slider」をつけるだけでOKです。src="画像パス4"></a></li></ul>親要素にクラス「slider」がついていれば良いので、ulタグでなくdivとかでも全然OKです。src="画像パス4"></a></div></div>2[Javascript]スライダーの表示条件を記述スライダー表示させるコンテンツを記述できたら、あとはスライダーの表示条件を記述します。slickはとても簡単に利用できるのが特徴で、初期設定のままスライダー表示させるだけなら処理部分はなんとたった一行のコードで動きますw試しに下記のコードをfooter.phpのbodyタグ終了直前にでも貼り付けてみてください。{$('.slider').slick();});</script>導入がうまくできていれば、これだけでスライダーが表示されます。slickはスライダーの表示・動作にさまざまなオプションが用意されているので、あとはご自身の要望にあわせて条件を変更して利用しましょう。下記のスライダーの場合。コードはこのような記述になります。'6%'});});</script>autoplayで自動スライドのON/OFFを設定、autoplaySpeedで自動スライドの時間間隔を設定、centerPaddingでスライド間の隙間を設定できたりと、用途に合わせて自由に表示方法を変更することができます。これらのオプションは公式サイトに詳細がありますので、実際に利用する際はそちらを参照ください。おわりに以上、今回の記事では人気のスライダーjQuery「slick.js」をWordpressで利用する方法を紹介いたしました。slickを利用して人気記事のスライダーを作成する方法なんかも紹介しているので、興味ある方はぜひ下記のブログもご覧いただけると嬉しいです。今日のブログではWordpressで人気記事スライダーをつくる方法を紹介......→この記事を読む当サイトではWordpressのカスタマイズ制作依頼を請け負っています。運営中のサイトで何かお困りのことがある方は、下記の記事を参照のうえ気軽にご相談ください。どんな機能・要望でもOK!『Wordpressのカスタマイズ制作』はじめました。このたびWordpressのカスタマイズ制作をはじめました。【bbpress】トピック作成フォームに文章のフォーマットを入力する方法すべてのブログを見るゾノwebエンジニア月間100万PVメディア運営中フリーのwebエンジニアとして大手企業HPから個人メディアまでさまざまなサイトの制作・運用をおこなっております。プログラミングだけでなくSEOやマーケティングも好きなため、自身でもいくつかのサイトを運営しており、月間最高100万PVを越えるメディアに育てました。webでお困りの方はいつでも気軽にご相談ください。web好きなことを頑張ったからといって稼げるとは限らないけれど、好きなことを頑張れば「稼ぐ能力」は必ず身につく!という話。仕事が続かないと悩んでいる人にぜひ紹介したい!メンタルのサポートまで考えてくれる人材派遣会社。人は何度挫折しても「自分の好きなコトとは何度でも向き合う」って話。幸せとは、「今」この瞬間に感じている喜びがすべてだ。人に必要な2つの愛情。10,000人以上の悩みに触れて感じていること。特技:おかわり苦手:待てお肉をくれるとなつくむ~。掲示板の実装マニュアルサイトこの他、多数のサービスを運営中!webエンジニアのゾノによる「楽しく、いいものをつくる。」をコンセプトにしたブログです。サイト制作のご依頼からサイト運営のご相談まで承っております。webでお困りの方はどうぞ気軽にご相談ください。