プログラミング

SWELLに自動で流れ続けるスライダーを実装する方法。jQueryのslickを使用

どうも、たくろーです。

今回はSWELLカスタマイズの話です。

WordPressテーマ「SWELL」にて、jQueryのプラグイン「slick」を使った、右から左へ等速で自動で流れ続けるスライダーを実装しました。

当記事では、手順通りに進めればコピペで簡単に良い感じのスライダーを実装できるように解説しています。

スライダーの挙動は以下の動画の通りです。

正直Javascriptに関してはほぼ素人の状態で、色々と調べて実装したのでかなり疲れました……。

ちなみにjQueryの基礎は侍エンジニアプラスで一通り学習してみたので、「なんとなくコードは読めるかな」くらいの知識量です。

WordPress(特にSWELL)にて、jQueryを利用してスライダーを実装した具体的な解説記事があまりなかったので、メモがわりに残しておきます。

※全編通してコピペでOKなように書いていきますが、カスタマイズは自己責任でお願いします。「なぜかサイトが表示されなくなった!」みたいなことになっても責任取れませんので、バックアップを取ってから作業して下さい。

SWELLでslickを使った自動で流れるスライダーを実装してみた

SWELLでslickを使った自動で流れるスライダーを実装してみた

今回「Webライター講座 & 文章術が学べるWebマガジン」という立て付けで「文亭 – fumitei -」というサイトをローンチしたのですが、ちょっと動きのある楽しい感じのサイトにしたかったんですよね。

デザインはSWELLが作りやすいかなと思ったので、テーマはSWELLに決定。

で、どうしても実装したかったのが「おすすめ書籍を右から左に流すスライダー」なのです。

本当はWordPressのプラグインを使って手軽に実装したかったのですが、「右から左に等速でずっと流れ続けるスライダー」というものを実現できるものが見つかりませんでした。

たくろー
たくろー
XO Sliderがちょっと惜しかったのですが、狙った挙動には設定できなかったんですよね……

さらに本当はjQueryじゃなく普通のJavascriptだけで動く「swiper」で実装できればとも思ったのですが、どうにも上手く動かせず、jQueryを読み込ませてslickで実装することにしました。

経緯はそんな感じです。

SWELLでjQueryを使えるようにする方法

まずはSWELLにjQueryを読み込ませる作業から始めます。

「jQueryが何なのか」みたいな話はググって下さい。とりあえず手順通りに進めれば実装できるよう解説していきます。

一般的なwebサイトでjQueryを使いたいと思った場合、CDN経由で読み込むかダウンロードして読み込むかしなきゃいけませんが、さすがSWELL。

設定項目でチェックを入れるだけで使えるようになっています。

SWELLでjQueryを使えるようにする方法

「SWELL設定→jQuery→jQueryを強制的に読み込むにチェック→保存」これだけで、SWELLでjQueryを使う準備が整いました。

全ページでjQueryを読み込むことになるので、わずかにページ読み込み速度が遅くなる可能性はあります。ただ正直、この程度のことが検索順位に影響するなんてことほぼありませんので、気にせずいきましょう。

SWELLでslickを使えるようにする方法

次に、slickを使えるように準備します。

slickを使うにはCDNで読み込むか、ファイルをダウンロードしてサーバーに設置するかのどちらかの方法があります。

僕はファイルをダウンロードして設置する方を選んだので、そちらの方法で解説していきます。

たくろー
たくろー
ちなみにこのターンでは、Creeさんの解説を大いに参考にさせていただきました。ありがとうございます。

slickのファイルをダウンロード

まずはslick公式サイトから、slickのファイルをダウンロードします。

slickのファイルをダウンロード

公式サイトのかなり下の方に上記画像のようなダウンロードボタンがあるので、押せばダウンロードが始まります。

ダウンロードされたzipファイルを解凍しておきましょう。

SWELLのテーマフォルダにslickのフォルダをぶちこむ

解凍して出てきた「slick」のフォルダを、SWELLを設置しているディレクトリにぶち込みます。

僕が使っているレンタルサーバーのConoHa WINGの画面で解説しますが、ファイルマネージャーで言えば下記画像の場所ですね。

SWELLのテーマフォルダにslickのフォルダをぶちこむ

パスで言えば「/wp-content/themes/swell/」の中です。ここにぶち込みます。

テーマをアップデートするたびに入れ直す必要があります。

header.phpを編集する

次に、設置したslickを読み込むためのコードを記述します。

親テーマのファイルを直接いじるので、アップデートする度に修正が必要です。あとちゃんとバックアップとってから作業するようにして下さい。

header.phpを編集する

「外観→テーマエディタ→SWELL→header.php」と進み、</head>の直前に下記のコードを記述します。

<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>

これで準備OK。

SWELLで右から左へ等速で流れるスライダーを実装する方法

SWELLで右から左へ等速で流れるスライダーを実装する方法

それでは実際に、SWELLの任意のページにスライダーを設置していきましょう。

僕の場合はAmazonの書籍の画像をゆっくり流したかったので、そのための設定にしてます。まずはコピペして挙動を確認していただき、適時調整しながら使って下さい。

ちなみにこのパートでは、以下サイトの解説を参考にさせていただきました。

ありがとうございました!

「カスタムCSS、カスタムJS、実装箇所」の3つにコードを記述していきます。

カスタムCSSの設定

まずはスライダーを設置したい投稿ページの下の方、「カスタムCSS」の部分にコードを書いていきます。

下記画像の場所ですね。

たくろー
たくろー
SWELLには各投稿画面にこんなカスタマイズ項目が標準で用意されているので、かなり助かります。

「CSS」に書くコードは、以下の内容です。

.slider1 .slick-slide {
margin:0 10px;/*画像同士の隙間を開ける*/
}

.slider1 img {
width:auto;
height:300px;/*縦幅を合わせる*/
}

 

ちなみに今回「slider1」というクラスを使用していますが、ここは任意のクラス名で構いません。もし変える場合は、この後のJSやHTMLでも同じクラスを使用して下さい。

ただ「slider」にするとSWELLの既存のスライダー機能と競合しますので、別の名称が望ましいとされています。

一応説明しましたが、考えるのがめんどくさければ全然コピペでOKです。

ちなみにCONOHA WINGを使っている場合、「サイトセキュリティ→WAF」の「WAF」がオンになっていると、カスタムCSSが編集できない場合があります。記述した後なぜか保存できない場合は、一時的にWAFをOFFにすると保存できると思いますよ。

カスタムJSの設定

次は「カスタムJS」の項目に、slickの設定コードを書いていきます。

jQuery(function(){
jQuery('.slider1').slick({
autoplay: true, //自動でスクロール開始
autoplaySpeed: 0, //スライド切り替え時間。等速で流すので0
speed: 6000, //スライドが流れる速度。大きいほどゆっくり
cssEase: "linear", //スライドの流れ方を等速に
slidesToShow: 4, //1画面のスライドの数
swipe: false, // 操作による切り替えなし(trueだと流れが止まったりする)
arrows: false, //矢印非表示
pauseOnFocus: false, //フォーカス時の挙動なし(trueだと流れが止まったりする)
pauseOnHover: false, //フォーカス時の挙動なし(trueだと流れが止まったりする)

responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 1.5, //画面幅769px以下でスライド1.5枚表示
}
}
]
});
});

普通のHTMLページだと「$(function)〜〜」と「$」を使って記述するのですが、WordPressの場合は$をjQueryに変えなきゃ動きませんので、こんな記述になっています。

一応説明しましたが、何も考えずにコピペでOKです。

たくろー
たくろー
一応設定項目はメモしてありますので、好みに合わせて適時修正しつつ使って下さい。

記述場所は、カスタムCSSの下です。一応もう一度スクショを貼っておきます。

このjQueryの部分に書きましょう。

HTML部分

実際にスライダーを表示させたい場所に、SWELLの「カスタムHTML」のブロックを設置して、その中にコードを記述していきます。

たくろー
たくろー
ちなみに僕の場合は画面の端から端まで流したかったので、フルワイドコンテンツの中にカスタムHTMLを置く形で設置しました。これはお好みで。
<div class="slider1">
<div><a href="(リンクさせたいURL)" target="_blank" rel="nofollow noreferrer noopener"><img src="(画像のファイルURL)"></a></div>
<div><a href="(リンクさせたいURL)" target="_blank" rel="nofollow noreferrer noopener"><img src="(画像のファイルURL)"></a></div>
<div><a href="(リンクさせたいURL)" target="_blank" rel="nofollow noreferrer noopener"><img src="(画像のファイルURL)"></a></div>
<div><a href="(リンクさせたいURL)" target="_blank" rel="nofollow noreferrer noopener"><img src="(画像のファイルURL)"></a></div>
<div><a href="(リンクさせたいURL)" target="_blank" rel="nofollow noreferrer noopener"><img src="(画像のファイルURL)"></a></div>
</div>

リンク先は別窓で開いてnofollowにしていますが、この辺りは好きなように設定して下さい。(そもそもaタグがなくても動きます。)

要するに<div class=”slider1″>で囲んだ中に、スライドさせたい要素を<div>で囲んで設置していけばOKです。

実際の記述は、こんな感じになります。

完成

これで間違っていなければ動くはずです。

もう一度動画をどうぞ。

スライダーが実際に設置されているページ(文亭)はこちらです。

まとめ

SWELLでjQueryやslickを使っているカスタマイズ例があまりなかったので、クソ素人の僕として正直かなり手間取りました。

良い感じのスライダーをブログやwebサイトに実装したい方は、ぜひ参考にしてみて下さい。

ちなみにjQueryの基礎は侍エンジニアプラスで学べましたので、なかなかおすすめです。

侍エンジニアプラスの口コミ評判。実際に学んでレビューしてみたどうも、たくろーです。 ずっとプログラミングスクール難民になっていたのですが、ついに申し込みました。 「侍エンジニアプラス」...
ABOUT ME
たくろー(WEBライター)
ブログ飯を達成しましたが、好きでサラリーマンをしています。 家ではブロガーをしつつ、企業オウンドメディアの編集長やwebライティング講師として活動。以前はブラックなアパレル企業で「人事」や「エリアマネージャー」を経験。「一つの会社とか収入源に依存しない働き方がいいよね」というスタンスです。下記URLより詳しいプロフィールもご覧ください。
30秒でOK!退職代行診断チャート

30秒診断

あなたにピッタリな退職代行は?

簡単な質問に答えるだけで、あなたの状況に合った退職代行がわかります。

Q3:有給は使いたいですか?

Q3:パワハラやセクハラを受けていますか?

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。24時間365日対応で、有給も全て使って即日退職できます。
25,000円ポッキリ相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
評判ヤバい!退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。会社と交渉する法的な権利があるので、安心して即日退職できます。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
評判ヤバい!退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。有給も全て使って即日退職できます。
実はパワハラやセクハラなどの具体的な被害が無い場合は、弁護士に頼んでも賠償請求は難しいかもしれません。
そんな会社に時間を割くくらいなら、弁護士よりリーズナブルな「労働組合」のサービスでスッキリ辞めましょう。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
評判ヤバい!退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給が全部使えるように交渉してもらえて、とにかく安心して辞められます。
料金は50,000円ポッキリと労働組合のサービスより高くはなりますが、その分「弁護士」というネームでトラブルのリスクなく辞められるでしょう。

お金よりも「安心」を取りたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
騙されるな!弁護士法人みやびの口コミ・評判を調査。料金が明朗な退職代行どうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給だって全て消化できるのはもちろん、損害賠償請求までお願いできます。
退職代行自体の料金は50,000円ポッキリ。それに加えて賠償請求は「成果の20%」の成果報酬でお願いできるシステム。

損害賠償請求までお願いしたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
騙されるな!弁護士法人みやびの口コミ・評判を調査。料金が明朗な退職代行どうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

診断結果

あなたにおすすめの退職代行は

「退職代行J-NEXT」です。

J-NEXTは普通の会社が運営する退職代行なので、有休消化などはお願いできません。
とにかく20,000円ポッキリという料金が魅力で、退職代行業界の中でもトップクラスの格安サービスです。

安心よりも「料金」を取りたいあなたは、退職代行J-NEXTに相談してみて下さい。

\CHECK NOW/

J-NEXTならとにかく安く辞められる
さっそく無料相談する

退職代行J-NEXTの口コミ・評判。20,000円ポッキリで即日退職!退職代行J-NEXTは、退職代行業界最安水準の20,000円ポッキリの価格がウリ。さらに、同価格帯のサービスと比べると圧倒的にサポートが...

もう一度診断する

【徹底比較】退職代行おすすめ人気ランキングTOP10!選び方や基礎知識も解説
【11月最新】退職代行おすすめ人気ランキングTOP9!リアルな実績でランク付け退職代行を使われたことがある元人事が、退職代行をランク付けしました。安心して有給消化までお願いできる法的権利のあるサービスを中心に、状況別の選び方やおすすめサービスも解説しています。...
【保存版】後払いできる退職代行おすすめ6つを比較。種類や利用手順まで解説!
【保存版】後払いできる退職代行おすすめ6つを比較。種類や利用手順まで解説!どうも、たくろーです。 今回は「後払いのできるおすすめの退職代行サービス」をご紹介します。 こんな方向けのサービスが...