为文章页面添加字数统计显示

我希望在本站文章中添加显示字数统计的功能。在不会撰写代码的条件下，我利用ChatGPT实现了这一功能。但在解决这一任务的过程中，我也遇到了一些问题。此文将记录我解决这个问题的全部过程，并提供一些撰写提示词的思路。

起初，我希望在文章的标题和正文之间插入字数统计。通过与ChatGPT的初步交流，我认为可以通过修改single.php这一配置文件来实现此功能。我了解到自定义配置文件应在子主题下完成，否则任何改变将在更新主题后被覆盖。由此，我安装了Child Theme Configurator插件，并为我使用的Astra主题创建了子主题，在创建过程中全部使用默认设置。

我通过Child Theme Configurator插件复制了single.php配置文件到子主题中，并初次尝试通过ChatGPT编写代码。我试图根据提示将ChatGPT编辑的代码插入single.php的相应位置中，并进行了预览。但无论如何调整，字数统计文本都没有在我期望的区域显示。我发现，当我将代码移动到<?php astra_content_loop(); ?>之上时，字数统计文本会显示在标题的上方；而移动到此代码下方时，字数统计文本会显示在“后一篇文章”按钮的下方。这意味着，这行代码处理了从标题到最后的按钮在内的完整内容，而我无法通过简单编辑single.php文件将代码插入这个完整内容之中。

我试图寻找这行代码的源头进行修改，可以发现，这行代码涉及一个Astra主题特有的函数。我在这件事上消耗了很多时间，尽管我在搜索引擎中找到了相应信息，但我认为这可能是个化简为繁的工作，并可能违背一些既有设计的初衷，便放弃了这个选择。

通过与ChatGPT的继续沟通，我了解到也可以通过修改functions.php这一配置来实现此功能。根据ChatGPT所述，其大致的逻辑是我可以在functions.php中定义函数并进行挂钩。在此过程中，我发现ChatGPT对WordPress软件甚至Astra主题都有所了解，因为它可以正确使用预设的各种函数和钩子。经过对提示词的润色，我成功将字数统计文本显示在了我期望的区域。我发现字数统计的结果总是为0，经过与ChatGPT的交流，我了解到这是由于str_word_count()函数不能处理中文字符。当字数正常显示后，我发现字数统计的数字与实际情况有误，且总是多于实际情况，经过与ChatGPT的交流，我认识到这是因为制表符等不可见字符被包含在内。最终我借助ChatGPT重新编写代码，解决了所有问题。以下给出最终的提示词和代码供参考。

提示词：我希望在Wordpress中，在Astra主题下，通过自定义function.php文件，在文章页面的标题和正文中间插入一行字数统计，统计所有可见字符，去除制表符等不可见字符，且支持统计中文。请帮我编写一段代码。

输出代码如下：

function add_word_count( $content ) {
    if ( is_single() ) {
        // 获取文章内容并移除所有HTML标签
        $post_content = strip_tags( get_the_content() );
        
        // 使用正则表达式过滤掉不可见字符（如换行符、制表符等）
        $visible_content = preg_replace('/[\p{Z}\p{C}]+/u', '', $post_content);
        
        // 统计可见字符数
        $word_count = mb_strlen( $visible_content, 'UTF-8' );
        
        // 生成字数统计文本
        $word_count_text = ' 本文共计 ' . $word_count . ' 字';
        
        // 将字数统计文本插入到文章内容的前面
        $content = '<p>' . $word_count_text . '</p>' . $content;
    }
    return $content;
}
add_filter( 'the_content', 'add_word_count' );

但在此之后，我又希望能将字数统计展示到侧边栏处，而不是文章中间。我发现，侧边栏由小工具组成，而小工具中预设了一个“自定义HTML”功能，我猜测这一预设可以帮助我实现目标功能。由此，我向ChatGPT重新提出了问题，并很快地解决了这一任务。与此同时，我希望这一小工具在文章页面显示字数统计，而在其它页面显示一行欢迎语，ChatGPT也完美解决了这一任务。以下给出最终的提示词和代码供参考。

提示词：我希望在Wordpress中，在Astra主题下，通过“自定义HTML”这个预设的小工具，设计一个字数统计功能。我会将这个小工具插入侧边栏，而侧边栏会在文章页面、分类页面等多处出现。在文章页面中，该小工具能显示当前文章的字数统计，统计包含所有可见字符，去除制表符等不可见字符，且支持统计中文；在其它页面中，该小工具不会显示字数统计，而会显示一行固定的欢迎语。请帮我编写一段代码。注意，这些代码应该出现在“自定义HTML”的文本框里。

输出代码如下（欢迎语已更换）：

<div id="word-count">欢迎来到Rabbit House(・∀・)!!</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 检查当前页面是否是单个文章页面
    if (document.body.classList.contains('single-post')) {
        // 获取当前文章的内容
        var postContent = document.querySelector('.entry-content').innerText;

        // 去除空格和制表符
        postContent = postContent.replace(/[\s\t\r\n]+/g, '');

        // 计算字数
        var wordCount = postContent.length;

        // 更新字数统计显示
        document.getElementById('word-count').innerText = '当前文章字数：' + wordCount + ' 字';
    }
});
</script>

最终，这一任务得到了完美解决，此功能目前也实装于本网站。总而言之，在使用ChatGPT的过程中，撰写合适详尽的提示词是尤为重要的。与此同时，除了PHP和HTML这样通用语言，ChatGPT甚至能对WordPress软件和Astra主题这种规模的环境给出特定的解决方案，可见ChatGPT的知识库十分庞大，我们也可以在具体知识方面对ChatGPT给予更多信任。

注：请不要同时使用上述两段代码。个人发现，后一种方案会将前一种方案生成的“本文共计n字”这一段字符也包含在统计之内。不难理解，这是$content = '<p>' . $word_count_text . '</p>' . $content;这段代码所致。解决这一问题大概并不困难，但上方给出的代码没有考虑这一问题，请注意这一点。