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

수평 메뉴를 작성 중이며 해당 메뉴의 일부 항목에는 드롭 다운 (하위 메뉴)이 있으며 일부는 그렇지 않습니다. 하위 메뉴가있는 것은 실제로는 페이지가 아닙니다. 그것들은 드롭 다운을위한 가이드 일뿐입니다.

예를 들어 가로 메뉴는 다음과 같습니다.

홈 | 회사 소개 | 제품 | 오시는 길 | 접촉

그리고 "products"li 항목은 그 아래에 수직 드롭 다운 목록에 3 개의 페이지가 연결되어 있기 때문에 "products"자체는 실제로 페이지를 나타내지 않습니다. WP에서 어떻게 할 수 있습니까?

(정적 홈 및 내부 페이지가있는 WP를 CMS로 사용합니다. 고유 한 템플릿을 작성하고 CSS에서 메뉴의 스타일을 지정한 다음 메뉴를 functions.php에 등록한 후 템플릿에서 호출합니다.) WP에서 항목을 추가합니다. 페이지 목록 또는 사용자 정의 링크를 통한 메뉴. 그러나 "제품"을 연결하고 싶지 않습니다. 사용자 정의 링크에 링크를 추가하지 않으면 메뉴에 추가 할 수 없습니다.

이것은 메뉴 관리자를 통해 가능합니까 아니면 다른 방법으로 접근해야합니까?

도움을 주셔서 감사합니다!

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

1. #아무것도 반환하지 않는 사용자 정의 링크를 설정하십시오 .
2. 항목에 사용자 정의 클래스를 추가 한 다음 jQuery를 사용하여 링크를 제거하십시오.
3. jQuery 메소드와 동등한 PHP를 사용하십시오.
4. 부모 메뉴 링크 비활성화 플러그인을 사용하십시오 (또는 분리하여 직접 작성하십시오).

플러그인이나 다른 도구없이 가장 쉬운 방법은 워드 프레스의 "메뉴"기능을 사용하는 것입니다. 다음은 WordPress 4.8에 대한 지침입니다.

1. 워드 프레스 대시 보드에서 "모양-> 메뉴"로 이동하십시오.
2. "메뉴 편집"탭에서 "사용자 정의 링크"를 선택하십시오.
3. URL에 "#"을 입력하십시오 (따옴표 없음).
4. 링크 텍스트의 경우 드롭 다운 메뉴의 최상위 레벨에 원하는 텍스트를 입력하십시오.
5. "메뉴에 추가"버튼을 클릭하십시오
6. 메뉴 항목을 메뉴 내 원하는 위치로 드래그
7. 방금 추가 한 메뉴 항목의 경우 항목 오른쪽에있는 아래쪽 화살표를 클릭하십시오 (항목 왼쪽에 "사용자 정의 링크"가 표시됨)
8. URL에서 "#"을 제거하십시오. 이것은 모든 브라우저에서 링크를 일반 텍스트로 변환합니다.
9. "메뉴 저장"버튼을 클릭하십시오

내가 찾은 가장 간단한 방법은 링크 URL 값이 인 사용자 정의 링크 항목을 만드는 것입니다 #. 이것은 같은 페이지의 빈 해시로 사용자를 보내므로 기본적으로 아무데도 링크되지 않습니다.

그러나 자리 표시 자 링크에 빈 해시를 사용하면 몇 가지 부작용이 있습니다. 링크는 계속 표시되고 링크처럼 동작하므로 링크처럼 보이는 항목을 클릭 할 때 사용자를 혼란스럽게 할 수 있지만 아무 일도 일어나지 않습니다. 다른 효과는 빈 해시 링크를 클릭하면 기존 해시를 재정 의하여 사용자를 페이지 맨 위로 보냅니다. 어쨌든 페이지 상단에있는 메뉴는 그렇게 걱정하지 않을 수 있지만, 특히 바닥 글 메뉴 인 경우 페이지를 예상하지 않은 경우 페이지가 예기치 않게 점프 할 때 상당히 왜곡됩니다.

해결책은 빈 해시 방법을 코드와 결합하여 메뉴에서 빈 해시 링크가 사용되는시기를 감지 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 클래스 내가 클래스 ".nolink"을 비활성화하고 싶어하고 내 사용자 지정 CSS 패널에이 코드 조각을 추가 한 메뉴 요소를 준 다음 메뉴에서> 화면 옵션> 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을 다음과 같이 만드는 것입니다.

#_

해시 태그 뒤에 밑줄을 주목하십시오. 이렇게하면 메뉴가 페이지 아래로 스크롤되는 경우 (예 : 고정) 페이지를 클릭 할 때 페이지 상단으로 이동하지 않으며 플러그인 / 스크립트가 필요하지 않습니다.

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

1) 부모 메뉴 항목을 첫 번째 하위 항목의 복제본으로 만들고 레이블을 변경하십시오. 예를 들어 "Products"아래의 첫 번째 항목이 "Product 1"인 경우 "Product 1"을 상위 메뉴 항목으로 사용하고 레이블을 "Products"로 변경하십시오. 이렇게하면 "제품"과 "제품 1"이 모두 제품 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 필드에 대해 (따옴표없이). 클릭하면 페이지가 맨 위로 스크롤되지 않으므로 "#"을 사용하는 것보다이 방법이 더 좋습니다.

2019 년 1 월부터 올바른 HTML5를 생성하는 솔루션은 다음을 수행하는 것입니다.

1. URL을 #으로 설정하고 원하는 이름으로 맞춤 링크를 추가합니다. 두 필드 모두 필수입니다.
2. URL이 비어 있도록 새로 추가 된 사용자 정의 링크를 편집하십시오.
3. 변경 사항을 저장하십시오.

<a>Menu</a>클릭 할 수없는 링크를 나타내는 올바른 방법 인 최상위 탐색 메뉴가 생성 됩니다.

<a>순수한 CSS를 사용하여 모든 첫 번째 레벨 메뉴 항목 의 태그 에서 이벤트를 비활성화 할 수 있습니다 . .main-menu메뉴 이름에 따라 클래스 이름이 다를 수 있습니다.

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

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

관리 메뉴-하위 메뉴 페이지에있을 때 최상위 메뉴를 강조 표시합니다 (하위 메뉴 표시 안 함).

Askelon의 답변을 찾으십시오. preg_replaces 또는 jquery를 수행 할 필요없이 완벽하게 작동합니다.