WordPressでTwentyTenテーマにjQueryを実装する(IntroTzikas)

IntroTzikas、おもしろいですよね。
開いた瞬間ちょっとワクワクします(`・ω・´)
配布元へのアクセスで効果を見れます→ http://www.jquery.gr/introtzikas/

WordPressでjQueryを利用するときはコピペじゃ動かない…って
話にはきいてたけどマジでした。

色々試してみて解決したので、
どうやったらうまくいったかメモっておきます。

■はじめに■
<環境>
今回使用のjQuery : IntroTzikas http://www.skuare.net/2011/04/introtzikas.html
使用するテーマ : Twenty Ten

<目標>
ホームにアクセスしたときだけ、イントロエフェクトを表示させる
(固定ページ移動時には表示させたくない)

<実装手順 概要>
1)IntroTzikas をダウンロードして、テーマ内に格納する
2)header.php 内で最新の jQuery と IntroTzikas を読み込む
3)index.php 内で表示効果を設定する

■それでは手順を具体的にみていきます!■
<実装手順 詳細>

1)IntroTzikas をダウンロードして、テーマ内に格納する
  ・IntroTzikas の配布元から、introtzikas.js ファイルをダウンロード
  ・wp-content/themes/twentyten 直下に js フォルダを作成してその中に格納します

2)header.php 内で最新の jQuery と IntroTzikas を読み込む
  ・header.php をエディタで開きます
  ・</head> の近くに <?php wp_head(); ?> があるので、これを探します
  ・<?php wp_head(); ?> の直前に以下を挿入します

<?php wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js’, array(), ‘1.10.1’);
wp_enqueue_script(‘introtzikas’,get_bloginfo(‘template_url’) . ‘/js/introtzikas.js’, array(‘jquery’));
?>

3)index.php内で表示効果を設定する
  ・index.php をエディタで開きます
  ・<?php get_header(); ?> を探します
  ・<?php get_header(); ?> の直後に以下を挿入します

<script type=”text/javascript” charset=”utf-8″>
jQuery(document).ready(function(){
$().introtzikas({
line: ‘#fff’, //ラインの色
speedwidth: 500, //幅の移動完了スピード
speedheight: 1000, //高さの移動完了スピード
bg: ‘ffc800’ //背景色
});
});
</script>

以上で完成です。どうでしょうか?動きましたか?
上の例では手順(3)でオレンジ背景に0.5秒で白いラインが走った後、1秒で開きます。
カラーや数値を好みに変更すればgoodですねー。

■おまけ■

<ゆったり表示してみる>
<div class=”introtzikas_bg”><div class=”introtzikas”></div></div>
この記述を、上例手順(3)の直後(<div id=”container”>の直前)に入れてやります。
イントロエフェクトのあと、白い画面で一呼吸置いて表示してくれました。
この記述がない場合は、比較的早めにウェブサイトの内容が表示されます。

この一呼吸の長さも変更できるのでしょうけど…うーん
なぜこうなるかも含めて、調べるのはまたの機会にします。

<ページ移動ごとにエフェクトを表示してみる>
上の例では index.php の <?php get_header(); ?> でヘッダー情報を読んだあとに
scriptタグを書いていますが、これを header.php 内の <?php get_header(); ?> の直後に書いてみます。
これで、ヘッダー情報を読み込むたび、つまりページ移動するたびにIntroTzikasの
効果を出せます。

<走るラインの太さを変えてみる>
introtzikas.js内の指定値を変更すると、ラインの太さを変えることができました。
introtzikas.js内に lineheight: 2 という箇所があります。
この値を変える(たとえば太めに20にする)と、好みの太さでラインが走ってくれました。

以上です。

ページアクセスのときのワクワク感を簡単に表現が出来るので、便利ですね!
個人的に「ページ移動のたび毎回エフェクトはくどいかな?」と感じたので、
トップページ移動でのみ効果が出るようにしてみました。

※こちらに大変お世話になりました!
(http://www.skuare.net/2011/04/introtzikas.html
(http://kachibito.net/web-design/wordpress-with-jquery.html

コメントを残す

メールアドレスが公開されることはありません。