WordPressでjQueryが動かないという人へ – WordPressにイメージスライダーを付けてみよう

Posted under - WordPress

59

初めて WordPress で jQuery を使おうとしたとき、動かなかったなーという苦い経験があったのを思い出したので書きました。私みたいに初めての WordPress + jQuery でつまづいてる人向けの記事です。

WordPress jQuery

WordPress で初めて jQuery を使ってみようとしたとき、「アレ?動かないぞ?」となってしまった人、結構いませんか? 私も初めて WordPress で jQuery のプラグインを使おうとしたときには、動かなくって困ったことがありました。今回は WordPress に jQuery のスライドショープラグインを設置しながら、WordPress での jQuery の使い方を見ていきたいと思います。

1. jQuery のプラグインを用意

まずは jQuery のプラグインを用意します。今回は CSS Trick で公開されているコンテンツスライダー – Anthing Slider を使ってみることにします。

写真 – webdesignrecipes.tumblr.com/

DOWNLOAD

Anuthing Slider
Dowload on github
ライセンス – GNU

それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。

anythingslider folder

たくさんのフォルダやファイルが並んでいても、実際に使うファイルはほんの少しです。

2. HTMLをマークアップ

HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね!

それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul><li>で画像をリスト化するだけですね!<ul>には slider(任意の名前)という id を付けるのを忘れずに!

HTML

<ul id="slider">
	<li><a href="#"><img src="images/image01.jpg" alt=""></a></li>
	<li><a href="#"><img src="images/image02.jpg" alt=""></a></li>
	<li><a href="#"><img src="images/image03.jpg" alt=""></a></li>
</ul>

2. プラグインの jsファイルと CSSファイルを読み込む

マークアップが終わったら、jQuery のプラグインを動作させるための準備をします。必要なファイルは基本的に以下の 3種類。

  • jQuery 本体
  • プラグインの jsファイル
  • プラグインの CSSファイル

もちろんプラグインによっては CSSファイルが必要ない場合もあります。また、複数の jsファイルが必要なプラグインもありますが、基本的には上記の3点セットになると思います。

2.1. Anything Slider の場合

今回の Anything Slider の場合は、スライダーのボタンに画像を使用しているので、CSSから参照している images フォルダも必要ですね。

  • jsフォルダ内の jquery.min
  • jsファルダ内の jquery.anythingslider.js or jquery.anythingslider.min.js
  • css ファルダ内の anythingslider.css
  • imagesフォルダ

上記の4つが必要ですね!imagesフォルダは、CSSから参照する画像が入っています。jquery.anythingslider.js ファイルには、圧縮版の min.js も用意されているので、どっちか好きな方を使ってください。それではこれらのファイルを読み込んでみましょう。

2.2. 普通のWebサイトの場合

まず、WordPressじゃない普通の Webサイトの場合でのファイルの読み込みを見てみましょう。HTMLファイルの <head> 内などに、ファイルへのリンクを貼りますよね。ダウンロードしたフォルダの中にある、デモを参考にしてみましょう。

HTML
<head>
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.min.js"></script>
<script src="js/anythingslider.min.js"></script>
</head>

普通の Webサイトの場合は、こんな風に直接 <head> 内などに書き込みますよね!

2.3. WordPressサイトの場合

でも、WordPress の場合はちょっと書き方が違います。まず、WordPress には、はじめから jQuery がインストールされています。なので普通の Webサイトのように、jQuery 本体を別途用意する必要はありません。基本的には、この WordPress にインストールされている jQuery を使います。

ではどうやってこの jQuery を読み込むかというと、wp_enqueue_script という関数を使って読み込みます。

3. wp_enqueue_script 関数を使おう!

それでは実際に wp_enqueue_script を使って、jQuery 本体とプラグインを読み込んでみましょう。wp_enqueue_scriptfunctions.php に記述することもできますが、ここでは一番分かりやすい header.php に書く方法でやってみます。

header.php

<?php wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.min.js',array(jquery)); ?>
<?php wp_head(); ?>

上記のように、wp_head() より上に 1行書き加えます。wp_enqueue_script は、スクリプトが <head> 内で重複しないようにロードするための関数です。それだけじゃなくて、そのスクリプトが依存するスクリプト(プラグインを使用するためにライブラリを読み込む場合など)がある場合には一緒に読み込んでくれるんです。

  • 1. wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.min.js',array(jquery));

上記のコードは、wp_enqueue_script を使って、anythingslider.min.js を読み込んでいますが、最後の方に array(jquery) の記述がありますよね?anythingslider.min.js は、jQuery が無いと動きません。つまり jQuery に依存したスクリプトですよね。なのでその jQuery を合わせて指定してあげるだけで、自動的に jQuery を一緒に読み込んでくれる … という仕組みなんです。

3.1. 複数のスクリプトを指定できる

今回の Anything Slider も、オプションで easing プラグインを利用することができます。なので jQuery本体の他に、easing プラグインも読み込んで使用したいですね!そんなときには以下のように書くことができます。

header.php
<?php wp_enqueue_script('easing', get_bloginfo('template_directory').'/js/easing.js', array('jquery'));?>
<?php wp_enqueue_script('anythingslider', get_bloginfo('template_directory').'/js/jquery.anythingslider.min.js', array('jquery', 'easing')); ?>

jquery.anythingslider.min.js を読み込むとき、array('jquery', 'easing') となっていますから、必ず jQuery 本体と easing を読み込んでくれる … という訳です。header.php に書くときは、上記のように easing.js と続けて書いたりするので、あんまりピンとこないかもしれませんが、functions.php でたくさんの js ライブラリを管理しつつ記述するときには、とっても重宝します。

functiorns.php でたくさんのスクリプトを管理して読み込む方法は、別の記事で説明しているので参考にしてみてください。

3.1. wp_enqueue_style という関数もあります

先ほどの wp_enqueue_script は、スクリプトを読み込むための関数でした。これに似た関数で、wp_enqueue_style という関数もあるので覚えておきたいですね!こちらはスタイルシートを読み込むための関数です。

header.php
<?php wp_enqueue_style('slider-css', get_bloginfo('template_url') . '/css/anythingslider.css'); ?>

先ほどの wp_enqueue_script と続けて書くと、以下のようになります。

header.php
<?php wp_enqueue_style('slider-css', get_bloginfo('template_url') . '/css/anythingslider.css'); ?>
<?php wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.min.js',array(jquery)); ?>
<?php wp_head(); ?>

どうしてこんな面倒なことをするか … というのには、キチンとした理由があります。これについては別の記事で詳しく書いたので、そちらを参考にしてみてくださいね!

4. プラグイン用のコードを記述する

最後にプラグインの動作用のコードを記述します。ここでも普通の Webサイトのときと違って、WordPressの場合ちょっと気をつけたいことがあります。

普通のWebサイトの場合は、<head> 内などに、以下のように書きますよね!下記は今回使用している Anything Slider 用の記述です。

Javascript
<script>
$(function(){
	$('#slider').anythingSlider({
		easing: 'easeInOutBack'
	});
});
</script>

でも、WordPressの場合は、上記のように書いても動かないんです …。

4.1. $ は使わないで jQuery と書く

実は WordPressでは、jQueryのコードを記述するときに、“$” は基本的に使えないんです。というのも、WordPress は jQuery の他に、Prototype.js というライブラリを使用しています。Prototype.js には $()という getElementById のように利用する関数が定義されていて、jQuery で “$” を使うと競合(コンフリクトっていいます)を起こしてしまうんですねー。

では WordPress の場合はどうやって書けばいいでしょう?答えは簡単!”$”の変わりにjQueryと書けばいいんですね!もともと”$”は、”jQuery”のエイリアスなので、”jQuery”と書けば同じように動作します。

Javascript
<script>
jQuery(function(){
	jQuery('#slider').anythingSlider({
		easing: 'easeInOutBack'
	});
});
</script>

上記のように jQuery() と記述すれば OKです!

4.2. プラグイン動作用のコードは wp_head()より下に書く

先ほどのプラグインの動作用のコードを記述する位置にも注意が必要です。というのは、wp_enqueue_script によって読み込まれた js ファイルは、wp_head() によって出力されます。なのでプラグインの動作用のコードを wp_head() より上に書いてしまうと、順番が逆になってしまうんですねー。

ですからプラグインの動作用のコードは、wp_head() より下に書くようにしましょう。

header.php
<?php wp_enqueue_style('slider-css', get_bloginfo('template_url') . '/css/anythingslider.css'); ?>
<?php wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.min.js',array(jquery)); ?>
<?php wp_head(); ?>
<script>
jQuery(function(){
	jQuery('#slider').anythingSlider({
		easing: 'easeInOutBack'
	});
});
</script>

これで WordPress でも、無事に jQuery のプラグインが動くようになりました!

Comments

Thank you for the comment.