给 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();">&#xE3C4;</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 评论框添加插入图片按钮就算完成了

目前已经选择了新浪微博的图床。。。先这样吧