给 WordPress 主题 C7V5 评论框添加插入图片按钮
对于评论中是否需要加上图片这个问题，我还是一直在考虑的
一个技术博客，评论区的讨论难免会有一些需要发截图的地方，但是如果不能直接发图片的话，就只能发我邮箱了
同时为了确保上传的图片不会死链，还要搞一个图床来，如果是自己搭建的图床还要保证不被滥用
现在就有两种方案了
1、使用腾讯云的 COS 对象存储服务，加上腾讯云的鉴黄等服务，人工定期查询一下图片，并开启防盗链
2、使用新浪微博等图床
我偏向于后者，但是万一哪天渣浪不给开放外链图片引用，会存在多少死链…
想好了在搞吧，先来说一下对本站使用主题 C7V5 的评论框添加插入图片按钮的操作
找到主题 commentform.php 文件，在大概第 111 行的地方
<?php if ( c7v5_get_option('smilies') && function_exists('c7v5_smilies') ) : ?>
<i class="icon-smilies" title="表情"></i>
<div class="comment-smilies"><?php c7v5_smilies(); ?></div>
<?php endif; ?>在其中增加一个插入图片的按钮：
<?php if ( c7v5_get_option('smilies') && function_exists('c7v5_smilies') ) : ?>
<i class="icon-pic" title="图片" onclick="addimg();"></i>
<i class="icon-smilies" title="表情"></i>
<div class="comment-smilies"><?php c7v5_smilies(); ?></div>
<?php endif; ?>然后目前只让点击的时候，自动填入一个 img 的标签，所以在主题自定义 js 代码中添加如下代码
function addimg() {
document.getElementById("comment").value = document.getElementById("comment").value + '<img src="请输入可访问的图像地址,本站图床开发中" alt="对应的图像描述" />'
};再来给图片的 icon 来个样式
.icon-pic{
float:left;
position: relative;
top: -1px;
width: 1em;
height: 1em;
font-size: 21px;
color: #999;
cursor: pointer;
display: inline-block;
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
}同样，添加在主题的自定义 css 代码中，有 CDN 缓存的刷新一下 js 和 css 的缓存，然后查看评论框
这样，给 WordPress 主题 C7V5 评论框添加插入图片按钮就算完成了
目前已经选择了新浪微博的图床。。。先这样吧
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-11-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。