网站首页我们习惯用摘要显示文章，但是为了更好的用户体验，又需要提供一个入口，能让用户阅读全文，对于wordpress放上一个阅读全文的链接是很简单的，你只需要用下面的一段代码放在single.php的合适位置就可以实现了：
- <a rel=“more-link” href=“<?php the_permalink()?>” title=“<?php the_title(); ?>”>阅读全文</a>
但是这样的效果显示很呆板，只有 阅读全文 几个字，所以我们希望能够美化下，能让他看着舒服些，怎么办呢？还记得小川的“拿来主义”吗？看别人哪个好看直接拿过来用就可以了，呵呵，具体教程看下文：
阅读全文美化篇
1、锁定目标网站：http://www.yueye.org/ 月夜博客，很牛X的一个技术高手；
2、保存图片，图片路径已跟踪：http://www.yueye.org/wp-content/themes/WPINK/images/icon.png；
注意：如果路径有变，直接保存小川博客图片路径：http://www.xuejianzhan.com/wp-content/themes/insider/images/icon.png；
3、图片上传到你的主题文件夹中，比如images；
4、修改index.php（首页）阅读全文的代码为下面一句：
- <a class=“readmore” title=“阅读全文” href=“<?php the_permalink()?>”>阅读全文</a>
5、在style.css中添加类属性readmore的样式；
- /*阅读全文*/
- a.readmore:link,
- a.readmore:visited {
- -moz-text-blink: none;
- -moz-text-decoration–color: -moz-use-text-color;
- -moz-text-decoration-line: none;
- -moz-text-decoration-style: solid;
- background-attachment: scroll;
- background–clip: border-box;
- background-color: transparent;
- background-image: url(“images/icon.png”);
- background-origin: padding-box;
- background-position: 0 –73px;
- background-repeat: no-repeat;
- background–size: auto auto;
- color: #454545;
- display: block;
- float: rightright;
- font-size: 14px;
- padding-bottom: 7px;
- padding-left: 0;
- padding-right: 0;
- padding-top: 5px;
- text-align: center;
- text-shadow: 0 1px 0 #DDDDDD;
- width: 92px;
- }
- a.readmore:hover {
- text-shadow:0 1px 0 #86031B;
- color:#F4F4F4;
- background:url(images/icon.png) no-repeat 0px –36px;
- display:block;
- }
注意：汗！这段代码其实是可以简化的，你会看到这个图片其实还有其他的东东在里面，但是小川ps技术有限，只能全搬过来了，希望ps高手改进使用，如果你和我一样菜，那就只能凑合着用了，不过小川后续会呱劲学习ps技术的，里面images/icon.png路径你可得酌情修改哦！
6、修改后上传覆盖就偶了，其他文件如分类目录category.php等想index.php一样的修改方法即可；
阅读全文优化篇
这个就简单多了，因为阅读全文会导致蜘蛛、爬虫、或是搜索引擎的重复抓取，不利于SEO，所以需要在阅读全文这句代码中加入nofollow标签，屏蔽权重转移，所以你只需要把 阅读全文 那句代码再次变身为以下代码即可：
- <a class=“readmore” rel=“nofollow” title=“阅读全文” href=“<?php the_permalink()?>”>阅读全文</a>
遇到问题可以留言，小川会对你的问题回或者不回的，呵呵！
评论(0)