Question

所以我正在使用wordpress构建自定义主题。使用试验和错误我已经设法弄清楚它的大部分但是我在创建自定义导航栏时遇到了困难。

基本上我将现有的网站从一般的PHP网站复制到wordpress，以便所有者可以更自由地修改它并拥有一个博客。他们希望它是他们自己网站的副本，所以我需要找到一种方法来实现他们的导航栏到wordpress，以便他们也可以通过wordpress动态添加页面。我主要是一个后端Web开发人员，所以这不是我的专长。

<nav class="header-submenu default-container" role="navigation">
    <div class="dropdown">
        <a href="../contact-us">CONTACT US</a>
        <a href="../our-process">OUR PROCESS</a>
        <a href="../who-we-are">WHO WE ARE</a>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">testpage<b class="caret"></b></a>
        <ul class="dropdown-menu multi-column columns-3 container-fluid">
                <div class="row">
                    <div class="col-sm-4">
                        <ul class="multi-column-dropdown">
                            <li><h3>Cat 1</h3></li>
                            <li class="divider"></li>
                            <li><a href="http://www.testsite.co.uk/testpage/1">1</a></li>
                            <li><a href="http://www.testsite.co.uk/testpage/2">2</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4">
                        <ul class="multi-column-dropdown">
                            <li><h3>Cat 2</h3></li>
                            <li class="divider"></li>
                            <li><a href="http://www.testsite.co.uk/testpage/3">3</a></li>
                            <li><a href="http://www.testsite.co.uk/testpage/4">4</a></li>
                            <li><a href="http://www.testsite.co.uk/testpage/5">5</a></li>
                            <li><a href="http://www.testsite.co.uk/testpage/6">6</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4">
                        <ul class="multi-column-dropdown">
                            <li><h3>Cat 3</h3></li>
                            <li class="divider"></li>
                            <li><a href="http://www.testsite.co.uk/testpage/7">7</a></li>
                            <li><a href="http://www.testsite.co.uk/testpage/8">8</a></li>
                        </ul>
                    </div>
                </div>
            </ul>

        <a class="signIn-button" href="http://testsite.co.uk/login.php">sign in</a>
        <a class="apply-btn" href="#apply-form">APPLY</a>
        <a class="call-btn" href="tel:00000000000">CALL US</a>
    </div>
</nav>

这是我的header.php中的导航栏，我对于从何处开始复制此内容感到非常不知所措。

Answer 1

您需要注册一个菜单：

要添加自定义导航菜单，首先需要注意新的导航菜单，方法是将此代码添加到主题的functions.php文件中。

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

然后你需要将它添加到你的主题：

您需要在主题的模板文件中添加此代码，以显示您的菜单。

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

在custom-menu-class下添加CSS。

这里有更多细节：http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

菜单中不同页面的实际条目将由管理界面中的菜单编辑工具管理。

如果您不在乎编辑菜单，只需将您已粘贴的菜单代码直接添加到主题中即可。

Wordpress中的自定义导航栏主题

1 个答案: