美化 WordPress 的阅读全文链接

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

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

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

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

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

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

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

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

美化 WordPress 的阅读全文链接》上有38条评论

  1. john

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

发表评论