简体   繁体   English

如何将HTML菜单转换为WordPress菜单(WordPress)

[英]How to convert html menu to WordPress menu (WordPress)

Guys, I have following codes in my html. 伙计们,我的HTML中有以下代码。 I'm using 320 bootstrap wp theme. 我正在使用320 bootstrap wp主题。 I just create a menu. 我只是创建一个菜单。 Its working. 它的工作。 But that above box is not moving to menu to menu. 但是上面的那个框并没有移到菜单之间。 How I do it? 我该怎么做?

For more explain. 更多解释。 Please visit below links. 请访问以下链接。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Tutorial - Cufon Font Script</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<!--CSS-->
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/color.css" rel="stylesheet" type="text/css" />
<link href="styles/noscript.css" rel="stylesheet" type="text/css" id="noscript" media="screen,all"  />
<!--End testimonial-->
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Ebrima_400-Ebrima_700.font.js"></script>
<script type="text/javascript">
     Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6')  ('.nivo-caption h1', {textShadow: '#000 2px 0px 2px'}) ('.nivo-caption .button');
</script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="js/lavalamp-config.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="wrapper-top">
                <div id="top">
                    <div id="top-left"><a href="index.html">
                        <img src="images/logo.png" alt="" width="223" height="58" />It's An Image</a></div><!-- #top-left -->
                    <div id="top-right">
                        <div id="nav">
                            <ul id="topnav">
                                    <li class="active"><a href="index.html" >Home</a></li>
                                    <li><a href="about.html">About Us</a>
                                    </li>
                                    <li><a href="services.html">Services</a>
                                    <ul>
                                        <li><a href="#">Services One</a></li>
                                        <li><a href="#">Services Two</a></li>
                                        <li><a href="#">Services Three</a></li>
                                        <li><a href="#">Services Four</a></li>
                                    </ul>
                                    </li>
                                    <li><a href="#">Portfolio</a>
                                        <ul>
                                            <li><a href="#">Portfolio One</a></li>
                                            <li><a href="#">Portfolio Two</a></li>
                                            <li><a href="#">Portfolio Three</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="contact.html">Contact</a></li>
                            </ul>
                            <!-- #topnav -->
                        </div><!-- #nav -->
                    </div><!-- #top-right -->
                </div><!-- #top -->
        </div><!-- #wrapper-top -->
    <script type="text/javascript"> Cufon.now(); </script> <!-- to fix cufon problems in IE browser -->
    <script type="text/javascript">jQuery('#noscript').remove();</script><!-- if javascript disable -->
</body>
</html>

To View That I Expect 查看我期望的

Explains 讲解

  1. You can see my updates viewing that link from dropbox. 您可以从Dropbox查看该链接,查看我的更新。
  2. You can see red box around css depth box. 您可以在CSS深度框周围看到红色框。
  3. It's moving well in html page html页面运行良好
  4. I want to do it in WP 我想在WP中做

Seeking your help here 在这里寻求帮助

There are two ways to create menus. 有两种创建菜单的方法。

  1. Using get_pages . 使用get_pages
  2. Using wordpress menu function 使用WordPress菜单功能

NO.1 1号

<ul>    
<?php
$topparentofcurrent = getTopParentPostID($post->ID);
$alltoppages = get_pages('parent=0&hierarchical=0&sort_column=menu_order&sort_order=ASC');
foreach($alltoppages as $pages){ ?>
Your html code here to repeat in loop.
<li><?php echo $pages->post_title ?></li>
<?php } ?>    
</ul>

No.2 2号

<div id="topMenu">
    <div id="access">
      <?php
            $args = array(
            'theme_location' => 'header_menu',
            'menu' => 'Main Menu',
             'sort_column' => 'menu_order',
             'container_class' => 'menu-header'

        );
        wp_nav_menu($args);
            ?>
    </div>
  </div>

Now you need to do styling in css only it will automatically show the parent child behavior. 现在,您只需要在CSS中进行样式设置,它将自动显示父子行为。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM