Question

我在php文件和css文件中设计了一个菜单.. 它的外观如下：

<div class = "menu3">

<ul>    

    <div id="menu2">

    <li><a href="#">something11</a>

        <ul>

            <li><a href="#">something</a></li>

            <li><a href="#">something</a></li>

            <li><a href="#">something</a></li>

        </ul>

    </li>

    </div>  

    <li><a href="#">something</a></li>

    <li><a href="#">something</a></li>

    <li><a href="#">something</a></li>

    <li><a href="#">something</a></li>

    <li><a href="#">something</a></li>

    <li><a href="#">something</a></li>

    <li><a href="#">something</a></li>



</ul>

</div>

<div id="header_wrapper">

</div>

</div>

</body>

</html>

<script>

$(function() {

      $('#header_wrapper').hide();

      $("#menu2").mouseenter(function() {

      $("#header_wrapper").show();

            }).mouseleave(function() {

      $("#header_wrapper").hide();

});

});



    $(function() {

      $("#header_wrapper").mouseenter(function() {

      $("#header_wrapper").show();

            }).mouseleave(function() {

      $("#header_wrapper").hide();

});

});

</script>

and the css:

    .menu3 ul ul {

display: none;

}

.menu3 ul li:hover > ul {

display: inline;

}

.menu3{

width:1388px;   

height:36px;

margin-top: -16px;

margin-left: -8px;

background-color:black;

}

.menu3 ul {

list-style: none;

position: relative;

margin-left: 250px;

line-height:35px;

}

.menu3 ul:after {

content: ""; clear: both; display: inline;

}

.menu3 ul li {

float: left;

}

.menu3 ul li:hover {

color:gray;

}



.menu3 ul li a:hover{

color:gray; 

}

.menu3 ul li a {

display: inline; padding: 0 6px;

color: white; text-decoration: none;

font-weight: bolder; font-size: 15px;

}



#menu2 li a:hover{

color:gray; 

}

#menu2 li a {

display: inline; /*padding: 0 6px;*/

color: white; text-decoration: none;

font-weight: bolder; font-size: 15px;

}

.menu3 ul ul {

background-color:black;

position: absolute;

margin-left: -66px;

line-height: 20px;

}

.menu3 ul ul li {

float: none; 

position: relative;

}

.menu3 ul li {

float: left; 

position: relative;

}

.menu3 ul ul li a {

padding: 15px 40px; 

}   

.menu3 ul ul li:hover { 

color:gray;

}   

#header_wrapper

{

background-color: black;

width: 1388px;

height: 150px;

margin-top: 0px;

float: left;

margin-left: -8px;

}

问题是我不知道如何将这些文件添加到主题中，我不知道如何将它们放在代码中（header.php / function.php）我真的不知道怎么做，我只是想删除当前左侧菜单，并把我创建的新菜单我创建的代码有一种方法吗？谢谢你的帮助！

Answer 1

我明白你的需要。您想将您的html菜单转换为wordpress菜单。你必须使用wp_nav_menu()这是

Tutorial

Codex Tutorial

Answer 2

<div id="menu2"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </div>

函数wp_nav_menu将动态创建菜单从后端添加页面，你会在前端看到它们将css添加到style.css

将新设计的菜单添加到wordpress

2 个答案: