排行榜 统计
  • 文章总数:31 篇
  • 评论总数:6 条
  • 分类总数:8 个
  • 最后更新:5月8日

chevereto WP前端上传适配效果展示B2主题

本文阅读 2 分钟
首页 教程/笔记 正文

chevereto图床是一个拥有开源免费的图床【开源版】以及付费高级版的图床程序。
其简单方便地设置受到很多人地喜爱。

本次我们主要想实现这样一个结果:

访客在网站上发布文章时,可以直接点击按钮进行图片的黏贴上传至chevereto图床,从而节省服务器空间。

操作方法如下:

首先在主题footer.php下添加该整合代码:

<!--图床上传--><div id="editor"><button data-chevereto-pup-trigger data-target="#editor"><span class="b2font">&#xe623;上传图片</span></button></div><script async src="//img.waoww.com/sdk/pup.js" data-url="https://img.waoww.com/upload" data-mode="manual" data-auto-insert="0" data-fit-editor="0"></script>

然后外观-自定义-额外css里面添加适配样式:

#editor{    position:fixed;    bottom:160px;    left:10px;}#editor > button{    position:fixed;    background-color:#0084ff;    }#editor > button>span{    writing-mode: vertical-rl;  height:80px;}@media screen and (max-width:770px){    #editor{        display:none;    }

并没有做复杂的样式修改。进行了基本的适配,宽度小于770px这个分辨率的屏幕直接舍弃了该按钮【同主题右下角的侧边工具一样】

相对于傻傻的chevereto自带提供的js,这里进行了部分的自定义。添加了这几项:

data-mode="manual" data-auto-insert="0" data-fit-editor="0"
原创文章,作者:阿七,如若转载,请注明出处:https://a7a7.net/41.html
如何在WordPress文章顶端或者末尾插入固定内容?
« 上一篇 04-26

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

标签TAG

热评文章