最近は「クールななんとかまとめ」的サイトも増えてとても便利になりました。
で、だいたいそういったものはjQueryだったりJavaScriptが必要になるわけです。
今回はjQueryとcssを使ったスライドショーを導入してみたので、その手順など。
jQueryとCSSでカスタム可能なスライドショーの使ったもの、使いたいもののまとめ。
html5×CSS3対応のものが増えてきたので、導入するときは環境を要ちぇき！
【jQuery】かっこいいスライドショーまとめ
1. まずはスクリプトファイル（ライブラリ）を読み込む
HTMLで.jsファイルを読み込むには下記のようなコードを<head></head>の中に記載します。
<script type="text/javascript" src="js/jquery/jquery.js?ver=1.8.3"></script> <script type="text/javascript" src="mytheme/js/jquery.easing-1.3.pack.js"></script> <script type="text/javascript" src="mytheme/js/newscript/newscript.min.js"></script>
WordPressでこのように書くには、wp_enqueue_script(); を使います。
これは”wp_head(); が実行された時に<script 〜>を書いてね”（超意訳）という関数です。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Function Reference/wp_enqueue_script | WordPress Codex$handleはWordPressが、どんなスクリプトか判断するための名前です。
・同じ名前のスクリプトは2回書かない（他プラグインなどと重複呼び出しの回避）
・$depsに記載されている名前のライブラリの後に呼び出す（スクリプトの依存関係）
などと、いろいろ気を使ってくれます。
これを使いたいページのテンプレートに書きます。index.phpなどです。
header.phpに書いてもいいのですが、そうすると関係のないページでもスクリプトを読み込んでしまいます。
（逆にすべてのページで使うようであればheader.phpに記載したほうがラクですね）
この関数はwp_head(); の前に書いておかないといけません。
なのでwp_head(); が含まれるget_header(); の前に書いておきます。これ重要。
wp_enqueue_script('jquery');
wp_enqueue_script('jquery.easing', get_bloginfo('stylesheet_directory').'/js/jquery.easing.1.3.js', array('jquery'));
wp_enqueue_script('newscript', get_bloginfo('stylesheet_directory').'/js/newscript/newscript.min.js', array('jquery.easing'));
get_header();
※2012.12.28追記（後述参照）
get_bloginfo(‘stylesheet_directory’)ではなくget_stylesheet_directory_uri()と書いたほうがいいようです。
1つめのjQuery本体はWordpressに標準で実装されているので、’jquery’とすれば呼び出せます。
2つめはjQueryの追加ライブラリです。他のプラグインなんかでもよく使われています。
$handleにはライブラリの名前を入れるのですが、だいたいファイル名の前方共通部分、この場合はバージョンの前までを使うことが多いようです。
これで他プラグインで呼び出しがあっても重複を判断することができます。
3つめが、今回実装するスクリプトです。
このスクリプトはjQueryとjQuery-easingが揃って動作するので、$depsには’jquery.easing’とします。
正確に書くのであればarray(‘jquery’, ‘jquery.easing’)となりますが、jQuery-easingを呼び出す際に、$depsに’jquery’と記載していますので不要でしょう。
これでjQuery → jQuery-easing → newscript と順番に読み込むように記述してくれます。