将 iNove 菜单上的小屋图标换成文字

Aug 9th, 2009 Translate Leave a comment Go to comments

Change Home Icon to Text

现在 iNove 主题的菜单上使用一个小屋图标来代替首页文字, 我觉得这是一种形象而友好的 UI 表示, 但是很多人问我如何将它换成相关的文字. 好吧, 下面我将将告诉你如何把它更换掉.

为什么要把小屋换成图标?

不喜欢小屋图标的人无非两种. 其一, 确切的不喜欢他的外观, 认为用户会对此产生歧义或者不够显眼; 其二, 认为这个小屋是个图片, 对搜索引擎不友好.

对于第一种人, 你们可以直接转跳至下面的更换教程.

对于第二种人, 我觉得你们需要知道, 它实质上并不是图片, 是通过 CSS 让文字隐藏起来而只显示背景图片, 它是文字, 不存在对搜索引擎很不友好的事情. (这一点可以通过去除 style.css 来验证)

怎样把小屋图标换成文字?

打开 style.css 文件, 找到并把代码 

1
2
3
4
5
6
7
8
9
10
11
12
13

#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;
}

替换为以下代码 

1
2
3
4
5
6
7
8
9
10
11

#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 文件, 找到以下代码 

1

<?php _e('Home', 'inove'); ?>

2. 把它替换为你要换上的字样, 如: "最新冷笑话".

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 将 iNove 菜单上的小屋图标换成文字
  1. Accecc | #1
    Aug 9th, 2009 at 19:44

    占座 学习。 :?:

    Reply | Quote
  2. bolo | #2
    Aug 9th, 2009 at 19:45

    囧。。。。。这个有技术含量，需要非常精通css，如果不是css专业博士生最好不要动手

    Reply | Quote
  3. Accecc | #3
    Aug 9th, 2009 at 19:50

    @bolo
    ....我是牛津大学css系毕业的,我已经动手改了.

    Reply | Quote
  4. 小棒打鼓 | #4
    Aug 9th, 2009 at 21:20

    mg12大侠又上了一节短暂的SEO的课

    Reply | Quote
  5. 麦子 | #5
    Aug 9th, 2009 at 23:55

    :smile: 菜菜们可以好好看看……

    Reply | Quote
  6. Daemon Tools | #6
    Aug 10th, 2009 at 00:56

    有机会改改~

    Reply | Quote
  7. chisdy | #7
    Aug 10th, 2009 at 03:27

    感觉mg12的代码用着放心。

    Reply | Quote
  8. Calcifer | #8
    Aug 10th, 2009 at 07:26

    @chisdy
    :roll: 其实就是去掉著名的CSS图片替换文字大法，继续围观Mg12混稿

    Reply | Quote
  9. hslx111 | #9
    Aug 10th, 2009 at 07:45

    还是小房子看着顺服....

    Reply | Quote
  10. 小Bee | #10
    Aug 10th, 2009 at 10:28

    围观......不过好象小房子更好...

    Reply | Quote
  11. 烏石·鏡@Ernsky | #11
    Aug 10th, 2009 at 12:30

    喜欢这样的介绍！！！

    Reply | Quote
  12. hugr | #12
    Aug 10th, 2009 at 13:31

    学习了

    Reply | Quote
  13. 沸腾 | #13
    Aug 10th, 2009 at 13:53

    呵呵，早就想改了，今天明白怎么做了。

    Reply | Quote
  14. 园子 | #14
    Aug 10th, 2009 at 14:11

    已经试着改过了，呵呵~

    Reply | Quote
  15. 陶晓爱 | #15
    Aug 10th, 2009 at 16:53

    老师，我想换个header图片可是我发现css里是固定宽度的，我的图片比较宽，我想问一下那里改一下使图片完全显示，看起来是图片和内容框有种T字型的感觉，谢谢，也请路过童鞋指点。

    Reply | Quote
  16. Calcifer | #16
    Aug 10th, 2009 at 17:29

    @陶晓爱
    我教你，拿起辞典，查宽度，会告诉你叫width，之后你就去找找控制Header的CSS那个类的width值就行了，具体看你用啥主题。至于啥T字的感觉我没领会你的意思……

    Reply | Quote
  17. bolo | #17
    Aug 10th, 2009 at 19:52

    @陶晓爱
    去掉header和wrap的背景，把图片设为body的背景，并加上top center属性。

    Reply | Quote
  18. Showfom | #18
    Aug 11th, 2009 at 01:51

    老是说，我是第三种，第一次用iNove的时候，我又喜欢这个小屋，又喜欢要有个Home链接，结果，我自己在header里加了个首页的链接，就躲在小屋后面 嘎嘎

    Reply | Quote
  19. 漢文溪 | #19
    Aug 11th, 2009 at 09:15

    哈哈 很不错的说 小屋还是很有味道滴

    Reply | Quote
  20. 陶晓爱 | #20
    Aug 11th, 2009 at 10:44

    @bolo 这个有用的谢谢了

    Reply | Quote
  21. haven | #21
    Aug 11th, 2009 at 18:05

    看习惯了,现在发现小屋未必比文字差,支持小屋! ;-)

    Reply | Quote
  22. dust2k | #22
    Aug 12th, 2009 at 00:13

    个人觉得没必要改，如果要改，也是给每个菜单加个图标，然后再顶头的图标后面直接加“home”，或者在后台给选项，让选图标，文字，或者文字加图标直接显示，或者图标，但鼠标挪上去再出文字，反正单独的替换，没啥意思哈，呵呵。。

    Reply | Quote
  23. 沉叶霰尘 | #23
    Aug 12th, 2009 at 20:10

    这个图标也挺好的

    Reply | Quote
  24. dengor | #24
    Aug 13th, 2009 at 23:22

    我是当时是觉得不太美观，长度跟其它的不一样，也不醒目，就把直接在/templates/head.php改了，发现显示不了，再把text-indent:-999em;删了。

    Reply | Quote
  25. drupal | #25
    Aug 18th, 2009 at 17:49

    请问Categories和link是在同一栏，一左一右，我不喜欢这种风格，在哪里修改使这Categories和Link2个位置一上一下呢？
    谢谢

    Reply | Quote
  26. Aska | #26
    Aug 21st, 2009 at 23:27

    不错。。。

    Reply | Quote
  27. David | #27
    Sep 4th, 2009 at 00:13

    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.

    Reply | Quote
  28. mg12 | #28
    Sep 4th, 2009 at 10:27

    @David
    Yeah, it's SEO friendly. :)

    Reply | Quote
  29. Billi | #29
    Sep 5th, 2009 at 18:52

    A nice theme, but here i can't read only a little bit :-(

    Reply | Quote
  30. 韦斯特 | #30
    Oct 5th, 2009 at 09:49

    你是老大，从你这儿能学到很多东西。

    Reply | Quote
  31. 天空很美 | #31
    Oct 8th, 2009 at 20:38

    高手。。。

    Reply | Quote
  32. Sergey | #32
    Oct 16th, 2009 at 17:16

    Nhemes inove
    866 .comment .info Свойство -webkit-border-radius не существует : 6px
    867 .comment .info Свойство -khtml-border-radius не существует : 6px
    868 .comment .info Свойство -moz-border-radius не существует : 6px

    Reply | Quote
  33. mg12 | #33
    Oct 18th, 2009 at 09:39

    @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? :?:

    Reply | Quote
  34. skun | #34
    Nov 26th, 2009 at 22:49

    @Accecc
    悲哉！！！

    Reply | Quote
  35. 草根CEO | #35
    Jan 21st, 2010 at 23:22

    我还是相信我的动手能力的 :evil:

    Reply | Quote
  36. 乘风归来兮 | #36
    Mar 11th, 2010 at 17:11

    好，看了你的文章，有了半桶水了

    Reply | Quote
  1. No trackbacks yet.

Twitter Email feed
RSS feed