サポート » 使い方全般 » NaverというJqueryスクリプトが動作しない

  • 解決済 rooster0364

    (@rooster0364)


    NaverというJqueryのメニュー用スクリプトをWordpressで使いたいです。

    通常のHTMLでは問題ないのですが、Wordpressに組み込むと動作しません。
    ヘッダーに必要なスクリプト類は下記です。
    jquery.min.jsはWordpressで出力されるものと重複するため記述していません。

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#8221; type=”text/javascript”></script>
    <link href=”jquery.fs.naver.css” media=”all” rel=”stylesheet” type=”text/css” />
    <script src=”jquery.fs.naver.js”></script>
    <script type=”text/javascript”>
    $(function(){
    $(“nav”).naver({
    animated: true, //メニューを表示するときの動きを付けるかどうか
    labelClosed: “メニュー”, //閉じている時の見出し
    labelOpen: “閉じる” //開いている時の見出し
    });
    });
    </script>

    WordPressでjqueryを使う場合は変数に$は使えないと認識していますので、上記の記述、および、jquery.fs.naver.js内の$をjqueryに置き換えました。
    違っていますでしょうか?

    ちなみに、wp_deregister_scriptでWordpressがらjqueryライブラリをロードさせず、上記のjqueryを使用して$のままで動かしてみても動きませんでした。

    テーマは複数で試しています。
    どのようにすれば動作させられるでしょうか?

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

    (@hideokamoto)

    上記のコードはテーマ内に記述されていますでしょうか?
    コードを見る限り、「jquery.fs.naver.jsが見つからない」もしくは「$(“nav”).naverが未定義です」のようなエラーがコンソールに表示されているのではないかと思います。

    もし「jquery.fs.naver.js」の保存場所がテーマファイル内であれば、

    <script src="jquery.fs.naver.js"></script>

    を以下の様な変更してみてください。

    <script src="<?php echo esc_url( get_template_directory_uri() ) ;?>/jquery.fs.naver.js"></script>

    <?php echo esc_url( get_template_directory_uri() ) ;?>

    でテーマファイルの存在するディレクトリへのパスが表示されますので、これで「jquery.fs.naver.js」が読み込まれるようになるかと思います。

    トピック投稿者 rooster0364

    (@rooster0364)

    hideokamoto様
    回答ありがとうございます。
    ご指摘の件ですが、JSファイルはとりあえずルートに置いており、実際に絶対パスでファイルそのものがブラウザで見られますので間違いなく読み込んでいます。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    ルートに設置されているのであれば、始めの記述で読み込まれるはずですね・・・

    HTMLで動いてWordPressでNGとすると、パス指定かコンフリクトのどちらかかなと思ったのですが。。

    [JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver

    利用されているjQueryプラグインは上記のものだと思いますので、Twenty TwelveとTwenty Fourteenで実際に動作させてみました。

    headタグ内に

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <link href="jquery.fs.naver.css" media="all" rel="stylesheet" type="text/css" />
    <script src="jquery.fs.naver.js"></script>
    <script type="text/javascript">
    $(function(){
    $("nav").naver({
    animated: true, //メニューを表示するときの動きを付けるかどうか
    labelClosed: "メニュー", //閉じている時の見出し
    labelOpen: "閉じる" //開いている時の見出し
    });
    });
    </script>

    を記述し、body内に

    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>

    を記述したところエラーも発生せず動作している様子でした。

    Chrome Developer Toolsなどの開発者ツールにて、JavaScriptのエラーは出力されていますでしょうか?

    トピック投稿者 rooster0364

    (@rooster0364)

    hideokamoto様
    わざわざテストしていただき恐縮です。
    ありがとうございます。
    それでは、もう一度、Twentyシリーズを使って再テストしてみます。
    ちなみに、WordPressで同梱のJqueryを使う場合は$をjqueryに変更、通常のライブラリを読み込む場合はそのまま使用するという認識は間違いないでしょうか?
    また、ご報告させていただきます。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    そうですね。

    先ほど同梱のjQueryを使って動作確認をしてみて気づいたのですが、

    <?php wp_head(); ?>

    よりも上にスクリプトを記述するとエラーが発生して動作しなくなります。

    wp_head関数にて同梱のjQueryを呼び出すため、wp_head関数より上に記述すると
    同梱のjQueryが読み込まれていない状態でjQueryを動かそうとしてエラーになっている様子でした。

    ですので

    <?php wp_head(); ?>
    
    <script src="jquery.fs.naver.js"></script>
    <script type="text/javascript">
    $(function(){
    $("nav").naver({
    animated: true, //メニューを表示するときの動きを付けるかどうか
    labelClosed: "メニュー", //閉じている時の見出し
    labelOpen: "閉じる" //開いている時の見出し
    });
    });
    </script>
    
    </head>

    の様な形か、フッター部分に記述するかをおすすめします。

    トピック投稿者 rooster0364

    (@rooster0364)

    hideokamoto様
    ありがとうございます。

    再ダウンロードして、テーマはTwenty Fourteenで再度テストしてみました。
    まず、ヘッダーのwp_headの後に上記を加えてみました。
    jqueryは同梱のライブラリとダブっていますが動作します。

    この状態でajaxからライブラリの読み込みをやめると動作しません。

    同梱のライブラリを使いたく、jquery.fs.naver.jsの$をすべてjqueryに置き換えました。
    ヘッダーのスクリプト自体も$とjquery両方で試したのですが、動作しません。
    ここの行程が間違っているのでしょうか?

    プラグインで同梱のjqueryライブラリを使っているので、できればそれで動作させたいです。
    このスクリプトが云々というよりもWrodPressでの基本的なjqueryの使い方の問題になってきているようです。
    そもそも、その部分をちゃんと理解していないためにこのような状況になっていると思うのですが、よろしければ、もう少々お付き合いくださいますでしょうか。

    横から失礼します

    jQueryプラグイン等の、jQueryと依存関係にあるようなスクリプトの場合、ハードコーディングしないで、以下のようなPHPを使う事がWordPressでは推奨されています。

    動作しているとのことなので、一度以下の方法で試してみてはどうでしょうか?

    テーマの、functions.phpに追加します。

    スクリプトは、フッターに書き出されます

    <?php
    add_action( 'after_setup_theme', 'my_scripts_setup' );
    
    function my_scripts_setup() {
        add_action( 'wp_footer', 'my_add_inline_script', 99 );
        add_action( 'wp_enqueue_scripts', 'my_add_inline_style' );
    
    }
    
    function my_add_inline_style() {
    
             wp_enqueue_script( 'myfancyboxjs', 'http://www.example.com/js/jquery.fancybox.js', array( 'jquery' ), '1.0', true );
    }
    
    function my_add_inline_script() {
    
        $scripts= '/* something inline script */';
    
        if ( wp_script_is( 'myfancyboxjs', 'done' ) ) {
    
            $html= '<script type="text/javascript">%1$s</script>' . "\n";
    
            printf( $html, $scripts );
        }
    }
    
    ?>
    トピック投稿者 rooster0364

    (@rooster0364)

    nobita様
    アドバイスありがとうございます。
    同梱のjqueryを使うという点ではまだ解決していませんが、フッターに出力することができました。
    複数のスクリプトを読み込む場合は複数のactionを作成するのでしょうか?
    それとも、そもそも可能な場合はひとつにまとめておくべきなんでしょうか?

    それとも、そもそも可能な場合はひとつにまとめておくべきなんでしょうか?

    after_setup_theme アクションフックにまとめるのが普通です。

    同梱のライブラリを使いたく、jquery.fs.naver.jsの$をすべてjqueryに置き換えました。
    ヘッダーのスクリプト自体も$とjquery両方で試したのですが、動作しません。

    改修後のコードを見ること出来ますか?

    トピック投稿者 rooster0364

    (@rooster0364)

    nobita様
    ありがとうございます。
    先にも書きましたが、Wordpressに同梱のjqueryを使う場合、$をjqueryに置き換えるということくらいしか分かってません。
    単純に置き換えただけです。
    お手透きの際に見てくださいますと幸いです。

    /*
    * Naver v3.1.2 – 2014-11-25
    * A jQuery plugin for responsive navigation. Part of the Formstone Library.
    * http://formstone.it/naver/
    *
    * Copyright 2014 Ben Plum; MIT Licensed
    */

    ;(function (jquery, window) {
    “use strict”;

    /**
    * @options
    * @param customClass [string] <”> “Class applied to instance”
    * @param label [boolean] <true> “Display handle width label”
    * @param labels.closed [string] <‘Navigation’> “Closed state text”
    * @param labels.open [string] <‘Close’> “Open state text”
    * @param maxWidth [string] <‘980px’> “Width at which to auto-disable plugin”
    */
    var options = {
    customClass: “”,
    label: true,
    labels: {
    closed: “Navigation”,
    open: “Close”
    },
    maxWidth: “980px”
    };

    /**
    * @events
    * @event open.naver “Navigation opened”
    * @event close.naver “Navigation closed”
    */

    var pub = {

    /**
    * @method
    * @name close
    * @description Closes instance
    * @example jquery(“.target”).naver(“close”);
    */
    close: function(e) {
    return jquery(this).each(function(i, nav) {
    var data = jquery(nav).data(“naver”);

    if (data && data.jquerynav.hasClass(“enabled”)) {
    data.jquerywrapper.css({
    height: 0
    });
    if (data.label) {
    data.jqueryhandle.html(data.labels.closed);
    }
    data.jquerynav.removeClass(“open”)
    .trigger(“close.naver”);
    }
    });
    },

    /**
    * @method
    * @name defaults
    * @description Sets default plugin options
    * @param opts [object] <{}> “Options object”
    * @example jquery.naver(“defaults”, opts);
    */
    defaults: function(opts) {
    options = jquery.extend(true, options, opts || {});
    return (typeof this === ‘object’) ? jquery(this) : true;
    },

    /**
    * @method
    * @name disable
    * @description Disables instance
    * @example jquery(“.target”).naver(“disable”);
    */
    disable: function() {
    return jquery(this).each(function(i, nav) {
    var data = jquery(nav).data(“naver”);

    if (data) {
    data.jquerynav.removeClass(“enabled”);
    data.jquerywrapper.css({ height: “” });
    }
    });
    },

    /**
    * @method
    * @name destroy
    * @description Destroys instance
    * @example jquery(“.target”).naver(“destroy”);
    */
    destroy: function() {
    return jquery(this).each(function(i, nav) {
    var data = jquery(nav).data(“naver”);

    if (data) {
    data.jqueryhandle.remove();
    data.jquerycontainer.contents()
    .unwrap()
    .unwrap();

    data.jquerynav.removeClass(“enabled disabled naver ” + data.customClass)
    .off(“.naver”)
    .removeData(“naver”);
    }
    });
    },

    /**
    * @method
    * @name enable
    * @description Enables instance
    * @example jquery(“.target”).naver(“enable”);
    */
    enable: function() {
    return jquery(this).each(function(i, nav) {
    var data = jquery(nav).data(“naver”);

    if (data) {
    data.jquerynav.addClass(“enabled”);
    pub.close.apply(data.jquerynav);
    }
    });
    },

    /**
    * @method
    * @name open
    * @description Opens instance
    * @example jquery(“.target”).naver(“open”);
    */
    open: function() {
    return jquery(this).each(function(i, nav) {
    var data = jquery(nav).data(“naver”);

    if (data && data.jquerynav.hasClass(“enabled”)) {
    data.jquerywrapper.css({
    height: data.jquerycontainer.outerHeight(true)
    });
    if (data.label) {
    data.jqueryhandle.html(data.labels.open);
    }
    data.jquerynav.addClass(“open”)
    .trigger(“open.naver”);
    }
    });
    }
    };

    /**
    * @method private
    * @name _init
    * @description Initializes plugin
    * @param opts [object] “Initialization options”
    */
    function _init(opts) {
    // Settings
    opts = jquery.extend(true, {}, options, opts);

    // Apply to each element
    var jqueryitems = jquery(this);
    for (var i = 0, count = jqueryitems.length; i < count; i++) {
    _build(jqueryitems.eq(i), opts);
    }
    return jqueryitems;
    }

    /**
    * @method private
    * @name _build
    * @description Builds each instance
    * @param jquerynav [jQuery object] “Target jQuery object”
    * @param opts [object] <{}> “Options object”
    */
    function _build(jquerynav, opts) {
    if (!jquerynav.data(“naver”)) {
    // Extend Options
    opts = jquery.extend(true, {}, opts, jquerynav.data(“naver-options”));

    var jqueryhandle = jquerynav.find(“.naver-handle”).length ? jquerynav.find(“.naver-handle”).detach() : jquery(‘<span class=”naver-handle”></span>’);

    jquerynav.addClass(“naver ” + opts.customClass)
    .wrapInner(‘<div class=”naver-container”></div>’)
    .wrapInner(‘<div class=”naver-wrapper”></div>’)
    .prepend(jqueryhandle);

    var data = jquery.extend(true, {
    jquerynav: jquerynav,
    jquerycontainer: jquerynav.find(“.naver-container”),
    jquerywrapper: jquerynav.find(“.naver-wrapper”),
    jqueryhandle: jquerynav.find(“.naver-handle”)
    }, opts);

    data.jqueryhandle.text((opts.label) ? opts.labels.closed : ”);
    data.jquerynav.on(“touchstart.naver”, “.naver-handle”, data, _onTouchStart)
    .on(“click.naver”, “.naver-handle”, data, _onClick)
    .data(“naver”, data);

    // Navtive MQ Support
    if (window.matchMedia !== undefined) {
    data.mediaQuery = window.matchMedia(“(max-width:” + (data.maxWidth === Infinity ? “100000px” : data.maxWidth) + “)”);
    // Make sure we stay in context
    data.mediaQuery.addListener(function() {
    _onRespond.apply(data.jquerynav);
    });
    _onRespond.apply(data.jquerynav);
    }
    }
    }

    /**
    * @method private
    * @name _onTouchStart
    * @description Handles touchstart to selected item
    * @param e [object] “Event data”
    */
    function _onTouchStart(e) {
    e.stopPropagation();

    var data = e.data;

    data.touchStartEvent = e.originalEvent;

    data.touchStartX = data.touchStartEvent.touches[0].clientX;
    data.touchStartY = data.touchStartEvent.touches[0].clientY;

    data.jquerynav.on(“touchmove.naver”, “.naver-handle”, data, _onTouchMove)
    .on(“touchend.naver”, “.naver-handle”, data, _onTouchEnd);
    }

    /**
    * @method private
    * @name _onTouchMove
    * @description Handles touchmove to selected item
    * @param e [object] “Event data”
    */
    function _onTouchMove(e) {
    var data = e.data,
    oe = e.originalEvent;

    if (Math.abs(oe.touches[0].clientX – data.touchStartX) > 10 || Math.abs(oe.touches[0].clientY – data.touchStartY) > 10) {
    data.jquerynav.off(“touchmove.naver touchend.naver”);
    }
    }

    /**
    * @method private
    * @name _onTouchEnd
    * @description Handles touchend to selected item
    * @param e [object] “Event data”
    */
    function _onTouchEnd(e) {
    e.preventDefault();
    e.stopPropagation();

    var data = e.data;

    data.touchStartEvent.preventDefault();

    data.jquerynav.off(“touchmove.naver touchend.naver click.naver”);

    _onClick(e);
    }

    /**
    * @method private
    * @name _onClick
    * @description Handles click nav click
    * @param e [object] “Event data”
    */
    function _onClick(e) {
    e.preventDefault();
    e.stopPropagation();

    var jquerytarget = jquery(e.currentTarget),
    data = e.data;

    // Close other open instances
    jquery(“.naver”).not(data.jquerynav)
    .naver(“close”);

    if (data.jquerynav.hasClass(“open”)) {
    pub.close.apply(data.jquerynav);
    } else {
    pub.open.apply(data.jquerynav);
    }
    }

    /**
    * @method private
    * @name _onRespond
    * @description Handles media query match change
    */
    function _onRespond() {
    var data = jquery(this).data(“naver”);

    if (data.mediaQuery.matches) {
    pub.enable.apply(data.jquerynav);
    } else {
    pub.disable.apply(data.jquerynav);
    }
    }

    jquery.fn.naver = function(method) {
    if (pub[method]) {
    return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === ‘object’ || !method) {
    return _init.apply(this, arguments);
    }
    return this;
    };

    jquery.naver = function(method) {
    if (method === “defaults”) {
    pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));
    }
    };
    })(jQuery, window);

    jquery(function(){
    jquery(“nav”).naver({
    animated: true, //メニューを表示するときの動きを付けるかどうか
    labelClosed: “メニュー”, //閉じている時の見出し
    labelOpen: “閉じる” //開いている時の見出し
    });
    });

    jquery ではなく、jQueryではないでしょうか?

    トピック投稿者 rooster0364

    (@rooster0364)

    nobita様
    凡ミス失礼いたしました。
    ただ、指摘されなければ気がつかなかったかもしれません。
    つまらない落ちでお恥ずかしいですが、アクションフックの件など大変勉強になりました。
    hideokamoto様ともども、お付き合いくださり本当に感謝します。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「NaverというJqueryスクリプトが動作しない」には新たに返信することはできません。