ホームページの作成・作り方

【コピペOK】ワードプレステーマCocoonでのslick導入方法を解説

【コピペOK】ワードプレステーマCocoonでのslick導入方法を解説

「Cocoonでslickを使いたいけど、簡単に使える方法を知りたい」
「Cocoonでslickを導入しようとしているけど、全然上手くいかない・・・どうすればいいの?」

こんな疑問にお答えします。

この記事の内容
  • コピペで使えるslickのサンプルコード
  • Cocoonでslickを使う際のポイント解説

実をいうと、自分も初導入の際はslickがわからすぎて2日間も格闘してしまいました・・・
色々と情報が散らばっていてわかりづらかったので、Cocoonテーマに限定して説明しています。

Cocoonでslickを導入しようと頑張っているあなたの手助けになれば嬉しいです。

cocoonでslickを使うためのサンプルコード

cocoonでslickを使うためのサンプルコード

子テーマを使っている前提です。
インストールがまだの場合、さきにCocoonの子テーマを準備しましょう。

Cocoonの子テーマはこちら

なお、今回作ったデモサイトはこちらです。
トップページを固定ページにしていて、ヘッダー下、メインコンテンツの前にヘッダーを入れるという設定で作っています。

JavaScriptに記入するコード

始めにslickをJavaScriptに記入していきます。

「外観」→「テーマの編集」→ 「javascript.js」を開きます。
開いたら、下記のコードをコピペしましょう。

JavaScriptに記入するコード

jQuery(function($){
$(‘.slider’).slick({
autoplay:true,
autoplaySpeed:3000,
});
});

なお、「.slider」の部分は自分の好きなクラス名を書いても構いません。

main-before.phpに記入するコード

次に、表示する画像のコードを記入していきます。

「外観」→「テーマの編集」→「tmp-user▼」→「main-before.php」の順で進みます。
開いたら、下記のコードをコピペしましょう。

main-before.phpに記入するコード

<?php if(is_front_page()) : ?>
<ul class=”slider”>
<li><img src=”表示したい画像” /></li>
<li><img src=”表示したい画像” /></li>
<li><img src=”表示したい画像” /></li>
</ul>
<?php endif; ?>

「表示したい画像」の部分には、表示する予定の画像のURLを貼り付けます。
サンプルコードでは3つしか用意していませんが、<li></li>を増やせば何枚でも追加できます。

基本はこれだけでOKです。
しかし、今後自分でワードプレスをカスタマイズしていきたいと考えているなら、「なぜこのようなコードにしているか」を理解したほうがいいでしょう。

以下から詳しく説明していますので、ワードプレスを使用する人はぜひご覧ください。

Cocoonはslick導入済み

Cocoonはslick導入済み

本来slickを使うのであれば、本体をダウンロードしたり、設定する必要があるのですが、Cocoonに関しては不要です。
なぜなら、Cocoonには既にslickが導入されているからです。

同じcssやjsを違う場所から二重で読み込むと予期せぬエラーにつながる可能性もありますので、注意しましょう。

JavaScriptに記入する際のポイント

>JavaScriptに記入する際のポイント

自分が最初に詰まったのは、このjQueryの記入でした。
Progateなどで独学したところ、以下のように書きます。

$(function(){
//ここに処理するコード
});

しかし、ワードプレスでこのように記入すると、エラーが起き、なぜか動作してくれません。
デベロッパーツールで調べると、以下のようなエラーが出ています。

TypeError: $ is not a function

調べてみたところ、「ワードプレスでは他のJavascriptライブラリとの衝突を避けるため、$を無効にしていて、このようなことが起きる」ということがわかりました。
これを解消するために、若干書き方が変わります。

jQuery(function($) {
//ここに処理するコード
});

なお、この情報はEASTCODER;様のサイトで勉強させていただきました。
ありがとうございます。

slickをどこに記入するか?

slickをどこに記入するか?

これでslick自体の準備は完了となります。
次に考えたいのは、作ったスライダーをどこに表示させるか?ということです。

今回の条件は以下のとおりです。

  1. トップページのみ
  2. ヘッダー、グローバルナビゲーションの下
  3. メインコンテンツの前

トップページのみに表示させる方法

これはphpの条件分岐を使います。
具体的なコードは、以下のとおりです。

<?php if(is_front_page()) : ?>
//処理したいコード
<?php endif ; ?>

これでトップページのみの表示となります。
他にも条件分岐はあるので、気になる方はサルワカさんの「便利なWordPressの条件分岐16パターン:カスタマイズで活躍するものを厳選!」を読んでいただくのがいいでしょう。

ヘッダー下、メインコンテンツの前に表示する

Cocoonはテーマをカスタマイズしやすいように、追加したい部分のphpが細切れになって準備されています。
「外観」→「テーマの編集」→「tmp-user▼」を見てみましょう。

今回はちょうどよく「main-before.php」というのがあったので、そちらに追加しています。

main-before.phpに追加したコード

<?php if(is_front_page()) : ?>
<ul class=”slider”>
<li><img src=”表示したい画像” /></li>
<li><img src=”表示したい画像” /></li>
<li><img src=”表示したい画像” /></li>
</ul>
<?php endif; ?>

これで、メインコンテンツの前にスライダー画像を設置することができました。

slickをレスポンシブにする方法

最後におまけ的な要素ですが、slickで作ったスライダーをスマホ表示したらレスポンシブにならず、3時間ほど格闘してしまいました。
なので、簡単に備忘録と注意点をまとめておきます。

slickをレスポンシブにする際の注意点
  • adaptiveHeight:は使わない
  • variableWidth:は使わない
  • 要素のwidthは、max-widthで設定する

また後日、別の記事でまとめます。

まとめ

Cocoonはslickが最初から導入されていて、準備が必要なく簡単に設定できます。
最初はわからないことだらけで、初導入まで2日間もかかってしまいました・・・。

わからなくても、考えて調べて試していけば必ず導入はできます。
ぜひ頑張ってみてください。