私はすべての私のページのコンテンツをロードする静的フロントページを作成しました。これで通常のカスタムメニューができましたが、リンクはページを参照しています。例えば、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()のカスタムウォーカー
$(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も変更されるため、戻るボタンも機能し、簡単にブックマークができることに注意してください。
以下のすべての提案とインスピレーションをありがとう!そして、私は誰かがこれを使えるように願っています。
後藤
外観 - >メニュー - >新しいメニューを作成 - >カスタムリンクとしてあなたのリンクを追加
メニューのクリックをトラップしてページをスクロールすることで、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を有効にせずに直接ページに移動することはまれに、個々のページをレンダリングするための代替テンプレートを使用してテーマを設定できます。これらのページが検索エンジンによってインデックスされないようにしてください。
カスタムナビゲーションメニューの管理ページでは、4つの追加プロパティを設定できます(ページ上部の[画面オプション]でそれらを有効にすることでアクセスできます)。
ただし、フロントページを例外として使用するだけの場合は、リンクを確認するほうが簡単ではなく、フロントページの場合はタイトルを使用しないでください。