纯代码实现 WordPress 评论中嵌入图片

方法一
某些情况下发表评论添加图片有利于站长和访客的交流,但 WordPress 本身并不具备评论贴图功能,现在将下面的代码添加到主题 functions.php 文件中。

add_action('comment_text', 'comments_embed_img', 2);
function comments_embed_img($comment) {
    $size = auto;
    $comment = preg_replace(array('#(http://([^\s]*)\.(jpg|gif|png|JPG|GIF|PNG))#','#(https://([^\s]*)\.(jpg|gif|png|JPG|GIF|PNG))#'),'<img src="$1" alt="评论" style="width:'.$size.'; height:'.$size.'" />', $comment);
    return $comment;
}

完成后,在发表评论时直接粘贴图片链接地址即可,这也是目前本站使用的,具体效果可以在本文留言并贴图。

方法二

define('ALLOW_POSTS', '');
function lxtx_fa_comment_image( $comment ) {
    $post_ID = $comment["comment_post_ID"];
    $allow_posts = ALLOW_POSTS ? explode(',', ALLOW_POSTS) : array();
    if(in_array($post_ID,$allow_posts) || empty($allow_posts) ){
        global $allowedtags;
        $content = $comment["comment_content"];
        $content = preg_replace('/(https?:\/\/\S+\.(?:jpg|png|jpeg|gif))+/','<img src="$0" alt="" />',$content);
        $allowedtags['img'] = array('src' => array (), 'alt' => array ());
        $comment["comment_content"] = $content;
    }
    return $comment;
}
add_filter('preprocess_comment', 'lxtx_fa_comment_image');

比如指定我的留言板和友情链接页面允许插图,他们的 ID 分别为 110 和 114,则define(‘ALLOW_POSTS’, ‘110,114’);
注:ALLOW_POSTS 里定义的是允许自动贴图的文章或页面的 post_ID ,多篇文章或页面用 , 隔开即可,如需所有文章和页面起效则定义为空即可,添加上述代码后,在发表评论时直接粘贴图片链接地址即可。

方法三

首先,在 functions.php 中加入下面的代码:

function lxtx_embed_images($content) {
    // $content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $content);
    $content = preg_replace_callback("/\[img=?\]*(.*?)(\[\/img)?\]/", function($r){ return '<img src="'.$r[1].'" alt="'.basename("$r[1]").'" />'; }, $content);
    return $content;
}
add_filter('comment_text', 'lxtx_embed_images');

然后,使用[img]图片 src 地址[/img]来添加图片~
当然,为了使用方便贴这个 [img]标签,也可以给评论框那加一个按钮,具体方法如下。
先加入下面的这个 js 代码:

function embedImage() {
var URL = prompt('请输入图片 URL 地址:', 'http://');
if (URL) {
document.getElementById('comment').
value = document.getElementById('comment').value + '[img]' + URL + '[/img]';
}
}

再打开主题评论框所在的文件(如:comment.php 等),在适当的位置加入一个“插入图片”按钮:

<a href="javascript:embedImage();">插入图片</a>

当然直接无限制的显示图片,给评论区域的布局和美观程度都带来压力,影响范围太大,因此本站可能随时调整该功能。

发表回复

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

  1. 仿真绿色植物 说道:

    [img]https://ws1.sinaimg.cn/large/a1e4b7b5gy1g1mv048nozj20zk0gojy7.jpg[/img] 是不是这样的格式发帖

    1. 黑鸟君 说道:

      不需要,直接是常用的图片后缀的网络地址就可以,你这个是用第三种方法的

  2. 访客贴图 访客贴图 说道:

    评论贴图功能测试:

    https://ws1.sinaimg.cn/large/a1e4b7b5gy1g1mv048nozj20zk0gojy7.jpg