将 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
    2009-08-09 19:44

    占座 学习。 :?:

  2. bolo | #2
    2009-08-09 19:45

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

  3. Accecc | #3
    2009-08-09 19:50

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

  4. 小棒打鼓 | #4
    2009-08-09 21:20

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

  5. 麦子 | #5
    2009-08-09 23:55

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

  6. Daemon Tools | #6
    2009-08-10 00:56

    有机会改改~

  7. chisdy | #7
    2009-08-10 03:27

    感觉mg12的代码用着放心。

  8. Calcifer | #8
    2009-08-10 07:26

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

  9. hslx111 | #9
    2009-08-10 07:45

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

  10. 小Bee | #10
    2009-08-10 10:28

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

  11. 烏石·鏡@Ernsky | #11
    2009-08-10 12:30

    喜欢这样的介绍！！！

  12. hugr | #12
    2009-08-10 13:31

    学习了

  13. 沸腾 | #13
    2009-08-10 13:53

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

  14. 园子 | #14
    2009-08-10 14:11

    已经试着改过了，呵呵~

  15. 陶晓爱 | #15
    2009-08-10 16:53

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

  16. Calcifer | #16
    2009-08-10 17:29

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

  17. bolo | #17
    2009-08-10 19:52

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

  18. Showfom | #18
    2009-08-11 01:51

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

  19. 漢文溪 | #19
    2009-08-11 09:15

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

  20. 陶晓爱 | #20
    2009-08-11 10:44
  21. haven | #21
    2009-08-11 18:05

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

  22. dust2k | #22
    2009-08-12 00:13

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

  23. 沉叶霰尘 | #23
    2009-08-12 20:10

    这个图标也挺好的

  24. dengor | #24
    2009-08-13 23:22

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

  25. drupal | #25
    2009-08-18 17:49

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

  26. Aska | #26
    2009-08-21 23:27

    不错。。。

  27. David | #27
    2009-09-04 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.

  28. mg12 | #28
    2009-09-04 10:27

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

  29. Billi | #29
    2009-09-05 18:52

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

  30. 韦斯特 | #30
    2009-10-05 09:49

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

  31. 天空很美 | #31
    2009-10-08 20:38

    高手。。。

  32. Sergey | #32
    2009-10-16 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

  33. mg12 | #33
    2009-10-18 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? :?:

  34. skun | #34
    2009-11-26 22:49

    @Accecc
    悲哉！！！

  35. 草根CEO | #35
    2010-01-21 23:22

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

  36. 乘风归来兮 | #36
    2010-03-11 17:11

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

  37. 三分微笑个人博客 | #37
    2010-04-24 01:10

    博主 我的博客换了服务器以后就出现了乱码 不知道怎么解决 希望博客可以帮下忙 谢谢了 很着急 我用的就是inove这个主题

  38. 淘流行部落 | #38
    2010-06-26 18:21

    你好，你的主题我一直在用，我觉得这个主题是我见过之中最实用最华丽的WP主题，感谢你的分享！

  1. No trackbacks yet.

Twitter Email feed
RSS feed