web-dev-qa-db-ja.com

どのようにトップレベルのメニュー項目をリンクさせず、サブメニューをリンクさせるのでしょうか。

私は水平メニューを作成しています、そしてそのメニューのいくつかのエントリはドロップダウン（サブメニュー）を持っています、そしていくつかは持っていません。サブメニューを持つものは実際にはページではありません。それらは単にドロップダウンのガイドになることを意図しています。

たとえば、水平メニューが次のようになっているとします。

ホーム|私達について製品|行き方|接触

そして "products" li項目はその下の縦のドロップダウンリストにリンクされた3ページを持つことを意図しています、それで "products"自体は実際にページを表していません、どうすればWPでできますか？

（私は静的なホームページと内部ページを持つCMSとしてWPを使用します。私は独自のテンプレートを作成し、CSSでメニューのスタイルを設定してからfunctions.phpでメニューを登録してテンプレートで呼び出します。 WPでは、ページのリストまたはカスタムリンクによってメニューにエントリを追加します。しかし、私は「製品」をリンクさせたくありません。カスタムリンクにリンクを追加しないと、メニューに追加できません。

これは管理者メニューを使って実行できますか、それとも他の方法でアプローチする必要がありますか。

助けてくれてありがとう！

menus
24
PVA

いくつか考えがあります。

  1. 何も返さないカスタムリンクを#に設定します
  2. アイテムにカスタムクラスを追加してから、jQueryを使用してリンクを削除します。
  3. jQueryメソッドと同等のPHPを使用
  4. 親メニューリンクを無効にする pluginを使用します（またはそれを分解して独自のものを作成します）
12
Brooke.

プラグインなしでそれをする最も簡単な方法はWordPressの "メニュー"機能を使うことです。これがWordPress 4.8の説明です。

  1. あなたのWordPressダッシュボードから、 "Appearance - > Menus"へ行きます。
  2. [メニューの編集]タブで、[カスタムリンク]を選択します。
  3. URLには「＃」を入力します（引用符なし）。
  4. リンクテキストには、ドロップダウンメニューの最上位に必要なテキストを入力します
  5. [メニューに追加]ボタンをクリックします
  6. メニュー項目をメニュー内の目的の位置にドラッグします
  7. 追加したばかりのメニュー項目の場合、項目の右側にある下向き矢印をクリックします（項目の左側に「カスタムリンク」と表示されます）。
  8. URLから「＃」を削除してください。これは - すべてのブラウザで - リンクをプレーンテキストに変換します。
  9. 「保存メニュー」ボタンをクリックしてください
22
GavinR

私が思いついた最も簡単な方法は、Link URLの値が#のカスタムリンクアイテムを作成することでした。これは同じページの空のハッシュにユーザを送ることなので、基本的にどこにもリンクしません。

ただし、プレースホルダーリンクに空のハッシュを使用すると、いくつかの副作用があります。リンクは表示されたままでリンクのように動作するため、ユーザーはリンクのように見えるものをクリックしても混乱する可能性がありますが、何も起こりません。もう1つの効果は、空のハッシュリンクをクリックすると既存のハッシュが上書きされ、ユーザーがページの先頭に移動することです。これは、とにかくページの一番上にあるメニューについてはそれほど心配ではないかもしれませんが、あなたがそれを期待していないときにページが予期せずにジャンプするとき、特にこれがフッターメニューのためであれば、かなり不快です。

解決策は、空のハッシュメソッドをコードの一部と組み合わせて、メニューで空のハッシュリンクが使用されていることを検出し、そのリンクからhref属性を完全に削除することです。 a属性を持たないhref要素は、 正しいHTML 5の方法です /プレースホルダーリンクを作成することです。

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
6
shea

これは私のために働いた：

私は CSS Classes をメニュー>画面オプション> CSSクラスの順に選択し、それから私はクラス ".nolink"を無効にしたいメニュー要素を与え、私のカスタムCSSパネルにこのコードを追加しました：

.nolink {
   pointer-events: none;
   cursor: default;
}
1
RickyBono

PHPアプローチを使う私はこのコードをfunctions.phpに追加しました：

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

これは、リンクをアイテムメニューのspan要素で、post_name == "contact"に置き換えます。これは、私が探していたものです。これを変更してメニューのタイトルやIDを確認したり、子メニュー項目があるかどうかを確認するためのコードを追加したりできます。

1
Sam Bull

これは古いスレッドですが、Wordpressでリンクを作成するためのすばやく汚い方法は、リンクURLを次のようにすることです。

#_

ハッシュタグの後のアンダースコアに注目してください。こうすれば、あなたのメニューがページを下にスクロールする（すなわち固定されている）場合、あなたはそれをクリックしてもページのトップにジャンプすることはなく、プラグインやスクリプトは必要ありません。

0
user1249523

1/2019から書いて、適切なHTML5を生成する解決策は以下をすることです。

  1. URLを＃に設定したカスタムリンクを追加し、好きな名前を付けます。両方のフィールドが必須です。
  2. URLが空になるように新しく追加されたカスタムリンクを編集します。
  3. 変更を保存してください。

これは、クリック不可リンクを表す正しい方法である<a>Menu</a>であるトップレベルナビゲーションを生成します。

0
DavGarcia
  1. カスタムリンクを＃に設定すると、何も返されません

  2. このフィルタを追加してください。

    add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );

function wpse_remove_empty_links( $menu ) {

    return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);

}

  3. <a>と同じスタイルになるようにspan CSSを編集します。cursor: context-menu;を忘れないでください。

0
calmohallag

「カスタムリンク」メニュー項目を作成し、「javascript :;」を追加します。 URLフィールドに（引用符なしで）入力します。クリックしてもページが上部にスクロールされないため、これは "＃"を使用するよりも優れた方法です。

0
Tahi Reu

私はこのようにして解決しました： header.php （あなたのテーマの）で私は探しました：

'link_before'     => '',
'link_after'      => '',

そして、

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

簡単に言うと、このスクリプトはその親リンクが "＃"で終わっているかどうかをチェックします。この場合、Aタグの内容の周りにspan要素を追加してクリックを無効にします。

それが役に立てば幸い ：-）

0
niente0

純粋なcssを使用して、すべての第一レベルのメニュー項目に対して<a>タグのイベントを無効にすることができます。 .main-menuクラスはあなたのメニューの命名に従って別の名前を持つかもしれません。

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}
0
Karl Adler

これはクリックを取り除きます（そしてアイテムのスタイルを解除します）。このように、あなたはあなたのメニューでカスタムの＃リンクを使う必要はありません。

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );
0
Doug Cassidy

他の人がここで示唆しているように、URLとして＃を使ってカスタムリンクメニュー項目を作成することができます。メニューに追加されたら＃を消去します。そして最後に、これらのリンクから実際のタグを取り除くためにこの単純な正規表現を使うことができます。

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
0
deweydb

私はゲームが遅れていることを実感しますが、これらは私が使う2つの方法です：

1）親メニュー項目を最初のサブ項目の複製にして、そのラベルを変更します。たとえば、 "Products"の下の最初の項目が "Product 1"の場合は、 "Product 1"を親メニュー項目として使用し、そのラベルを "Products"に変更します。そうすると、 "Products"と "Product 1"の両方からProduct 1ページが表示されます。

2）ProductsページがProduct 1にリダイレクトされるようにリダイレクトを追加します。このオプションの利点は、空白のProductsページを作成してPagesに階層リストを作成できることです。ページ、それらはリダイレクトされます。

0
Barry

外観に行き、そしてメニューをつけなさい。このセクションではメニュー構造の下に行き、ページを展開するために下向き矢印をクリックするとリンクを無効にするというボックスが表示されます。そのボックスをチェックして保存します。

0
Rob