为使用子比主题的博客文章添加字数统计

Auth:老郭       Date:2023/12/08       Cat:网络       Word:共 756 个字符/单词       Views:115

现在有不少网站为文章添加了字数统计和阅读时间预估,老郭觉得这个功能非常的不错。一来很人性化,为访客提供了便利;二来也让网站显得很正规、很上档次。因此老郭也想为博客添加上这个功能。

虽然网上对于这方面的内容非常的多,但绝大部分都是适用于wordpress自带的主题的,而对于在子比主题中添加这个功能的资料却异常的稀少,所以老郭只能自己去分析子比主题的代码了。

按照网上的资料,要在wordpress中添字数统计和阅读时间,需要修改主题的function.php和single.php文件,各添加一段代码。

为使用子比主题的博客文章添加字数统计 - 第1张图片

那就一步步来好了,首先打开子比主题的function.php文件,子比主题在这个文件里添加了一大段的注释,意思是主题更新的时候,function.php有可能被覆盖,所以不建议直接修改function.php文件,而是新建一个func.php,这样function.php就可以自动引入func.php中的代码,实现同样的功能。

为使用子比主题的博客文章添加字数统计 - 第2张图片

那就在和function.php相同的目录下新建一个func.php文件,然后写入以下代码。

<?php
function count_​words_​read_​time () {
global $post;
   $text_​num = mb_​strlen(preg_​replace('/\s/','',html_​entity_​decode(strip_​tags($post->post_​content))),'UTF-8');
   $read_​time = ceil($text_​num/260);
   $output .= '本文共有' . $text_​num . '个字,阅读需要' . $read_​time  . '分钟。';
   return $output;
}

其中的260就是每分钟阅读的字数,一般人的阅读速度在300字左右。

function count_​words_​read_​time() {
    global $post;

    // 获取文章内容
    $content = isset($post->post_​content) ? $post->post_​content : '';

    // 去除短代码
    $content = preg_​replace('/(\[.*?\])/', '', $content);

    // 去除代码块(匹配 <code> 和 <pre> 标签,以及 Markdown 形式的 `````)
    $content = preg_​replace('/<pre.*?>.*?<\/pre>|<code.*?>.*?<\/code>|```.*?```/is', '', $content);

    // 去除 HTML 标签
    $content = strip_​tags($content);

    // 统计汉字字符数
    $chinese_​count = mb_​strlen(preg_​replace('/[^\x{4e00}-\x{9fa5}]/u', '', $content), 'UTF-8');

    // 统计英文单词及标点符号
    preg_​match_​all('/[a-zA-Z0-9]+|[[:punct:]]/u', $content, $matches);
    $english_​and_​punct_​count = count($matches[0]);

    // 计算总字数
    $total_​count = $chinese_​count + $english_​and_​punct_​count;

    // 计算阅读时间(假设每分钟阅读 260 字)
    $read_​time = ceil($total_​count / 260);

    // 输出结果
    $output = '';
    $output .= '本文共有' . $total_​count . '个字,阅读需要' . $read_​time . '分钟。';

    return $output;
}

下一步就是修改single.php文件,但是当老郭打开子比的single.php文件的时候,却找不到添加代码的地方,因为子比主题的single.php文件里全都是引用的其他文件。比如文章的“主内容”引用的就是zib_​single。

为使用子比主题的博客文章添加字数统计 - 第3张图片

没办法,接着找吧。在子比主题文件夹的/inc/function目录下终于找到了zib-single.php这个文件,打开后在大概300行左右的位置添加一行代码。

<span style="font-size: 18px; color: #00f; font-family: KaiTi"><?php echo count_​words_​read_​time(); ?></span></p>

具体的位置及上下文如图所示。

为使用子比主题的博客文章添加字数统计 - 第4张图片

这段代码与网上的源代码相比,老郭进行了一定的修改,如果使用原来的,就呈现的效果就显得与子比主题不那么的协调,看起来也不太醒目。<span style="font-size: 18px; color: #00f; font-family: KaiTi">分别是字体的大小,颜色和字体,老郭选择了18号蓝色楷体,看起来的效果就舒服多了。

老郭博客文章均为原创,本文地址 https://lgbk.cn/archives/887.html,转载请以链接形式注明出处。

作者:

《为使用子比主题的博客文章添加字数统计》留言数:0

发表留言