최상위 메뉴 항목에 링크가 없지만 링크 된 하위 메뉴가있는 방법은 무엇입니까?

몇 가지 아이디어가 있습니다.

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의 "메뉴"기능을 사용하는 것입니다.다음은 WordPress 4.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 값이 # 인 사용자 정의 링크 항목을 만드는 것이 었습니다. 이것은 사용자를 동일한 페이지의 빈 해시로 보내는 것이므로 기본적으로 링크가 없습니다.

그러나 자리 표시 자 링크에 빈 해시를 사용하면 몇 가지 부작용이 있습니다. 링크는 여전히 표시되고 링크처럼 작동하므로 사용자가 링크로 보이는 것을 클릭 할 때 혼동을 줄 수 있지만 아무 일도 일어나지 않습니다. 다른 효과는 빈 해시 링크를 클릭하면 기존 해시를 덮어 쓰고 사용자를 페이지 상단으로 보냅니다. 어쨌든 페이지 상단에있는 메뉴에 대해서는 그렇게 걱정하지 않을 수 있지만,예상치 못한 페이지가 예기치 않게 점프 할 때,특히 바닥 글 메뉴 인 경우에는 상당히 혼란 스럽습니다.

해결 방법은 빈 해시 방법을 코드와 결합하여 메뉴에서 빈 해시 링크가 사용되는 경우를 감지하고 해당 링크에서 href 속성을 ​​완전히 제거하는 것입니다. href 속성이없는 a 요소는 올바른 HTML 5 방법

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

이것은 내가 찾던post_name=="contact"가있는 항목 메뉴의 span 요소로 링크를 대체합니다.메뉴 제목이나 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 );

게임이 늦었다는 것을 알고 있지만 다음 두 가지 방법을 사용합니다.

1) 상위 메뉴 항목을 첫 번째 하위 항목의 복제본으로 만들고 레이블을 변경합니다.예를 들어 "제품"아래의 첫 번째 항목이 "제품 1"이면 "제품 1"을 상위 메뉴 항목으로 사용한 다음 레이블을 "제품"으로 변경합니다.이렇게하면 "제품"과 "제품 1"이 모두 제품 1 페이지로 연결됩니다.

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. <a>와 동일한 스타일을 얻기 위해 스팬 CSS를 편집합니다. 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를 사용하는 모든 첫 번째 수준 메뉴 항목에 대해 <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->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 );
 

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

다른 질문에서 훨씬 더 쉬운 해결책을 찾을 수 있습니다.

관리자 메뉴-하위 메뉴 페이지에서 최상위 메뉴 강조 표시 (하위 메뉴 표시 안 함)

Askelon의 대답을 찾으십시오.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.