トップレベルのメニュー項目にリンクを持たず、リンクされたサブメニューを作成する方法

私は水平メニューを構築していますが、そのメニューの一部のエントリにはドロップダウン（サブメニュー）がありますが、そうでないものもあります。サブメニューを持つものは実際にはページではありません。それらは単にドロップダウンのガイドとなることを目的としています。

たとえば、水平メニューは次のようになります。

ホーム| 私達について| 製品| 道順| 接触

そして、 "products" liアイテムは、その下の垂直ドロップダウンリストにリンクされた3つのページを持つことを意図しているので、 "products"自体は実際にはページを表しません。

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

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

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

私にはいくつかのアイデアがあります：

1. #何も返さないカスタムリンクを設定します
2. アイテムにカスタムクラスを追加し、jQueryを使用してリンクを削除します。
3. jQueryメソッドと同等のPHPを使用する
4. Disable Parent Menu Linkプラグインを使用します（またはそれを分解して独自のプラグインを作成します）。

プラグインなどを使用せずにそれを行う最も簡単な方法は、WordPressの「メニュー」機能を使用することです。WordPress 4.8の手順は次のとおりです。

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

私が思いついた最も簡単な方法は、リンク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
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );

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

私はアクティブにCSSクラスを >メニューで画面のオプションを> CSSクラスは、それから私は、私はクラス「.nolink」を無効化したいとメニュー要素を与え、私のカスタムCSSパネルにコードのこの部分を追加しました：

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

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);

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

私はこのように解決しました：（テーマの）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要素を追加し、クリックを無効にします。

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

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

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

これにより、クリックが削除されます（アイテムのスタイルが解除されます）。この方法では、メニューでカスタムリンクを使用する必要はありません。

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 );

これは古いスレッドであることに感謝しますが、Wordpressでリンクをすばやく簡単に作成するには、リンクURLを次のようにすることです。

#_

ハッシュタグの後のアンダースコアに注意してください。このように、メニューがページを下にスクロールする（つまり修正される）場合、クリックしてもページの上部にジャンプせず、プラグイン/スクリプトを必要としません。

私はゲームに遅れていることに気付きますが、これらは私が使用する2つの方法です。

1）親メニュー項目を最初のサブ項目の複製にし、そのラベルを変更します。たとえば、「Products」の下の最初のアイテムが「Product 1」である場合、「Product 1」を親メニュー項目として使用し、そのラベルを「Products」に変更します。これにより、「Products」と「Product 1」の両方がページProduct 1につながります。

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

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

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. スパンCSSを編集して<a>、同じスタイルを取得することを忘れないでくださいcursor: context-menu;。

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

適切なHTML5を生成するソリューションは、2019年1月から次のことを行うことです。

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

これにより、<a>Menu</a>クリックできないリンクを表す正しい方法であるトップレベルのナビゲーションが生成されます。

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

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

はるかに簡単な解決策は、別の質問で見つけることができます。

管理メニュー-サブメニューページでトップレベルメニューを強調表示する（サブメニューを表示しない）

Askelonの答えを探してください。preg_replacesやjqueryを実行する必要なく、作業は完全に完了します。