通过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和论文的主题。 步步
(你可能从来没有想过什么...)
- EXEC PHP插件安装并激活它。 我们会需要它,因为我将使用PHP里面的文字小部件发出的垂直菜单“的HTML代码。
- 执行步骤1 - 6从教程的第1部分 。 基本上,你需要安装并激活使用NAVT插件+可视化地构建你的菜单。 请确保您的菜单组名称是'MENU1'。 这个名称是硬编码在custom_functions.php
- 点击'MENU1'组上的“齿轮”图标来编辑它的属性:
- 如下步骤7.1 -7.3第1部分教程设置“选项”,“显示”和“CSS”选项卡设置。
- 现在,点击这个对话框上的“主题”选项卡。 我们那里的设置将覆盖数(如果你一直遵循步骤1)。 这是确定的 - 你不会失去任何东西 - 但这些变化是必要的,因为我已经改变了一些代码,从第1步。
下面是如何需要填写此对话框: - 内部“主题的XPath:”区域中输入验证码(它的命令,以取代任何使用这些类的标签):
.jquerycssmenu, .jqueryslidemenu - 设置为“行动”,“替换为”
- 里面的“添加标签之前,导航组”区域中输入验证码:
<div class='jquerycssmenu' style='margin-top:5px;'> - 导航组“区域里面的”添加标签后输入验证码:
<br style='clear: left' /></div> - 点击[保存/关闭]按钮。
- 现在去WordPress管理面板 - >外观 - >部件。
- 将“文本”到“侧边栏”右侧区域的小部件(从大“可用的部件”区域)。 我们将增加代码到文本小部件,这将帮助我们实现垂直菜单。
注:我相信你有“侧边栏”存在。 论文选项允许你把它关掉 - 但为了让本教程它。 - 一旦你拖拽这个小部件 - 它会像一朵花(我现在感觉浪漫的,MSIE斗争)打开。
- 在“标题”区域进入“世界上最好的垂直菜单”......好吧,感觉自由地使用你的创造力 - 你刚出生的垂直菜单,文本将上面去。
- 在大面积的文字 - 输入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;
?> - 按[保存]按钮,单击“关闭”链接。
- 下载更新的文件在这里设置 。
此档案包括:
- 更新版本的“亮”水平菜单代码
- “暗”版本的横向菜单
- 垂直菜单代码
- 的更新版本custom_functions.php的
- 现在你需要解压存档,并把它上传到你的论文主题的“自定义”目录。
注意:如果你做的任何自定义内custom_functions.php - 你需要将它们合并。 如果没有 - 感到覆盖它与我的版本。 - 瞧! 现在你可以刷新您的网站,并看到相同的“光明”水平菜单+ neato这类垂直菜单在左侧边栏。
- BONUS任务:让我们变“亮”的横向菜单上的“黑暗”的配色方案。
- 文件内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
基本上,我们注释掉一行取消注释。 - 现在去到WordPress管理 - >工具 - > NAVT列表,按上述的“齿轮”图标来编辑属性'MENU1'组。
- 单击“主题”选项卡。
- 里面的“添加标签之前,导航组”区域中输入验证码:
<div class='jqueryslidemenu' style='margin-top:5px;'> - - 刷新页面 - ,水平主导航菜单“神奇地”变得黑暗,类似的东西:
论文的主题 - 多层嵌套的CSS菜单 - 黑暗的调色板
黑暗的调色板,可能更适合于某些网站比光的颜色之一。 所以,现在你在你的生活中有选择的自由!
- 要回到“亮”的配色方案 - 只要撤销上述“红利”的步骤。
- 结论:
我爱,我爱的论文主题WordPress的和我爱的事实,我们有一个像样的导航菜单的方法来增加我们的门户。
20美元
享受!
格列布·艾斯门
由2009年7月8日 gesman
追求完美的菜单...
这是本教程的第1部分
第2部分本教程教你如何打造垂直菜单+深色的调色板水平
我决定让论文的主题 ,因为我的一个客户告诉我有关的论文和我的WordPress的的会员网站插件 MemberWing之间的兼容性问题。 我固定它,然后决定采取仔细看看论文,居然不屑于观看视频主要论文网站的头版上- Diythemes.com 。
给我印象最重要的是注意细节,用户友好性和最重要的 - 搜索引擎优化功能是如此深思熟虑。
MemberWing会员插件设计从地上爬起来,将需要尽可能拉尽可能多的搜索引擎优化汁的会员网站。 所以我付出了大量的关注众多的搜索引擎优化增强和完善在MemberWing。 我自己的很多客户要求使用不同的主题和主题,以及SEO优化,从内心深处将是一个很好的适合会员门户企业家。
结合搜索引擎优化的MemberWing权力与SEO权力论文的主题将给予最佳排名的机会,给我的客户。 所以我得到了硕士和它玩了一天。
这是一个很好的主题,在各方面。 虽然导航的一部分,它是一个位在功能上的限制。 从论文1.5 +它是一个一级菜单。 我平常的愿望是能够自定义导航尽可能需要。 有些网站只有几页,其他许多有静态页面+不计其数的文章/文章+大量的类别吨。
因此,在理想的世界中有机会创造好看分层组织的用户友好的导航菜单是必须的。 论文马上蝙蝠具有良好的导航,但我注意到,所有的论文网站都在寻找像双胞胎。 定制论文导航菜单是不是很容易,所以大多数人只是把它作为。 有没有办法改变菜单中的类别顺序或放置在页面之间。 再次,能够创建嵌套菜单结构缺失。 所以我决定看看有什么可以做什么呢。
试图大约半打菜单/导航相关的插件后,设置我的选择WordPress的导航列表插件NAVT 。
NAVT插件基本上是无序列表生成超花俏有点难以弄清楚的非传统的管理界面。 误导的是,它并没有真正创建美观的菜单本身。 工作虽然它确实是最难的部分 - 让你的能力直观地拉在一起,产生无序列表 - 骨架您的菜单。 您可以创建许多菜单。 您可能会进入导航菜单:页面,帖子,文章,类别,用户,代码块,外部链接,分隔,分离和混合和匹配和巢各类拉的WordPress的东西,并安排他们在任何树状结构和定制你想要的。
NAVT为您生成导致HTML无序列表。 第二美NAVT是,它有助于您插入新的菜单到你的主题,通过著名的基于jQuery的逻辑,但无需改变任何代码! NAVT允许你指定:“与我的新NAVT菜单”更换此#元素。 #元素可以是现有的菜单或者div元素的标签,由当前的主题,正在生成一个id或class路径。 NAVT这是否为您更换,而不强迫你进入主题代码,使其比它已经是比较凌乱。 像乱码,如果所有的声音 - 不要担心 - 我会引导你一步一步的到来。 NAVT大家的挑战性的部分是,你就必须拿出实际的CSS +图像+ javascript代码为您自己的菜单。 ,它是由你来搞清楚在哪里,以及如何集成这些文件,并作出正确的东西连接在一起。
真诚不知道JQuery的+一些PHP + CSS +具有体面的经验与WordPress的 - 这件事是很难拉。
乐意,我知道这个东西了一点,所以我决定硬着头皮建设最好最好的导航菜单为WordPress,引导人类自由。 我只是需要找出一些好看水平的CSS菜单来源。 我拿起他们的最佳选择,演示和来源的动态驱动网站 。
一天我专门研究论文和玩NAVT插件。 在最后,我自豪地创建定制的,灵活的,SEO优化,多层次,嵌套nagivation我的WordPress +论文为基础的网站结构。
论文主题的多层次,嵌套WordPress的导航菜单功能列表
( 你有爱情这 东西):
- 专业简洁的外观和感觉。
- 支持所有现代浏览器,包括MSIE 6,7,歌剧,Safari浏览器,火狐3.x中,谷歌Chrome的Javascript和非JavaScript模式。
- 优雅的downgradable非JavaScript的浏览器。 您菜单将可以使用类似的视觉和工作,即使禁用JavaScript的浏览器(虽然只有顶级导航将是可见的,并没有弹出按钮当然会发生,因为它们是由JavaScript)。
- 搜索引擎友好的功能 - 无序列表菜单内产生HTML代码。 谷歌和其他搜索引擎的蜘蛛将能够索引导航结构,并发现内页的链接。
- 支持无限嵌套水平和能级。
- 支持任何命令或网页,职位(通过用户定义的URI),类别,用户自定义代码块和外部链接的菜单内。
- 支持文本,以及基于图像的菜单元素。 (我还没有尝试这些虽然)。
- 菜单结构和内容是通过NAVT管理区视觉调节。
- 结构紧凑:基于jQuery的弹出按钮嵌套层次。
- 快速:jQuery的菜单加载从谷歌服务器(我很想做同样的论文本身,而不是在本地拉)。 这将加快一点东西。
- 可扩展性 - 这种类型的菜单编辑,无需任何编码的任何地方随时通过NAVT插件设置和配置。
我用这个优秀的菜单为基础的动态驱动门户。 我有自定义的javascript代码,以及包括大块PHP custom_functions.php使其工作论文。 预先存在的页面,从我的网站的类别和岗位的数量也被用于组装的菜单结构。 您的站点的具体细节将是不同的 - 但概念是相同的。
因此,让我们继续,好吗?
- 转到WordPress管理面板。 插件 - >新增,的搜索为“navt”。 该插件将被显示。 单击[安装],[],“激活插件”,现在安装。
- 工具 - > NAVT列表,“导航集团”区域里面找到“组名”,并输入:“MENU1”领域,按[创建]按钮。 “MENU1”矩形面积得到创建。
这种“MENU1”区域将成为主要的操场菜单建设。 你会在这里拖放你的菜单元素。 - 在“资产”区域中找到“其他”列表框中,单击“家”的选择。 “家”的thingie将出现“未分配”区域内。 古怪的,是吧? 不用担心,只要它的作品 - 它会为我们。
- 将这个“家”的thingie从“资产”区域成“MENU1”矩形面积。 这将成为“主页”菜单中的项目。
- 重复步骤3-4从“页”区域类别在“类别”区域,以及一些网页。 拖动你想成为里面的“MENU1”矩形的菜单上的任何其他项目。 您可以点击页面,类别,用户和一些自定义的元素,如“分列表”和“代码块”。 代码块是很酷的方式来添加自定义菜单里面片段。
- 你可以拖动菜单项内“MENU1”区域的重新排列其顺序。
- 您可以调整每个菜单项的分层位置“<”和“>”箭头。
- 点击每个菜单项的文本名称 - 开启超乎想象的额外的定制对话框,此项目。 我大多使用默认设置,但是在技术上,你可以去疯狂,并开始进行基于图像的菜单选择并添加到它的HTML代码块。 虽然谨慎行事。
- 对于linkless unclikable子菜单,将作为“父母”其他“子儿”,我用“代码块”类型。 定制例如,当我进入这样的代码块项目“菜单项别名”=“MemberWing,”和“输入的代码块:”=“的<a href='#'> MemberWing </ A>”。 有HREF =“#”将使它无法点击,但作为一个有效的“父”菜单选择。
- 这里就是我的NAVT'MENU1'构建结构看起来像几乎完成:
- 完成初步建设,然后单击“齿轮”图标,自定义菜单结构:
- 这将打开对话框有4个选项卡:选项,显示,CSS主题。
- 进入“选项”选项卡,并确保一切是选中“组名”说:“MENU1”
- 进入“显示”选项卡,并确保“显示导航组的一切...”区域选中[X]。 离开违约休息。
- 转到“CSS”选项卡,并选择“单选按钮(x)的”不应用CSS类“。
- 转到“主题”选项卡,并填写在这样的:
插入添加标签前...“面积这段代码:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
插入“添加标签后...”区域这段代码:
<br style='clear: left' /></div> - 按[保存/关闭]按钮
- 在这个的点菜单建筑内NAVT插件选项是完整的。
现在是时候做一个小小的调整了准备论文的主题。 为此,我们需要添加一些自定义文件 - CSS和JavaScript的菜单和更新论文'custom_functions.php - 在这里下载完整的文件组 。
- 解压存档。 如果您已更新您的custom_functions.php与您的自定义 - 你需要我的东西,将它们合并。 我会离开你呢。
如果您还没有触及它 - 感到覆盖它与矿。 请注意:我更喜欢“定位”菜单下的网站标题(默认以上) - 所以我调整此偏好。 - 上传,这样你的论文的主题“自定义”目录下所有子目录和文件存档,包括:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
我还没有触及custom.css - 我宁愿保持特定CSS菜单下自己的位置,以避免造成混乱里面custom.css - 在这一点上,你可能会重新载入你的网站,看到新的美丽的新的多层嵌套,SEO优化的菜单。
- 您可以随时回去NAVT设置和定制你的菜单提供了更多的选择或重新定位什么。 它将自动反映在直播现场。
在前进的道路...
这一种类型的菜单教程,包括创意的例子。 我打了一个又一个 - 只是为了看看深色菜单会是什么样子:
论文的主题 - 多层嵌套的CSS菜单 - 黑暗的调色板
我认为这是相当不错的。 有很多更多的导航样品提供动态驱动器 -所有的人都可以自定义一些努力的论文和其他WordPress主题:
动态驱动器水平菜单
我希望你会发现本教程有益和有用的。 正如我所说的,它是可以自定义任何这些菜单论文 - 获得足够的时间和欲望,让它发生。
合同的基础上,我可以为你做这项工作。 只要挑你喜欢的菜单,请与我联系 ,我会为您的网站的代码和说明工作。
20美元
当然,如果你到建设超级SEO优化溢价WordPress的会员门户网站 - 最好的解决方案:
论文的主题 + MemberWing会员插件 + 自托管的WordPress的过程。