サポート » 使い方全般 » jqueryを導入するとハッシュタグのリンクがズレる

  • 解決済 makoto199247

    (@makoto199247)


    Jqueryで年表にタブの機能をつけたいと思い、ui.tabsというものを導入しました。
    参考にしたのはこちらのサイト様です。
    http://5am.jp/jquery/jquery_ui_tabs/

    年号をクリックしたら、タブを切り替え
    その年のイベントが表示できるようにしたいです。
    (それ以外のイベントは非表示)
    ところがリンクをクリックすると、一番上までゆっくりスクロールし、
    その後パッと下の方に遷移します。遷移先の位置は狙っている場所よりも下になります。
    これが僕が制作中のサイトです。
    http://kojimahideo.sakura.ne.jp/hideo-k/profile

    クローム、Firefoxともに同じ問題がでました。
    通常のidとハッシュタグを用いたリンクは正常に機能しています。

    <使用中のプラグイン>
    Akismet
    All In One WP Security
    Code Snippets
    Display Widgets
    Google XML Sitemaps
    Page Builder by SiteOrigin
    Protect Uploads
    Simple Custom CSS
    SiteOrigin Widgets Bundle
    WP Multibyte Patch

    <導入過程について>
    指示通りにHTMLを組み、CSSとJSファイルをheader.phpにこのように追記しました。
    <?php wp_enqueue_script(‘uicore’, get_bloginfo(‘template_url’) . ‘/js/ui.core.js’,array(jquery)); ?>
    <?php wp_enqueue_script(‘uitabs’, get_bloginfo(‘template_url’) . ‘/js/ui.tabs.js’,array(uicore, jquery)); ?>
    <?php wp_enqueue_style( ‘uitabs’, get_bloginfo( ‘stylesheet_directory’) . ‘/css/ui.tabs.css’, array(), null, ‘all’); ?>
    ちなみにこの直後に<?php wp_head(); ?>があります。

    またJSを以下のように追記しています。
    jQuery(function() {
    jQuery(‘#ui-tab > ul’).tabs({ fx: { opacity: ‘toggle’, duration: ‘normal’ } });
    });

    インターネット上でいろいろと調べているのですが、原因がわからず困っています。
    どうかよろしくお願いいたします。

    PS
    先ほど記載した制作中のページをFirefoxで開くとyoutubeが表示されないので、
    それも原因のわかる方がいらっしゃいましたらご教示いただきたいです。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは。

    拝見しましたが、ご利用になっている Smooth Scroll という JavaScript ライブラリが、すべての a 要素のフラグメント(#)のリンクにクリックイベントを適用しているので、この挙動と衝突(というか同時に作用)しているのではないでしょうか。

    タブ内のアンカーについてイベントを remove するか、このライブラリの使用をやめて代替の方法を探すか、などが対策になりえると思います。

    スレッド開始 makoto199247

    (@makoto199247)

    mizubeさん

    こんばんは
    早速ご返信をいただき、ありがとうございます!

    当方、サイト制作初心者でして、Javascriptをあまり扱ったことがないのですが、他のライブラリと衝突することがあるのですね。自分では絶対にわかりませんでした。ありがとうございます。

    イベントをremoveする方法をいろいろさがし、タブ内のアンカーに
    data-tor-smoothscroll=”noSmooth”
    を追記したらよいとの記載も一部あったので試してみたのですが、ダメでした。
    http://blog.webcreativepark.net/2007/07/12-143406.html
    上のサイト様を参考にさせていただきました。

    コードを開いてみるとこのSmooth Scrollはテーマに最初から入っていたもののようで、さきほどのjqueryとは内容が異なるみたいでした。

    知識が乏しくて申し訳ありませんが、どうすればremoveできるのかお知恵をお貸しいただえないでしょうか。よろしくお願いします。

    smooth-scroll.jsのコードをまるまるコピーして記事にして公開しておきましたので、もし参考になれば…
    http://kojimahideo.sakura.ne.jp/archives/460

    お使いのテーマに含まれている Smooth Scroll は、リンク先の Smooth Scroll とは同じ名前の別のライブラリですね。data-tor-smoothscroll の記述をしても無効なのはそのためです。

    このライブラリをテーマで読み込ませないようにするには、お使いのベーステーマの functions.php にて、 wp_enqueue_script() または wp_register_script() 関数で登録されている Smooth Scroll ライブラリを探し出し、その関数の第1引数に与えられているハンドル名を控えます(例:smooth-scroll)。

    /*
     * たぶんこんな感じのコードがどこかにあります。
     * ハンドル名やパスは異なりますので、ファイル名等で探してください。
     */
    wp_enqueue_script( 'smooth-scroll', get_template_directory_uri() . '/js/smooth-scroll.js' );

    そして、以下のようなコードをお使いのテーマの functions.php に追加すればOKです。

    /*
     * この例では第1引数であるハンドルが smooth-scroll であるとします。
     * ハンドル名は実際にテーマに記述されているもの、この関数名は任意で書き換えてください。
     * /
    function myscript_action_wp_enqueue_scripts() {
        // smooth-scroll というハンドルで登録されているjsファイルの登録を解除
        wp_deregister_script( 'smooth-scroll' );
    }
    
    // wp_enqueue_scripts アクションフックにて、登録解除の関数を11番目に実行
    add_action( 'wp_enqueue_scripts', 'myscript_action_wp_enqueue_scripts', 11 );

    詳しくは WordPress Codex の wp_enqueue_script() のページをご覧ください。
    https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

    おそらく依存関係のないライブラリのなので解除しても問題なさそうですが、もし何か不具合が起きた場合は、追加したコードは削除し、他の方法をご検討ください。

    スレッド開始 makoto199247

    (@makoto199247)

    mizubeさん
    本当にありがとうございます!解決しました!phpやjavascriptはよくわからず腐心していたので、本当に助かりました。ありがとうございます。

    ただ結局実装した後、クライアントの方に確認すると、まだ情報を追記したいらしく、タブの数が増えすぎてしまうため、当面は表のようなより簡便な形を検討することになりました。
    別の依頼でこのライブラリを使うことになりそうですので、その時は今回の学びを参考にさせていただきます!

    どうもありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「jqueryを導入するとハッシュタグのリンクがズレる」には新たに返信することはできません。