WordPressで複数のjQueryを使うときの注意点

category jQuery wordpress·0 Comment

いろいろと便利な”jQuery”ですが”Wordpress”で使うときはちょっと注意が必要です。

というのも”Woredpress”では最初から”jQuery”が組み込まれていますので、ダウンロードした”jQuery”などをサンプル通りに入れてしまうと”jQuery”が複数動いてしまったり、かちあってしまい問題が発生して動かなかったりします。

読み込みのコードが見当たらないように見えますが、Wordpressは

<?php wp_head(); ?>

で”jQuery”を呼び出しています。

ということで ”flexslider” というスライダーの jQuery で説明してみます。

通常使う場合の読み込みは、

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

このようになっていますが、Wordpress では、wp_enqueue_style という関数をCSS に、wp_enqueue_script という関数を js に使います。

<?php wp_enqueue_style('flexslider-css', get_bloginfo('template_url') . '/flexslider/flexslider.css'); ?>
<?php wp_enqueue_script('flex', get_bloginfo('template_url') . '/flexslider/jquery.flexslider.js'); ?>

これを wp_head の前に入れます。Wordpress の jQuery を使いますので

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

は必要ありません。

次に、

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

を入れるのですが、"$" を使えませんので代わりに、”jQuery” を使います。

<script type="text/javascript">
	jQuery(window).load(function() {
		jQuery('.flexslider').flexslider({
			slideshowSpeed: 3000,
			animationDuration: 500,
		});
	});
</script>

こんな感じです。

これを wp_head の後に入れます。