l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中创建最近评论页面（2 种方法）

如何在 WordPress 中创建最近评论页面（2 种方法）

Bug编译狮

Bug编译狮

在 WordPress 网站上创建最近评论页面是一种很好的方式来展示网站上的最新评论，这不仅可以增加用户互动性，还能提高网站的活跃度。以下是两种常见的方法来实现这一功能。

方法一：使用插件

  1. 安装和激活“最近评论”插件：

    • 访问您的 WordPress 后台。
    • 导航到“插件”部分。
    • 搜索并找到“最近评论”插件。
    • 选择该插件并点击“安装”，然后点击“激活”。

  2. 设置最近评论页面：

    • 在后台菜单中，找到“编辑”标签页。
    • 找到“最近评论”选项卡。
    • 配置您喜欢的选项，如显示评论的数量、评论者姓名等。
    • 设置评论日期排序或按用户名排序。

  3. 查看最近评论页面：

    • 使用浏览器打开“最近评论”页面。

示例代码：

假设我们正在使用的是“最近评论”插件，并且我们想要在首页添加这个页面。以下是在 PHP 文件中启用“最近评论”插件的基本示例代码：

<?php if (have_comments()) : ?>
    <h2 class="comments-title">最新评论</h2>
    <?php comments_template(); ?>
<?php endif; ?>

这段代码会根据是否存在评论来决定是否显示最新的评论列表。如果存在评论，则会调用默认的评论模板来显示这些评论。

方法二：手动创建页面

如果您不想使用插件，可以手动创建一个页面，并通过自定义编码来实现相同的功能。

  1. 创建新页面：

    • 登录 WordPress 后台。
    • 点击“页面”标签，然后点击“新建页面”按钮。
    • 输入页面标题，例如“最新评论”。

  2. 编写 HTML/CSS/JavaScript：

    • 编辑页面内容，通常会在“页面编辑器”中完成。
    • 添加一些基本的 HTML 结构，确保评论显示在正确的位置。例如，您可以使用 div 标签和 CSS 类来控制样式。

  3. CSS 样式：

    • 为评论区域添加背景颜色或其他样式以区分其他内容。 
      .comment-area {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}

  4. JavaScript 动画：

    • 如果您希望在评论滚动时显示更多评论，可以在 JavaScript 中添加动画效果。

  5. HTML 结构：

    • 创建一个结构良好的 HTML 页面，包括一个容器用于显示评论，以及必要的类名和 ID 来定位元素。

  6. 效果展示：

    • 将上述代码保存为页面文件，然后发布到您的网站。浏览该页面，您应该能够看到最新的评论列表。

这种方法虽然不如使用插件那样直观和自动，但提供了一种完全定制的方式来满足特定需求。通过这种方式，您可以根据自己的设计和功能需求调整评论页面的效果。

总结

以上两种方法都可以帮助您在 WordPress 网站上创建一个展示最新评论的页面。选择哪种方法取决于您的具体需求和偏好。无论是使用插件还是手动创建页面，都能有效地提升用户体验，增强社区互动。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

目标

在 WordPress 中创建一个最近评论页面，以便用户可以轻松浏览并了解网站上的最新评论。

方法 1: 使用 Recent Comments 模块

步骤 1: 安装和启用模块

首先，在 WordPress 主题或插件目录下安装并启用 Recent Comments 模块。这通常需要登录到后台管理界面，然后点击“主题”或“插件”，选择“安装”选项来安装模块。

sudo wp plugin install Recent Comments -n 'Recent Comments'

步骤 2: 修改模板文件

接下来，修改主题或插件中的相关模板文件以显示最近评论。以下是在 functions.php 文件中添加的示例代码：

function display_recent_comments($comments) {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'order' => 'ASC',
        'orderby' => 'date',
    );
    $recent_comments = get_posts($args);
    if ($recent_comments) : ?>
        <div class="recent-comments">
            <?php foreach ($recent_comments as $comment): ?>
                <h3><?php echo $comment->post_title; ?></h3>
                <p><?php echo wp_trim_words(get_the_content($comment->comment_content), 20); ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif;
}
add_action('wp_head', 'display_recent_comments');

说明: 这段代码将获取前 5 条最热门的文章（根据日期排序），并将它们显示在一个名为 “recent-comments” 的 <div> 标签内。

示例代码：

<div class="recent-comments">
    <h3>最近评论</h3>
    <p>这里是最近评论的内容。</p>
</div>

方法 2: 自定义功能函数

步骤 1: 创建自定义功能函数

创建一个新的 PHP 文件，例如 custom_recent_comments.php，并在其中编写以下代码：

function custom_recent_comments() {
    global $wpdb;

    // 获取所有文章
    $query = "SELECT * FROM {$wpdb->posts} WHERE post_type = 'post'";
    $result = $wpdb->get_results($query);

    // 清空旧数据
    delete_all_comments();

    // 更新数据库
    update_post_meta(0, '_comment_count', count($result));

    // 添加新数据
    foreach ($result as $post_id) {
        $comment_data = [
            'ID' => $post_id,
            'comment_author' => 'User Name',
            'comment_date' => date('Y-m-d H:i:s'),
            'comment_content' => 'This is a comment.',
            'comment_approved' => '1',
        ];
        update_comment_status($post_id, 'approve');

        // 添加评论
        $comment = wp_insert_comment($comment_data);
        $comment_ID = $comment['comment_ID'];
        add_to_comments_array($comment_ID, $comment);
    }
}

add_action('init', 'custom_recent_comments');

步骤 2: 在主题或插件中激活此功能

  • 如果使用的是主题，请在该主题的 functions.php 或 functions.php 文件中包含上述代码。
  • 如果使用的是插件，请确保已正确激活插件。

示例代码：

<script type="text/javascript">
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
</script>

<a href="#myTopnav" class="scrollto">Scroll to top</a>

<nav class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
    <a href="#" onclick="myFunction()">More...</a>
</nav>

在这个例子中，我们通过自定义功能函数在每个文章底部添加了一个评论框。当用户滚动时，评论框会自动出现，便于用户查看并回复评论。这种方法的优点是可以根据实际需求灵活定制，适用于多种应用场景。

,

最新更新