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

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

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

function jquery_stop() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3');
}
}
add_action('init', 'jquery_stop');

function jquery_stop() {

if ( !is_admin() ) {

wp_deregister_script('jquery');

wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3');

}

add_action('init', 'jquery_stop');

スポンサードリンク

JSの読み込み

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

//JavascriptとかjQueryとか
if (!is_admin()) {
function register_script(){
wp_register_script('slick_js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js');
wp_register_script('lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js');
}
function plus_script() {
register_script();
wp_enqueue_script('lightbox');// 全ページ共通
if (is_home() || is_front_page()) {
wp_enqueue_script('slick_js');// トップページのみに適応させる
} elseif (is_page(array(60, 70))) {// 固定ページIDを指定
wp_enqueue_script('');
}
}
add_action('wp_print_scripts', 'plus_script');
}

//JavascriptとかjQueryとか

if (!is_admin()) {

function register_script(){

wp_register_script('slick_js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js');

wp_register_script('lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js');

}

function plus_script() {

register_script();

wp_enqueue_script('lightbox');// 全ページ共通

if (is_home() || is_front_page()) {

wp_enqueue_script('slick_js');// トップページのみに適応させる

} elseif (is_page(array(60, 70))) {// 固定ページIDを指定

wp_enqueue_script('');

}

add_action('wp_print_scripts', 'plus_script');

}

解説です。

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の読み込み

/* CSSの読み込み
---------------------------------------------------------- */
function register_stylesheet() { 
wp_register_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
wp_register_style('lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css');
wp_register_style('style', get_template_directory_uri().'/style.css');
}
function add_stylesheet() { //CSSを順番で読み込む
register_stylesheet();
wp_enqueue_style('slick', '', array(), '1.0', false);
wp_enqueue_style('lightbox', '', array(), '1.0', false);
wp_enqueue_style('style', '', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

/* CSSの読み込み

---------------------------------------------------------- */

function register_stylesheet() {

wp_register_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');

wp_register_style('lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css');

wp_register_style('style', get_template_directory_uri().'/style.css');

}

function add_stylesheet() { //CSSを順番で読み込む

register_stylesheet();

wp_enqueue_style('slick', '', array(), '1.0', false);

wp_enqueue_style('lightbox', '', array(), '1.0', false);

wp_enqueue_style('style', '', array(), '1.0', false);

}

add_action('wp_enqueue_scripts', 'add_stylesheet');

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