web-dev-qa-db-ja.com

Urlでdiv -idsを使用して特定の投稿にジャンプする方法...末尾のスラッシュが原因ですか?

私のサイト上のいくつかのリンクはカテゴリページ上のコンテキストで - ユーザーを特定の投稿に導きます

WP以外のサイトでは、これは次のようにURLに#example-div-idを含めることで簡単に実現できます。

http://www.example.com#example-div-id

しかしWP環境では、このURLは機能しません

http://www.example.com/?cat=15#post-170

これは(誤って)ブラウザウィンドウをページの最後にジャンプします。

しかし、これはうまくいきます ...ページをロードしてページをリロードした後に、末尾のスラッシュを手動で削除します。ブラウザウィンドウは適切なdiv、またはpostにジャンプします。

http://www.example.com?cat=15#post-170

これがなぜなのか誰かが知っていますか?または、末尾のスラッシュを削除するためのWPの取得方法末尾のスラッシュを削除しても安全ですか?

更新

私はアンカージャンプを容易にするためにかなりパーマリンクを実装して、以下のEAMannの解決策を使ってみました。達成された結果は私のポストオーダーと子供のカテゴリーの除外を完全に破った。私のナビゲーションはカテゴリベースです。ページは使用しませんが、ナビゲーションにはカテゴリ名を使用します。各「ページ」は、実際にはカテゴリからの投稿を表示するカテゴリアーカイブです。私が%category%で始まるパーマリンクについて読んだことは、パーマリンクをまとめて避けることにつながります。パーマリンクを年やポストIDから始めたくないのは確かです。私のサイトでは意味がありません。

意図された錯覚がカテゴリ名が実際にこのビジネスサイトのページであるということである場合、http://www.example.com/category/my-categoryhttp://www.example.com/2009/my-categoryよりもプロフェッショナルで「普通」に見えます。

それで、アンカージャンプがうまくいかない理由は他にもあると思います。

更新#2

(OPへのEAMannのコメントに直接応えて)私のサイトはほとんどの部分で静的なコンテンツを表示するビジネスWebサイトです。いくつかの分野はポートフォリオの仕事を特色としており、ブログのセクションがあります。このサイトはカテゴリベースのナビゲーションを使用しています。すべてのサイトコンテンツは投稿として書かれています。各投稿は、投稿が表示される場所を決定するカテゴリに関連付けられています。サイトナビゲーションメニューはwp_list_categories()で作成されています。カテゴリをクリックするとカテゴリアーカイブが開き、そのカテゴリのすべての投稿が表示されます。

私は現在デフォルトのパーマリンク構造を使用しています。
http://www.example.com/?cat=15はカテゴリページを示しています。

更新#3

さらに調査した結果、私がページ上部にスライドショーを表示するために使用しているjQueryプラグイン "innerfade"が原因のようです。末尾のスラッシュとは関係ありません。間違った道を進んでください。

私がプラグインのjsファイルを含むphpをコメントアウトした場合、アンカージャンプはうまく機能します。私は、ページの内容をJavaScriptで操作することでジャンプが加速していると思います。私は$(window).scrollTo();を使って問題を回避しました。

皆さんの時間に感謝します。

1
kevtrout

私が私の質問に対する更新で述べたように...ページを扱っている他のJavaScriptはアンカージャンプと衝突します。衝突を回避するためにmorejsを暗示しました。 URLは以前とほぼ同じに見えますが、ポンド記号の前にパラメータ名が挿入されています。

http://www.example.com/?cat=15&hi=#post-170

しかし、URLパラメータを取得するにはjQuery-Howtoの 'plugin'を使用します。

$.extend({
    getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.Push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
},
getUrlVar: function(name){
            return $.getUrlVars()[name];
        }
});

'hi' URLパラメータに割り当てられている投稿番号を取得し、同じIDを持つ投稿の上の20pxまでスクロールします。

 //'hi' var used to jump to anchor          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //scroll to link or search results if url var 'hi' is present
        $(window).scrollTop($(hi).position().top-20); 

上記のjqueryプラグインコードと私のカスタムコードは、header.phpに含まれている私のjavascriptファイルに入ります。

0
kevtrout

まず、デフォルトのクエリ文字列構造の上に " pretty permalink "を使うことをお勧めします。これによりgetgoからあなたの問題の大部分が取り除かれます。 http://www.example.com/?cat=15#post-170のURLがhttp://www.example.com/category/category-slug/#post-170に変わり、ブラウザはページ内の投稿の位置に正しく移動します。

それは言った...はい、あなたは末尾のスラッシュを削除することができます。トリックは.htaccessファイルにルールを追加することです:

#remove trailing slashes
RewriteCond %{HTTP_Host} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_Host}/$1 [R=301,L]

(これは Drupalチュートリアル から同じことをしています...)

2
EAMann