加一个网址预览按钮

xfzn 教程攻略 1022

如题，加一个按钮

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

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

    9个月前 3条评论
    • xfzn 8个月前 评论

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

    • selan519 回复 xfzn 6个月前 评论

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

    • xfzn 回复 selan519 5个月前 评论

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

  • 89141752
    89141752 评论

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

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

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

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

    8个月前 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

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

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

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

相关问题

发布新帖 提交工单