加一个网址预览按钮

xfzn 教程攻略 319

如题,加一个按钮

打开主题文件templates\content-site.php在164行,即

 <a href="javascript:" class="btn btn-arrow qr-img"  data-toggle="tooltip" data-placement="bottom" data-html="true" title="<?php echo $qrurl ?>"><span><?php echo $qrname ?><i class="iconfont icon-qr-sweep"></i></span></a>

的后面回车添加

<a style="margin-left: 10px;" href="https://s0.wp.com/mshots/v1/<?php echo ($m_link_url)?>" rel="nofollow" title="网站预览" target="_blank" class="btn btn-wzyl rounded-lg"><span><?php _e('预览','i_theme') ?></span></a>

添加好后是这样的:

<a href="javascript:" class="btn btn-arrow qr-img"  data-toggle="tooltip" data-placement="bottom" data-html="true" title="<?php echo $qrurl ?>"><span><?php echo $qrname ?><i class="iconfont icon-qr-sweep"></i></span></a>
<a style="margin-left: 10px;" href="https://s0.wp.com/mshots/v1/<?php echo ($m_link_url)?>" rel="nofollow" title="网站预览" target="_blank" class="btn btn-wzyl rounded-lg"><span><?php _e('预览','i_theme') ?></span></a>

然后主题设置添加自定义css

 .btn-wzyl{color:#282a2d;background-color:rgba(138,138,138,.15);border-color: transparent;}
.btn-wzyl:hover {color: #fff;background: #202224;} 
a.btn.btn-danger.qr-img.tooltip-toggle.rounded-lg {margin-left: 0px;}

asdddd

效果如图

回复

共1条回复 我来回复
  • selan519
    selan519 评论

    预览作用是啥?当前页面预览?

    1个月前 1条评论
    • xfzn 2天前 评论

      预览添加一个链接,例如:https://s0.wp.com/mshots/v1/https://www.iotheme.cn/

One Nav 导航主题