記事の詳細

先日実装しているときに詰んだのでメモ。

 

今回やりたかったこと

投稿記事画面にカスタムフィールドでスライダーを表示させたかったのですね。
その際、カスタムフィールドで画像を選択する形にしたいので、タグに直接カスタムフィールドの出力コードを書く必要がありました。
なので、ショートコードで出力するWPプラグインではなく、jQueryを選択。

利用したWPプラグインは以下の通り。

  • Custom Post Type UI(カスタム投稿の設置)
  • Advanced Custom Fields(カスタムフィールドの設置)

利用したjQueryプラグインは以下の通り。

  • slick.js

slick.jsとはカルーセルスライダーを実装できるプラグイン

slick.js

slick.jsは指定したidもしくはclass内の要素を、カルーセルスライダーに実装してくれるプラグインです。
カルーセルとは英語でいうところの「メリーゴーラウンド」回転木馬という意味の言葉です。空港のコンベアもカルーセルと言われることがあります。規則正しく同じところをくるくる回るものをカルーセルと言い、実はスライダーは一概にはカルーセル式であるとは限りません。ループするものをカルーセルと言い、WEB上で言えばカルーセルはスライダーの中の一つなんですね。
たまにループしないで「最初に戻る」という動き方をするスライダーがありますが、あれはカルーセルではないのです。

WordPressでjQueryを動かすには?

さて、WordPressでjQueryを動かすにはちょっとした手入れが必要となります。
WordPressにはもともとjQueryが入っていますが、これがちょっとやっかいで、WordPress用に書き直されてしまっているので、あとから入れたjQueryプラグインが、WordPress用のjQueryだとうまく動かない場合があるのですね。

これを動かすには

  1. WordPress用のjQueryを止めて、そうでないjQueryを入れる
  2. あとから入れるjQueryプラグインを全部WordPress用に書き直す

のいずれかの方法を選択します。

1.の場合は、以下のコードをfunctionに挿入する

>関数リファレンス/wp deregister script

きちんと停止した代わりのjQueryも入れましょう。

>関数リファレンス/wp enqueue script

2.の場合は、使用するjsファイルの「$」をすべて「jQuery」に置き換える

エディタの置き換えツールを利用して実行します。

私の場合は2を選択しました。slick.jsファイルのバックアップさえあれば、いつでもリカバリできますし。

 

slick.jsの実装の仕方1

さくりとslick.jsを実装しましょう。

 

1.以下の該当ファイルをテーマ直下にアップロード

slickというディレクトリをつくって全部一緒くたに突っ込みました。子テーマ利用なのでこんな感じ。、

slick.jsが動かないのはflexboxが原因かも?

置き換え作業をしたのでslick.jsも一緒に入っていますが、slick.min.jsがあれば特にslick.jsファイルを入れる必要はありません。

 

2.アップロードしたファイルを読みこむ

以下のコードをhead内に記載。

 

jsファイルは閉じbody前に。

 

親テーマを使っている方は
<?php echo get_stylesheet_directory_uri(); ?>
ではなくて
<?php echo get_template_directory_uri(); ?>
です。

また、上記の1.WordPress用のjQueryを止めて、そうでないjQueryを入れる の場合は、jsファイルと一緒に閉じbody前に記載します。

 

タグの記載

さらに任意の場所に以下のコードを記載します。
 

slick.jsが動かない場合は…?

  1. CSSやjsファイルが正常に読みこめているかどうかを確認する
  2. htmlが間違っていないことを確認する

1に関しては、以下の通りに確認することが出来ます。基本的にはGoogleChromeでの動作です。

  • クリック→検証<head></head>内、</body>前に上記の記載を確認する
  • 記載されているURLを選択、右クリックで「open new tab」で該当のファイルが表示されたらパスは通っています。

2.に関しては、目視のほかに以下のようなサイトを利用することが出来ます。

Another HTML-lint gateway
Markup Validation Service

flexboxを利用したときに生じるslick.jsのエラー

リストを使った実装だったのですが、これを

 

にしても当然ながらダメでした。

slick.jsは、javascriptで記載する「トリガーとなるID・クラスの親要素以上の階層」にflexboxを適応させると動作しないようです。
slick.jsは画面のサイズを取得するために、独自のコンテナを参照しています。このため「display:flex」が失敗するようです。
半ば死んだ魚の目で英語サイトを読みつつ手に入れたCSSタグがこちら。

 

https://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x

ええ。動きました。
よかった……(;ω;)

 

完成したタグがこちら。

 

slick.jsが動かないのはflexboxが原因かも?

これでスライダーと要素を横並びにレイアウトできるしレスポンシブもできるようになりました!
よかった……(;ω;)(二回目)

 

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る