jqueryプラグインをCDNで使ってみる。WordPress編

写真:WordPress

レスポンシブ対応なうえ、カスタマイズが楽ちんな画像スライダーのjqueyプラグイン、slickを愛用しております。
functionのトップページのみに適用させる分岐の書き方で毎回迷ってしまうので、メモ。

WPに格納されているjQueryがあるので以下のコードで停止してしまうひともいるかもしれませんが、自分はやりません。
このjQueryはコンクリフトが起こらないように、特別な仕組みが使われています。

スポンサードリンク

JSの読み込み

まず以下が分岐の雛形になります。

解説です。

slick-carousel – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites!

lightbox2 – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites!

上記からslickとlightboxのjsとcssをコピーしてきます。

slickはトップページのみ、lightboxは全ページにといった切り分けをしていきます。ついでに固定ページごとの分岐条件も記述しました。

1行目「if (!is_admin()) {「で「管理画面以外に」という分岐をはじめにしています。
wp_register_scriptで読み込みたいjsのリストを作ります。
wp_enqueue_scriptで実際に読み込むページを指定してあげます。

CSSの読み込み

JSの分岐条件を書いたその下にCSSを設定します。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください