首页 仿站课堂 阅读全文美化加优化

阅读全文美化加优化

作者:

修改日期:

网站首页我们习惯用摘要显示文章,但是为了更好的用户体验,又需要提供一个入口,能让用户阅读全文,对于wordpress放上一个阅读全文的链接是很简单的,你只需要用下面的一段代码放在single.php的合适位置就可以实现了:

  1. <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(首页)阅读全文的代码为下面一句:

  1. <a class=“readmore” title=“阅读全文” href=“<?php the_permalink()?>”>阅读全文</a>  

5、在style.css中添加类属性readmore的样式;

  1. /*阅读全文*/  
  2. a.readmore:link,   
  3. a.readmore:visited {   
  4.     -moz-text-blinknone;   
  5.     -moz-text-decorationcolor: -moz-use-text-color;   
  6.     -moz-text-decoration-line: none;   
  7.     -moz-text-decoration-style: solid;   
  8.     background-attachmentscroll;   
  9.     backgroundclipborder-box;   
  10.     background-colortransparent;   
  11.     background-imageurl(“images/icon.png”);   
  12.     background-origin: padding-box;   
  13.     background-position: 0 –73px;   
  14.     background-repeatno-repeat;   
  15.     backgroundsizeauto auto;   
  16.     color#454545;   
  17.     displayblock;   
  18.     floatrightright;   
  19.     font-size14px;   
  20.     padding-bottom7px;   
  21.     padding-left: 0;   
  22.     padding-right: 0;   
  23.     padding-top5px;   
  24.     text-aligncenter;   
  25.     text-shadow: 0 1px 0 #DDDDDD;   
  26.     width92px;   
  27. }   
  28. a.readmore:hover {   
  29.     text-shadow:0 1px 0 #86031B;   
  30.     color:#F4F4F4;   
  31.     background:url(images/icon.png) no-repeat 0px –36px;   
  32.     display:block;   
  33. }  

注意:汗!这段代码其实是可以简化的,你会看到这个图片其实还有其他的东东在里面,但是小川ps技术有限,只能全搬过来了,希望ps高手改进使用,如果你和我一样菜,那就只能凑合着用了,不过小川后续会呱劲学习ps技术的,里面images/icon.png路径你可得酌情修改哦!
6、修改后上传覆盖就偶了,其他文件如分类目录category.php等想index.php一样的修改方法即可;

阅读全文优化篇

这个就简单多了,因为阅读全文会导致蜘蛛、爬虫、或是搜索引擎的重复抓取,不利于SEO,所以需要在阅读全文这句代码中加入nofollow标签,屏蔽权重转移,所以你只需要把 阅读全文 那句代码再次变身为以下代码即可:

  1. <a class=“readmore” rel=“nofollow” title=“阅读全文” href=“<?php the_permalink()?>”>阅读全文</a>  

遇到问题可以留言,小川会对你的问题回或者不回的,呵呵!