wp_nav_menu 변경 서브메뉴 클래스 이름?
아이를 바꿀 방법이 있을까요?<ul class="sub-menu">WordPress 자체에서 생성된 커스텀 클래스 이름으로 변경하시겠습니까?
나는 그 부모를 안다.<ul>이름을 삭제 또는 변경할 수 있습니다.'menu_class' => 'newname'.
나는 답을 찾을 수 없었다.나는 노력했다.'submenu_class' => 'customname'제가 보기에는 논리적으로 보이지만, 그건 분명 올바른 것이 아닙니다.
좋은 생각 있어?
옵션은 없지만 WordPress가 메뉴 HTML을 만드는 데 사용하는 '보행자' 개체를 확장할 수 있습니다. 한 가지 메서드만 재정의하면 됩니다.
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"my-sub-menu\">\n";
}
}
그럼 당신은 그냥 당신의 보행기의 예를 하나의 주장으로 넘기고wp_nav_menu다음과 같이 합니다.
'walker' => new My_Walker_Nav_Menu()
이것은 오래된 질문입니다.당신이 질문했을 때, 제가 언급할 솔루션이 이용 가능한지는 잘 모르겠습니다만, 언급할 가치가 있다고 생각합니다.필터를 추가하면 원하는 것을 얻을 수 있습니다.nav_menu_submenu_css_class아래 예를 참조해 주세요.교환할 수 있습니다.my-new-submenu-class원하는 클래스:
function my_nav_menu_submenu_css_class( $classes ) {
$classes[] = 'my-new-submenu-class';
return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );
옵션 선택 가능.
- 'echo' 인수를 false로 전환하면 클래스 이름을 바꿀 수 있습니다.
echo str_replace('sub-menu', 'menu menu_sub', wp_nav_menu( array(
'echo' => false,
'theme_location' => 'sidebar-menu',
'items_wrap' => '<ul class="menu menu_sidebar">%3$s</ul>'
) )
);
- WP 4.8이므로 nav_menu_submenu_css_class 필터를 사용할 수 있습니다.
add_filter( 'nav_menu_submenu_css_class', 'my_custom_submenu_classnames', 10, 3 );
/**
* Filters the CSS class(es) applied to a menu list element.
*
* @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
* @param stdClass $args An object of `wp_nav_menu()` arguments.
* @param int $depth Depth of menu item. Used for padding.
* @return string[]
*/
function my_custom_submenu_classnames( $classes, $args, $depth ) {
// Here we can additionally use menu arguments.
if ( 'header-menu' === $args->theme_location ) {
$default_class_name_key = array_search( 'sub-menu', $classes );
if ( false !== $default_class_name_key ) {
unset( $classes[ $default_class_name_key ] );
}
$classes[] = 'header-submenu';
$classes[] = "depth-{$depth}";
}
return $classes;
}
- 커스텀 메뉴 워커:
class My_Nav_Menu_Walker extends Walker_Nav_Menu {
/**
* Starts the list before the elements are added.
*
* @see Walker::start_lvl()
*
* @param string $output Used to append additional content (passed by reference).
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function start_lvl( &$output, $depth = 0, $args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
// ! You default class names.
$classes = array( 'sub-menu', 'my-class' );
// ! Example of using arguments.
if ( 'header-menu' === $args->theme_location ) {
$default_class_name_key = array_search( 'sub-menu', $classes );
if ( false !== $default_class_name_key ) {
unset( $classes[ $default_class_name_key ] );
}
$classes[] = 'header-submenu';
$classes[] = "depth-{$depth}";
}
/**
* Filters the CSS class(es) applied to a menu list element.
*
* @since 4.8.0
*
* @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
* @param stdClass $args An object of `wp_nav_menu()` arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = implode( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$output .= "{$n}{$indent}<ul{$class_names}>{$n}";
}
}
커스텀 워커가 있는 파일을 포함시켜 메뉴를 가리킵니다.
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'walker' => new My_Nav_Menu_Walker()
)
);
WordPress preg_replace 필터를 사용할 수 있습니다(테마 기능).php 파일)의 예:
function new_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="yourclass" /',$menu);
return $menu;
}
add_filter('wp_nav_menu','new_submenu_class');
다음은 리처드가 한 일에 대한 업데이트로 "심도" 지표를 추가했습니다.출력은 level-0, level-1, level-2 등입니다.
class UL_Class_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"level-".$depth."\">\n";
}
}
워커를 연장할 필요는 없습니다.이것으로 끝납니다.
function overrideSubmenuClasses( $classes ) {
$classes[] = 'myclass1';
$classes[] = 'myclass2';
return $classes;
}
add_action('nav_menu_submenu_css_class', 'overrideSubmenuClasses');
항상 그렇듯이, 사이트에 글을 쓰기 전에 오랜 시간 동안 찾아본 후, 여기에 글을 올린 지 1분 만에 해결책을 찾았습니다.
다른 사람이 찾을 수 있도록 여기서 공유하려고 했어요
//Add "parent" class to pages with subpages, change submenu class name, add depth class
class Prio_Walker extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
$GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
$GLOBALS['dd_depth'] = (int) $depth;
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"children level-".$depth."\">\n";
}
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function add_parent_css($classes, $item){
global $dd_depth, $dd_children;
$classes[] = 'depth'.$dd_depth;
if($dd_children)
$classes[] = 'parent';
return $classes;
}
//Add class to parent pages to show they have subpages (only for automatic wp_nav_menu)
function add_parent_class( $css_class, $page, $depth, $args )
{
if ( ! empty( $args['has_children'] ) )
$css_class[] = 'parent';
return $css_class;
}
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );
여기서 해결책을 찾았습니다.WordPress 지원 포럼의 솔루션
나는 변해야 했다.
function start_lvl(&$output, $depth)
대상:
function start_lvl( &$output, $depth = 0, $args = array() )
비호환성 오류가 발생했기 때문에:
Strict Standards: Declaration of My_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array)
이것은 당신에게 도움이 될 것이다.
메뉴 항목에 대한 부모 클래스 추가 방법
function wpdocs_add_menu_parent_class( $items ) {
$parents = array();
// Collect menu items with parents.
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
// Add class.
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = 'menu-parent-item';
}
}
return $items;
}
add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );
/**
* Add a parent CSS class for nav menu items.
* @param array $items The menu items, sorted by each menu item's menu order.
* @return array (maybe) modified parent CSS class.
*/
메뉴 항목에 조건부 클래스 추가
function wpdocs_special_nav_class( $classes, $item ) {
if ( is_single() && 'Blog' == $item->title ) {
// Notice you can change the conditional from is_single() and $item->title
$classes[] = "special-class";
}
return $classes;
}
add_filter( 'nav_menu_css_class' , 'wpdocs_special_nav_class' , 10, 2 );
후크를 사용하면 됩니다.
add_filter( 'nav_menu_submenu_css_class', 'some_function', 10, 3 );
function some_function( $classes, $args, $depth ){
foreach ( $classes as $key => $class ) {
if ( $class == 'sub-menu' ) {
$classes[ $key ] = 'my-sub-menu';
}
}
return $classes;
}
어디에
$classes(array) - The CSS classes that are applied to the menu <ul> element.
$args(stdClass) - An object of wp_nav_menu() arguments.
$depth(int) - Depth of menu item. Used for padding.
위의 경우 작은 변경이 필요하지만 변경할 수 없습니다.당신의 출력은 다음과 같습니다.
<ul>
<li id="menu-item-13" class="depth0 parent"><a href="#">About Us</a>
<ul class="children level-0">
<li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
<li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>
내가 찾고 있는 것
<ul>
<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
<ul class="children level-0">
<li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
<li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>
위의 하나에서 나는 부모 클래스를 부모 앵커 링크 안에 배치했다.<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
저는 당신의 cutomclass css 클래스 이름을 서브메뉴로 바꿀 것을 제안합니다.find 및 replace를 사용합니다.즉, find: .customclass replace with .sub-menu, 기능합니다.
기본 "sub-menu" 클래스 이름을 변경하는 방법은 다음과 같습니다.워드프레스 파일에서 변경할 수 있습니다.
location : www/project_name/wp-menu-menu-menu-matrix.php.
이 파일을 열고 49행에서 하위 메뉴 클래스의 이름을 사용자 지정 클래스로 변경합니다.
또는 하위 메뉴 옆에 사용자 지정 클래스를 추가할 수도 있습니다.
다 했어요.
그것은 나에게 효과가 있었다.워드프레스-4.4.1을 사용했습니다.
언급URL : https://stackoverflow.com/questions/5034826/wp-nav-menu-change-sub-menu-class-name
'programing' 카테고리의 다른 글
| Material-UI에서 대화상자의 높이를 설정하려면 어떻게 해야 합니까? (0) | 2023.02.21 |
|---|---|
| s3에서 가져온 이미지 표시 (0) | 2023.02.21 |
| plsql에서 변수가 null인지 확인합니다. (0) | 2023.02.21 |
| POJO를 트리모델에 직접 연재할 수 있는 방법이 있나요? (0) | 2023.02.21 |
| nginx가 있는 워드프레스 색인에서는 403이 금지되어 있으며, 나머지 페이지는 정상적으로 동작합니다. (0) | 2023.02.21 |