jQueryプラグイン「FadeThis」の導入方法を教えてください。

Question

jQueryプラグイン「FadeThis」の導入方法を教えてください。
http://lwiesel.github.io/jquery-fadethis/

以下に私が行った作業を示します。（ワードプレスとXサーバーを使用しております。）

【jsファイルの設置】
ファイルは「https://github.com/lwiesel/jquery-fadethis/archive/master.zip」からダウンロードした
「jquery.fadethis.js」と「jquery.fadethis.min.js」を
public_html>>wp-content>themes>小テーマ名>js
に置きました。

【cssファイルの設置】
ファイルは「https://github.com/lwiesel/jquery-fadethis/archive/master.zip」からダウンロードした
「demo.css」と「gridle.css」と「normalize.css」を
public_html>>wp-content>themes>小テーマ名>css
に置きました。

【header.phpへの記述追加】

	<!--jQueryプラグインFadeThis-->
	<script src="jquery.js"></script>
<script src="jquery.fadethis.min.js"></script>
<script>$(window).fadeThis();</script>
	<!--サーバーに置いたjsファイルを読み込み-->
	<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.fadethis.js”></script>
	<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.fadethis.min.js”></script>

【ページへの記述】

<div class="slide-left">左からスライド</div>
<div class="slide-right">右からスライド</div>
<div class="slide-top">上からスライド</div>
<div class="slide-bottom">下からスライド</div>

以上をワードプレスでやってみたのですが何が違うか教えていただけますでしょうか？

Answer 1

主にツッコミ

<script src="jquery.js"></script>
<script src="jquery.fadethis.min.js"></script>

そんなところにファイル置いてないですよね
リンク切れしてないですか

jQueryはWordPress内蔵のものもあり
他にjQueryを使うプラグインがいればそちらのものも読み込まれて
上書きしたりされたりすることになります

<script>$(window).fadeThis();</script>

Add this before the body closing tag:

って書いてますよね

html要素が出揃った後じゃないとちゃんと動かないってことです

    <script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.fadethis.js”></script>
    <script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.fadethis.min.js”></script>

jquery.fadethis.min.jsはjquery.fadethis.jsの圧縮版
読み込むのはどっちか片方だけでいいです

WordPressでjsを読み込むときはscriptタグを直書きすることはせず
wp_euqueue_scriptを使いましょう

違うところで同じものを読み込んで上書きしてしまったりというリスクを回避できます

Comments

[pappapa]

ご回答ありがとうございます。
もう少し教えて欲しいのですが、

・ダウンロードしたファイルの中から、どれをどこにアップロードすれば良いのか

と

・ワードプレスのテーマエディタでは、どのファイルに何を記述すれば良いのか

教えていただけますでしょうか？

[KazuhiroHatano]

wp_euqueue_scriptで小テーマ名>jsに置いたjquery.fadethis.min.jsをjquery依存で読み込み
さらにそれに依存する形で$(window).fadeThis();を記述したjsを読み込むか
<script>$(window).fadeThis();</script>をwp_footerの優先度遅めで出力