JQUERY bxsliderが動きません

  • tkj_tkj

    (@tkj_tkj)


    9年、 12ヶ月前

    表題の件ですが、bxsliderが効かない状態です。
    以下 head内の抜粋ですが、
    他プラグインやjqueryとのコンフリクトかとも思い、
    色々外しながら行ったのですが、
    うまくいきません。

    以下、hogehogeなどダミーのURLを入れていますが、
    全てパスはきちんと繋がっていることを確認しています。

    動作しない理由が以下からわかりますでしょうか？
    ご教示いただければ幸いです。

    なお、以下のソースのうち、
    <link rel='stylesheet' id='admin-bar-css' href='hogehoge/css/admin-bar.css?ver=3.4.1' type='text/css' media='all' />
    以下はテンプレート上<?php wp_head(); ?>と記述してある部分に自動生成されています。（プラグインの情報はここに自動で出力されるものなのでしょうか？）

    <head>
<meta charset="UTF-8" />
<meta name="description" content="ダミー/>
<link href="hogehoge/css/jquery.bxslider.css" rel="stylesheet" />
<title>hogehoge</title>
<link rel="stylesheet" href="hogehoge/style.css" type="text/css" />
<script type="text/javascript">
$(function(){
$('img').on('contextmenu',function(e){
return false;
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=”text/javascript”></script>
<script src="hogehoge/js/jquery.bxslider.min.js" type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(function(){
  $('.bxslider').bxSlider();
});
});
</script>
<link rel='stylesheet' id='admin-bar-css'  href='hogehoge/css/admin-bar.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='NextGEN-css'  href='hogehoge/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<link rel='stylesheet' id='contact-form-7-css'  href='hogehoge/plugins/contact-form-7/includes/css/styles.css?ver=3.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='jquery.lightbox.min.css-css'  href='hogehoge/plugins/wp-jquery-lightbox/styles/lightbox.min.css?ver=1.4' type='text/css' media='all' />
<script type='text/javascript' src='hogehoge/js/jquery/jquery.js?ver=1.7.2'></script>
<script type='text/javascript' src='hogehoge/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='hogehoge/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="hogehoge/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="hogehoge/wlwmanifest.xml" />
	<!-- begin gallery scripts -->
    <link rel="stylesheet" href="hogehoge/plugins/featured-content-gallery/css/jd.gallery.css.php" type="text/css" media="screen" charset="utf-8"/>
	<link rel="stylesheet" href="hogehoge/plugins/featured-content-gallery/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8"/>
	<script type="text/javascript" src="hogehoge/plugins/featured-content-gallery/scripts/mootools.v1.11.js"></script>
	<script type="text/javascript" src="hogehoge/plugins/featured-content-gallery/scripts/jd.gallery.js.php"></script>
	<script type="text/javascript" src="hogehoge/plugins/featured-content-gallery/scripts/jd.gallery.transitions.js"></script>
	<!-- end gallery scripts -->
<!-- <meta name="NextGEN" version="1.9.6" /> -->
</head>
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • FUKAZAWA Kojiro

    (@witch_doktor)

    9年、 12ヶ月前

    WordPressでjQueryを使う場合、少し注意が必要です。

    「WordPress jQuery」で検索してみれば、様々な注意点が見つかることでしょう。
    例えば、こちらの記事が参考になるかもしれません。
    http://eastcoder.com/2014/07/using-jquery-with-wordpress/

    WordPressは本体にjQueryを含んでいますので、外部からjQueryを持ち込んで読み込むと、jQueryが重複して読み込まれてしまい、予想外の不具合の原因になります。

    WordPressにはwp_enqueue_scriptという関数が存在していますのでその関数を通じてjQueryをはじめとするスクリプトを読み込むようにしてください。WordPressの側で読み込み順などを調整してくれます（なお、テーマにwp_headやwp_footerを忘れず書いてないと正しく機能しません、ご注意ください）。

    またWordPressにおいてjQueryを使うときは「$」はコンフリクトを避けるために使えないようになっています。「$」を「jQuery」に書き換えるか、上記参考サイトにあるように「カプセル化」を行ってください。下記の要領です。

    jQuery(function( $ ) {

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

});
    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    9年、 12ヶ月前

    ありがとうございます。

    たいへん申し訳ないのですがご質問失礼します。
    現在以下のように記述しているのですが、

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=”text/javascript”></script>
<script src="hogehoge/js/jquery.bxslider.min.js" type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(function(){
  $('.bxslider').bxSlider();
});
});
</script>

    まずjqueryの読み込みは外す。
    以下を削除するということでよろしいでしょうか？
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type=”text/javascript”></script>

    functions.phpに以下を記述。
    こちらも記述方法がよくわかりませんでした・・・

    function my_scripts() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

    今回、/js/jquery.bxslider.min.js　を使う場合は参考URL内にあるように上記記述の中に/js/jquery.bxslider.min.jsこちらを記述する、ということで正しいでしょうか？

    またWordPressにおいてjQueryを使うときは「$」はコンフリクトを避けるために使えないようになっています。

    これは以下の中にある$をjQueryに変更する、という意味でしょうか？

    <script type=”text/javascript”>
jQuery(document).ready(function($){
$(function(){
  $('.bxslider').bxSlider();
});
});
</script>

    以下に変更？

    <script type=”text/javascript”>
jQuery(document).ready(function(jQuery){
jQuery(function(){
  jQuery('.bxslider').bxSlider();
});
});
</script>

    色々やってみたのですが、うまくいかず・・・
    お手数おかけし恐縮なのですがご教示いただければ幸いです。

    トピック投稿者 tkj_tkj

    (@tkj_tkj)

    9年、 12ヶ月前

    いったん以下のように変更しましたが
    動作しない状態です。

    何か問題な記述ありそうでしょうか？

    header.php内

    <script src="hogehoge/js/jquery.bxslider.min.js" type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(function( $ ) {
jQuery(document).ready(function($){
$(function(){
  $('.bxslider').bxSlider();
});
});
});
</script>
<?php wp_head(); ?>

    functions.php

    function my_scripts() {
	wp_enqueue_script( 'jquery.bxslider.min', get_template_directory_uri() . 'hogehoge/js/jquery.bxslider.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

    FUKAZAWA Kojiro

    (@witch_doktor)

    9年、 11ヶ月前

    まずfunctions.php内ですが、こう書いてみてください

    function my_scripts() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script(
		'bxslider', //ここには読み込むスクリプトの名前を。命名しているだけなので間違っても動きます
		get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', //つづいてスクリプトのpassを指定
		array( 'jquery' ) //関連するスクリプトのハンドルを指定
	);}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

    これでjQuery本体とjquery.bxslider.min.jsの両方をWordPressを通じて読み込みます。これらのスクリプトはWordPress側で処理され、よき箇所に展開されます。

    で、つづいてbxsliderの挙動を定義する部分（こちらは私はfooter.php、wp_footerタグ直下に書き込むことが多いのですが）はtkj_tkjさんが書いたとおりで動くと思います。

    <script type=”text/javascript”>
jQuery(document).ready(function($){
$(function(){
  $('.bxslider').bxSlider();
});
});
</script>

    これで私の環境では、エラー無しでスクリプトを読み込んだことを確認できました。あとはこのjQueryプラグイン付属のCSSがきちんと読み込めていることをご確認の上、確認してみてください。

    蛇足ですが、JavaScriptが止まっている箇所の特定には各種ブラウザの開発者ツールが役に立ちます。Chromeでしたら「表示→開発/管理→デベロッパーツール」から立ち上げられます。上部の「Resources」タブから目当てのスクリプトが左に表示されるかどうか（正しく読み込まれていれば表示されます）確認してみてください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「JQUERY bxsliderが動きません」には新たに返信することはできません。