サポート » 使い方全般 » slide pro テーマに導入すると動かない

  • 解決済 maki1463

    (@maki1463)


    お世話になっております。
    現在テストサイトでテーマはbaseと言うのを使用しております。
    そのテーマでSlider Pro を使用したいと思って設置いたしました。
    下記のサイトを参考にしております。
    http://gimmicklog.main.jp/jquery/340/

    なお普通のHTMLでテストした場合は正常に動きました。
    http://maki-maki.sakura.ne.jp/puraran/wp-content/themes/Xeory-Base-child/default.html

    ところが、同じcssやjs(スライダーに必要なもの)を読み込んでおりますがテーマに入れたものは動きません。
    ※デザインはまだ調整しておりません
    以下読みんでいる必要なファイル
    <link rel=”stylesheet” type=”text/css” href=”slider-pro.css” media=”screen” />
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
    <script src=”jquery.sliderPro.min.js”></script>

    下記は動かないテーマに設置したものです
    http://maki-maki.sakura.ne.jp/puraran/

    記述したスライダーに関わるものに変わりはないと思うのですが、何かミスをしているのか。。。
    別の問題なのでしょうか。

    どうかご教授頂けましたら幸いです。
    よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • jsやスタイル、htmlの問題に関してはfireBugsやデベロッパーツールを使うと解決することがままあります。
    この場合はコンソールを見ると
    Uncaught ReferenceError: $ is not defined
    $なんてないよ?
    って言うエラーになります。
    この場合、原因としてはほぼ2通りでjqueryにno_confrictが設定されているか
    jqueryが読み込まれていないかということになります。
    wordpressの同梱のjqueryを使っているのであれば前者ですが
    ソースを見るとgoogleから直読みしていますので後者です。
    ただし、読み込まれていないのではなく、jqueryが読み込まれる前に
    件のライブラリjquery.sliderPro.min.jsを読み込んでいるためにこのエラーが発生しています。

    本来であればwp_enqueue_scriptで読み込むように記述しているのであれば
    依存ライブラリも指定できますがなんとなく違うような気がします。
    一番簡単な方法としては
    footer.phpのwp_footer()以降に読み込むように記述すれば多分動くと思います。

    その後にでもwp_enqueue_scriptや
    http://javatechnology.net/wordpress/wordpress-jquery-google/
    このようなサイトを見てjsやcssの正しい組み込み方を調べてみてください。

    **追記
    と、偉そうな口上をたれましたが、ちがいました。
    上記に加えて、スライダーを動かすスクリプト
    自体も早い位置に書かれておりますので、更にその下に書く形にしないといけないようです

    • この返信は7年、 6ヶ月前にjdbbが編集しました。
    • この返信は7年、 6ヶ月前にjdbbが編集しました。
    Nora

    (@nora0123456789)

    通りすがりのものです。

    jdbb様がおっしゃるように、SliderProのscriptタグがjQueryよりも早く読まれています。

    「wp_enqueue_script」でjQueryに依存するように出力してみると、改善されるんじゃないでしょうか?

    
    wp_enqueue_script( 
      'slider-pro', // このJSのハンドル
      SLIDER_PRO_MIN_JS, // slider-proのURL
      array( 'jquery' ) // 依存するJSのハンドル
    );
    

    といった感じです。

    参照:https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    ただ、ご使用されているのが自作のテーマなのか、jQueryを外部(googleapi)から読んでいるので、ワードプレスによるjQueryの標準ハンドル(jquery)を使用しているのかは判断できませんので、「jquery」ハンドルで上手く依存関係が作れない場合は、一度ハンドルをご確認ください。

    同名のプラグインがあるので機能的に同じならそれ使ってみればどうでしょうか。
    ただ評価等情報がないようですが。

    トピック投稿者 maki1463

    (@maki1463)

    jdbb様 通りすがりの者様
    ありがとうございます。

    <script>
    //横幅いっぱい
    	$( document ).ready(function( $ ) {
    		$('#wide').sliderPro({
    			width: 600,//横幅
    			arrows: true,//左右の矢印
    			buttons: true,//ナビゲーションボタンを出す
    			slideDistance:0,//スライド同士の距離
    			visibleSize: '100%',//前後のスライドを表示
    		});
    	});
    </script>

    をフッターに移動してみました。
    今のところ変化はないようです。

    functions.php
    には以下が記載されております。

    <?php
     //css
     function my_styles() {
        wp_enqueue_style( 'slider-pro', get_bloginfo( 'stylesheet_directory') . '/css/slider-pro.min.css', array(), null, 'all');
        wp_enqueue_script( 'slider-pro', get_bloginfo( 'stylesheet_directory') . '/js/jquery.sliderPro.min.js', array(), false, true );
    
    }
    add_action( 'wp_enqueue_scripts', 'my_styles');
     //メニュー
    add_theme_support( 'menu' );
    add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);
    
    function description_in_nav_menu($item_output, $item){
    	return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->description}</span><", $item_output);
    }
    // remove wp version param from any enqueued scripts
    function vc_remove_wp_ver_css_js( $src ) {
        if ( strpos( $src, 'ver=' ) )
            $src = remove_query_arg( 'ver', $src );
        return $src;
    }
    add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
    add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
    function register_common_script() {
    	if (!is_admin()) {
    		$script_dir = get_template_directory_uri();
    		wp_deregister_script( 'jquery' );
    		wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',array(), false, false);
    		wp_enqueue_script( 'cssfx', $script_dir.'/lib/cssfx.min.js', array(), false, false );
    		wp_enqueue_script( 'respondjs', $script_dir.'/lib/respond.min.js',array('jquery'), false, true);
        wp_enqueue_script( 'jquery', get_bloginfo( 'stylesheet_directory') . '/js/jquery.js', array(), false, true );
    	}
    }
    add_action('wp_enqueue_scripts','register_common_script');
    ?>

    wp_enqueue_script」でjQuery・・・の部分がわからないでおります。
    もう少しお付き合いいただけますでしょうか。

    oisit様
    ありがとうございます。
    同名のプラグインや他のプラグインも承知しておるのですが、前後のスライドを表示するタイプはこちらなのです。他のを改造する技術はありません。
    せっかく教えて頂きましたのに申し訳ありません。

    <script type='text/javascript' src='http://maki-maki.sakura.ne.jp/puraran/wp-content/themes/Xeory-Base-child/js/jquery.sliderPro.min.js'></script>
    も同様に下に移してください。
    ページを表示した状態で、右クリックし、ページのソースを表示 的なものをクリックし
    一番下に移動して見た場合に順番として

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    の後に
    <script type='text/javascript' src='http://maki-maki.sakura.ne.jp/puraran/wp-content/themes/Xeory-Base-child/js/jquery.sliderPro.min.js'></script>
    更にその後に

    <script>
    //横幅いっぱい
    	$( document ).ready(function( $ ) {
    ・・・
    

    となる必要があります。

    関数リファレンス/wp enqueue script
    のパラメータあたりを読むとNora氏の例示もわかってくると思います。

    wp_enqueue_script( 
      'slider-pro', // このJSのハンドル
      SLIDER_PRO_MIN_JS, // slider-proのURL
      array( 'jquery' ) // 依存するJSのハンドル
    );
    • この返信は7年、 6ヶ月前にoisitが編集しました。
    トピック投稿者 maki1463

    (@maki1463)

    jdbb様
    nora様
    oisit様

    ありがとうございました、出来ました!
    出現の順番と位置に問題があったのですね。

    まだまだ不慣れではありますが、頑張っていきたいと思います。
    本当にありがとうございました。

    今回はscriptをフッターファイルに移動しfunctions.phpのjquery.sliderPro.min.jsをarray(jquery)で読み込み順を変更したことで解決いたしました。
    ありがとうございました。

     //css
     function my_styles() {
        wp_enqueue_style( 'slider-pro', get_bloginfo( 'stylesheet_directory') . '/css/slider-pro.min.css', array(), null, 'all');
        wp_enqueue_script( 'slider-pro', get_bloginfo( 'stylesheet_directory') . '/js/jquery.sliderPro.min.js', array(jquery), false, true );
    
    }
7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「slide pro テーマに導入すると動かない」には新たに返信することはできません。