記事の詳細
jQueryで動くslick.jsが動作しない理由はflexboxが理由かも……?
先日実装しているときに詰んだのでメモ。
今回のブログの見出しはコチラです!
今回やりたかったこと
投稿記事画面にカスタムフィールドでスライダーを表示させたかったのですね。
その際、カスタムフィールドで画像を選択する形にしたいので、タグに直接カスタムフィールドの出力コードを書く必要がありました。
なので、ショートコードで出力するWPプラグインではなく、jQueryを選択。
利用したWPプラグインは以下の通り。
- Custom Post Type UI(カスタム投稿の設置)
- Advanced Custom Fields(カスタムフィールドの設置)
利用したjQueryプラグインは以下の通り。
- slick.js
slick.jsとはカルーセルスライダーを実装できるプラグイン
slick.jsは指定したidもしくはclass内の要素を、カルーセルスライダーに実装してくれるプラグインです。
カルーセルとは英語でいうところの「メリーゴーラウンド」回転木馬という意味の言葉です。空港のコンベアもカルーセルと言われることがあります。規則正しく同じところをくるくる回るものをカルーセルと言い、実はスライダーは一概にはカルーセル式であるとは限りません。ループするものをカルーセルと言い、WEB上で言えばカルーセルはスライダーの中の一つなんですね。
たまにループしないで「最初に戻る」という動き方をするスライダーがありますが、あれはカルーセルではないのです。
WordPressでjQueryを動かすには?
さて、WordPressでjQueryを動かすにはちょっとした手入れが必要となります。
WordPressにはもともとjQueryが入っていますが、これがちょっとやっかいで、WordPress用に書き直されてしまっているので、あとから入れたjQueryプラグインが、WordPress用のjQueryだとうまく動かない場合があるのですね。
これを動かすには
- WordPress用のjQueryを止めて、そうでないjQueryを入れる
- あとから入れるjQueryプラグインを全部WordPress用に書き直す
のいずれかの方法を選択します。
1.の場合は、以下のコードをfunctionに挿入する
1 2 3 4 |
add_action('wp_print_scripts','my_deregister_script',100); function my_deregister_script() { wp_deregister_script('jquery'); } |
きちんと停止した代わりのjQueryも入れましょう。
1 |
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); |
2.の場合は、使用するjsファイルの「$」をすべて「jQuery」に置き換える
エディタの置き換えツールを利用して実行します。
私の場合は2を選択しました。slick.jsファイルのバックアップさえあれば、いつでもリカバリできますし。
slick.jsの実装の仕方1
さくりとslick.jsを実装しましょう。
1.以下の該当ファイルをテーマ直下にアップロード
slickというディレクトリをつくって全部一緒くたに突っ込みました。子テーマ利用なのでこんな感じ。、
置き換え作業をしたのでslick.jsも一緒に入っていますが、slick.min.jsがあれば特にslick.jsファイルを入れる必要はありません。
2.アップロードしたファイルを読みこむ
以下のコードをhead内に記載。
1 2 |
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick-theme.css" media="screen" /> |
jsファイルは閉じbody前に。
1 |
<script src="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.min.js"></script> |
親テーマを使っている方は
<?php echo get_stylesheet_directory_uri(); ?>
ではなくて
<?php echo get_template_directory_uri(); ?>
です。
また、上記の1.WordPress用のjQueryを止めて、そうでないjQueryを入れる の場合は、jsファイルと一緒に閉じbody前に記載します。
タグの記載
1 2 3 4 5 6 7 |
<div class="slick-box"> <ul> <li><a href="#"><img src="sample.jpg"></a></li> <li><a href="#"><img src="sample.jpg"></a></li> <li><a href="#"><img src="sample.jpg"></a></li> </ul> </div> |
1 2 3 4 5 6 7 |
<script type="text/javascript"> jQuery(function() { jQuery('.slick-box').slick({ dots: true }); }); </script> |
slick.jsが動かない場合は…?
- CSSやjsファイルが正常に読みこめているかどうかを確認する
- htmlが間違っていないことを確認する
1に関しては、以下の通りに確認することが出来ます。基本的にはGoogleChromeでの動作です。
- 右クリック→検証で<head></head>内、</body>前に上記の記載を確認する
- 記載されているURLを選択、右クリックで「open new tab」で該当のファイルが表示されたらパスは通っています。
2.に関しては、目視のほかに以下のようなサイトを利用することが出来ます。
Another HTML-lint gateway
Markup Validation Service
flexboxを利用したときに生じるslick.jsのエラー
リストを使った実装だったのですが、これを
1 2 3 4 5 6 7 |
<div class="flexbox"> <div> <div><a href="#"><img src="sample.jpg"></a></div> <div><a href="#"><img src="sample.jpg"></a></div> <div><a href="#"><img src="sample.jpg"></a></div> </div> </div> |
にしても当然ながらダメでした。
slick.jsは、javascriptで記載する「トリガーとなるID・クラスの親要素以上の階層」にflexboxを適応させると動作しないようです。
slick.jsは画面のサイズを取得するために、独自のコンテナを参照しています。このため「display:flex」が失敗するようです。
半ば死んだ魚の目で英語サイトを読みつつ手に入れたCSSタグがこちら。
1 2 3 4 |
* { min-height:0; min-width : 0; } |
https://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x
ええ。動きました。
よかった……(;ω;)
完成したタグがこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
※slick.min.jsの「$」は「jQuery」に書き変えられているものとする /* <head></head>内記載*/ <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick-theme.css" media="screen" /> /* </body>前記載*/ <script src="<?php echo get_stylesheet_directory_uri(); ?>/slick/slick.min.js"></script> /* タグ */ <div class="contents-slider flexbox"> <div class="slider-item"> <div classs="slick-box"> <div class="slick-img"><a href="#"><img src="sample.jpg"></a></div> <div class="slick-img"><a href="#"><img src="sample.jpg"></a></div> <div class="slick-img"><a href="#"><img src="sample.jpg"></a></div> </div> </div> <div class="slider-item">サンプルコンテンツ</div> </div> /* 追加js */ <script type="text/javascript"> jQuery(function() { jQuery('.slick-box').slick({ dots: true }); }); </script> /* 追加CSS */ * { min-height:0; min-width : 0; } |
これでスライダーと要素を横並びにレイアウトできるしレスポンシブもできるようになりました!
よかった……(;ω;)(二回目)
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。