里美WEB制作コメントを書く先日実装しているときに詰んだのでメモ。完成したタグがこちら。今回やりたかったこと投稿記事画面にカスタムフィールドでスライダーを表示させたかったのですね。その際、カスタムフィールドで画像を選択する形にしたいので、タグに直接カスタムフィールドの出力コードを書く必要がありました。ショートコードで出力するWPプラグインではなく、jQueryを選択。利用したWPプラグインは以下の通り。Fields(カスタムフィールドの設置)利用したjQueryプラグインは以下の通り。slick.jsslick.jsとはカルーセルスライダーを実装できるプラグインslick.jsslick.jsは指定したidもしくはclass内の要素を、カルーセルスライダーに実装してくれるプラグインです。カルーセルとは英語でいうところの「メリーゴーラウンド」回転木馬という意味の言葉です。空港のコンベアもカルーセルと言われることがあります。規則正しく同じところをくるくる回るものをカルーセルと言い、実はスライダーは一概にはカルーセル式であるとは限りません。ループするものをカルーセルと言い、WEB上で言えばカルーセルはスライダーの中の一つなんですね。ループしないで「最初に戻る」という動き方をするスライダーがありますが、あれはカルーセルではないのです。WordPressでjQueryを動かすには?さて、WordPressでjQueryを動かすにはちょっとした手入れが必要となります。WordPressにはもともとjQueryが入っていますが、これがちょっとやっかいで、WordPress用に書き直されてしまっているので、あとから入れたjQueryプラグインが、WordPress用のjQueryだとうまく動かない場合があるのですね。これを動かすにはWordPress用のjQueryを止めて、そうでないjQueryを入れるあとから入れるjQueryプラグインを全部WordPress用に書き直すのいずれかの方法を選択します。scriptきちんと停止した代わりのjQueryも入れましょう。script2.の場合は、使用するjsファイルの「$」をすべて「jQuery」に置き換えるエディタの置き換えツールを利用して実行します。私の場合は2を選択しました。slick.jsファイルのバックアップさえあれば、いつでもリカバリできますし。slick.jsの実装の仕方1さくりとslick.jsを実装しましょう。1.以下の該当ファイルをテーマ直下にアップロードslickというディレクトリをつくって全部一緒くたに突っ込みました。子テーマ利用なのでこんな感じ。置き換え作業をしたのでslick.jsも一緒に入っていますが、slick.min.jsがあれば特にslick.jsファイルを入れる必要はありません。2.アップロードしたファイルを読みこむ以下のコードをhead内に記載。/>jsファイルは閉じbody前に。場合は、jsファイルと一緒に閉じbody前に記載します。src="sample.jpg"></a></li></ul></div>さらに任意の場所に以下のコードを記載します。true});});</script>slick.jsが動かない場合は...?CSSやjsファイルが正常に読みこめているかどうかを確認するhtmlが間違っていないことを確認する1に関しては、以下の通りに確認することが出来ます。基本的にはGoogleChromeでの動作です。tab」で該当のファイルが表示されたらパスは通っています。2.に関しては、目視のほかに以下のようなサイトを利用することが出来ます。src="sample.jpg"></a></div></div></div>にしても当然ながらダメでした。slick.jsは、javascriptで記載する「トリガーとなるID・クラスの親要素以上の階層」にflexboxを適応させると動作しないようです。slick.jsは画面のサイズを取得するために、独自のコンテナを参照しています。このため「display:flex」が失敗するようです。半ば死んだ魚の目で英語サイトを読みつつ手に入れたCSSタグがこちら。0;}https://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-xええ。よかった......(;ω;)完成したタグがこちら。0;}これでスライダーと要素を横並びにレイアウトできるしレスポンシブもできるようになりました!よかった......(;ω;)(二回目)この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。インクループ株式会社デザイナー。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。現代のマーケティング課題を解決する資格セミナーを行っているマーケティングリテラシー協会様のLPを作成いたしました。Animateを利用したアニメーションを作ってみる。Festival今月の27日(日)開催!2018-5-11スマホ対応!ホームページを50%OFFで作りませんか?IT導入補助金使えます!2019-2-4昔の味たまごさんの昔の味たまごプリンのランディングページを作成いたしました。ホームページ制作、WEBマーケティングページ上部へ戻る。