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

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

2009年7月10日 日gesman

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

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

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

网上关于这个问题的网页万吨,但是当我开始尝试所有这些样本 - 他们要么打破了,散乱,只支持水平有限,或在盖茨+鲍尔默的junksplorer 6不良行为。 最后我回到行之有效并深受信赖的动态驱动器菜单,垂直样品被证明是一个很好的案例,适合我的严格要求。 我有显著修改他们虽然以确保它符合论文模型。
追求完美,继续... ...

我花了大约16个小时的搜索,装配,检测,修复,抛光和调整垂直菜单的CSS和JS代码和3 / 4的时间是花在使它工作在MSIE 6。
不管怎么说,我是最后的结果感到满意。 导致垂直导航菜单有同样的好处 ,横向菜单。

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

教程的第一部分已经描述的步骤来做到这一点的地段,因此这将使有点较短的,但功能更丰富的结果。

所以这里有云:

建设搜索引擎友好的,垂直的,多层次,分层嵌套菜单Wordpress和 步步
(... ...你从来没有想过可能... ...)

  1. EXEC PHP插件安装并激活它。 我们需要它,因为我将使用PHP文本构件内发出的垂直菜单的HTML代码。
  2. 执行步骤1 - 6 教程的第一部分。 基本上,你需要安装并激活使用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. 拖曳到“侧栏1”右侧区域的“文本”部件(从大“可用部件”领域)。 我们将加入到文本构件的代码,这将有助于我们实现垂直菜单。
    注:我想你“侧栏1”的存在。 论文选项允许您关闭它 - 但为了本教程让使它是。
  8. 一旦你拖放这个widget - 它会像花儿一样(我感觉现在浪漫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. 额外的任务:让“光明”的水平菜单上的“黑暗”的配色方案改变。
    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


享受!

格列勃艾斯门

你的留言

上一篇: