Question

我正在尝试将Bootstrap示例站点转换为Wordpress模板并被困在导航

这是我的导航代码

from __future__ import print_function

和我的functions.php

 <!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
  <i class="fa fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
      <i class="fa fa-times"></i>
    </a>
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#top">Start Bootstrap</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#top">Home</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#contact" onclick=$( "#menu-
close").click();>Contact</a>
      </li>
      </ul>
    </nav>

并显示此输出 https://imagebin.ca/v/3aEVBnR3NOjd 我是Web发展的新手，并试图获得有关将Bootstrap模板转换为Wordpress的一些知识

Answer 1

你可能已经找到了答案，但这是我的两分钱：

如果要使用内置菜单功能的WordPress，则无需创建菜单。所以你可以删除：

<ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
      <i class="fa fa-times"></i>
    </a>
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#top">Start Bootstrap</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#top">Home</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#contact" onclick=$( "#menu-
close").click();>Contact</a>
      </li>
      </ul>

实际的Navwalker功能会出现在headerp.php文件中。所以一定要删除

    function bootstrap_nav()
{
    wp_nav_menu( array(
            'theme_location'    => 'header-menu',
            'depth'             => 2,
            'container'         => 'false',
            'menu_class'        => 'nav sidebar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
    );
}

来自您的functions.php文件。

根据WP Bootstrap Navwalker Github page，您的header.php文件应如下所示：

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php echo home_url(); ?>">
            <?php bloginfo('name'); ?>
        </a>
    </div>
    <?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker())
    );
    ?>
</div>

functions.php中唯一的东西（当然是关于导航员！）应该是：

<?php require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

您可以在header.php中使用navwalker函数中的类，就像使用常规的Bootstrap菜单一样。

错误看起来是由于实际的navwalker文件不在主题文件夹中。确保wp-bootstrap-navwalker.php文件位于主题文件夹中（与functions.php相同的位置）。如果您想将wp-bootstrap-navwalker.php个文件放在其他位置，请务必更改'/wp-bootstrap-navwalker.php';中'path/to/file/wp-bootstrap-navwalker.php'; functions.php以指向该文件。

希望这有帮助！

将Bootstrap侧边栏菜单添加到wordpress

1 个答案: