将 iNove 菜单上的小屋图标换成文字
Aug 9th, 2009
Add Comment
现在 iNove 主题的菜单上使用一个小屋图标来代替首页文字, 我觉得这是一种形象而友好的 UI 表示, 但是很多人问我如何将它换成相关的文字. 好吧, 下面我将将告诉你如何把它更换掉.
为什么要把小屋换成图标?
不喜欢小屋图标的人无非两种. 其一, 确切的不喜欢他的外观, 认为用户会对此产生歧义或者不够显眼; 其二, 认为这个小屋是个图片, 对搜索引擎不友好.
对于第一种人, 你们可以直接转跳至下面的更换教程.
对于第二种人, 我觉得你们需要知道, 它实质上并不是图片, 是通过 CSS 让文字隐藏起来而只显示背景图片, 它是文字, 不存在对搜索引擎很不友好的事情. (这一点可以通过去除 style.css 来验证)
怎样把小屋图标换成文字?
打开 style.css 文件, 找到并把代码
#menus li a.home { background-position:0 -93px; width:45px; padding:0; margin-left:0; text-indent:-999em; } #menus li a.home:hover { background-position:0 -124px; } #menus li.current_page_item a.home { background-position:0 -155px; }
替换为以下代码
#menus li a.home { background:#FFF; padding-left:15px; margin-left:0; } #menus li a.home:hover { background:#F4F5F7; } #menus li.current_page_item a.home { background:#EDEFF0; }
加强 SEO
无论你是将它显示为小屋还是文字, 它现在显示的其实是 "Home" (中文译本为 "首页") 字样, 而 "首页" 并不是一个理想的关键字, 它和你的网站没有太大的关系. 所以我们可以把它换成其他的关键字. 如: 你的网站是个专注冷笑话的网站, 那么可以改成 "最新冷笑话", 其他类推. 请参考以下步骤进行修改.
1. 打开 templates/header.php 文件, 找到以下代码
<?php _e('Home', 'inove'); ?>
2. 把它替换为你要换上的字样, 如: "最新冷笑话".
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 将 iNove 菜单上的小屋图标换成文字
英文不过关，慢慢看，慢慢学习。
iNove 这个主题是你写的？
最新版本在chrome下 导航条有问题，请问怎么办？ 主题更新了没法退回去...
I like the INove theme. But What I would add to it, is the custom header image and the "Excerpts" support. (only summary of articles in the first page).
If where this this theme was perfect...
你好，你的主题我一直在用，我觉得这个主题是我见过之中最实用最华丽的WP主题，感谢你的分享！
博主 我的博客换了服务器以后就出现了乱码 不知道怎么解决 希望博客可以帮下忙 谢谢了 很着急 我用的就是inove这个主题
好，看了你的文章，有了半桶水了
我还是相信我的动手能力的
@Accecc
悲哉！！！
@Billi
You can simple to change the first CSS section to the second one to change the 'house' menuitem to word menuitem.
@韦斯特
对大家有帮助就可以了.
@Sergey
What do you want to said?
Nhemes inove
866 .comment .info Свойство -webkit-border-radius не существует : 6px
867 .comment .info Свойство -khtml-border-radius не существует : 6px
868 .comment .info Свойство -moz-border-radius не существует : 6px
高手。。。
你是老大，从你这儿能学到很多东西。
A nice theme, but here i can't read only a little bit
@David
Yeah, it's SEO friendly.
I like this theme a lot. However, my only concern is whether this beautiful theme is SEO friendly or not. Can you answer me with this question? thnaks.
不错。。。
请问Categories和link是在同一栏，一左一右，我不喜欢这种风格，在哪里修改使这Categories和Link2个位置一上一下呢？
谢谢
我是当时是觉得不太美观，长度跟其它的不一样，也不醒目，就把直接在/templates/head.php改了，发现显示不了，再把text-indent:-999em;删了。
这个图标也挺好的
个人觉得没必要改，如果要改，也是给每个菜单加个图标，然后再顶头的图标后面直接加“home”，或者在后台给选项，让选图标，文字，或者文字加图标直接显示，或者图标，但鼠标挪上去再出文字，反正单独的替换，没啥意思哈，呵呵。。
看习惯了,现在发现小屋未必比文字差,支持小屋!
@bolo 这个有用的谢谢了
哈哈 很不错的说 小屋还是很有味道滴
老是说，我是第三种，第一次用iNove的时候，我又喜欢这个小屋，又喜欢要有个Home链接，结果，我自己在header里加了个首页的链接，就躲在小屋后面 嘎嘎
@陶晓爱
去掉header和wrap的背景，把图片设为body的背景，并加上top center属性。
@陶晓爱
我教你，拿起辞典，查宽度，会告诉你叫width，之后你就去找找控制Header的CSS那个类的width值就行了，具体看你用啥主题。至于啥T字的感觉我没领会你的意思……
老师，我想换个header图片可是我发现css里是固定宽度的，我的图片比较宽，我想问一下那里改一下使图片完全显示，看起来是图片和内容框有种T字型的感觉，谢谢，也请路过童鞋指点。
已经试着改过了，呵呵~
呵呵，早就想改了，今天明白怎么做了。
学习了
喜欢这样的介绍！！！
围观......不过好象小房子更好...
还是小房子看着顺服....
@chisdy
其实就是去掉著名的CSS图片替换文字大法，继续围观Mg12混稿
感觉mg12的代码用着放心。
有机会改改~
mg12大侠又上了一节短暂的SEO的课
@bolo
....我是牛津大学css系毕业的,我已经动手改了.
囧。。。。。这个有技术含量，需要非常精通css，如果不是css专业博士生最好不要动手
占座 学习。