加一个网址预览按钮

xfzn 教程攻略 1084

如题,加一个按钮

打开主题文件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

效果如图

回复

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

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

    1年前 3条评论
    • xfzn 1年前 评论

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

    • selan519 回复 xfzn 11个月前 评论

      这个文件不存在了,应该是主题更新了。还有新的教程来实现吗?

    • xfzn 回复 selan519 10个月前 评论

      才发现主题新版本改了,已经更新了,在下面评论

  • 89141752
    89141752 评论

    乖乖一个简简单单的教程。。写成这样。。。

    来给我找找这个文件在哪templates\content-site.php在164行,即

    11个月前 0条评论
  • HaiVong
    HaiVong 评论

    主题自带一个预览功能,不是道和你这个是不是一样

    11个月前 0条评论
  • xfzn
    xfzn 评论

    新版本onenav.40423
    更改如下
    找到这个文件夹→ onenav\inc\functions\io-single-site.php
    在404行结尾回车,添加如下代码:

     $btn .= '<a style="margin-left: 10px;" href="https://s0.wp.com/mshots/v1/'.$m_post_link_url.'" rel="nofollow" title="网站预览" target="_blank" class="btn btn-wzyl rounded-lg"><span>'.__('预览', '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: 5px;}/*反馈边距*/

    屏幕截图-2023-05-02-203300

    11个月前 0条评论
  • anyi
    anyi 评论

    多谢,还不错。另外还也可以加个图标「<i class="iconfont icon-chakan"></i>」

    9个月前 0条评论
One Nav 导航主题