Wordpress 中的自定义导航栏主题

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

您需要注册一个菜单：

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

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

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

You will need to add this code in your theme’s template file where you want to display your 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 中的自定义导航栏主题

Custom navbar theme in Wordpress

html

css

wordpress

nav

navbar