编辑wordpress菜单的HTML

Question

i want to change the default HTML of wordpress's nav in a my custom theme adding a caret in the li that has a sub menu. The default html looks like:

<ul id="menu-menu" class="nav navbar-nav">
    <li id="menu-item-98" class="classes"><a href="#">Normal item</a></li>

    <li id="menu-item-105" class="classes menu-item-has-children dropdown"><a href="#">Has a sub menu</a>
        <ul class="sub-menu">
            <li id="menu-item-113" class="classes"><a href="#">Sub menu item</a></li>
        </ul>
    </li>
</ul>

And I havo to change this in this form:

<ul id="menu-menu" class="nav navbar-nav">
    <li id="menu-item-98" class="classes"><a href="#">Normal item</a></li>

    <li id="menu-item-105" class="classes menu-item-has-children dropdown">
        <a href="#">
            Has a sub menu
            <!-- ADD THIS PART -->
            <span class="caret"></span> 
        </a>
        <ul class="sub-menu">
            <li id="menu-item-113" class="classes"><a href="#">Sub menu item</a></li>
        </ul>
    </li>
</ul>

I think that it's possible do something like this with php in function.php but I don't know how. Can you help me? Thanks in advice.

Answer 1

Add your submenu under Appearance --> Menus.

Then, you can use the Chrome/Firebug inspector to find the class/id of the UL for the submenu(s) you would like to add the caret to. Modify your child theme's style.css with something like the following:

ul .sub-menu { 
    list-style-image: url('caret.gif');
}