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

本教程的第 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


享受!

格列勃艾斯门

comments } { 5 }

追求完美的菜单...

这是本教程的第1部分
本教程的第 2部分讲授如何建立垂直菜单+暗调色板水平

我决定论文主题 ,因为我的一个客户告诉我有关论文和我之间的兼容性问题的WordPress的会员网站插件MemberWing。 我固定,然后决定采取仔细一看在论文,其实困扰的主要论点网站的头版上观看影片- Diythemes.com 。
什么给我印象最深是注重细节,用户友好和最重要的 - 搜索引擎优化,是经过深思熟虑的功能。
MemberWing成员插件的目的是从地上爬起来,成员网站,将需要尽可能多的搜索引擎优化汁拉。 因此,我付出了大量的关注,众多的搜索引擎优化的增强和完美MemberWing。 许多我自己的客户要求使用不同的主题,主题是这样的SEO优化,从内心深处将是一个非常适合会员门户企业家。

SEO MemberWing SEO的权力与权力结合将给予排名的机会给我的客户最好的。 所以,我的论文和与它起到了一天。

这是一个在各方面的优秀主题。 它的导航部分,虽然是在功能上的限制位。 从论文1.5 +它是唯一的一个一级菜单。 我通常的愿望是能够尽可能需要自定义导航。 有些网站只有几页,许多人都静态页面+文章/职位不计其数+类地段吨。
因此,在理想的世界有机会创造好看分层组织的用户友好的导航菜单是必须的。 论文了蝙蝠的权利,具有良好的前瞻性导航,但我注意到,所有的论文为基础的网站就像双胞胎。 定制论文导航菜单,是不是真的很容易,所以大多数人刚刚离开它。 有没有办法改变菜单类别的顺序或位置在页面之间。 再次,缺少能够创建嵌套菜单结构。 所以我决定看看有什么可以做。
相关的插件试图半打菜单/导航后,我踏上我的选择WordPress的导航列表插件 NAVT 。
NAVT插件基本上是无序列表生成具有超强的花式,有点难以图非传统的管理界面。 它误导的是,它实际上并没有创造看中寻找自己的菜单。 它的工作虽然最困难的部分 - 给你一个能够直观地拉在一起,并产生无序列表 - 骨架的菜单。 您可以创建许多菜单。 您可能会拉WordPress的东西:所有进入导航菜单页,文章,文章,分类,用户,代码块,外部链接,除法,分离和混合和匹配和巢,并安排和任何树状结构进行自定义您要。
NAVT产生对你造成HTML无序列表。 NAVT二的优点在于它可以帮助您将其插入到你的主题,通过著名的jQuery基础的逻辑,但新的菜单,而不需要更改任何代码! NAVT允许您指定:“我的新NAVT菜单取代#元素”。 #元素可以是现有的菜单或div元素的标签,是由您的当前主题的路径ID或类。 所以NAVT不会更换这对你,迫使你进入主题的代码,使比现在更凌乱。 如果这听起来像乱码 - 不用担心 - 我会引导你一步一步很快。 NAVT为大家有挑战性的部分是,你必须拿出实际的CSS +图像+ JavaScript代码为您的菜单自己。 它给你要弄清楚在何处以及如何整合这些文件,使这正确地得到连接在一起的东西。
真诚而不知道的jQuery +一些PHP + CSS +体面与WordPress的经验 - 这东西是很难拉。
乐意我知道这东西有点,所以我决定咬建设为WordPress最好的导航菜单的最佳子弹和引导人类自由。 我只是需要一些好看的水平CSS菜单,找出来源。 我拿起他们最好的选择,演示和源的动态驱动网站。

我每天致力于研究论文和发挥NAVT插件。 在最后,我自豪地创建定制的,灵活的,多层次的嵌套nagivati​​on结构,为我的WordPress的论文为基础的网站,SEO优化。

菜单功能,多层次,嵌套列表
喜欢这个东西):

  • 专业,廉洁的外观和感觉。
  • MSIE 6,7,歌剧,Safari浏览器,火狐3.x中,谷歌在这两个JavaScript的浏览器和非JavaScript的模式,包括所有现代浏览器的支持。
  • 优雅非JavaScript的浏览器downgradable。 您的菜单将被使用,在视觉上相似,甚至停用JavaScript的浏览器(虽然只有顶级导航将是可见的,并没有弹出按钮,当然会发生,因为它们是由JavaScript)。
  • 搜索引擎友好的功能 - 无序列表菜单内生成的HTML代码。 谷歌和其他搜索引擎蜘蛛将能够的索引您的导航结构,并发现内页的链接。
  • 支持无限嵌套层次和亚层。
  • 支持任何命令或网页,职位(通过用户定义的URI),分类,用户,自定义代码块,并在菜单的外部链接。
  • 支持文本以及基于图像的菜单元素。 (我还没有尝试这些虽然)。
  • 通过NAVT管理区的菜单结构和内容是视觉调节。
  • 紧凑型:嵌套级别的jQuery的弹出按钮。
  • 快速:菜单jQuery是从Google服务器上(我爱论文本身相同的,而不是做本地拉)加载。 这将加快东西位。
  • 可扩展性 - 这种类型的菜单,编辑和编码任何地方的需要在任何时间通过NAVT插件设置配置没有任何。

从动态驱动使用这个优秀的菜单为基地的门户。 我不得不自定义JavaScript代码位以及纳入custom_functions.php,使其工作与论文的PHP块。 既存的页面,类别,并从我的网站岗位也被用来组装菜单结构。 您的网站细节会有所不同 - 但概念将是相同的。
因此,让我们继续,我们应?

一步一步的指示设置NAVT基于嵌套的,可定制,多层次,搜索引擎友好的
和只是简单的很酷论文主题

  1. 转到WordPress管理面板。 插件 - >添加新的搜索,“navt”。 该插件将显示。 单击[安装],[立​​即安装],“激活插件”。
  2. 工具 - > NAVT列表,里面的“导航集团”区域找到“组名称”,然后输入:“MENU1”在外地,按[创建]按钮。 了创建“MENU1”长方形的面积。
    这种“MENU1”区域将菜单建设的主要游乐场。 您将拖放在这里你的菜单元素。
  3. 在“资产”区域找到“其他”列表框,点击“主页”选择。 “家”thingie会出现“未分配”区域内。 怪异,不是吗? 不用担心,只要它的工作原理 - 它会为我们。
  4. 这个“家”thingie,从“资产”区域拖动到“MENU1”长方形的面积。 它将成为“家”的菜单项。
    • 重复步骤3-4从“页”区域中的一些页面,以及在“类别”区域类别。 拖动你想在你的菜单“MENU1”矩形内的任何其他项目。 您可以点击页面,类别,用户和一些自定义的元素,如“清单分压器”和“代码块”。 代码块是冷静的方式来增加自定义菜单内片段。
    • 你可以拖动“MENU1”区域内的菜单项重新排列它们的顺序。
    • “<”和“>”箭头,您可以调整每个菜单项的分层位置。
    • 点击每个菜单项的文本名称 - 打开心中的这个项目令人难以置信的额外的定制对话框。 我大多使用默认值,但在技术上,你可以去疯了,开始做基于图像的菜单选择,并添加到HTML代码块。 虽然谨慎行事。
    • linkless unclikable子菜单,将作为“父母”其他“子儿”我用“代码块”型。 例如,当定制这样的代码块项目时,我进入“菜单项的别名”=“MemberWing”和“输入代码块:”=“<a href='#'> MemberWing </ A>”。 HREF =“#”将无法点击,但作为一个有效的“父”菜单选择。
  5. 下面是如何看着我NAVT“MENU1”建立结构一样,几乎完成:
    navt_building_icon
  6. 完成初步建设,然后单击“齿轮”图标来定制你的菜单结构:
    navt_customize_menu
  7. 这将打开4个选项卡的对话框:选项,显示,CSS,主题。
    1. 进入“选项”标签,并确保一切都泛滥,“组名”说:“MENU1”
    2. 进入“显示”标签,并确保一切“显示导航组... ...”区域选中[X]。 其余保留默认值。
    3. 转到“CSS”选项卡,选择单选按钮(X)“,不要将CSS类”。
    4. 转到“主题”标签,并填补它在这样的:
      navt_configuration_theme_tab_icon
      插入为“添加标签之前... ...”面积这段代码:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      “新增标签后插入... ...”面积这段代码:
      <br style='clear: left' /></div>
    5. 按[保存/关闭]按钮
  8. 在此点菜单NAVT插件选项内建设完成。
    现在是时候做一点点调得到它准备。 为此,我们需要添加一些自定义的文件 - CSS和JavaScript属于菜单和更新论文“custom_functions.php
  9. 这里下载一套完整的档案
  10. 解压存档。 如果您更新您的自定义你的custom_functions.php - 你需要合并他们与我的东西。 我将离开你了。
    如果你还没有触及它 - 感觉自由来覆盖它与我的。 请注意:我的首选位置下的网站标题(默认以上)菜单 - 让我的调整以及这种偏好。
  11. 上传存档,包括主题“定制”目录下,这样,所有的子目录和文件:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    我没有触及custom.css - 我宁愿保持自己的位置下菜单特定的CSS,以免造成内部custom.css一塌糊涂
  12. 在这一点上,你可能刷新您的网站,看到新的美丽的新的多层次,嵌套,SEO优化菜单。
  13. 您可以随时回去NAVT设置了更多的选择和定制你的菜单,或重新定位任何东西。 它会自动反映在直播现场。

前进的道路... ...

本教程包括一个菜单式的创意例子。 我打了一个又一个 - 只是为了看看如何深色菜单会是什么样子:

Thesis theme - multilevel nested CSS menu - dark palette

-多级嵌套的CSS菜单-黑暗的调色板

我认为这是相当不错的。 有很多更航行的样品提供动态驱动器-所有的人都可以定制,论文和其他一些努力的WordPress主题:

Dynamic Drive Horizontal Menus

动态驱动器的水平菜单

我希望你会发现本教程是有益的和有用的。 正如我所说,它是可以定制这些菜单论文 - 这是给定的时间和欲望,做到这一点。

根据合同,我能为你做这项工作。 只要挑你喜欢的菜单, 请与我联系,我会为您的网站上的代码和说明工作。

$ 20

当然,如果你建立超级SEO优化溢价WordPress的成员门户 - 此最好的解决办法:
论文主题 + MemberWing成员插件 +当然自我主办WordPress的

comments } { 15 }

高级邮3

2009年7月5日 ,日

这是免费传情保费后3。
本文包含合并内容:第一部分是可见的金卡会员,整篇文章是唯一可见的白金会员。
尝试登录的黄金会员第一(用户名/密码=黄金/黄金) - 你会看到更多的内容。
... ...然后注销和重新登录白金会员(用户名/ [...]

阅读完整的文章→

高级邮报2

2009年7月5日 ,日

这是保费后2传情。 剩下的就是黄金和成员只有可见。
提示 - 黄金会员登录/密码=金/金

本文的其余部分是只有世易通会员。
登入成为会员

阅读完整的文章→

高级邮报1

2009年7月5日 ,日

这是演示文章MemberWing - X。 随着MemberWing - X的这篇文章是在2.95元的价格购买或订阅“金卡会员”的程序。
所以,这是保费后1免费传情。 本文的其余部分是可见的,仅用于购买2.95美元或订阅“金卡会员”的成员。
提示[...]

阅读完整的文章→

论文的主题和会员网站插件MemberWing最好的SEO成员网站

2009年7月5日 ,日

MemberWing是一个WordPress的成员专门SEO优化成员门户网站插件。 随着它的灵活的可转位的玩笑,支持谷歌首次点击免费标准,数字内容和下载保护与PromoFusion授权 - 它保证你的会员网站快速索引和较高的排名。
虽然其他成员网站的软件喜欢完全禁止访问[...]

阅读完整的文章→