前几天QQ好友『XiaO』找到我帮忙把Nana主题的图片布局中的日期和阅读数改为两个按钮,分别直达淘宝店铺和宝贝详情,这样一来,这个图片布局就可以秒变淘宝客主题了。个人觉得这个想法非常有意思,但不是每个人都需要这个功能,所以就懒得增加一个淘宝客布局,所以今天就教教大家如何把Nana主题图片布局秒变淘宝客主题。

Nana主题图片布局未改变前

Nana主题图片布局改变之后

从上图可以看出,这个仅仅是把原图片布局中的日期和阅读数改为直达店铺和宝贝详情按钮,点击图片依然是进入该篇文章,点击直达店铺就是到达指定的淘宝店铺,点击宝贝详情是进入到这个淘宝宝贝的详情页。而这两个按钮的链接地址是在编辑文章的时候,在后台直接通过添加自定义栏目实现,名称分别是tburl1和tburl2,值就是链接地址。PS:这两个按钮名称可自行修改哦。

Nana主题图片布局秒变淘宝客主题的详细步骤

1、将以下代码添加到主题文件最后

  1. .taourl a {

  2. float: left;

  3. background: #C01E22;

  4. color: #fff!important;

  5. line-height: 30px;

  6. margin: 0;

  7. padding: 0 10px;

  8. border-radius: 2px;

  9. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  10. }

  11. .taourl a:hover{opacity:.6}

  12. .detail a {

  13. float: rightright;

  14. background: #fff;

  15. line-height: 30px;

  16. margin: 0;

  17. padding: 0 10px;

  18. border: 1px solid #ddd;

  19. border-radius: 2px;

  20. }

2、下载以下文件解压后上传grid.php文件到Nana主题文件夹覆盖原grid.php文件。

点击下载grid.php文件

3、打开Nana主题的文件,找到以下代码

  1. {background: $skc;}

修改成

  1. ,.taourl a{background: $skc;}

即可。

至此,我们所使用的Nana主题的图片布局已经变成一个简易版的淘宝客主题了。我们可以换一个角度,比如这两个按钮变成下载按钮就可以做成软件下载主题,变成直达网站或其他按钮就可以变成网站目录或博客目录主题。其实只要我们思路开阔一些,多发散一些思维,弄懂一套主题就可以变出很多种类型的主题,关键在于多折腾多思考。

本文地址:

相关推荐