让 WordPress 评论框显示在评论内容之前

让 WordPress 评论框显示在评论内容之前

本次功能完全由 ChatGPT 实现,因此发布此文也是近期我对人工智能使用的一个心得体会…让 WordPress 评论框显示在内容之前,ha?起因是有一博友说评论框在评论最后感觉不太合适,体验不佳。想想确实也是,当访客围观一篇旧文想要发表一点见解时,需要翻过正文再翻过长长的评论内容,然后才能到达输入框键入文字回复,用户体验确实比较糟糕……这么一想我那留言板长久以来没人发言恐怕也有这个因素。

说干就干,目前已经发现了问题,接下来开始需求分析:想要实现访客发表评论时尽快抵达评论框。然后是解决方案:1、给评论分页;2、给评论框区域加个快捷导航,访客点一下展开或者直达;3、调换评论框和评论内容的位置,保持其一直在前;4、做一个浮动评论框;5、评论内容前后都加上评论框;6、留给你们脑洞大开。

以上几种方案排除掉大动干戈的,比较好处理的是以上第 1、3、5 种方案,我个人十分讨厌内容分页,并且分页也并不利于访客浏览。于是尝试给留言板添加两个评论框…嗯,你可能觉得这很蠢,确实很蠢,就不展开说了。然后我又设想把评论框放在评论内容之前…emmm,我个人觉得评论条数不多的情况下,还是把我这又大又丑的评论框放在页脚比较好看一些。

咦!忽然想到:要不做个判定,当评论数在一定数量以上时评论框置顶,否则在底部。

确定了方案最后开始工程建设,首先找到控制 WordPress 评论的代码段,然后对其进行改造……具体的施工环节咱指挥工人干就行,毕竟咱只会动嘴不会动手。不过话虽如此,这些个施工工人没有咱的领导和指挥,干活效率和正确率是相当拉跨。另外经我体验,至少在 WordPress 编程这方面,国内的文心一言、通义千问、Kimi 都不行,它们或许能读懂,但若说要写代码那是真不行,而且要现学资料,反应极慢。

Devv作为专门的编程机器人勘用,但是输入字数限制较低且阅读理解能力一般,有时候会犯低级错误,上下文逻辑也很差。最后还得是 AI 老大哥 ChatGPT,我体验下来不管是编程还是常规的语言类工作,它的响应和准度都是最快最好的。以我博客起名那篇文章来说,我后来又分别把关键词给了文心一言和通义千问,它们给出的回复总感觉是刚读过几年书的中学生,内容没啥创新,就知道堆词,末了总要“综上所诉”或者“总结来说”,诸如此类。


回到正题,我首先找到控制 WordPress 评论的代码段(一般是 comments.php),将其整个喂给 AI 让先消化消化,然后开始对话:请修改以下代码,实现当评论超过 50 条时评论框在评论内容之前,否则在最底部。AI 很快作出响应,它通过在原代码中添加判定函数、增加评论框核心代码的方式来实现,报错。我把错误结果反馈给它,它又能迅速的调整…就这样经历数个回合以后,依然有小错误没有实现我想要的结果。

让WordPress评论框显示在评论内容之前
让 WordPress 评论框显示在评论内容之前

我无奈地,自嘲般对着机器感慨了一句:我放弃了,还是不对。没想到它竟提议让我们尝试另一种方式,并且很快给出了代码…我把它写进服务器后居然成功了!至此我发现了和人工智能对话的诀窍,即要灵活运用诸如:换个方式、尝试、比如等词汇,可能会事半功倍。

随后我又提了一些小的需求,AI 都一一帮我实现了,基本达到了我预想的“当 WordPress 评论超过 50 条时,评论框在评论内容之前,否则在底部”功能,虽说目前这办法比较蠢,但至少简单轻便,对于我这样的代码盲已经很好了。我完整的comments.php代码如下,总的来说它是写了一个 JavaScript 脚本,作用在网页加载完成后,根据一些条件动态地控制网页元素的顺序和添加一些 CSS 样式。

<?php
/*
*   Comments Template
*
*   @version    1.0
*   @author     Greatives Team
*   @URI        https://greatives.eu
*/

    if ( post_password_required() ) {
?>
        <div class="help">
            <p class="no-comments"><?php esc_html_e( 'This post is password protected. Enter the password to view comments.', 'impeka' ); ?></p>
        </div>
<?php
        return;
    }
?>

<?php if ( have_comments() ) : ?>

    <!-- Comments -->
    <div id="grve-comments">
        <div class="grve-comments-header">
            <div class="grve-comments-number grve-h5">
            <?php echo"「";echo get_the_title($ID);echo"」有 "; comments_number(); ?>
            </div>
            <nav class="grve-comment-nav" aria-label="<?php esc_attr_e( 'Comments', 'impeka' ); ?>">
                <?php previous_comments_link(); ?>
                <?php next_comments_link(); ?>
            </nav>
        </div>
        <ul class="grve-comments-list">
        <?php
            wp_list_comments( array(
                'callback'       => 'impeka_grve_comments',
                'short_ping'  => true,
            ) );
        ?>
        </ul>
    </div>
    <!-- End Comments -->

<?php endif; ?>

<?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
    <div id="grve-comments">
        <p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'impeka' ); ?></p>
    </div>
<?php endif; ?>

<?php if ( comments_open() ) : ?>
<?php
        $commenter = wp_get_current_commenter();
        $req = get_option( 'require_name_email' );

        $args = array(
            'id_form'           => 'commentform',
            'id_submit'         => 'grve-comment-submit-button',
            'title_reply'       => esc_html__( 'Leave a Reply', 'impeka' ),
            'title_reply_to'    => esc_html__( 'Leave a Reply to', 'impeka' ) . ' %s',
            'cancel_reply_link' => esc_html__( 'Cancel Reply', 'impeka' ),
            'label_submit'      => esc_html__( 'Submit Comment', 'impeka' ),
            'submit_button'     => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',

            'comment_field' =>
                '<div class="grve-form-textarea grve-border">'.
                '<div class="grve-form-inner">' .
                '<label>' . esc_attr__( 'Your Comment Here...', 'impeka' ) . '</label>' .
                '<textarea class="grve-form-input-item" id="comment" name="comment" cols="45" rows="10" aria-required="true">' .
                '</textarea></div></div>',

            'must_log_in' =>
                '<p class="must-log-in">' . esc_html__( 'You must be', 'impeka' ) .
                '<a href="' .  wp_login_url( get_permalink() ) . '">' . esc_html__( 'logged in', 'impeka' ) . '</a> ' . esc_html__( 'to post a comment.', 'impeka' ) . '</p>',

            'logged_in_as' =>
                '<div class="logged-in-as">' .  esc_html__('Logged in as','impeka') .
                '<a class="grve-text-content grve-text-hover-primary-1" href="' . esc_url( admin_url( 'profile.php' ) ) . '"> ' . $user_identity . '</a>. ' .
                '<a class="grve-text-content grve-text-hover-primary-1" href="' . wp_logout_url( get_permalink() ) . '" title="' . esc_attr__( 'Log out of this account', 'impeka' ) . '"> ' . esc_html__( 'Log out', 'impeka' ) . '</a></div>',

            'comment_notes_before' => '',
            'comment_notes_after' => '' ,

            'fields' => apply_filters(
                'comment_form_default_fields',
                array(
                    'author' =>
                        '<div class="grve-form-input grve-half-size grve-border">' .
                        '<div class="grve-form-inner">' .
                        '<label>' . esc_attr__( 'Name', 'impeka' ) . ' ' . ( $req ? esc_attr__( '*', 'impeka' ) : '' ) . '</label>' .
                        '<input id="author" class="grve-form-input-item" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '"' .
                        ' />' .
                        '</div>' .
                        '</div>',

                    'email' =>
                        '<div class="grve-form-input grve-half-size grve-border">' .
                        '<div class="grve-form-inner">' .
                        '<label>' . esc_attr__( 'E-mail', 'impeka' ) . ' ' . ( $req ? esc_attr__( '*', 'impeka' ) : '' ) . '</label>' .
                        '<input id="email" class="grve-form-input-item" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '"' .
                        ' />' .
                        '</div>' .
                        '</div>',

                    'url' =>
                        '<div class="grve-form-input grve-border">' .
                        '<div class="grve-form-inner">' .
                        '<label>' . esc_attr__( 'Website', 'impeka' )  . '</label>' .
                        '<input id="url" class="grve-form-input-item" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '"' .
                        ' />' .
                        '</div>' .
                        '</div>',
                    )
                ),
        );
?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var commentForm = document.getElementById("grve-comment-form");
                var commentsNumber = parseInt(document.querySelector(".grve-comments-number").textContent.match(/\d+/)[0]);

                if (commentsNumber >= 50) {
                    var commentsHeader = document.querySelector(".grve-comments-header");
                    commentsHeader.parentNode.insertBefore(commentForm, commentsHeader);

                    var replyTitle = document.getElementById("reply-title");
                    replyTitle.style.display = "none";

                    var commentForm = document.getElementById("grve-comment-form");
                    commentForm.style.marginBottom = "30px";
                }
            });
        </script>

        <div id="grve-comment-form">
            <?php
                //Use comment_form() with no parameters if you want the default form instead.
                comment_form( $args );
            ?>
        </div>

<?php endif;

//Omit closing PHP tag to avoid accidental whitespace output errors.

至此,你可以对比本文评论部分和留言板的效果,应该说至少目的达到了吧……又借此逼逼奈奈水了一篇文章,但不得不说,AI 真的已经在改变我们的生活了。就最近我折腾 WordPress 时已经让 AI 帮忙做了很多工作,我就像个领导,指挥它、提示他、一步一步地完善,直到完成最后的工作……尽管我的需求可能无理,指挥的方向也不对,但不管怎样它都任劳任怨,不会摔键盘,工作态度相当 OK!


后来发现这个代码始终有一点小小的 Bug,且觉得在每个页面都去做条件判定有点儿浪费资源,反正我文章的评论不会很多…于是索性复制singular.php另起了一个template-guestbook.php,把上述的 Javascript 代码复制进去控制让评论框置顶,然后设置留言页面使用本模板,达到仅更改此页的目的。

网络营销英文的相关术语及其解释
添加 rel="external nofollow" target="_blank"优化 SEO

另外分享一个代码片段:实现 WordPress 正文外部链接添加?ref=domain.com网站来源信息和rel="external nofollow" target="_blank"。这个代码片段因为我要排除目录 a 标签带来的干扰,也是 AI 沟通了许久才完美实现。

// 将正文所有外链加上 ?ref=shephe.com ,并添加 rel="external nofollow" target="_blank"
add_filter('the_content', 'rewrite_external_links');
function rewrite_external_links($content) {
    $srcUrl = home_url(); // 获取站点 URL
    $regexp = '/<a\s(?:[^>]*?\s)?href=(["\'])(.*?)\1(?:[^>]*)>(.*?)<\/a>/si';
    preg_match_all($regexp, $content, $matches, PREG_SET_ORDER);
    if (empty($matches)) {
        return $content;
    }
    foreach ($matches as $match) {
        $url = $match[2]; // 链接地址
        if (strpos($url, $srcUrl) === false && strpos($url, '#') === false) { // 排除掉带#的链接(文章目录)
            $new_url = $url . '?ref=shephe.com';
            $new_tag = '<a href="' . $new_url . '" rel="external nofollow" target="_blank">' . $match[3] . '</a>';
            $content = str_replace($match[0], $new_tag, $content);
        }
    }
    return $content;
}
1460 730 Kevin's
「让 WordPress 评论框显示在评论内容之前」有 13 条评论
  • Dabenshi
    04/14/2024 at 20:29 回复

    评论表单我也调在前面了,你的好像还在后面,没有在评论内容之前啊

    • 的头像
      Kevin
      04/23/2024 at 18:30 回复

      因为我设置的超过50条评论以后才将评论框置顶。。。显然本文没有50条评论,,,你看这里就在前面的:https://www.shephe.com/guestbook/

  • S
    04/14/2024 at 13:20 回复

    我记得这篇文章贝妹以前也写过。

    • 的头像
      Kevin
      04/23/2024 at 18:39 回复

      who is 贝妹

      • S
        04/23/2024 at 22:07 回复

        博客圈名媛你都不知道。

        • 的头像
          Kevin
          04/23/2024 at 22:16 回复

          我可能想起来了,Betty

  • 阿良
    04/13/2024 at 22:46 回复

    现在ai用着真不错,一些不太懂的代码,直接咨询文心一言,马上解决

    • 的头像
      Kevin
      04/23/2024 at 18:39 回复

      我感觉文心一言没有kimi好用哎,
      kimi又不如chat

  • 的头像
    obaby
    04/13/2024 at 22:12 回复

    评论框下面的样式有问题
    https://img2.imgtp.com/2024/04/13/Nq8WvE3k.png

    • 的头像
      Kevin
      04/13/2024 at 22:42 回复

      感谢反馈,知道这个问题,回头修复~~
      一个调查:你觉得我这里正文排版怎么样?比如字号字体这些

      • 的头像
        obaby
        04/14/2024 at 17:43 回复

        排版看着挺舒服的~~

  • 王云子
    04/13/2024 at 17:41 回复

    最近折腾的很频繁啊

    • 的头像
      Kevin
      04/13/2024 at 21:50 回复

      是呢,瞎折腾尔

发表评论

请输入关键词…