【初心者もOK】WordPressでslick()を使用してスライドショーを表示する方法!

(この記事は2022年2月4日に投稿されました。)

WordPressでslick()を使用すると、スライドショーを表示するこができます。

slick()とは、JavaScriptプラグインであるslick.jsを使用して、スライダーを作成するためのメソッドとなります。

つまり、slick()を使用すると下記の画像のような要素や写真をスライドショーのように表示することができます。

カルーセルスライダーのサンプル

また、スライドショーを表示することでサイトのデザインをオシャレにするとができ、尚且つ初心者でも簡単に設置することができるのでおすすめです!

今回はWordPressでslick()を使用してスライドショーを表示する方法について紹介していきます。

この記事はこんな方におすすめ
⚫︎ slick()を使ってカルーセルスライダーを表示させたい
⚫︎ プラグインを使用しないで挑戦してみたい人




slick()とは?

slick()とは、スライダーを作成するためのJavaScriptプラグインを表示させるメソッドとなります。

slickはjQueryベースで作成されており、カスタマイズ設定も豊富なスライダープラグインであることから世界的に利用されています。

WordPressでslick()を使用してスライドショーを表示する方法

WordPressでslick()を使用してスライドショーを表示するには下記の2つの方法があります。

⚫︎ ダウンロードしたslickファイル(slick.js)を使用する方法
⚫︎ CDNのslickファイル(slick.js)を使用する方法

それぞれの方法を手順を追って紹介していきます。

ダウンロードしたslickファイル(slick.js)を使用する方法

まず、1つ目の方法はダウンロードしたslickファイル(slick.js)を使用する方法です。

slickファイル(slick.js)をダウンロードし、自分のサーバーに設置してslick()を使用していきます。

「でもどうやってサーバーに設置するの?」と思うかもしれませんが、自分のサーバーにslickファイルを設置するには、「FTP」を使用していきます。

FTPとは、自分のPC内からレンタルしたサーバーの中へファイルを送ることができる通信手段みたいなものになります。

つまり、ダウンロードしたslickファイルをFTPでレンタルしているサーバーに設置することがで可能になります。

slickファイルをダウンロードする方法や設置するファイル項目に関しましては下記の記事をご参考ください。
(クリックすると該当する部分に飛びます。)

Sossy

FTPを使用する際に、Windowsでは「FFFTP」をMacでは「File Zilla」をインストールする必要がありますので注意してください。

ダウンロードしたslickファイル(slick.js)を自分のサーバーへ設置

ダウンロードが完了しましたら、自分のサーバーへslickファイルを設置していきます。

今回は、「File Zilla」を使ってslickファイルを自分のサーバーに設置していきます。

下記の画像では自分のサーバーに「css」というファイルと「js」というファイルを作成しており、そこにslickファイルを設置しています。

⚫︎ cssファイル内

FTPで転送したslickのCSSファイル

⚫︎ jsファイル内

FTPで転送したslickのJSファイル

ダウンロードしたslick()を使用してスライドショーを表示

自分のサーバーにslickファイルを設置しましたら、ダウンロードしたslick()を使用してスライドショーを表示していきます。

今回はサイトのTOPページに要素のスライドショーを表示してみます。

ダウンロードしたslick()を使用するには設置したサーバーのリンクコードを追記する必要があります。

しかし、slickファイルのリンクコードを追記する際は下記の要点に注意してください

・ slickのCSSファイルのリンクコードは</head>の真上に追記すること
・ slickのJSファイルのリンクコードは</body>の真上に追記すること

そのため、「headr.php」にCSSファイルのリンクコードを、「footer.php」にJSファイルのリンクコードを追記していきます。

⚫︎ header.php

⚫︎ front-page.php

⚫︎ footer.php

⚫︎ index.js

⚫︎ 実行結果

ダウンロードしたslickファイルを使ってスライドショーを表示した結果

サイトのTOPページにスライダーが表示されており、スライドショーが行われています。

Sossy

ダウンロードしたslickファイルを使ってTOPページにスライドショーが表示されています。
もし、画像でスライドショーを行いたい場合はdiv要素からimg要素へ変更すると良いですよ。

CDNのslickファイル(slick.js)を使用する方法

そして、2つ目の方法は、CDNのslickファイル(slick.js)を使用する方法です。

こちらの方法では、先ほどの自分のサーバーにslickファイルを設置することはしません。

slickファイルが置かれてある公共のサーバー(CDN)とリンクすることで、slick()の使用が可能となります。

slickファイルのCDNのリンクコードをコピーする

まずは、slickファイルのCDNのリンクコードをコピーしていきます。

今回必要となるCDNはCSSが2ファイルとJSが1ファイルとなります。

コピーするslickファイルのCDNのリンクコードに関しましては、下記の記事をご参考ください。
(クリックすると該当する部分に飛びます。)

CDNのslick()を使用してスライドショーを表示

CDNのリンクコードをコピーしましたら、CDNのslick()を使用してスライドショーを表示していきます。

こちらもCSSファイルは「headr.php」に、JSファイルは「footer.php」に追記しましょう。

試しにサイトの投稿記事ページに要素のスライドショーを表示してみます。

⚫︎ header.php

⚫︎ single.php

⚫︎ footer.php

⚫︎ 実行結果

CDNのslickファイルを使ってスライドショーを表示した結果

サイトの投稿記事ページにスライドショーが表示されています。

Sossy

CDNのslickファイルを使って記事のページにスライドショーが表示されています。
しかし、CSSやJSのリンクコードを追記する箇所を間違えるとエラーになりますので注意してください。

まとめ

⚫︎ slick()とは、スライダーを作成するためのJavaScriptプラグインを表示させるメソッドである

⚫︎ slick()でカルーセルスライダーを表示するには「slick.js」というJavaScriptライブラリを使用する必要がある

⚫︎ WordPressでslick()を使用してスライドショーを表示するには下記の2つの方法がある
・ ダウンロードしたslickファイル(slick.js)を使用する方法
・ CDNのslickファイル(slick.js)を使用する方法

コメントを残す

メールアドレスが公開されることはありません。