通过对2009年7月10日,gesman
追求完美的垂直菜单...
本教程的第1部分介绍建设水平的多级嵌套菜单的过程中一步一步WordPress的论文主题 。 第2部分将继续加强此功能。 在这里,我们将添加水平导航菜单中的“暗”版本,我会教你如何“光明”和“黑暗”版本之间切换。 第2部分第1部分超。 它包括了从第1部分+增加了更多的很酷的东西。
主要的想法,我想提出论文的主题是增加垂直菜单(和一般的WordPress的)。 我一直在寻找真正灵活,搜索引擎友好的多浏览器兼容的垂直菜单,将可以创造无限的嵌套级别。
网上有主题网页万吨,但是当我开始尝试所有这些样本 - 他们要么打破了,四分五裂,只支持数量有限的水平或行为不端盖茨+鲍尔默junksplorer“6。 最后,我回来尝试和信任的动态驱动器菜单,垂直样品被证明是一个不错的情况下,适合我的严格要求。 我不得不大幅改变他们虽然以确保它符合论文模型。
继续追求完美...
我花了大约16个小时的搜索,装配,检测,修复,抛光和调整垂直菜单的CSS和JS代码和3/4的时间是花在使它工作在MSIE 6。
不管怎么说,我是最终的结果感到高兴。 导致垂直导航菜单有所有横向菜单有同样的好处 。
有能力增加垂直菜单,约70-80%的门户网站在网络上是非常重要的。 横向菜单,限制了“空间”容纳很多菜单的选择,但垂直菜单没有此限制,将极大的帮助。 所以在这里我们去。
许多步骤来做到这一点已经在教程的第一部分描述,所以这会让位较短,但功能更丰富的结果。
这里有云:
建设搜索引擎友好的,垂直的,多层次,分层嵌套菜单WordPress和论文主题。 一步一步
(......你从来没有想过可能...)
- 执行PHP插件安装并激活它。 我们需要它,因为我将使用PHP文本构件内发出的垂直菜单的HTML代码。
- 做步骤1 - 6 教程的第一部分 。 基本上,你需要安装并激活使用NAVT插件+视觉上建立你的菜单。 确保您的菜单组的名称是“MENU1。 这个名字是硬编码在custom_functions.php
- 您MENU1'组上的“齿轮”图标,点击编辑它的属性:
- 如下步骤第1部分教程7.1 -7.3设置“选项”,“显示”和“CSS”选项卡设置。
- 现在,单击该对话框上的“主题”选项卡。 我们将覆盖设置有数量(如果你已经按照步骤1)。 这是确定的 - 你不会失去任何东西 - 但这些变化是必要的,因为我已经改变了一些代码从第1步。
这里需要填写此对话框: - 里面的“主题的XPath:”区域输入此代码(命令来取代任何与这些类的标签):
.jquerycssmenu, .jqueryslidemenu - 设置“动作”,“替换”
- 里面的“添加标签之前导航组”区域输入此代码:
<div class='jquerycssmenu' style='margin-top:5px;'> - 内进入“添加标签后,导航组”区域代码:
<br style='clear: left' /></div> - 点击[保存/关闭]按钮。
- 现在去WordPress管理面板 - >外观 - >小工具。
- 拖曳到“侧栏1”右侧区域的“文本”部件(从大的“可用部件”区域)。 我们将加入到文本构件的代码,这将有助于我们兑现垂直菜单。
注:我相信你有“侧栏1”存在。 论文的选项允许你关闭它 - 但本教程为了让让它成。 - 一旦你拖拽这个小工具 - 它会像花儿一样(我现在感觉浪漫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在左侧边栏的垂直菜单。
- 奖金的任务:让改变“亮”的水平菜单上的“黑暗”的配色方案。
- 里面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会员插件的目的是从地上爬起来,为会员的网站,将需要拉尽可能多的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 +毕业论文为基础的网站,嵌套nagivation结构。
论文主题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的块,使其与论文。 也预现有的网页,从我的网站的类别和职位数量,用于组装的菜单结构。 您的网站的细节会有所不同 - 但概念是相同的。
因此,让我们继续,好吗?
- 转到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的 ,当然。