サポート » 使い方全般 » 背景画像をスライドさせたい

  • 背景画像をスライドさせるべく、

    こちらのサイトを参考にwordpressにVegasというJqueryを組み込んでみましたが
    画像すら表示されません。
    ソースを見ても何も出力されていません。
    どこが悪いでしょうか?

    header.php

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ;?>/vegas.min.js"></script>
    <script type="text/javascript">
    jQuery( '.slidebox' ).vegas({
        slides: [
            { src: "<?php bloginfo('template_url'); ?>/img/main1.png" },
            { src: "<?php bloginfo('template_url'); ?>/img/main2.png" },
            { src: "<?php bloginfo('template_url'); ?>/img/main3.png" }
        ]
    });
    </script>


    スライドを表示させるテンプレート

    <div class="slidebox">
    </div>

    CSS

    .slidebox{
    	width:100%;
    	min-height:500px;
    	position:relative;
    	background-position:50% 0;
    	background-repeat:no-repeat
    }

    vegas.min.jsとvegas.min.cssはテーマファイル内に置いてあります。
    他のスクリプトと干渉しているのでしょうか。。
    どなたかご教授頂けませんでしょうか。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック投稿者 beeesty

    (@beeesty)

    Tsuyoshi.

    (@andante0727)

    WordPress本体のjQueryが読み込まれてることはないですか?
    wp_enqueue_script 使ったほうがいいかも?

    (あ、でもソースになにも出力されてないのは、根本的におかしいですね…)。
    ちなみになにも出力されないってのはjQueryの読み込みも

    <div class="slidebox">
    </div>

    の部分もですか?ソースを表示はブラウザのソースの表示?

    そうなら編集しているテンプレートが正しいか、編集がきちんと適用されているか確認されたほうがよいかと。

    Show Current Template というプラグインがおすすめです。

    トピック投稿者 beeesty

    (@beeesty)

    Tsuyoshi.さん、回答ありがとうございます!

    ソース(ブラウザのソースの表示です)では
    <div class=”slidebox”>
    </div>
    としか出力されておりません。

    wordpressへのJqueryの書き込み方が間違っているのでしょうか。
    ↓この部分

    <script type="text/javascript">
    jQuery( '.slidebox' ).vegas({
        slides: [
            { src: "<?php bloginfo('template_url'); ?>/img/main1.png" },
            { src: "<?php bloginfo('template_url'); ?>/img/main2.png" },
            { src: "<?php bloginfo('template_url'); ?>/img/main3.png" }
        ]
    });
    </script>

    JqueryやPHP初心者で、どう書き直せばいいか分からないんです。

    Tsuyoshi.

    (@andante0727)

    <script type="text/javascript">
    jQuery( '.slidebox' ).vegas({
        slides: [
            { src: "<?php bloginfo('template_url'); ?>/img/main1.png" },
            { src: "<?php bloginfo('template_url'); ?>/img/main2.png" },
            { src: "<?php bloginfo('template_url'); ?>/img/main3.png" }
        ]
    });
    </script>

    この部分はブラウザのソース表示で本来表示されるはずなんですよ。
    そうなると編集しているテンプレートが間違っているか、そのページでheader.php読み込んでないとか。なんか条件分岐に入ってるとか。

    そのあたりをまずは確認してみてください。
    前回も書きましたが、表示ページがどのテンプレートを読み込んでいるか確認するには Show Current Template というプラグインがおすすめです。

    Nora

    (@nora0123456789)

    参考にしていただきましたページを書いた人です。(リファラーを辿ってきました。)

    勝手な憶測なのですが、もしかしてテーマ「ShapeShifter(もしくは似たようなタイプのテーマ)」を編集して使っていただいたのでしょうか? もしそうでしたら、既にご指摘のあるように、編集すべきテンプレートファイルを間違えている可能性が考えられます。

    例えば、テーマ「ShapeShifter」の場合だと、基本的に管理画面以外のページを出力する際、「includes.php」「contents.php」「index.php」しか読まず、出力されるHTMLは全てメソッドによる条件分岐によって制御されています。つまり、「header.php」は読まれないファイル(ただの参照用)ですので、編集しても何の変化もありません。もし直接scriptタグを書き込むのでしたら、「index.php」に書き込む必要があります。

    もしくは、Tsuyoshi.さんのご提案にあるように、(子テーマを含む)「functions.php」から読まれるファイルに、コードを書いたJSファイルをワードプレス関数「wp_enqueue_script」で出力してください。JSハンドル「jquery」とVegas用のJSハンドルに依存させるのも忘れないように。

    勝手な憶測で書いてしまい、失礼致しました。見当違いでしたら無視してください。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「背景画像をスライドさせたい」には新たに返信することはできません。