에서 클래스를 추가하는 방법
사용하고 있다wp_nav_menu($args)덧붙이고 싶은 것은my_own_class에 대한 CSS 클래스명<li>요소.
다음과 같은 결과를 얻고 싶습니다.
<li class='my_own_class'><a href=''>Link</a>
어떻게 하는 거야?
커스텀 워커를 작성할 필요가 없습니다.추가 인수를 사용하여 nav_menu_css_class에 필터를 설정합니다.
예를 들어 다음과 같습니다.
$args = array(
'container' => '',
'theme_location'=> 'your-theme-loc',
'depth' => 1,
'fallback_cb' => false,
'add_li_class' => 'your-class-name1 your-class-name-2'
);
wp_nav_menu($args);
새로운 'add_li_class' 인수에 주목하십시오.
그리고 기능에 필터를 설정합니다.php
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
에 필터를 추가할 수 있습니다.nav_menu_css_class조작을 실행할 수 있습니다.php 파일.
예:
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'secondary') {
$classes[] = 'list-inline-item';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
문서: https://developer.wordpress.org/reference/hooks/nav_menu_css_class/
여기서 WordPress는 wp_nav_menu 링크에 커스텀클래스를 추가합니다.
또는 클래스를 추가할 수 있습니다.<li class='my_own_class'><a href=''>Link</a></li>관리 패널:
에 가다
YOURSITEURL/wp-admin/nav-menus.php열다.
SCREEN OPTIONS- 확인하다
CSS CLASSES, 그러면 알 수 있습니다.CSS Classes (optional)각 메뉴 링크의 필드.
에 클래스 추가<li>편집하지 않고 태그하다functions.php파일:
- [어피아란스]-> [메뉴]-> [화면옵션]-> [CSS 클래스]로 이동합니다.
- CSS Class 옵션이 유효하게 됩니다.
Menu Items창
이 필터 사용nav_menu_css_class아래와 같이
function add_classes_on_li($classes, $item, $args) {
$classes[] = 'nav-item';
return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);
갱신하다
특정 메뉴에서 이 필터를 사용하려면
if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu
$classes[] = "nav-item";
}
"클래스 추가"만 원하는 경우 기능을 사용하면 어떨까요?
<?php
echo str_replace( '<li class="', '<li class="myclass ',
wp_nav_menu(
array(
'theme_location' => 'main_menu',
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 1,
'echo' => false
)
)
);
?>
단일한 메뉴 또는 모든 메뉴에 클래스를 추가하는 메뉴에 대한 빠른 수정입니다.<li>요소 및 더 복잡한 메뉴에는 권장되지 않습니다.
이 답변들 중 어느 것도 실제로 질문에 답하지 못하는 것 같습니다.다음은 제 사이트에서 제목/이름으로 메뉴 항목을 대상으로 하는 것과 비슷한 것입니다.
function add_class_to_menu_item($sorted_menu_objects, $args) {
$theme_location = 'primary_menu'; // Name, ID, or Slug of the target menu location
$target_menu_title = 'Link'; // Name/Title of the menu item you want to target
$class_to_add = 'my_own_class'; // Class you want to add
if ($args->theme_location == $theme_location) {
foreach ($sorted_menu_objects as $key => $menu_object) {
if ($menu_object->title == $target_menu_title) {
$menu_object->classes[] = $class_to_add;
break; // Optional. Leave if you're only targeting one specific menu item
}
}
}
return $sorted_menu_objects;
}
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);
메뉴 인수를 쉽게 구현하기 위해 클래스를 추가했습니다.따라서 다음과 같이 커스터마이즈하여 기능에 포함할 수 있습니다.
include_once get_template_directory() . DIRECTORY_SEPARATOR . "your-directory" . DIRECTORY_SEPARATOR . "Menu.php";
<?php $menu = (new Menu('your-theme-location'))
->setMenuClass('your-menu')
->setMenuID('your-menu-id')
->setListClass('your-menu-class')
->setLinkClass('your-menu-link anchor') ?>
// Print your menu
<?php $menu->showMenu() ?>
<?php
class Menu
{
private $args = [
'theme_location' => '',
'container' => '',
'menu_id' => '',
'menu_class' => '',
'add_li_class' => '',
'link_class' => ''
];
public function __construct($themeLocation)
{
add_filter('nav_menu_css_class', [$this,'add_additional_class_on_li'], 1, 3);
add_filter( 'nav_menu_link_attributes', [$this,'add_menu_link_class'], 1, 3 );
$this->args['theme_location'] = $themeLocation;
}
public function wrapWithTag($tagName){
$this->args['container'] = $tagName;
return $this;
}
public function setMenuID($id)
{
$this->args['menu_id'] = $id;
return $this;
}
public function setMenuClass($class)
{
$this->args['menu_class'] = $class;
return $this;
}
public function setListClass($class)
{
$this->args['add_li_class'] = $class;
return $this;
}
public function setLinkClass($class)
{
$this->args['link_class'] = $class;
return $this;
}
public function showMenu()
{
return wp_nav_menu($this->args);
}
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
}
간단하게 사용할 수 있습니다.wp_nav_menu_itemsto 탐색 메뉴의 HTML 목록 내용을 필터링합니다.
디스플레이 탐색 메뉴
wp_nav_menu( array(
'theme_location' => 'parimary',
'container' => 'ul',
'menu_class'=> 'nav col-12 col-md-auto mb-2 justify-content-center mb-md-0',
'add_li_class' => 'your-class-name1 your-class-name-2',
) );
메뉴 등록
function thesportworship_register_menus(){
register_nav_menus( array(
'primary' => __( 'Main Menu', 'thesportworship' ),
) );
}
add_action( 'after_setup_theme', 'thesportworship_register_menus', 0 );
필터 적용
function add_additional_class($classes, $item, $args){
if(isset($args->add_li_class)){
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class', 1, 3);
<?php
echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
wp_nav_menu(
array(
'menu' => $nav_menu,
'container' => false,
'container_class' => false,
'menu_class' => false,
'items_wrap' => '%3$s',
'depth' => 1,
'echo' => false
)
)
);
?>
나에게 맞는 것은 Zuan 솔루션이다.Isset을 에 추가하는 것에 주의해 주세요.$args->add_li_class단,Notice: Undefined property: stdClass::$add_li_class만약 당신의 모든 재산에 대해 설정하지 않았다면wp_nav_menu()기능들.
이것은 나에게 효과가 있던 기능입니다.
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
// 메인 메뉴에서 번역 삭제
function wpdocs_channel_nav_class($classes, $item, $args){
{
if ('primary' === $args->theme_location) {
$classes[] = "notranslate";
}
return $classes;
}
add_filter('nav_menu_css_class', 'wpdocs_channel_nav_class', 10, 4);
이렇게 하면 새로운 클래스를 기존 클래스 배열에 쉽게 추가할 수 있습니다.Menu wrapp
이렇게 해서 WordPress의 MainMenu와 클래스를 li에 추가했습니다.
<?php
$defaults = array( 'menu' => 'mainmenu',
'container' => false,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="navbar-nav" id="myTab">%3$s</ul>',
'add_li_class' => 'nav-item',
'theme_location' => 'mainmenu' );
wp_nav_menu( $defaults ); ?>
이 코드를 함수에 사용합니다.php
function li_new_class($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_li_class', 'li_new_class', 1, 3);
이것은 매우 간단한 방법으로 "li" cals"를 호출하고 "any class"를 쉽게 치환할 수 있습니다.지시에 따르세요.
네비게이션 영역에서 이 코드를 사용합니다.
<?php
$consult_menu = wp_nav_menu(array(
'theme_location' => 'topmenu',
'menu_id' => 'menu',
'menu_class' => 'navbar-nav m-auto',
'echo' => false
)
);
$consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
echo $consult_menu;
?>
그런 다음 브라우저에서 코드를 검사합니다.wp default class를 찾아 str_replace("default_class_here", new_li_class_here, $consult_menu"를 바꿉니다.주의: $consult_menu는 제 테마명입니다.여기서는 어떤 이름이라도 사용하실 수 있습니다.
walker menu직접 추가할 수 없습니다. javascript javascript로 수 .
$('#menu > li').addClass('class_name');
LI에 직접 클래스를 추가할 수는 없습니다만, 조금 다르지만 (부모의 ul에 의해서) 특정의 방법으로 LI를 타겟으로 하지 않을 이유가 있습니까?
menu_class 파라미터와 menu_id 파라미터(LI의 UL 부모에 부가됨)를 사용하여 메뉴의 클래스 또는 ID를 설정하고 다음과 같이 CSS를 통해 li를 타깃으로 할 수 있습니다.
<?php wp_nav_menu('menu_id=mymenu'); ?>
CSS의 경우:
ul#mymenu li {
/* your styles here */
}
편집: 2013년 작성 당시에는 이것이 가장 쉽게 추가할 수 있는 방법이었지만, 이후 업데이트로 CSS 클래스를 직접 관리 내비게이션 에디터에 추가하는 기능이 추가되었습니다.자세한 내용은 최신 답변을 참조하십시오.
언급URL : https://stackoverflow.com/questions/14464505/how-to-add-class-in-li-using-wp-nav-menu-in-wordpress
'programing' 카테고리의 다른 글
| 어레이에서 $$hashKey 제거 (0) | 2023.03.29 |
|---|---|
| 리액트 linter Airbnb proptypes 어레이 (0) | 2023.03.29 |
| Twitter Bootstrap Navbar with AngularJS - 접기가 기능하지 않음 (0) | 2023.03.29 |
| Oracle에서 여러 행 연결 및 그룹화 (0) | 2023.03.29 |
| mongod, mac os x - 제한 경고 (0) | 2023.03.29 |