サポート » 使い方全般 » スライドショーのCross-slideが動かない

  • 解決済 mint-chan

    (@mint-chan)


    スライドショーのCross-slide というものをWordpressに入れたいのですが、うまくいきません。
    通常のサイトではうまくいくのですが、ワードプレスではうまくいきません。
    いろいろ調べますと、ワードプレスで、J-query を使用するときのやり方などを調べて下記のようにしましたが、全くうまくいきません。(画像も表示されません)

    ■header.phpn の head の中に下記のものを書いています

    <!– もともとあったもの –>
    <!–[if lt IE 9]>
    <script src=”<?php bloginfo(‘template_url’); ?>/js/html5.js”></script>
    <script src=”<?php bloginfo(‘template_url’); ?>/js/css3-mediaqueries.js”></script>
    <![endif]–>
    <!– もともとあったもの end –>

    <!– 自分で追加 cross-slide のために追加 –>
    <?php
    wp_deregister_script(‘jquery’);
    wp_enqueue_script(‘jquery’,’http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#8217;);
    wp_deregister_script(‘jquery-ui-core’);
    wp_enqueue_script(‘jquery-ui-core’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js&#8217;);
    ?>
    <!– 自分で追加 cross-slide のために追加 end –>

    <!– もともとあったもの –>
    <?php
    wp_head(); ?>
    <script src=”<?php bloginfo(‘template_url’); ?>/js/jquery1.4.4.min.js”></script>
    <script src=”<?php bloginfo(‘template_url’); ?>/js/script.js”></script>
    <!– もともとあったもの end –>

    <!– 自分で追加 動画用 google と jquery.cross-slide.js –>
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script&gt;
    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/jquery.cross-slide.js”></script>
    <!– 自分で追加 動画用 google と jquery.cross-slide.js end  –>

    </head>
    <body>

    ■front-page.php に下記を書いています。

    <?php get_header(); ?>

    <!– 自分で入れたもの –>
    <script type=”text/javascript”>
    $(‘#slidedisp’).crossSlide({
    speed: 25,
    fade: 1
    },[
    { src: ‘<?php bloginfo(‘template_url’); ?>/img-js/image1.jpg’, dir: ‘up’ },
    { src: ‘<?php bloginfo(‘template_url’); ?>/img-js/image2.jpg’, dir: ‘down’ },
    { src: ‘<?php bloginfo(‘template_url’); ?>/img-js/image3.jpg’, dir: ‘left’ }
    ]);
    </script>
    <div id=”slidedisp”></div>
    <!– 自分で入れたもの end –>

    ■テンプレートのあるフォルダに下記のものを入れました
     ・テンプレートフォルダ
        -jsフォルダ-もともとのjsファイル
        -自分でいれたjquery.cross-slide.js ファイル
     ・img-js
        - image1.jpg
        - image2.jpg
        - image3.jpg

    fonction.php はあまりわかりません。テンプレートのまま触っていません。

    このような質問の仕方で申し訳ございませんが、
    よろしくお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • モデレーター gatespace

    (@gatespace)

    ※ソースコードを投稿するときはその部分を「code」ボタンで囲ってくださいね。

    ぱっと見ですが、何回も jQuery本体 を読み込んでいるのが一番問題かもしれません。
    「いろいろ調べた」とのことですが、jQueryプラグインを使いたい場合、この書き方オススメできません。

    header.php に書き込むより、functions.phpに記述することをおすすめします。
    やり方はこちらを参考になさってください
    http://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/
    http://eastcoder.com/2014/07/using-jquery-with-wordpress/

    functions.phpに記述するのが良いと思います。
    下記を追加してください。

    /**
     * JavascriptとCSSの設定
     */
    function my_scripts() {
    	global $post;
    
    	// テーマ全体で必要なJavascriptとCSS
    	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
    	wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '', false );
    
    	//トップページに必要なJavascript
    	if ( is_front_page() ){
    		wp_enqueue_script( 'cross-slide', get_template_directory_uri() . '/js/jquery.cross-slide.js', array( 'jquery', 'jquery-ui-core' ), '', false );
    	}
    
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );
    
    /**
     * IE9以下の設定
     */
    function my_enqueue_lt_ie9() {
    	global $is_IE;
    
    	// IEでない時はおしまい
    	if ( ! $is_IE ) return;
    
    	// 必要ならファイルをインクルード
    	if ( ! function_exists( 'wp_check_browser_version' ) )
    		include_once( ABSPATH . 'wp-admin/includes/dashboard.php' );
    
    	// IEバージョンによってenqueue
    	$response = wp_check_browser_version();
    	if ( 0 > version_compare( intval( $response['version'] ) , 9 ) ){
    		wp_enqueue_script( 'my-html5', get_template_directory_uri() . '/js/html5.js', array(), '', false );
    		wp_enqueue_script( 'my-mq', get_template_directory_uri() . '/js/css3-mediaqueries.js', array(), '', false );
    
    	}
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_lt_ie9' );

    そうするとheadタグ内部はほぼ必要なくて、<?php wp_head(); ?>だけ残してください。

    あとfront-page.phpのscriptが<div id="slidedisp"></div>の読み込み前に実行されるので、おそらくエラーになるかと思います。
    また、gatespaceさんの書かれてる二つ目のリンク先にもありますが、$がそのままでは使えないので、次のように囲ってやる必要があります。

    jQuery(function( $ ) {
    
    // ここに $ を使ったコードを書く
    
    });

    トピック投稿者 mint-chan

    (@mint-chan)

    gatespace様

    いつもありがとうございます。また、ソースコードのくくりをしないといけないのですね。今後そのようにいたします。ありがとうございます。教えていただきましたところを見てみます。

    ikaring様

    ご丁寧にソースを記述してくださってありがとうございます。まだ十分理解できていませんが、しっかりみてみます。ありがとうございました。

    トピック投稿者 mint-chan

    (@mint-chan)

    front-page.php の <div id=”slidedisp”></div> をスクリプトの上の配置しました。
    そのほか、$についてのアドバイスですが、

    jQuery(function( $ ) {

    // ここに $ を使ったコードを書く

    });

    の // ここに $ を使ったコードを書く 
    のところに記述するところは、具体的にとこから
    どこまでか教えていただけますとありがたいです。

    あまりよくわからずに使用しているのは、よくないと思うのですが、どうぞよろしくお願いします。

    <?php get_header(); ?>
    
    <!-- 自分で入れたもの -->
    
    <div id="slidedisp"></div>
    
    <script type="text/javascript">
    $('#slidedisp').crossSlide({
    speed: 25,
    fade: 1
    },[
    { src: '<?php bloginfo('template_url'); ?>/img-js/image1.jpg', dir: 'up' },
    { src: '<?php bloginfo('template_url'); ?>/img-js/image2.jpg', dir: 'down' },
    { src: '<?php bloginfo('template_url'); ?>/img-js/image3.jpg', dir: 'left' }
    ]);
    </script>
    
    <!-- 自分で入れたもの end -->
    トピック投稿者 mint-chan

    (@mint-chan)

    できました!!!
    ありがとうございます。
    最終形を記述します。

    ■front-page.php

    <?php get_header(); ?>
    <!-- 自分で入れたもの -->
    <div id="slidedisp"></div>
    
    <script type="text/javascript">
    
        jQuery(function( $ ) {
             $('#slidedisp').crossSlide(
                {
                   speed: 25, //in px/sec
                   fade: 1    //in sec
                },
                [
                  { src: '<?php bloginfo('template_url'); ?>/img-js/image1.jpg', dir: 'up', href: '<?php bloginfo('template_url'); ?>/'   },
                  { src: '<?php bloginfo('template_url'); ?>/img-js/image2.jpg', dir: 'down', href: '<?php bloginfo('template_url'); ?>/' },
                  { src: '<?php bloginfo('template_url'); ?>/img-js/image3.jpg', dir: 'up', href: '<?php bloginfo('template_url'); ?>/'   }
                ]
             );
          });
    </script>
    
    <!-- 自分で入れたもの end -->

    ■function.php(ikaring様の通り記述しました)

    * JavascriptとCSSの設定
     */
    function my_scripts() {
    	global $post;
    
    	// テーマ全体で必要なJavascriptとCSS
    	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
    	wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '', false );
    
    	//トップページに必要なJavascript
    	if ( is_front_page() ){
    		wp_enqueue_script( 'cross-slide', get_template_directory_uri() . '/js/jquery.cross-slide.js', array( 'jquery', 'jquery-ui-core' ), '', false );
    	}
    
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );
    
    /**
     * IE9以下の設定
     */
    function my_enqueue_lt_ie9() {
    	global $is_IE;
    
    	// IEでない時はおしまい
    	if ( ! $is_IE ) return;
    
    	// 必要ならファイルをインクルード
    	if ( ! function_exists( 'wp_check_browser_version' ) )
    		include_once( ABSPATH . 'wp-admin/includes/dashboard.php' );
    
    	// IEバージョンによってenqueue
    	$response = wp_check_browser_version();
    	if ( 0 > version_compare( intval( $response['version'] ) , 9 ) ){
    		wp_enqueue_script( 'my-html5', get_template_directory_uri() . '/js/html5.js', array(), '', false );
    		wp_enqueue_script( 'my-mq', get_template_directory_uri() . '/js/css3-mediaqueries.js', array(), '', false );
    
    	}
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_lt_ie9' );
    /*---------------------------------------------------------*/

    ■header.php
    <script src=”~
    jQueryのスクリプト関係は削除しまして

    <?php
    wp_head(); ?>

    のみを残しました。

    これでうまくいきました。

    本当にありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「スライドショーのCross-slideが動かない」には新たに返信することはできません。