使用Twententen主题时创建多个菜单？

Question

如何以Twententen主题获得多个菜单？

Answer 1

有 使用WordPress中的新菜单系统创建其他菜单的几个步骤 在Twententen主题或任何WordPress主题中 （其中一些步骤可以取消顺序）. 。此外，我强烈建议您基于Twententen创建一个儿童主题，而不是直接修改它：

1. 创建孩子主题 基于二十个主题。

2. 注册主题位置 在您的主题中 functions.php 文件。

3. 创建一个新菜单 使用您网站的管理台。

4. 关联新菜单和主题位置 使用您的管理控制台。

5. 称呼 wp_nav_menu() 在模板文件中 您希望菜单出现的主题。

6. 样式您的菜单 使其与您的网站视觉集成。

因此，让我们继续吧！

1.创建一个孩子主题

创建 儿童主题非常简单 如果新版本出现而不担心失去更改，则可以为您带来升级Twententen的好处。

是的，您的更改很有可能与新版本不相容，如果您制作Twententen文件并将其修改为您的孩子主题，则需要重新申请这些更改，但这比在丢失更改时要好得多主题已升级。

但是，与其从另一个问题中复制我的答案，我建议孩子主题，我只是在那里指向您：

• 自定义WordPress主题而不更改它？ （使用儿童主题）

对于其余答案中的示例，我将称为孩子主题 “ Himanshu”.

2.注册主题位置

注册主题位置 使用 register_nav_menus() 功能 （是的，如果他们称之为该功能，那真是太好了 register_nav_menu_locations(), ，但是我离题...）

我会创建一个 “页脚” 此示例的菜单。

在我的示例中，请注意我如何参考 'primary' 在评论中；我这样做，这样您就可以看到默认的导航菜单位置的名称，并且您不必自己定义它。另请注意我曾经 __() 翻译功能并指定子主题的名称为翻译域。

如果您使用的是孩子主题，则需要创建一个 functions.php 在您的主题中归档以容纳此功能，但是如果您修改主题，请找到它们 functions.php 并将其添加到最后：

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary defined by default
  'footer'  => __('Footer Menu Area','himanshu'),
));

如果您正在为自己的主题编写代码，并且不需要将其分配给他人或担心翻译，则可以做到这一点：

register_nav_menus(array('footer'=>'Footer Menu Area'));

3.创建一个新菜单

接下来，让我们通过导航到 菜单 选项 外貌 管理员控制台中的菜单。点击 "+" 要添加菜单，请输入菜单的名称，然后单击 “创建菜单”:

_{（资源： mikeschinkel.com)}

笔记 您通常会将菜单命名与菜单位置的名称相同，但这不是必需的 WordPress将菜单及其菜单位置视为单独的实体.

务必 在菜单中添加一些选项 否则几乎没有用。选择使用管理员控制台需要的选项，将它们添加到菜单中，然后保存 （在我的屏幕截图中，我仅显示为菜单选项选择“页面”，但您可以混合和匹配WordPress提供的类型的菜单选项类型）:

_{（资源： mikeschinkel.com)}

4.将新菜单和主题位置关联

将您的新菜单与所需主题位置相关联很容易，只需使用WordPress'Admin Console：

_{（资源： mikeschinkel.com)}

5.致电 wp_nav_menu() 在模板文件中

现在，我们需要返回代码。我制作了 footer.php 从Twentten主题中，并将其复制到 “ Himanshu” 主题目录。这是前18行的样子：

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content
 * after.  Calls sidebar-footer.php for bottom widgets.
 *
 * @package WordPress
 * @subpackage Himanshu (based on Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

  <div id="footer" role="contentinfo">
    <div id="colophon">

我插入了 wp_nav_menu() 与包装纸HTML一起 <div id="colophon"> 在第18行上，第13行直通24现在看起来如下：

</div><!-- #main -->

<div id="footer" role="contentinfo">
  <div id="colophon">
    <div id="footernav" role="navigation">
      <?php
        wp_nav_menu(array(
          'container_class' => 'menu-footer',
          'theme_location' => 'footer'
        ));
      ?>
    </div>

笔记 我选择打电话给包装纸 footernav 和内部容器 menu-footer 我跟随Twententen的领先优势 role="navigation". 。然而， 代码最重要的方面是 'theme_location' => 'footer' 在步骤2中与我们命名的主题位置相匹配。

所有这些步骤都为我们提供了以下看起来如下的页脚菜单：

_{（资源： mikeschinkel.com)}

6.样式菜单

最后，我们只需要将CSS添加到我们的主题 style.css 文件，我们可以获得看起来像这样的页脚菜单：

_{（资源： mikeschinkel.com)}

样式非常基本 所以请不要在我身上掌握我糟糕的设计技巧 不是 设计师也没有威胁要成为一个！ 我在CSS代码中包括了评论，说明了为什么我使用了每个选择器和CSS属性：

#colophon {
  padding-top:6px;        /* Move menu closer to thick black line (TwentyTen has 18px) */
}
#footernav {              /* Use same font-family as TwentyTen does for menus */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Make a little bigger than default */
  padding-bottom:6px;     /* Put some breathing room under the menu */
}
#footernav .menu-footer {
  text-align:center;      /* Needed to center the menu */
}
#footernav ul {
  margin:0 auto;          /* Also needed to center the menu */
  width:auto;             /* Make menu only as wide as needs to be */
  display:inline;         /* Also needed to keep width to a minumum */
}
#footernav li {
  display:inline;         /* Make menu horizontal instead of veritcal */
}
#footernav a {
  text-decoration:none;   /* Remove underlines from links */
  background-color:#ddd;  /* Create a light grey background for each option */
  color:black;            /* Make the items easy to see with text in black */
  padding:0.25em 0.5em;   /* Add space around the items for the background to display*/
  margin:0 0.5em;         /* Add space between the items */
}
#footernav a:hover {
  background-color:black; /* Surround the menu item under the mouse pointer in black */
  color:white;            /* Make the text for the same menu item be white */
}

就是这样！请注意，这是设计师使用的工具，因此您或您的设计师都可以使用此菜单实现菜单，实际上实际上是从您喜欢的任何方式中使用此菜单 主题 看法;只需打电话 wp_nav_menu() 引用您的菜单和菜单位置的功能，您很高兴！