wp bootstrap navwalker

WP 부트스트랩 내비워커

메인 repo 브랜치에 있는 이 코드는 최신 표준에 맞추고 너무 오랫동안 남겨두었던 PR의 백로그를 병합 및 테스트하기 위해 대대적인 개편을 겪고 있습니다. 이 과정이 진행되는 동안 안정 버전을 위해 v4.3.0 태그를 사용하시기 바랍니다. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0

WordPress 내장 메뉴 관리자를 사용하여 사용자 정의 테마에서 Bootstrap 4 탐색 스타일을 완벽하게 구현하는 사용자 정의 WordPress Nav Walker 클래스입니다.

참고 사항

이는 부트스트랩 드롭다운 탐색을 활용하기 위해 올바른 구문과 CSS 클래스로 WordPress 테마 메뉴의 형식을 지정하기 위한 유틸리티 클래스입니다. 여기에는 필수 Bootstrap JS 및 CSS 파일이 포함되어 있지 않습니다. 수동으로 포함해야 합니다.

WordPress.org 테마 규정 준수

이 워커는 wordpress.org 테마 제출에 대한 모든 테마 검토 지침을 완벽하게 준수합니다. 규정을 준수하기 위해 수정이 필요하지 않지만 선택적으로 wp-bootstrap-navwalker 텍스트 도메인( fallback 기능에 두 번 표시됨)을 테마의 텍스트 도메인으로 바꿀 수 있습니다.

업그레이드 참고사항

Walker 버전 3과 버전 4 사이에 코드베이스가 크게 변경되었습니다. Walker 버전 4는 Bootstrap 4와 함께 작동하도록 제작되었으며 Bootstrap 3과의 하위 호환성 테스트는 수행되지 않았습니다. Bootstrap 3에 대한 별도의 분기는 여기에서 유지 관리됩니다: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/나무/v3-branch

가장 주목할만한 변경 사항 목록은 다음과 같습니다.

• 파일 이름은 변경되었으며 PHP 코딩 표준 명명 규칙에 더 잘 맞도록 class- 접두사가 붙었습니다.
  • 새 이름: class-wp-bootstrap-navwalker.php
  • 이전 이름: wp-bootstrap-navwalker.php
• 아이콘 및 링크 수정자 처리는 이제 Title 입력 대신 CSS Classes 메뉴 항목 입력을 통해 수행됩니다.
• 아이콘 전용 항목은 sr-only 클래스 이름과 함께 아이콘 클래스를 사용하여 가능합니다.

설치

WordPress 테마 폴더 /wp-content/themes/your-theme/ 에 class-wp-bootstrap-navwalker.php를 배치합니다.

WordPress 테마 function.php 파일( /wp-content/themes/your-theme/functions.php )을 열고 다음 코드를 추가하세요.

 /**
 * Register Custom Navigation Walker
 */
function register_navwalker (){
	require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );

위 코드에서 오류가 발생하면 이와 같은 검사를 사용하여 문제 진단에 도움이 되는 깨끗한 오류를 반환합니다.

 if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
    // File does not exist... return an error.
    return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
    // File exists... require it.
    require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}

또한 functions.php 파일에 새 메뉴가 없으면 선언해야 합니다.

 register_nav_menus ( array (
    ' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) );

용법

wp_nav_menu args 배열에 'walker' 항목을 추가하여 새 워커를 사용하려면 테마(종종 header.php 에서 발견됨)에 wp_nav_menu() 함수를 추가하거나 업데이트하세요.

 wp_nav_menu ( array (
    ' theme_location '  => ' primary ' ,
    ' depth '           => 2 , // 1 = no dropdowns, 2 = with dropdowns.
    ' container '       => ' div ' ,
    ' container_class ' => ' collapse navbar-collapse ' ,
    ' container_id '    => ' bs-example-navbar-collapse-1 ' ,
    ' menu_class '      => ' navbar-nav mr-auto ' ,
    ' fallback_cb '     => ' WP_Bootstrap_Navwalker::fallback ' ,
    ' walker '          => new WP_Bootstrap_Navwalker (),
) );

이제 부트스트랩 드롭다운 탐색을 구현하기 위한 올바른 구문과 클래스로 메뉴의 형식이 지정됩니다.

일반적으로 메뉴는 추가 마크업으로 래핑됩니다. 다음은 md 중단점에서 반응형 탐색을 위해 축소되는 fixed-top 메뉴의 예입니다.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu ( array (
            ' theme_location '    => ' primary ' ,
            ' depth '             => 2 ,
            ' container '         => ' div ' ,
            ' container_class '   => ' collapse navbar-collapse ' ,
            ' container_id '      => ' bs-example-navbar-collapse-1 ' ,
            ' menu_class '        => ' nav navbar-nav ' ,
            ' fallback_cb '       => ' WP_Bootstrap_Navwalker::fallback ' ,
            ' walker '            => new WP_Bootstrap_Navwalker (),
        ) );
        ?>
    </div>
</nav>

메뉴 스타일을 변경하려면 Bootstrap nav 클래스 이름을 menu_class 선언에 추가하세요.

탐색 클래스에 대한 자세한 내용은 Bootstrap 문서의 옵션을 검토하세요.

메뉴 표시

메뉴를 표시하려면 메뉴를 테마 위치와 연결해야 합니다. WordPress 메뉴 관리자에서 메뉴를 편집하는 동안 테마 위치 목록에서 테마 위치를 선택하면 됩니다.

이 워커를 탐색 메뉴의 기본 워커로 만들기

이 워커를 모든 메뉴의 기본 워커로 만드는 데 관심이 있었습니다. 이로 인해 예상치 못한 상황이 발생할 수 있지만 이 함수를 function.php 파일에 추가하면 이를 해결할 수 있습니다.

 function prefix_modify_nav_menu_args ( $ args ) {
    return array_merge ( $ args , array (
        ' walker ' => new WP_Bootstrap_Navwalker (),
    ) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );

단순히 워커를 업데이트하는 것만으로는 메뉴가 제대로 작동하도록 하는 데 충분하지 않을 수 있습니다. 래퍼나 추가 클래스를 추가해야 할 수도 있습니다. 위 함수를 통해서도 그렇게 할 수 있습니다.

Bootstrap 5와 함께 사용

부트스트랩 5는 네임스페이스화된 데이터 속성을 사용합니다. 이제 모든 data 속성에는 bs 중위로 포함됩니다. 새로운 속성은 이전 속성과 동일하게 작동합니다. 다음은 이름이 변경된 데이터 속성이 있는 위 예제의 메뉴 토글 버튼입니다.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
    <span class="navbar-toggler-icon"></span>
</button>

워커는 또한 start_el() 메서드를 통해 드롭다운 토글을 위한 데이터 속성을 추가합니다. 워커가 고정된 데이터 속성을 사용하도록 하려면 이를 function.php에 붙여넣으세요.

 add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
    if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
        if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
            unset( $ atts [ ' data-toggle ' ] );
            $ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
        }
    }
    return $ atts ;
}

메뉴 캐싱

일부 사이트에서는 페이지 요청마다 거의 변경되지 않는 큰 메뉴를 생성하는 것이 오버헤드이므로 피하고 싶을 수도 있습니다. 그러한 경우에는 메뉴 결과를 일시적으로 저장하는 방법을 제안해 드릴 수 있습니다.

이 방법으로 탐색 메뉴를 캐싱할 때 가장 큰 단점은 WP가 페이지 로드 시 현재 활성화된 항목을 결정하고 메뉴가 캐시되기 때문에 .current-menu-item 또는 .active 클래스를 현재 활성 항목에 쉽게 적용할 수 없다는 것입니다. 원래 캐시된 활성 페이지만 알고 있습니다.

대부분의 페이지 로드에서 메뉴 생성 시간을 제거하는 이점을 위해 이러한 단점을 참을 것인지 스스로 결정할 수 있습니다. Dave Clements의 이 기사를 따라가면 이 워커에 의해 생성된 탐색 메뉴를 어떻게 캐시했는지 확인할 수 있습니다: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/

이 작업을 수행할 때 결과가 페이지에 에코되는 대신 저장될 수 있도록 the wp_nav_menu() 호출에서 echo 인수를 FALSE로 설정해야 합니다.

참조:

• https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
• https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php

엑스트라

이 스크립트에는 WordPress 메뉴 UI를 통해 메뉴에서 Bootstrap 탐색 링크 모드를 사용하는 기능이 포함되어 있습니다. 비활성화된 링크, 드롭다운 헤더 및 드롭다운 구분선이 지원됩니다. 또한 Glyphicons 및 Font Awesome에 대한 아이콘 지원이 내장되어 있습니다(참고: 아이콘 스타일시트 또는 자산을 별도로 포함해야 합니다).

아이콘

링크에 아이콘을 추가하려면 메뉴 UI의 링크 CSS 클래스 필드에 Glyphicons 또는 Font Awesome 클래스 이름을 입력하기만 하면 walker 클래스가 나머지 작업을 수행합니다. IE glyphicons glyphicons-bullhorn 또는 fa fa-arrow-left 또는 fas fa-arrow-left .

아이콘 전용 항목

항목이 아이콘과 함께 표시되도록 하려면 아이콘 클래스 이름과 함께 항목 sr-only 적용하십시오. 그러면 링크 텍스트로 표시되는 텍스트만 숨겨집니다.

비활성화된 링크

비활성화된 링크를 설정하려면 메뉴 UI의 CSS 클래스 필드에 disabled 추가하면 Walker 클래스가 나머지 작업을 수행합니다. 참고: .disabled 클래스를 추가하는 것 외에도 링크 href 도 # 으로 변경되어 따라갈 수 있는 링크가 아닙니다.

드롭다운 헤더, 드롭다운 구분선 및 드롭다운 항목 텍스트

사용자 정의 링크를 추가하고 dropdown-header , dropdown-divider 또는 dropdown-item-text CSS 클래스 입력에 추가하여 헤더, 구분선 및 텍스트 전용 항목을 드롭다운 내에 추가할 수 있습니다. 참고: 이렇게 하면 항목의 href 제거되고 헤더의 경우 <span> 또는 구분선의 경우 <div> 로 변경됩니다.

Customizer 미리보기에 편집 바로가기가 없습니다.

wp_nav_menu() 에 대한 문서에 따르면 사용자 정의 워커를 메뉴에 적용하려면 사용자 정의 워커 클래스의 인스턴스를 제공해야 합니다. 인스턴스가 JSON 직렬화 가능하지 않기 때문에 메뉴 편집 바로 가기가 Customizer 미리 보기에 표시되지 않습니다. 이 문제를 해결하려면 다음을 수행하십시오.

1. wp_nav_menu 인수 배열의 'walker' 키 값으로 클래스 인스턴스 대신 클래스 이름 문자열을 제공합니다.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
-    'walker'          => new WP_Bootstrap_Navwalker(),
+    'walker'          => 'WP_Bootstrap_Navwalker',
) );

2. 이 필터를 functions.php 에 추가하여 클래스 인스턴스를 다시 추가하세요.

 function slug_provide_walker_instance ( $ args ) {
    if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
        $ args [ ' walker ' ] = new $ args [ ' walker ' ];
    }
    return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );

변경 내역

변경 로그를 참조하세요.