php - 将 HTML 上的 Wordpress 菜单类保存到 PHP

Question

我的 HTML 菜单中有这个原始代码:

  <nav class="main-nav">
      <div class="nav-wrapper">
        <ul class="cf">
            <li class="page-collection">
              <a href="http://www.onlinepartybook.com/about/"><span>About</span></a>
            </li>
            <li class="page-collection">
              <a href="http://www.onlinepartybook.com/features/"><span>Features</span></a>
            </li>
            <li class="page-collection">
              <a href="http://www.onlinepartybook.com/samples/"><span>Samples</span></a>
            </li>
            <li class="page-collection">
              <a href="http://www.onlinepartybook.com/tutorials/"><span>Tutorials</span></a>
            </li>
            <li class="page-collection">
              <a href="http://www.onlinepartybook.com/security/"><span>Security</span></a>
            </li>
            <li class="page-collection">
              <a href="http://www.onlinepartybook.com/processing-payments/"><span>Processing Payments</span></a>
            </li>
      </ul>
    </div>
  </nav>

因此将其翻译成 Wordpress 我将其更改为:

  <nav class="main-nav">
      <div class="nav-wrapper">
        <?php 
wp_nav_menu(array(
   'theme_location' => 'main menu',
   'container' => '',
   'menu_class' => 'cf'
));
?>
    </div>
  </nav>

然后将这个钩子(Hook)放在我的 functions.php 文件上:

/* Add Menus */
function register_my_menus(){
    register_nav_menus(array(
     'main_menu' => 'Main Menu'
  ));
}

add_action('init', register_my_menus);

这似乎效果不佳。因为 ff:

• 它不需要ul class="cf"
• 它不需要li class="page-collection"
• “关于”和“功能”等文本菜单位于<span> 内。默认情况下 WordPress 不会使用的标签 为你做。

知道如何准确地自定义我的 php 代码以完美地执行此操作并使其完美地工作吗？

Answer 1

您已经在正确的轨道上。

要删除 wp_nav_menu 生成的 div 元素，您应该将 container 设置为 ul 而不是空白。

<nav class="main-nav">
    <div class="nav-wrapper">
        <?php 
            wp_nav_menu(array(
                'theme_location' => 'main_menu',
                'container' => 'ul',
                'menu_class' => 'cf'
            ));
        ?>
    </div>
</nav>

要为每个元素添加 page-collection 类，您可以使用 WordPress 面板中的菜单编辑器。

如果您没有看到 CSS 类字段，您可以通过展开页面右上角的屏幕选项 来启用它，然后勾选 CSS 类。

这可能是一项乏味的任务，但这是实现您想要的目标的更简单方法。