Nana主题图片布局秒变淘宝客主题的详细教程

 懿古今   2017-03-06 09:24:41 发布  技术文档

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

Nana主题图片布局秒变淘宝客主题的详细教程_技术文档_懿古今

Nana主题图片布局未改变前

Nana主题图片布局秒变淘宝客主题的详细教程_技术文档_懿古今 第2张

Nana主题图片布局改变之后

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

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

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

  1. .taourl a {
  2.     floatleft;
  3.     background#C01E22;
  4.     color#fff!important;
  5.     line-height30px;
  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.     floatrightright;
  14.     background#fff;
  15.     line-height30px;
  16.     margin: 0;
  17.     padding: 0 10px;
  18.     border1px solid #ddd;
  19.     border-radius: 2px;
  20. }

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

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

  1. {background: $skc;}

修改成

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

即可。

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

本文地址:https://www.yigujin.cn/1138.html

你可能感兴趣的文章

文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 明月登楼的博客
    明月登楼的博客 @回复

    不错呀,功能是越来越丰富了!

    • 懿古今
      懿古今2017-03-06 12:40  回复

      @明月登楼的博客[偷笑] 这个不是集成的,是教大家DIY的,比较简单,想要做好还是需要花心思去折腾才行。

  2. 重庆游戏培训咨询
    重庆游戏培训咨询 @回复

    有时候一个小的功能,都要调试很久才能写出来呀

    • 懿古今
      懿古今2017-03-06 12:39  回复

      @重庆游戏培训咨询是的,不过熟悉主题之后修改起来就会容易很多,所以不建议经常换主题,而是用一套,然后充分DIY,慢慢地就变成属于的主题了

  3. 闲鱼
    闲鱼 @回复

    [呲牙] 有想法,动手能力也赞,哈哈

  4. 分钱榜
    分钱榜 @回复

    厉害了,我的哥,万能型主题。

  5. 神马电影网
    神马电影网 @回复

    哈哈 我的思想 [哈哈]
    懿古今这个主题很不错
    我一直在用,同时也在折腾,有时候自己不懂的,就让博主帮我折腾

  6. Koolight
    Koolight @回复

    博主太厉害了,现今WP界还活跃在前线的大神不多了。

    • 懿古今
      懿古今2017-03-07 22:59  回复

      @Koolight[偷笑] 我们这种只是小打小闹,大神离我们太遥远了

  7. 大仁博客
    大仁博客 @回复

    [赞] 有能力啥事都不在话下,主题也很棒!

    • 懿古今
      懿古今2017-03-07 22:58  回复

      @大仁博客[呲牙] 谢谢夸奖,适合自己的主题都是要自己DIY一番的

  8. 卡法
    卡法 @回复

    请问博主网站状态码返回302怎么解决,谢谢

  9. 程先生
    程先生 @回复

    这个能不能做个单独的模板页面

    • 懿古今
      懿古今2017-07-27 22:54  回复

      @程先生想要的完全可以根据本文制作成另一个模块或另一个布局

  10. 智者不惑
    智者不惑 @回复

    想请问一下博主,现在默认是直接调用最新的文章内容,在使用这个办法后,如何在grid.php这个模板里面指定调用哪个栏目分类下的文章在这个模板里面显示呢;谢谢;

    • 懿古今
      懿古今2018-03-05 11:27  回复

      @智者不惑打开这个grid.php页面就能看到相关代码,已经集成有不想显示的分类,只需要在主题选项中填写不想显示的ID即可。具体自行折腾吧。