wordpress的评论框插入代码,图片,字体加粗,斜体,引用

作者: Arvin Chen 分类: Wordpress 来源: Break易站(www.breakyizhan.com)

这篇文章主要说的是给wordpress的评论框插入代码,图片,字体加粗,斜体,引用等的增强。操作很简单,主要有下面两个步骤:

  1. 引入一段JavaScript脚本
  2. 在comments.php对于位置添加html代码
  3. 对评论框的css样式进行调整

wordpress的评论框插入代码,图片,字体加粗,斜体,引用

引入下面这段JavaScript脚本,不管你是用<script>标签写在foot.php还是保存文件,然后调用,都是可以的。

comments.js下载地址
注意:因为这里的代码高亮用的是SyntaxHighlighter,所以插入代码都是用[]表示,比如插入java代码,用的是[]里面加上java标签。主要注意下面这段js函数,它可以让你添加更多的功能(下划线功能):


underline: function() {
addEditor(g, '<u>', '</u>')
},

在comments.php对于位置添加html代码,这段代码一般是添加再评论框的上面或者下面的。

<div class="commentfunction">
    <select onchange="window.location=this.value">
<option value="添加代码" style="display:none">添加代码</option>
<option value="javascript:SIMPALED.Editor.xml()">Html/xml</option>
<option value="javascript:SIMPALED.Editor.java()">Java</option>
<option value="javascript:SIMPALED.Editor.javascript()">JavaScript</option>
<option value="javascript:SIMPALED.Editor.php()">PHP</option>
<option value="javascript:SIMPALED.Editor.python()">Python</option>
<option value="javascript:SIMPALED.Editor.sql()">SQL</option>
<option value="javascript:SIMPALED.Editor.csharp()">C#</option>
<option value="javascript:SIMPALED.Editor.cpp()">C++</option>
    </select>
    <a href="javascript:SIMPALED.Editor.strong()" title="粗体">
        <b>
            <i class="fa fa-bold"></i>
        </b>
    </a>
    <a href="javascript:SIMPALED.Editor.img()" title="插图片">
        <b>
            <i class="fa fa-image"></i>
        </b>
    </a>
    <a href="javascript:SIMPALED.Editor.quote()" title="引用">
        <b>
            <i class="fa fa-quote-left"></i>
        </b>
    </a>
    <a href="javascript:SIMPALED.Editor.ahref()" title="插链接">
        <b>
            <i class="fa fa-link"></i>
        </b>
    </a>
    <a href="javascript:SIMPALED.Editor.del()" title="删除线">
        <b>
            <i class="fa fa-strikethrough"></i>
        </b>
    </a>
    <a href="javascript:SIMPALED.Editor.underline()" title="下划线">
        <b>
            <i class="fa fa-underline"></i>
        </b>
    </a>
</div>





如果在comments.php找不到对应的添加位置,可以在对应的子目录找一下对应的$comments_args这个参数,是作为wordpress评论框的一种方法,这里就不再多加描述了,贴出对应的php代码给大家参照一下。

function sniuk_amp_comment_form() {
$comments_args = array(
'comment_field' => '
<div class="comment-form-comment">
<div class="commentfunction">
<select onchange="window.location=this.value">
<option value="添加代码" style="display:none">添加代码</option>
<option value="javascript:SIMPALED.Editor.xml()">Html/xml</option>
<option value="javascript:SIMPALED.Editor.java()">Java</option>
<option value="javascript:SIMPALED.Editor.javascript()">JavaScript</option>
<option value="javascript:SIMPALED.Editor.php()">PHP</option>
<option value="javascript:SIMPALED.Editor.python()">Python</option>
<option value="javascript:SIMPALED.Editor.sql()">SQL</option>
<option value="javascript:SIMPALED.Editor.csharp()">C#</option>
<option value="javascript:SIMPALED.Editor.cpp()">C++</option>
</select>
<a href="javascript:SIMPALED.Editor.strong()" title="粗体"><b><i class="fa fa-bold"></i></b></a>
<a href="javascript:SIMPALED.Editor.img()" title="插图片"><b><i class="fa fa-image"></i></b></a>
<a href="javascript:SIMPALED.Editor.quote()" title="引用"><b><i class="fa fa-quote-left"></i></b></a>
<a href="javascript:SIMPALED.Editor.ahref()" title="插链接"><b><i class="fa fa-link"></i></b></a>
<a href="javascript:SIMPALED.Editor.del()" title="删除线"><b><i class="fa fa-strikethrough"></i></b></a>
<a href="javascript:SIMPALED.Editor.underline()" title="下划线"><b><i class="fa fa-underline"></i></b></a>
</div>
<textarea id="comment" name="comment" placeholder="记录笔记..." cols="45" rows="8" maxlength="65525" required="required">'.'</textarea>
</div>',
'title_reply' => '发表笔记',
'label_submit' => '提交笔记'
);
if( class_exists( 'AMP_Base_Comments' ) ) {
AMP_Base_Comments::comment_form($comments_args);
} else {
comment_form($comments_args);
}
}

添加之后,大家可以根据自己的审美修改css样式,样例可以参照本页的评论框。

  •   本文标题:wordpress的评论框插入代码,图片,字体加粗,斜体,引用 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/wpress/5355.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注