如何在带有链接的wordpress中将html菜单添加到自定义主题中

Question

<ul class="menu">
    <li>
        <a href="<?php echo home_url()?>">
            <img class="img-responsive" src="<?php echo get_bloginfo('template_url') ?>/images/bloom_logo.png" />
        </a>
    </li>
    <li style="visibility:hidden;">---</li>
    <li>
        <a href="<?php echo home_url()?>/cart.php" >
            <span class="glyphicon glyphicon-shopping-cart"></span>Cart
        </a>
    </li>
    <li><a href="<?php echo home_url()?>/index.php">Home</a></li>
    <li><a href="<?php echo home_url()?>/catalog.php">Catalog</a></li>
    <li><a href="<?php echo home_url()?>/blog.php">Blog</a></li>
    <li><a href="<?php echo home_url()?>/about_us.php">About Us</a></li>
</ul>

Answer 1

您可以使用 jQuery UI 快速创建一些样式化的菜单导航链接...

这是有人在这里做的一个例子：

JSFiddle

参考：How to make jQuery UI nav menu horizontal?

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>


.ui-menu { 
    overflow: hidden;
}
.ui-menu .ui-menu {
    overflow: visible !important;
}
.ui-menu > li { 
    float: left;
    display: block;
    width: auto !important;
}
.ui-menu ul li {
    display:block;
    float:none;
}
.ui-menu ul li ul {
    left:120px !important;
    width:100%;
}
.ui-menu ul li ul li {
    width:auto;
}
.ui-menu ul li ul li a {
    float:left;
}
.ui-menu > li {
    margin: 5px 5px !important;
    padding: 0 0 !important;
}
.ui-menu > li > a { 
    float: left;
    display: block;
    clear: both;
    overflow: hidden;
}
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li { 
    float: left;
    display: block;
}


$( "#nav" ).menu({position: {at: "left bottom"}});

你的问题很模糊，但这应该让你开始。