web-dev-qa-db-ja.com

カスタムメニューのリンクに＃ハッシュを追加します。

私はすべての私のページのコンテンツをロードする静的フロントページを作成しました。これで通常のカスタムメニューができましたが、リンクはページを参照しています。例えば、http://example.com/about

今度は http://example.com/#about を使用して、ページ自体にリンクを設定します。

私は私が使用するカスタムウォーカーを持っています、そして私は次のコードを試しました：

$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( get_bloginfo('url').'#'.$item->title ) .'"' : '';

ホームリンク自体を除いて、これは問題なく動作します。ホームは http://example.com/#home にリンクしていますが、そのリンク先は http://example.com/# にリンクするだけです。

追加するのに$item->titleを使うことができる何か別のものがありますか。

-

あなたが私が単一のページを作成するのに使用する方法を知りたいならば：
ワードプレスで最新の「単一ページ」のhtml5 css3レイアウトを作成する

更新

私がしたことを皆さんに伝えたいのですが、誰かに役立つかもしれません。

ページは次のように構成されています。

Home      (public)  -> cutom menu item -> [link:#][label:home]
portfolio (private) -> cutom menu item -> [link:#portfolio][label:portfolio]
contact   (private) -> cutom menu item -> [link:#contact][label:contact]
blog      (public)  -> page menu item  -> [link:blog][label:blog]

ホームとブログはインデックス化されて表示されます。ポートフォリオと連絡先はfront_page.phpである家にロードされます。

相対リンク を使用していますが、絶対パスではありません。HTML出力はhref = "＃contact"になります。

このようにすると、ブログページで競合するようになり、リンクは次のようになります。
http://example.com/blog/#contact

私たちはそれが欲しくない、私たちはただ欲しい
http://example.com/#contact

デフォルトのウォーカーでは、絶対パスで編集を編集します。テンプレートをもう少し動的にするためだけにここで行います。

if($item->object == 'custom'){
    $attributes .= ! empty( $item->url ) ? ' href="' .
    esc_attr(get_bloginfo('url').'/'.$item->url ) .'"' : '';
}else{
    $attributes .= ! empty( $item->url ) ? ' href="' . 
    esc_attr( $item->url ) .'"' : '';
}

完全な歩行者への情報源はここにあります： メニューアイテムの説明？ wp_nav_menu（）のカスタムウォーカー

今度は次のことです：

  1. フロントページでリンクがクリックされたときにNiceスクロール効果（jquery scrollto）を使用する
  2. ブログのリンクがクリックされたときにブログにリダイレクトする
  3. ブログページでハッシュリンクがクリックされたときに正しいセクションにリダイレクトする。

jQueryスクリプト（アンカーまでスクロール）：

$(document).ready(function() {
  $('.menu-item-object-custom a').bind('click', function(e) {
    e.preventDefault();
    var parts = ($(this).attr("href")).split("#");
    var target = '#' + parts[1];

    if($('body.home').length){
      var moveto = $(target).length ? $(target).offset().top : 0;
      $('html, body').stop().animate({ scrollTop: moveto }, 1500, function() {
        location.hash = target;
      });
      return false;
    }else{
        window.location = $(this).attr("href");
    }
  });
});

ブラウザ内のURLも変更されるため、戻るボタンも機能し、簡単にブックマークができることに注意してください。

以下のすべての提案とインスピレーションをありがとう！そして、私は誰かがこれを使えるように願っています。

theme-developmentmenustemplates
3
Saif Bechan

後藤

外観 - >メニュー - >新しいメニューを作成 - >カスタムリンクとしてあなたのリンクを追加

1
Giri

メニューのクリックをトラップしてページをスクロールすることで、JavaScriptでそれを実現できます。これは、リンクのタイトルをh1の内容に一致させ、それにページをスクロールするjQueryを使った例です。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('ul#main-menu a').click(function(){
        thisTitle = $(this).attr('title');
        $('html,body').animate({
            scrollTop: $("h1:contains('"+ thisTitle +"')").offset().top
        },'slow');
        return false;                                  
    });
});
</script>

あなたのメニュー...

<ul id="main-menu">
    <li><a href="/about/" title="About">About</a></li>
</ul>

それからページのどこかにあなたのタイトルを….

<h1>About</h1>

もちろんJavaScriptを有効にする必要がありますが、訪問者がjsを有効にせずに直接ページに移動することはまれに、個々のページをレンダリングするための代替テンプレートを使用してテーマを設定できます。これらのページが検索エンジンによってインデックスされないようにしてください。

0
Milo

カスタムナビゲーションメニューの管理ページでは、4つの追加プロパティを設定できます（ページ上部の[画面オプション]でそれらを有効にすることでアクセスできます）。

  • リンク先
  • CSSクラス
  • リンク関係（XFN）
  • 説明

ただし、フロントページを例外として使用するだけの場合は、リンクを確認するほうが簡単ではなく、フロントページの場合はタイトルを使用しないでください。

0
Jan Fabry