个人中心
gpt4 book ai didi

javascript - Wordpress:Walker 类:尝试将下拉箭头添加到导航菜单

转载 作者：行者123 更新时间：2023-11-28 02:15:13 26 4
gpt4 key购买 nike

好的，我有一个 Walker 类(class)。我试图仅向具有子菜单的菜单项添加下拉箭头。

箭头图标:<br><span class="nav-desc" id="nav-desc-show"><i class="fa fa-caret-down" aria-hidden="true"></i> </span>

问题目前我得到了每个菜单项的箭头，因为我不确定如何更改它，所以它只显示带有子菜单的菜单项。

custom-primary-nav.php

<?php 

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu{
  function start_el(&$output, $item, $depth, $args){
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
       $class_names = $value = '';
       $classes = empty( $item->classes ) ? array() : (array) $item->classes;
       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

         $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

         /* adding the class name for sub menu custom - */
          // $output .= "\n$indent<ul class=\"sub-menu-about\">\n";


       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
      $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';


       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';



        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'><span data-hover="'. $item->title .'">';
        $item_output .=$args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
        $item_output .= $description.$args->link_after;

        /* Add span add in this nav menu - custom* */
        $item_output.= '<br><span class="nav-desc" id="nav-desc-show"><i class="fa fa-caret-down" aria-hidden="true"></i> </span>';

        $item_output .= '</span></a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

?>

Header.php

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package radian3
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'radian3' ); ?></a>



    <header id="masthead" class="site-header">
        <div class="header-wrap">
            <div class="site-branding">
                <?php the_custom_logo(); /* Gets the custom logo */ ?>
                <div class="site-branding-text">
                    <?php if ( is_front_page() && is_home() ) : ?>
                        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                    <?php else : ?>
                        <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                    <?php
                    endif;

                    $description = get_bloginfo( 'description', 'display' );
                    if ( $description || is_customize_preview() ) : ?>
                        <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
                    <?php
                    endif; ?>
                </div>
            </div><!-- .site-branding -->

            <nav id="site-navigation" class="main-navigation">
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'radian3' ); ?></button>
                <?php       
                    $walker = new Nav_Walker_Nav_Menu;

                    $args = array(
                        'theme_location' => 'primary',
                        'menu_id' => 'primary-menu',
                        'walker' => $walker

                    );
                    wp_nav_menu($args);
                ?>              
            </nav><!-- #site-navigation -->         
        </div>

    </header><!-- #masthead -->

    <div id="content" class="site-content">

最佳答案

也许试试这样的东西

if($depth && $args->has_children)
{
    /* Add span add in this nav menu - custom* */
    $item_output.= '<br><span class="nav-desc" id="nav-desc-show"><i class="fa fa-caret-down" aria-hidden="true"></i> </span>';
}

关于javascript - Wordpress:Walker 类:尝试将下拉箭头添加到导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48515579/

26 4 0
文章推荐： javascript - Bootstrap 轮播 - 一张一张显示多张幻灯片时出现问题
文章推荐： user-interface - 将很多东西放在一页上的最佳方法
文章推荐： java - 输出 HTML 或纯文本的 HTML + Javascript 渲染器？
文章推荐： javascript - HighCharts - 使饼图 100% 的 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com