论文的主题 - 多层次,嵌套,搜索引擎友好的菜单 - 教程

论文主题教程 - 多层次,嵌套,搜索引擎友好的导航菜单添加到WordPress

2009年7月8日,gesman

为追求完美的菜单...

这是本教程的第1部分
本教程的第2部分,教导如何建立横向垂直菜单+深色的调色板

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

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

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

我专门研究论文和玩NAVT插件一天。 在最后,我自豪地创建自定义,灵活,SEO优化,多层次的我的wordpress +毕业论文为基础的网站,嵌套nagivati​​on结构。

论文主题为特点的多层次,嵌套的WordPress的导航菜单列表
喜欢这个东西):

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

我用这个优秀的菜单,从动态驱动器作为基础的门户网站。 我有自定义JavaScript代码位以及纳入custom_functions.php PHP的块,使其与论文。 也预现有的网页,从我的网站的类别和职位数量,用于组装的菜单结构。 您的网站的细节会有所不同 - 但概念是相同的。
因此,让我们继续,好吗?

一步一步的指示设置NAVT基于嵌套,可定制的,多层次,搜索引擎友好的
和平原凉爽寻找WordPress和导航菜单论文主题

  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的 ,当然。

此条评论被关闭。

上一篇:

下一篇: