背景画像を設置する【BACKSTRETCH】がうまく動きません。

Word Pressｎに【BACKSTRETCH】というプラグインを
使い背景の画像を複数スライドショーで
切り替えたいとおもったのですが
ピクリともうごきません。
何がいけないのか教えていただけないでしょうか。

functionｓ.phpに下記のphpファイルをいれました。

php
1<?php
2function my_scripts_method() {
3  	wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/jquery.backstretch.js' );
4}
5add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
6?>

/dodyの前に下記のコードをいれました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.backstretch(["images/IMG_56.jpg", "images/IMG_5959.jpg", "images/IMG_6658-1-700x700.jpg"], {
    fade: 750,
    duration: 4000
});
</script>

CHERRY

2016/11/01 22:27

javascriptのエラーは出てないでしょうか？ webブラウザの開発者ツールで確認してみてください。

kei344

2016/11/02 18:38

使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。

otonosama99

2016/11/12 10:15

CHERRY様　kei344様　お返事遅れて大変申し訳ございません。　kuck1u様のやり方で解決いたしました。　ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

恐らく、jQuery 当たりのエラーだと予想されます。WordPress の場合、jQuery を読み込むタグを Head 内や body 内に書く必要はありません。テストしていませんが、以下のコードを functions.php に書くだけで動くと思います。

php
1function teratail53619_scripts() {
2	$inline_script = <<<EOM
3(function ($) {
4	$.backstretch([
5	  "http://dl.dropbox.com/u/515046/www/outside.jpg",
6	  "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg",
7	  "http://dl.dropbox.com/u/515046/www/cheers.jpg"
8	], {duration: 3000, fade: 750});
9})(window.jQuery);
10EOM;
11
12	wp_enqueue_script( 'teratail53619', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js', array( 'jquery' ), null, true );
13	wp_add_inline_script( 'teratail53619', $inline_script );
14}
15add_action( 'wp_enqueue_scripts', 'teratail53619_scripts' );