トップレベルのメニュー項目にリンクを持たず、リンクされたサブメニューを作成するにはどうすればよいですか？

いくつかのアイデアがあります:

1. カスタムリンクを#に設定します.これは何も返しません
2. アイテムにカスタムクラスを追加し、jQueryを使用してリンクを削除します.
3. jQueryメソッドと同等のPHPを使用する
4. 親メニューリンクを無効にするプラグインを使用します(または分解します)自分で書いてください)

I have a few ideas:

1. Set the custom link to # which won't return anything
2. Add a custom class to the items and then use jQuery to remove the links.
3. Use a PHP equivalent to the jQuery method
4. Use the Disable Parent Menu Link plugin (or take it apart and write your own)

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

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

The easiest way to do it without a plugin or anything is to use the "Menus" function of WordPress. Here are the instructions for WordPress 4.8:

1. From your WordPress dashboard, go to "Appearance -> Menus"
2. In the "Edit Menus" tab, select "Custom Links"
3. For the URL, Enter "#" (no quotes)
4. For the link text, enter your desired text for the top level of your drop-down menu
5. Click the "Add to Menu" button
6. Drag the menu item to its desired position within your menu
7. For the menu item you just added, click the down arrow to the right of the item (it will read "custom link" to the left of the item)
8. Remove the "#" from the URL. This - in all browsers - will convert the link to plain text.
9. Click on the "Save Menu" button

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

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

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

 /**
 * 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 );
} );
 

The simplest method I came up with was to create a Custom Link item with the Link URL value of #. This is sending the user to an empty hash on the same page, so basically links nowhere.

However, there are some side-effects of using empty hashes for placeholder links. The link will still appear and behave like a link, so it could confuse a user when they are clicking on what appears to be a link but nothing happens. The other effect is that clicking on an empty hash link will override any existing hash, sending the user to the top of the page. This might not be so worrying for a menu which is at the top of the page anyway, but it is quite jarring when the page unexpectedly jumps when you are not expecting it, especially if this is for a footer menu.

The solution is to combine the empty hash method with a piece of code to detect when empty hash links are used in the menu and to remove the href attribute from that link entirely. An a element without a href attribute is the correct HTML 5 method of creating an placeholder link.

/**
 * 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;
}
 

This worked for me:

I activated CSS Classes in Menus > Screen Options > CSS Classes Then I gave the menu element that I wanted to deactivate the class ".nolink" and added this piece of code to my custom CSS panel:

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

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

Using the PHP approach I added this code to 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);

This will replace the link with a span element for the item menu with the post_name == "contact", which is what I was looking for. You can easily change that to check for the menu title or the ID, or add some code to check if it has any child menu items etc.

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

#_

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

Appreciate this is an old thread, but for a quick and dirty way of having a link in Wordpress is by making the link URL as:

#_

Notice the underscore after the hashtag. This way if your menu scrolls down the page (ie. fixed), you don't get a jump to the top of the page when clicking on it and doesn't require any plugins/script.

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

Create "Custom Links" menu item and add "javascript:;" (without quotes) for the URL field. This is better way than using "#" because it won't scroll your page to the top when clicked.

私はこの方法で解決しました:(あなたのテーマの) 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タグのコンテンツの周囲にスパン要素を追加して、クリックを無効にします.

お役に立てば幸いです:-)

I solved this way: in header.php (of your theme) I searched for:

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

and replaced with:

'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>',

In simple words, this script checks if its parent link ends with "#", in this case it adds a span element around the content of the A tag, that disables the click.

Hope it helps :-)

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

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

As others here have suggested you can create a custom link menu item with the # as its url. Then erase the # once it is added to the menu. And finally, you can use this simple regex to strip the actual tag from those links.

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

This will remove the click (and unstyle the item). This way, you dont have to use the custom # links in your menu.

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

ゲームに遅れていることに気づきましたが、次の2つの方法を使用しています.

1)親メニュー項目を最初のサブ項目の複製にし、そのラベルを変更します.たとえば、[商品]の下の最初のアイテムが[商品1]の場合、親メニューアイテムとして[商品1]を使用し、そのラベルを[商品]に変更します.そうすれば、「Products」と「Product1」の両方がProduct1ページに移動します.

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

I realize I'm late in the game, but these are the two methods I use:

1) Make the parent menu item a duplicate of the first sub-item, and change its label. For example, if the first item under "Products" is "Product 1", use "Product 1" as the parent menu item, then change its label to "Products". That way, both "Products" and "Product 1" will lead to the page Product 1.

2) Add a redirect so that the Products page is redirected to Product 1. The benefit of this option is that it allows you to create a blank Products page to create a hierarchical listing in Pages, but if anyone tries to go to the blank Products page, they will be redirected.

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

Go to Appearance, then click on menus. In this section go under menu structure and click on the arrow down to expand the page and you'll see a box that says disable link. Check that box and save.

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;を忘れないでください.

1. Set the custom link to # which won't return anything List item

2. Add this filter:

   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. Edit span CSS to get same style as <a>, don't forget cursor: context-menu;.

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

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

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

Writing from 1/2019, the solution that produces proper HTML5 is to do the following.

1. Add a Custom Link with the URL set to #, and whatever name you'd like. Both fields are required.
2. Edit the newly added Custom Link so that the URL is empty.
3. Save the changes.

This will produce a top level nav that is <a>Menu</a> which is the correct way to represent a non-clickable link.

純粋なCSSを使用して、すべての第1レベルのメニュー項目の<a>タグのイベントを無効にすることができます..main-menuクラスには、メニューの名前に応じて別の名前が付けられている場合があります.

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

You may disable the events on the <a> tag for all first level menu items using pure css. .main-menu class may have another name according to your menu naming.

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

前述のようにカスタムリンクメニューを作成します.ソースコードを表示し、サブメニューのhrefを探します(例:#mm-1).これをカスタムリンクのURLに貼り付けて、メニューを保存します.これにより、メニューテキストをタップしたときにモバイル版も機能するようになります.

Create a custom link menu as other as said. View the source code and look for the href of the submenu, for example: #mm-1. Paste this into the URL of the custom link and save the menu. This will make the mobile version work as well when you tap the menu text.

私のバージョンは次のようになります:

最初に、管理パネルのメニューの href フィールドの目的のリンクに#を入力するか、空のままにしてから、function.phpに入力します. テーマが追加されました:

 function replace_empty_menu_links($item_output、$item、$ depth、$ args){
 if($item-＆gt; url=='#'|| $item-＆gt; url==''){
    $item_output=sprintf( '％1 $ s＆lt;'. 'div'. '％2 $ s＆gt;％3 $ s％4 $ s％5 $ s＆lt;/'. 'div'. '＆gt;％6 $ s '、
      $ args-＆gt;before、
      $ attributes、
      $ args-＆gt; link_before、
      apply_filters( 'the_title'、$item-＆gt;title、$item-＆gt; ID)、
      $ args-＆gt; link_after、
      $ args-＆gt; after
    );
  }
  $item_outputを返します.
}
add_filter( 'walker_nav_menu_start_el'、 'replace_empty_menu_links'、10、4);
 

'div' は自分に合った要素に置き換えることができます.

これはバージョン5.3.2で機能します(このバージョンでテストされていますが、他のバージョンでも機能するはずです).

この形式では、すべての引数の動作 'before' 、 'after' 、 'link_before' 、 'link_after wp_nav_menu()の 'などは保持されます.

また、これはサブメニューでも機能します.

My version looks like this:

first, in the menu in the admin panel in the desired link in the href field put # or leave it empty, and then in function.php themes are added:

function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );

You can replace 'div' with any element that suits you.

This works for version 5.3.2 (tested in this version, but should work in others too).

In this form, the work of all arguments 'before', 'after', 'link_before', 'link_after', etc. from wp_nav_menu() is preserved.

Also, this works for sub-menus too.

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

管理メニュー-サブメニューページで(サブメニューを表示せずに)トップレベルメニューを強調表示します

アシュケロンの答えを探してください.preg_replacesやjqueryを実行しなくても、完全に機能します.

Much easier solution can be found on another question:

Admin Menu - Highlight top-level menu when on a sub-menu page (without showing sub-menu)

Look for Askelon's answer. Work's perfectly, without needing to do any preg_replaces or jquery.