当前位置:园子博客 » Wordpress » 美化 WordPress 的阅读全文链接

美化 WordPress 的阅读全文链接

9月 20th, 2009 | Filed under Wordpress | 共有9,623次浏览

使用 wordpress 自动截断功能之后会在摘要文字后面显示诸如“阅读全文”或“继续阅读”等文字链接,点击可阅读全文内容。一般的主题显示的都只是一个链接,并不能起到良好的引导用户阅读的功能。本文与大家分享下美化 WordPress 的阅读全文链接的方法与步骤。

先来看下园子博客上的“阅读全文”美化效果:

园子博客上的阅读全文链接

园子博客上的阅读全文链接

整体实现是参考我爱水煮鱼博客上的链接效果的,其实就是简单的定义一下 css 样式,先设计好一个自己喜欢的箭头图片,上传到图片文件夹里面,把以下 css 代码加入到 style.css 里面:

1
2
3
4
5
.more-link {
	padding:0 23px 0 0;
	background:url(img/read_more.gif) 100% 3px no-repeat;
	text-decoration:none;
}

你可能需要更改上面的图片路径为你的设计好的图片路径,最后刷新下你的网站前台页面即可看到像园子博客一样的效果。

有时候一个注意细节的设计就能在一定程度上提升用户体验,加上小图标的设计是不是更加能起到引导用户点击链接的功能呢?

  1. 康橋
    11月 4th, 201004:12

    求那個箭頭的圖標~~

    • 园子
      11月 4th, 201010:14

      @康橋
      蓝色的没有了,有个深色的,你看看能用不:
      http://www.yzznl.cn/wp-content/uploads/2010/11/read_more.gif

  2. Dawnson
    10月 8th, 201010:09

    看起来不错,仔细想想还是算了,现在越来越不想折腾了!

  3. 英语阅读
    11月 23rd, 200911:30

    有些难!

  4. 园子
    10月 14th, 200914:16

    @艾思达
    加我 QQ 我传给你~

  5. 艾思达
    10月 14th, 200911:29

    没有收到啊,astropack@gmail.com

  6. 园子
    10月 14th, 200911:26

    @艾思达
    已经发送到您的邮箱
    请查收~

  7. 艾思达
    10月 14th, 200911:21

    这个阅读全文的箭头图标可以发我个吗,astropack@gmail.com

  8. 百学山
    10月 13th, 200910:53

    可以去试试,看看效果如何

  9. 抢注域名
    10月 5th, 200915:54

    感谢了,那个阅读全文的对我的帮助很大,谢了

  10. 摇滚帮 SLOW HAND
    9月 28th, 200916:35

    不错不错!!




  11. Rubinz
    9月 24th, 200901:33

    我的比你的简单,嘿嘿,Read more »

  12. sck
    9月 23rd, 200920:06

    的确很美观,我看看能不能用在我博客上
    ps:园子你统计文章点击次数的是用什么插件的呢?

  13. 老孙
    9月 22nd, 200914:57

    嘿嘿,好久没来了,过来看看园子 😛

  14. 蛋王
    9月 21st, 200923:20

    感觉。。。放左边效果会更好,呵呵。

  15. 舍我其谁
    9月 21st, 200921:21

    已经使用了你的方法,不错。现在在找漂亮的图标。呵呵。

  16. 各种虾米
    9月 21st, 200920:45

    …………好难啊

  17. john
    9月 21st, 200916:17

    貌似简单的美化了一下。
    园子,写一篇介绍如何使用给用户评论回复邮件的文章吧。我查了一下,写得都不清楚。你用的什么插件?如何实现的?顺便学习。

    • 园子
      9月 21st, 200920:25

      @john
      这几天没时间写了
      我用的是 Mail to Commenter 插件
      你也可以尝试下 WP Thread Comment 插件
      都很简单~

  18. liveasx
    9月 21st, 200916:09

    一个月100G流量.想用还用不完.

  19. fcola
    9月 21st, 200912:00

    的确好看了很多,不过网站流量有限,该省的还是省了吧 🙁

  20. 卢松松
    9月 21st, 200910:50

    用css在前面加了几个小图标?

  21. goldapple
    9月 21st, 200900:14

    那个图标要是能动就好了

  22. 占奇博客
    9月 21st, 200900:01

    对了,我建了一个博主交流群,希望你可以参加,增进友谊,让我们组成一个互访大家庭吧。
    群号为28487890

  23. 占奇博客
    9月 20th, 200919:52

    很有新意的方法。

  24. A.shun
    9月 20th, 200919:23

    确实好看多了
    不过我一般都是点标题的

  25. Hobo
    9月 20th, 200918:00

    呵呵方法很简单。

  26. 歪豆
    9月 20th, 200914:29

    要图片呀,会增大流量吧

    • 园子
      9月 20th, 200922:21

      @歪豆
      这个图片还不到2K
      呵呵,不会增大流量,基本没感觉~

  27. 先看看
    9月 20th, 200913:20

    这个倒是不错,至少有新意。

您必须在 登录 后才能发布评论.