WordPress 的 垂直 分层 多 级 嵌套 菜单

多层次,嵌套,搜索引擎友好的导航菜单添加到WordPress - 第2部分

通过gesman 2009年7月10日

追求完美的垂直菜单...

本教程的第1部分介绍一步一步的过程中建设卧式多级嵌套菜单WordPress的论文主题 第2部分将继续以增强此功能。 在这里,我们将添加水平的导航菜单中的“黑暗”版本,我会教你如何“光明”和“黑暗”版本之间切换。 第2部分第1部分是超。 它包括所有第1部分+增加了更多的很酷的东西。

主要的想法,我想提出增加垂直菜单 (WordPress的一般)。 我一直在寻找真正灵活,搜索引擎友好的多浏览器兼容的垂直菜单,将允许创造无限嵌套级别。

WEB万吨的主题网页上,但是当我开始尝试所有这些样品 - 他们要么抛锚,分崩离析,只支持数量有限的水平或行为不检盖茨+鲍尔默junksplorer的6。 最后,我得到了可靠和行之有效的动态驱动器菜单 ,其垂直样本被证明是一个不错的情况下,适合我的严格要求。 我不得不大幅修改他们虽然以确保它适合论文模型。
继续对完美的追求...

我花了大约16个小时的搜索,组装,测试,修复,抛光和调整垂直菜单的CSS和JS代码和3/4的时间花在它的工作在MSIE 6。
不管怎么说,我很高兴最终的结果。 导致垂直导航菜单水平菜单有同样的好处

有能力增加垂直菜单,约70-80%的门户网站在网络上是非常重要的。 水平菜单“空间”限制,以适应多种菜单选择,但垂直菜单没有这个限制,将极大地帮助。 所以在这里我们去。

很多的步骤,使之发生教程第1部分中已经描述,所以这将使它有点短,但功能更丰富的成果。

所以这里有云:

建设搜索引擎友好的,垂直,多层次,分层嵌套的菜单WordPress和论文的主题。 步步
(你可能从来没有想过什么...)

  1. EXEC PHP插件安装并激活它。 我们会需要它,因为我将使用PHP里面的文字小部件发出的垂直菜单“的HTML代码。
  2. 执行步骤1 - 6从教程的第1部分 基本上,你需要安装并激活使用NAVT插件+可视化地构建你的菜单。 请确保您的菜单组名称是'MENU1'。 这个名称是硬编码在custom_functions.php
  3. 点击'MENU1'组上的“齿轮”图标来编辑它的属性:
    navt_customize_menu
  4. 如下步骤7.1 -7.3第1部分教程设置“选项”,“显示”和“CSS”选项卡设置。
  5. 现在,点击这个对话框上的“主题”选项卡。 我们那里的设置将覆盖数(如果你一直遵循步骤1)。 这是确定的 - 你不会失去任何东西 - 但这些变化是必要的,因为我已经改变了一些代码,从第1步。
    下面是如何需要填写此对话框:
    1. 内部“主题的XPath:”区域中输入验证码(它的命令,以取代任何使用这些类的标签):
      .jquerycssmenu, .jqueryslidemenu
    2. 设置为“行动”,“替换为”
    3. 里面的“添加标签之前,导航组”区域中输入验证码:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. 导航组“区域里面的”添加标签后输入验证码:
      <br style='clear: left' /></div>
    5. 点击[保存/关闭]按钮。
  6. 现在去WordPress管理面板 - >外观 - >部件。
  7. 将“文本”到“侧边栏”右侧区域的小部件(从大“可用的部件”区域)。 我们将增加代码到文本小部件,这将帮助我们实现垂直菜单。
    注:我相信你有“侧边栏”存在。 论文选项允许你把它关掉 - 但为了让本教程它。
  8. 一旦你拖拽这个小部件 - 它会像一朵花(我现在感觉浪漫的,MSIE斗争)打开。
  9. 在“标题”区域进入“世界上最好的垂直菜单”......好吧,感觉自由地使用你的创造力 - 你刚出生的垂直菜单,文本将上面去。
  10. 在大面积的文字 - 输入PHP代码:
    <?php
    if (function_exists('navt_getlist'))
    $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
    else
    $menu_html = "";
    $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
    echo $menu_html;
    ?>
  11. 按[保存]按钮,单击“关闭”链接。
  12. 下载更新的文件在这里设置
    此档案包括:


    • 更新版本的“亮”水平菜单代码
    • “暗”版本的横向菜单
    • 垂直菜单代码
    • 的更新版本custom_functions.php的
  13. 现在你需要解压存档,并把它上传到你的论文主题的“自定义”目录。
    注意:如果你做的任何自定义内custom_functions.php - 你需要将它们合并。 如果没有 - 感到覆盖它与我的版本。
  14. 瞧! 现在你可以刷新您的网站,并看到相同的“光明”水平菜单+ neato这类垂直菜单在左侧边栏。
  15. BONUS任务:让我们变“亮”的横向菜单上的“黑暗”的配色方案。
    1. 文件内custom_functions.php:
      更换此代码:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      此代码:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      基本上,我们注释掉一行取消注释。
    2. 现在去到WordPress管理 - >工具 - > NAVT列表,按上述的“齿轮”图标来编辑属性'MENU1'组。
    3. 单击“主题”选项卡。
    4. 里面的“添加标签之前,导航组”区域中输入验证码:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. - 刷新页面 - ,水平主导航菜单“神奇地”变得黑暗,类似的东西:
      Thesis theme - multilevel nested CSS menu - dark palette

      论文的主题 - 多层嵌套的CSS菜单 - 黑暗的调色板

      黑暗的调色板,可能更适合于某些网站比光的颜色之一。 所以,现在你在你的生活中有选择的自由!

    6. 要回到“亮”的配色方案 - 只要撤销上述“红利”的步骤。
  16. 结论:
    我爱,我爱的论文主题WordPress的和我爱的事实,我们有一个像样的导航菜单的方法来增加我们的门户。

20美元


享受!

格列布·艾斯门

此项目的评论被关闭。

上一篇:

建立 垂直, 嵌套, 多 层次, 分层 导航 菜单 WordPress 的
WordPress 的 垂直 分层 多 级 嵌套 菜单

多层次,嵌套,搜索引擎友好的导航菜单添加到WordPress - 第2部分

通过gesman 2009年7月10日

追求完美的垂直菜单...

本教程的第1部分介绍一步一步的过程中建设卧式多级嵌套菜单WordPress的论文主题 第2部分将继续以增强此功能。 在这里,我们将添加水平的导航菜单中的“黑暗”版本,我会教你如何“光明”和“黑暗”版本之间切换。 第2部分第1部分是超。 它包括所有第1部分+增加了更多的很酷的东西。

主要的想法,我想提出增加垂直菜单 (WordPress的一般)。 我一直在寻找真正灵活,搜索引擎友好的多浏览器兼容的垂直菜单,将允许创造无限嵌套级别。

WEB万吨的主题网页上,但是当我开始尝试所有这些样品 - 他们要么抛锚,分崩离析,只支持数量有限的水平或行为不检盖茨+鲍尔默junksplorer的6。 最后,我得到了可靠和行之有效的动态驱动器菜单 ,其垂直样本被证明是一个不错的情况下,适合我的严格要求。 我不得不大幅修改他们虽然以确保它适合论文模型。
继续对完美的追求...

我花了大约16个小时的搜索,组装,测试,修复,抛光和调整垂直菜单的CSS和JS代码和3/4的时间花在它的工作在MSIE 6。
不管怎么说,我很高兴最终的结果。 导致垂直导航菜单水平菜单有同样的好处

有能力增加垂直菜单,约70-80%的门户网站在网络上是非常重要的。 水平菜单“空间”限制,以适应多种菜单选择,但垂直菜单没有这个限制,将极大地帮助。 所以在这里我们去。

很多的步骤,使之发生教程第1部分中已经描述,所以这将使它有点短,但功能更丰富的成果。

所以这里有云:

建设搜索引擎友好的,垂直,多层次,分层嵌套的菜单WordPress和论文的主题。 步步
(你可能从来没有想过什么...)

  1. EXEC PHP插件安装并激活它。 我们会需要它,因为我将使用PHP里面的文字小部件发出的垂直菜单“的HTML代码。
  2. 执行步骤1 - 6从教程的第1部分 基本上,你需要安装并激活使用NAVT插件+可视化地构建你的菜单。 请确保您的菜单组名称是'MENU1'。 这个名称是硬编码在custom_functions.php
  3. 点击'MENU1'组上的“齿轮”图标来编辑它的属性:
    navt_customize_menu
  4. 如下步骤7.1 -7.3第1部分教程设置“选项”,“显示”和“CSS”选项卡设置。
  5. 现在,点击这个对话框上的“主题”选项卡。 我们那里的设置将覆盖数(如果你一直遵循步骤1)。 这是确定的 - 你不会失去任何东西 - 但这些变化是必要的,因为我已经改变了一些代码,从第1步。
    下面是如何需要填写此对话框:
    1. 内部“主题的XPath:”区域中输入验证码(它的命令,以取代任何使用这些类的标签):
      .jquerycssmenu, .jqueryslidemenu
    2. 设置为“行动”,“替换为”
    3. 里面的“添加标签之前,导航组”区域中输入验证码:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. 导航组“区域里面的”添加标签后输入验证码:
      <br style='clear: left' /></div>
    5. 点击[保存/关闭]按钮。
  6. 现在去WordPress管理面板 - >外观 - >部件。
  7. 将“文本”到“侧边栏”右侧区域的小部件(从大“可用的部件”区域)。 我们将增加代码到文本小部件,这将帮助我们实现垂直菜单。
    注:我相信你有“侧边栏”存在。 论文选项允许你把它关掉 - 但为了让本教程它。
  8. 一旦你拖拽这个小部件 - 它会像一朵花(我现在感觉浪漫的,MSIE斗争)打开。
  9. 在“标题”区域进入“世界上最好的垂直菜单”......好吧,感觉自由地使用你的创造力 - 你刚出生的垂直菜单,文本将上面去。
  10. 在大面积的文字 - 输入PHP代码:
    <?php
    if (function_exists('navt_getlist'))
    $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
    else
    $menu_html = "";
    $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
    echo $menu_html;
    ?>
  11. 按[保存]按钮,单击“关闭”链接。
  12. 下载更新的文件在这里设置
    此档案包括:


    • 更新版本的“亮”水平菜单代码
    • “暗”版本的横向菜单
    • 垂直菜单代码
    • 的更新版本custom_functions.php的
  13. 现在你需要解压存档,并把它上传到你的论文主题的“自定义”目录。
    注意:如果你做的任何自定义内custom_functions.php - 你需要将它们合并。 如果没有 - 感到覆盖它与我的版本。
  14. 瞧! 现在你可以刷新您的网站,并看到相同的“光明”水平菜单+ neato这类垂直菜单在左侧边栏。
  15. BONUS任务:让我们变“亮”的横向菜单上的“黑暗”的配色方案。
    1. 文件内custom_functions.php:
      更换此代码:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      此代码:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      基本上,我们注释掉一行取消注释。
    2. 现在去到WordPress管理 - >工具 - > NAVT列表,按上述的“齿轮”图标来编辑属性'MENU1'组。
    3. 单击“主题”选项卡。
    4. 里面的“添加标签之前,导航组”区域中输入验证码:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. - 刷新页面 - ,水平主导航菜单“神奇地”变得黑暗,类似的东西:
      Thesis theme - multilevel nested CSS menu - dark palette

      论文的主题 - 多层嵌套的CSS菜单 - 黑暗的调色板

      黑暗的调色板,可能更适合于某些网站比光的颜色之一。 所以,现在你在你的生活中有选择的自由!

    6. 要回到“亮”的配色方案 - 只要撤销上述“红利”的步骤。
  16. 结论:
    我爱,我爱的论文主题WordPress的和我爱的事实,我们有一个像样的导航菜单的方法来增加我们的门户。

20美元


享受!

格列布·艾斯门

此项目的评论被关闭。

上一篇: