看到jdeal的走心评论觉得还不错，但是实现起来有些麻烦，同时跟pix风格也不太兼容，所以弄了一个简版的“走心评论”。

latest-comment-by-user.php 代码如下：

<?php
/**
 * Latest Comment By User Function
 *
 * @link https://evan.xin
 *
 * @package pix
 */

// 注册并加载最新评论的CSS样式
function enqueue_latest_comment_styles() {
    wp_enqueue_style('latest-comment-style', get_template_directory_uri() . '/css/latest-comments.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'enqueue_latest_comment_styles');

// 辅助函数：生成最新评论列表
function generate_latest_comments_list() {
    global $wpdb;
    $output = '';

    // 获取最新的50个评论
    $comments = get_comments(array(
        'number' => 200,
        'status' => 'approve',
        'order' => 'DESC'
    ));

    $comment_author_emails = array();
    $latest_comments = array();

    foreach ($comments as $comment) {
        if (!in_array($comment->comment_author_email, $comment_author_emails)) {
            $comment_author_emails[] = $comment->comment_author_email;
            $latest_comments[] = $comment;
        }
    }

    $output .= '<div class="latest-comments-section">';

    if (!empty($latest_comments)) {
        $output .= "<ul class='latest-comments-list'>";
        foreach ($latest_comments as $comment) {
            $avatar = get_avatar($comment->comment_author_email, 96);
            $article_title = esc_html(get_the_title($comment->comment_post_ID));
            $comment_content = wp_trim_words($comment->comment_content, 20, '...');
            $comment_link = get_comment_link($comment);

            $output .= "<li>
                            <div class='comment-item'>
                                <div class='avatar'>{$avatar}</div>
                                <div class='comment-content'>
                                    <h3 class='article-title'><a href='{$comment_link}'>{$article_title}</a></h3>
                                    <p>{$comment_content}</p>
                                </div>
                            </div>
                        </li>";
        }
        $output .= "</ul>";
    } else {
        $output .= "<p>暂时还没有评论，快点评论上榜吧！</p>";
    }

    $output .= '</div>';

    return $output;
}

// 短代码函数：最新评论
function latest_comments_shortcode() {
    return generate_latest_comments_list();
}
add_shortcode('latest_comments', 'latest_comments_shortcode');

latest-comments.css 代码如下：

.latest-comments-section {
    margin-bottom: 15px;
    padding: 0;
}

.latest-comments-section h2.entry-title {
    font-size: 14px;
    margin-bottom: 12px;
    color: #333;
}

.latest-comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest-comments-list li {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 20px;
    overflow: hidden;
}

.latest-comments-list .avatar {
    float: left;
    margin-right: 25px;
    border-radius: 50% !important;
    width: 45px;
    height: 45px;
}

.latest-comments-list .comment-content {
    overflow: hidden;
}

.latest-comments-list .article-title {
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
    text-decoration: none; /* Remove underline from links */
}

.latest-comments-list p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

@media (max-width: 600px) {
    .latest-comments-list .avatar {
        width: 48px;
        height: 48px;
    }
}

使用方法

1. 将上述PHP代码保存为latest-comment-by-user.php，并将其放在和functions.php文件相同的目录下即可；

2. 将上述CSS代码保存为latest-comments.css，并将其放置在你的WordPress主题的css文件夹中。如果没有可以新建一个css文件夹，与php在同一个目录下即可；

3. 在你的WordPress主题的functions.php文件中，添加以下代码来包含latest-comment-by-user.php文件：

require get_template_directory() . '/latest-comment-by-user.php';

在你的WordPress主题的style.css文件中，添加以下代码来包含latest-comments.css文件：

@import url('/path/to/latest-comments.css');

🔔提示：/path/to/latest-comments.css 这里的path/to是指：http://123.com/wp-content/themes/pixpix/css/latest-comments.css

现在，你可以通过在文章、页面或任何支持短代码的地方使用短代码来显示“走心评论”了。

[latest_comments]

转载或引用本站文章请注明出处
© 2024 www.evan.xin