wp_enqueue_script関数を使ってjsファイルを読み込む時にやった失敗【WordPress】

北の国ウェブ工房

10年前

こんにちは(o’∀’)ﾉお、お久しぶりです…|дﾟ) 9月。世の中の学生たちが宿題に追われる夏が終わりましたね。まだまだ暑いところもあるようですが、八戸はすっかり涼しくなりました。というか、むしろ寒いからお布団ちゃんとかけて寝ております。

最近のお気に入りプラグイン『Responsive Lightbox by dFactory』と『bxSlider』

最近、WordPressのlightbox系プラグインは『Responsive Lightbox by dFactory』。ホーム等に設置するスライダーには、jQueryプラグイン『bxSlider』を気に入って使用しています。どちらも軽く、シンプルで扱い易いのでレスポンシブWebデザインのサイトに向いてるなーと思っています。『Responsive Lightbox by dFactory』に関しては、記事内で投稿された画像だけでなく、例えばPHPファイルに直書きした画像やYouTubeにアップロードした動画なんかも、a要素にrel=”lightbox”を追加すればモーダルウィンドウで表示することが出来るので、簡単&便利です。おすすめ。『bxSlider』は、最初導入が上手くいかないことが多くて敬遠していたのですが、使ってみたらシンプルで使い易い！以前は『Responshive slides』を使用していたのですが、どうも重たい気がしていたんですよね（私のコーディングの問題…？(´･ω･`;)）。

wp_enqueue_script関数を使ってjsファイルを読み込む時にやった失敗

『bxSlider』はWordPressのプラグインでは無いので、jsファイルやCSSを公式サイトからダウンロードして、wp_enqueue_script関数を使って読み込みさせています。で、この際にとってもアホなミスをしていたのに気づかず、『Responsive Lightbox by dFactory』が正常に動かない！なんで！！と悩んでおりました。

◇症状◇ Google Chromeでは、『bxSlider』『Responsive Lightbox by dFactory』ともに正常に動作。それ以外のブラウザでは、『bxSlider』は正常に動作。『Responsive Lightbox by dFactory』も”トップページだけ”正常に動作しているが、シングルページなどの投稿記事、他の固定ページなどでは正常に動作しない。

最初は、『bxSlider』と『Responsive Lightbox by dFactory』が相性が合わずにコンフリクトでも起こしているのかと思っていました。『Responsive Lightbox by dFactory』以外のプラグインも試してみましたが、どうも正常に動作しないので、これはwp_enqueue_script関数側でミスしてるのかなぁと思い始め、一旦全部外してから書き直してみたりと。そんな感じでいろいろいじっていった結果、header内を見ていてあることに気づいた。

『bxSlider』のjsとCSSはトップページにしか読み込みしていないにも関わらず、『bxsliderの呼び出しコード』は全ページに記述されていることに。

functions.phpでは、トップページのみbxsliderのjsファイルやcssを読み込みしている。

// JS・CSSファイル管理
function load_theme_scripts(){
	if (!is_admin()) {
		$dir = get_stylesheet_directory_uri();

		wp_deregister_script('jquery');
		wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js');

		// トップページのみ読み込み
		if(is_front_page() || is_home() || is_page_template('front-page.php')) {
			wp_enqueue_style('bxslider', $dir.'/css/jquery.bxslider.css');
			wp_enqueue_script('bxslider', $dir.'/js/jquery.bxslider.min.js',array('jquery'));
		}
	}
}
add_action('wp_enqueue_scripts', 'load_theme_scripts');

これに対して、header内のbxslider呼び出しコード。これだけだと全ページに呼び出される。

<script type="text/javascript">
$(document).ready(function($){
	$('.bxslider').bxSlider({
		auto: true,
		mode: 'fade',
		speed: 2000,
		pause: 8000,
		touchEnabled: true,
		pager: false,
		controls: true
	});
});
</script>

なので、bxslider呼び出しコードをトップページだけ呼び出すために条件分岐させたところ、どちらも正常に動作しました！

<?php if(is_front_page() || is_home() || is_page_template('front-page.php')) { //トップページのみ表示 ?>
<script type="text/javascript">
$(document).ready(function($){
	$('.bxslider').bxSlider({
		auto: true,
		mode: 'fade',
		speed: 2000,
		pause: 8000,
		touchEnabled: true,
		pager: false,
		controls: true
	});
});
</script>
<?php } ?>

とってもアホなミスだったので恥ずかしいけれども、こんな初歩的なミスするの私だけだろうとは思うけれども、同じような現象で悩んでる方の参考になれば(´･ω･`)