• 解決済 h-pine-h

    (@h-pine-h)


    http://www.kyosuke.jp/yugajs/
    このページの「現在のページをハイライト表示」という機能のjsを使いました。
    wpに組み込む前のhtmlでは作動確認済みです。
    wpに組み込んでからトップページにいるときはトップのメニューのボタンの色が変わるのですが、その他のメニューに移動すると、トップのメニューボタンと現在いるページのメニューボタンの二つハイライトされてしまいます。
    jsへのリンクは下記のように記述しています。
    <script type=”text/javascript” src=”<?php echo get_template_directory_uri(); ?>/js/yuga.js” charset=”utf-8″></script>

    リンク以外に原因として考えられることはあるでしょうか?

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • トピック投稿者 h-pine-h

    (@h-pine-h)

    情報が少ないので、yuga.jsの現在整理した中身を下記に記載致します。

    ————————————————————————————
    (function($) {

    $(function() {
    $.yuga.selflink();

    });

    //———————————————————————

    $.yuga = {
    // URIを解析したオブジェクトを返すfunction
    Uri: function(path){
    var self = this;
    this.originalPath = path;
    //絶対パスを取得
    this.absolutePath = (function(){
    var e = document.createElement(‘a’);
    e.href = path;
    return e.href;
    })();
    //絶対パスを分解
    var fields = {‘schema’ : 2, ‘username’ : 5, ‘password’ : 6, ‘host’ : 7, ‘path’ : 9, ‘query’ : 10, ‘fragment’ : 11};
    var r = /^((\w+):)?(\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/.exec(this.absolutePath);
    for (var field in fields) {
    this[field] = r[fields[field]];
    }
    this.querys = {};
    if(this.query){
    $.each(self.query.split(‘&’), function(){
    var a = this.split(‘=’);
    if (a.length == 2) self.querys[a[0]] = a[1];
    });
    }
    },
    //現在のページと親ディレクトリへのリンク
    selflink: function (options) {
    var c = $.extend({
    selfLinkAreaSelector:’body’,
    selfLinkClass:’current’,
    parentsLinkClass:’parentsLink’,
    postfix: ‘_cr’,
    changeImgSelf:true,
    changeImgParents:true
    }, options);
    $(c.selfLinkAreaSelector+((c.selfLinkAreaSelector)?’ ‘:”)+’a[href]’).each(function(){
    var href = new $.yuga.Uri(this.getAttribute(‘href’));
    var setImgFlg = false;
    if ((href.absolutePath == location.href) && !href.fragment) {
    //同じ文書にリンク
    $(this).addClass(c.selfLinkClass);
    setImgFlg = c.changeImgSelf;
    } else if (0 <= location.href.search(href.absolutePath)) {
    //親ディレクトリリンク
    $(this).addClass(c.parentsLinkClass);
    setImgFlg = c.changeImgParents;
    }
    if (setImgFlg){
    //img要素が含まれていたら現在用画像(_cr)に設定
    $(this).find(‘img’).each(function(){
    this.originalSrc = $(this).attr(‘src’);
    this.currentSrc = this.originalSrc.replace(new RegExp(‘(‘+c.postfix+’)?(\.gif|\.jpg|\.png)$’), c.postfix+”$2″);
    $(this).attr(‘src’,this.currentSrc);
    });
    }
    });
    },

    };
    })(jQuery);
    ————————————————————————————
    現在トップのメニューと表示されているページのメニューとどちらもハイライトされてしまう状態です。htmlでは現在表示されているページだけハイライトされていたのに、何が原因でしょうか?
    ちなみにメニューの部分はheader.phpに記述されています。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    yuga.jsってjQueryが必要だと思うんですが、jQueryを呼んでないのでは???
    それか、干渉処理をしてないとか。。。
    wp_enqueue_script関数について調べてみるとよいと思います!

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    すみません自己レスです。
    ハイライトはしてるので、yuga.jsは動いてる、ってことですね。

    多分ですけど、リンクが絶対パスで出力されているので、

    <a href="http://example.com">HOME</a>
    <a href="http://example.com/page-a">ページA</a>

    で、ページAがHOMEの子ページだと判断されているんでしょう。
    yuga.jsには、今見ているページの親フォルダへのリンクも、ハイライト表示する機能があります。

    yuga.jsのサイト(現在のページをハイライト表示 > 親フォルダへのリンク)には、

    ウェブサイトでは、カテゴリ内のページでは現在所属するカテゴリをハイライトしたいという場合がよくあります。そういった場合はディレクトリにリンクすることで現在のページにリンクした場合と同じようにハイライトが可能です。判定は現在見ているページ(http://example.com/company/map.html)のURLに完全に含まれているパスかどうかで判定しています(http://example.com/company/, http://example.com/へのリンクを設定していた場合ハイライト、http://example.com/company/index.htmlの場合はハイライトしません)。またa要素にはclass=”parentsLink”が付加されます。

    という風に書かれていますので。
    つまり、動作していないどころか、むしろ至極正しく動いているわけです。

    この機能はyuga.jsのカスタムパラメータで無効にできると書かれています。

    現在地ハイライトのfunction
    28行目付近 $.yuga.selflink();
    (中略)
    changeImgParents true 親ディレクトリにリンクしていた際、img要素を_crに変えるかどうか(true:有効, false:無効)

    詳細はyuga.jsのドキュメントをご覧ください。

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >mypacecreatorさん
    回答頂いたのにお返事遅れて申し訳ございません!
    まずはお礼致したいと思います。

    仰る通り、yuga.jsの本サイトに親ディレクトリへのリンクも含まれていたようなので、各所いじってみたのですが、トップ以外の他のメニューの時ハイライトされない、か、トップと現在のメニューのどちらもハイライトされてしまいます。

    具体的にソースのどこといじったかと申しますと、

    selflink: function (options) {
    var c = $.extend({
    selfLinkAreaSelector:’body’,
    selfLinkClass:’current’,
    parentsLinkClass:’parentsLink’,
    postfix: ‘_cr’,
    changeImgSelf:true,
    changeImgParents:false
    }, options);

    この部分等です→changeImgParents:false
    trueからfalseにすると現在のページがハイライトされません。

    ドキュメントを見ていないので、違うかもしれませんが、

    changeImgParents: false

    にすると、親ディレクトリが存在する限り、

    if (setImgFlg)

    が常に false となって、画像の書き換えが全てオフになってしまうのではないでしょうか? ドキュメントと実装がずれているかもしれません。each(function(){}) の中の if …. else if … が親と子、それぞれで真になっちゃうんですよね…

    単純に、親ディレクトリの画像入れ替えは必要ない、ということなら、

    setImgFlg = c.changeImgParents;

    をコメントアウトすれば、お望みの動作になるかもしれません。最後のところのアルゴリズムをちょっと変更する必要があるかもしれませんが、未検証です。

    /* WordPress から遠く離れて… */

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >kjmtshさん
    回答有り難うございます。
    仰る通りにソースを弄ってみたのですが、ダメでした。
    元のyuga.jsのサイトを見ると一部変えるだけで親ディレクトリへのハイライトは消えそうなのですがね…他にも色々弄ったのですが、現在表示されいるページのハイライトがされなくなるか、親ページと両方ハイライトされるかに偏ってしまうので、もう少しソースの書き換えが必要なのかもしれません。
    もうちょっと時間をかけてみてみます。まあ、yuga.jsでなくてもハイライトされるjsならなんでもいいので、他のものも探してみます。

    トピック投稿者 h-pine-h

    (@h-pine-h)

    今までjsの問題かと思っていましたが、各ページのhtmlを見ていて気になることがありました。
    以下htmlメニュー部分ですが
    ———————————————–
    <nav>

    </nav>
    ————————————————-
    一番はじめのaboutのページを開くと、メニュー部分にclass=”current”とつくのですが、他のメニューは、ハイライトされていてもcurrentとなりません。これが原因で、jsを弄っても、全てハイライトされないか、aboutと両方ハイライトされてしまうのではと思います。
    メニューは変えられないので、jsの書き換えですよね…。

    @yuga.js の作者さん(もし、読んでいたら)
    すいません、間違いを書いちゃいました、お許しを。以下、訂正です。

    @h-pine-h さん
    ちょっとテストしてみました。現行のWordPressに付属の jQuery (1.10.2)を使うと、

    1. 付属の thickbox.js がエラーで止まる。
    2. event.returnValue が depricated だから、event.preventDefault() を使えと言われる。

    となりますが、yuga.js そのものの動作は作者の意図した通りになっているようです。セレクタ判定が jQuery のバージョンの影響を受けている可能性があるので、範囲を限定する必要がありますが…

    1. はもうどうにもなりませんので、thickbox.js 本体をラップするしかないと思います。

    jQuery.noConflict();
    (function($) {
        ここに本体
    })(jQuery);

    一番はじめのaboutのページを開くと、メニュー部分にclass=”current”とつく

    これが正しい動作ですが、

    他のメニューは、ハイライトされていてもcurrentとなりません

    親でも current でもないのに、ハイライト用画像が表示されているなら、異常です。

    一つ確認ですが、メニューのタグはこのようになっていますか?

    <li id="about"><a href="http://example.com/about/"><img src="......">about</a></li>

    画像の書き換え条件は、

    1. <a>要素の href が現在のスラッグと同じであること(完全一致)
    2. または、現在のスラッグの一つ上のディレクトリに見える(上の例だと、’about/’ をなくしたもの)
    3. <img>要素が<a>内側にある

    つまり、

    <li id="about"><img src="..."><a href="http://example.com/about/">about</a></li>

    のようになっていると、正常動作しません。

    selfLinkAreaSelector:'body'

    を、

    selfLinkAreaSelector: 'nav'

    と変更して試してみてください。なお、

    changeImgParents:false

    は、ちゃんと動作するようです。

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >kjmtshさん
    実はyuga.jsも試したのですが、やはり作動はするのですが。トップのアバウトのページと現在表示されているページの両方がハイライトされてしまいました。今はyuga.jsに戻っておりますが、メニュー部分のhtmlは以下です。

    —————————————————–
    <nav>

    </nav>
    —————————————————–
    aboutのページが「現在のスラッグの一つ上のディレクトリに見える」にあたってしまうのでしょうか?静的なhtmlのときは、index.htmlだったので、他のページが表示されているとき同時に表示されなかったと思うのですが、この問題を解決するにはどうすればよろしいのでしょうか。

    ああ… これって、about ページが表示されているときですよね?

    <li id="about"><a href="現在のスラッグ">

    となるはずのところに、href 以下がないのですが、何か細工してますか? スクリプトは、href を探すようになっていますから、これがないのは致命的です。まずは、ここに正しいスラッグが表示されるようにしましょう。

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >kjmtshさん
    ここに記述すると、htmlが変換されてしまうのですね!hrefはあるのですが=のあと、トップページを示すスクリプトになってます。

    設定のところで、固定ページのaboutがフロントページとなっているからです!

    トピック投稿者 h-pine-h

    (@h-pine-h)

    —————————————————–

    <nav>
     <ul>
    <li id="about"><a href="<?php echo home_url('/'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/about.jpg"  alt="about 自己紹介"></a></li>
    <li id="flow"><a href="http://hpineh0913.com/portfolio_hm/flow"><img src="<?php bloginfo('template_url'); ?>/images/flow.jpg"  alt="flow 制作の流れ"></a></li>
    <li id="works"><a href="http://hpineh0913.com/portfolio_hm/works/works"><img src="<?php bloginfo('template_url'); ?>/images/works.jpg"  alt="works 制作実績"></a></li>
    <li id="contact"><a href="http://hpineh0913.com/portfolio_hm/contact"><img src="<?php bloginfo('template_url'); ?>/images/contact.jpg"  alt="contact お問い合わせ"></a></li>
    </ul>
    </nav>

    本当はブラウザの「ソースを表示」で見られるものがほしかったのですが、とりあえず、アンカーがあって、その内側に<img>タグがあることはわかりました。

    何が動作していないのか、実験してみましょうか。yuga.js も thickbox.js も外して、jquery だけ読み込み、下のコードをテンプレートファイルのbodyに書き込んでみてください。現在表示されているページのメニュー項目の画像が変わったら成功、そうでなければ、失敗です。

    <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('nav a[href]').each(function() {
        permalink = this.getAttribute('href');
        slug = location.href;
        if (permalink == slug) {
          $(this).addClass('current');
          $(this).find('img').each(function() {
            newSource = $(this).attr('src').replace(new RegExp('(_cr)?(\.gif|\.jpg|\.png)$'), '_cr'+'$2');
            $(this).attr('src', newSource);
          });
        }
      });
    });
    </script>
    トピック投稿者 h-pine-h

    (@h-pine-h)

    >kjmtshさん

    仰られたとおりに書いたのですが、なぜかaboutの時だけcurrentがつくようです。下記はaboutのページを開いた時のFirebugで見たソースです。

    <nav>
    <ul>
    <li id="about">
    <a class="current" href="http://hpineh0913.com/portfolio_hm/">
    <img alt="about 自己紹介" src="http://hpineh0913.com/portfolio_hm/wp-content/themes/portfolio/images/about_cr.jpg">
    </a>
    </li>
    <li id="flow">
    <a href="http://hpineh0913.com/portfolio_hm/flow">
    <img alt="flow 制作の流れ" src="http://hpineh0913.com/portfolio_hm/wp-content/themes/portfolio/images/flow.jpg">
    </a>
    </li>
    <li id="works">
    <a href="http://hpineh0913.com/portfolio_hm/works/works">
    <img alt="works 制作実績" src="http://hpineh0913.com/portfolio_hm/wp-content/themes/portfolio/images/works.jpg">
    </a>
    </li>
    <li id="contact">
    <a href="http://hpineh0913.com/portfolio_hm/contact">
    <img alt="contact お問い合わせ" src="http://hpineh0913.com/portfolio_hm/wp-content/themes/portfolio/images/contact.jpg">
    </a>
    </li>
    </ul>
    </nav>

    ちゃんと動作しますね。aboutページは正常動作です。今度は、flowページを表示したときにどうなっているか、教えてください。flow ページの行だけでかまいません。

    このとき、ブラウザのアドレスバーにどんなアドレスが表示されているかも知りたいです。

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • トピック「jsが作動していないかもしれません。」には新たに返信することはできません。