• Tags         
  • 2018-08-09  16:33:29        
  • 55 °C    

    这篇文章主要说的是给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样式,样例可以参照本页的评论框。

     
    转载请保留页面地址:https://www.breakyizhan.com/wpress/5355.html