更换博客主题

Auth:老郭       Date:2025/02/05       Cat:网络       Word:共 1056 个字符/单词       Views:54

暂无评论

老郭博客之前使用的是子比主题，当时是花了400多买的，现在已经涨到快600块钱了。子比主题虽然挺不错的，界面也非常的美观，但是由于功能非常的全面，所以也就非常的臃肿，对于服务器资源的需求也比其他的主题大不少。其实，老郭博客只是为了记录生活中的经历和分享经验而已，很多功能压根就用不到。因此，老郭就想着做出一些改变。

老郭一开始的打算是从wordpress切换到typecho，毕竟typecho作为轻量化博客程序，给老郭用是绰绰有余了。而且从技术上来说切换难度不大，typecho也有很多不错的主题可以选择，就算是收费主题也比wordpress要便宜很多。但考虑到使用习惯，老郭最终还是选择继续使用wordpress，然后换一个轻量化一些的主题，这样博客打开的速度也会快上不少。

经过一番比较，老郭最终选择了胡鹤仙二次开发的Twenty Twelve 木头人修改精简版，这个主题虽然相当的简洁，但却不失美观，如果要求不高的话，拿过来直接用就可以了。

不过，老郭还是进行了一些细微的修改。老郭博客原来使用的是PHP8，子比主题是没有任何问题的，但这个主题已经有一些年头了，而且是个人开发的，更新显然没有那么快，所以切换过去之后果不其然的出现问题了。应该还是函数未定义之类的问题，不过老郭懒得修改了，直接把程序切换到PHP7.4，问题就自动解决了。

更换博客主题 - 第1张图片

接下来就是修改的内容：

一是这个主题默认使用的是经典编辑器，这对于老手来说是更方法的。但老郭习惯了使用古腾堡区块编辑器，所以必须换回来。打开functions.php文件，删除掉1969-1973行的内容，启用古腾堡。

add_​filter( 'use_​block_​editor_​for_​post', '_​_​return_​false', 999 );
remove_​action( 'try_​gutenberg_​panel', 'wp_​try_​gutenberg_​panel' );
remove_​action( 'wp_​enqueue_​scripts', 'wp_​common_​block_​scripts_​and_​styles' );
remove_​action( 'admin_​menu', 'gutenberg_​menu' );
remove_​action( 'admin_​init', 'gutenberg_​redirect_​demo' );

二是这个主题logo是放在右边的，而老郭习惯于放在左边。打开主题文件夹下的header.php文件，把第50行的代码删除掉即可。

<a href="https://yinji.org/" title="回到首页"><img src="https://dogefs.s3.ladydaily.com/lucy/storage/1680832936501.png" alt="胡鹤仙"width="70" height="70"/></a>

然后打开style.css文件，在最后添加以下代码，按照自己的需求修改就行，代码里都有说明。

/* 主标题容器：控制图片尺寸和布局 */
.site-title {
    display: block;          /* 强制独占一行 */
    margin-bottom: 10px;     /* 增加图片与副标题间距 */
}

/* LOGO图片替换 */
.site-title a {
    display: inline-block;   /* 或 block */
    width: 250px;            /* 图片宽度 */
    height: 78.5px;            /* 图片高度 */
    background: url('/wp-content/themes/2012-huhexian-main/images/logo.png') no-repeat center;
    background-size: contain;
    text-indent: -9999px;    /* 隐藏文字 */
    overflow: hidden;
}

/* 副标题样式调整 */
.site-description {
    display: block;          /* 强制换行显示 */
    text-indent: 0;          !important;  /* 取消之前的隐藏 */
    width: auto !important;  /* 恢复默认宽度 */
    height: auto !important; /* 恢复默认高度 */
    margin: 0;               /* 清除默认外边距 */
    font-size: 1.6rem !important;       /* 副标题字体大小 */
    color: #333;             /* 字体颜色 */
}

三是网站字数统计的问题，这也是很多主题共同存在的问题，把文章里的代码也统计进去了，导致字数严重的失真，虽然不影响大局，但老郭还是喜欢更加真实的统计。

这个主题一共有2处需要修改，第一处是页脚，打开functions.php文件，在2478行附近找到定义allwords函数。删除原来的内容，修改为以下代码，如果不喜欢原来的书名，也可以换成其他的。

function allwords() {
    global $wpdb;
    $chars = 0;

    // 获取文章内容
    $results = $wpdb->get_​results("SELECT post_​content FROM {$wpdb->posts} WHERE post_​status = 'publish' AND post_​type = 'post'");
    
    foreach ($results as $result) {
        // 获取去除代码块后的内容
        $text = $result->post_​content;

        // 排除常见的代码块：PHP, HTML, JavaScript, CSS 等
        $text_​without_​code = preg_​replace([
            '/<script.*?>.*?<\/script>/is',  // 排除 JavaScript 代码块
            '/<style.*?>.*?<\/style>/is',    // 排除 CSS 样式块
            '/<pre.*?>.*?<\/pre>/is',        // 排除 <pre> 块
            '/<code.*?>.*?<\/code>/is',      // 排除 <code> 块
            '/<\?php.*?\?>/is',              // 排除 PHP 代码
            '/<\?=.*?\?>/is',                // 排除短 PHP 代码
            '/<\!.*?\>/is'                   // 排除 HTML 注释
        ], '', $text); // 替换所有代码块为空字符串

        // 清除 HTML 标签并进行字符解码
        $text_​clean = preg_​replace('/\s+/', ' ', html_​entity_​decode(strip_​tags($text_​without_​code)));

        // 统计字数
        $word_​count = 0;

        // 中文字符按字数计算
        // 使用正则匹配中文字符
        $chinese_​chars = preg_​match_​all('/[\x{4e00}-\x{9fa5}]/u', $text_​clean);
        $word_​count += $chinese_​chars;

        // 英文单词按单词计数
        // 使用 str_​word_​count 来统计英文单词
        $english_​words = str_​word_​count($text_​clean);
        $word_​count += $english_​words;

        // 其他字符（如标点符号）也计入总数
        $punctuation_​chars = preg_​match_​all('/[^\w\s]/u', $text_​clean);
        $word_​count += $punctuation_​chars;

        // 将所有内容的字数累加
        $chars += $word_​count;
    }

    // 根据总字数给出不同的反馈信息
    if($chars < 50000){
        echo '全站共 '.$chars.' 字，还在努力更新中..加油！加油啦！';
    } elseif ($chars < 70000 && $chars >= 50000) {
        echo '全站共 '.$chars.' 字，写完一本埃克苏佩里的《小王子》了！';
    } elseif ($chars < 90000 && $chars >= 70000) {
        echo '全站共 '.$chars.' 字，写完一本鲁迅的《呐喊》了！';
    } elseif ($chars < 100000 && $chars >= 90000) {
        echo '全站共 '.$chars.' 字，写完一本林海音的《城南旧事》了！';
    } elseif ($chars < 110000 && $chars >= 100000) {
        echo '全站共 '.$chars.' 字，写完一本马克·吐温的《王子与乞丐》了！';
    } elseif ($chars < 120000 && $chars >= 110000) {
        echo '全站共 '.$chars.' 字，写完一本鲁迅的《彷徨》了！';
    } elseif ($chars < 130000 && $chars >= 120000) {
        echo '全站共 '.$chars.' 字，写完一本余华的《活着》了！';
    } elseif ($chars < 140000 && $chars >= 130000) {
        echo '全站共 '.$chars.' 字，写完一本曹禺的《雷雨》了！';
    } elseif ($chars < 150000 && $chars >= 140000) {
        echo '全站共 '.$chars.' 字，写完一本史铁生的《宿命的写作》了！';
    } elseif ($chars < 160000 && $chars >= 150000) {
        echo '全站共 '.$chars.' 字，写完一本伯内特的《秘密花园》了！';
    } elseif ($chars < 170000 && $chars >= 160000) {
        echo '全站共 '.$chars.' 字，写完一本曹禺的《日出》了！';
    } elseif ($chars < 180000 && $chars >= 170000) {
        echo '全站共 '.$chars.' 字，写完一本马克·吐温的《汤姆·索亚历险记》了！';
    } elseif ($chars < 190000 && $chars >= 180000) {
        echo '全站共 '.$chars.' 字，写完一本沈从文的《边城》了！';
    } elseif ($chars < 200000 && $chars >= 190000) {
        echo '全站共 '.$chars.' 字，写完一本亚米契斯的《爱的教育》了！';
    } elseif ($chars < 210000 && $chars >= 200000) {
        echo '全站共 '.$chars.' 字，写完一本巴金的《寒夜》了！';
    } elseif ($chars < 220000 && $chars >= 210000) {
        echo '全站共 '.$chars.' 字，写完一本东野圭吾的《解忧杂货店》了！';
    } elseif ($chars < 230000 && $chars >= 220000) {
        echo '全站共 '.$chars.' 字，写完一本莫泊桑的《一生》了！';
    } elseif ($chars < 250000 && $chars >= 230000) {
        echo '全站共 '.$chars.' 字，写完一本简·奥斯汀的《傲慢与偏见》了！';
    } elseif ($chars < 280000 && $chars >= 250000) {
        echo '全站共 '.$chars.' 字，写完一本钱钟书的《围城》了！';
    } elseif ($chars < 300000 && $chars >= 280000) {
        echo '全站共 '.$chars.' 字，写完一本张炜的《古船》了！';
    } elseif ($chars < 310000 && $chars >= 300000) {
        echo '全站共 '.$chars.' 字，写完一本茅盾的《子夜》了！';
    } elseif ($chars < 320000 && $chars >= 310000) {
        echo '全站共 '.$chars.' 字，写完一本阿来的《尘埃落定》了！';
    } elseif ($chars < 340000 && $chars >= 320000) {
        echo '全站共 '.$chars.' 字，写完一本艾米莉·勃朗特的《呼啸山庄》了！';
    } elseif ($chars < 350000 && $chars >= 340000) {
        echo '全站共 '.$chars.' 字，写完一本雨果的《巴黎圣母院》了！';
    } elseif ($chars < 400000 && $chars >= 350000) {
        echo '全站共 '.$chars.' 字，写完一本东野圭吾的《白夜行》了！';
    } elseif ($chars < 1000000 && $chars >= 400000) {
        echo '全站共 '.$chars.' 字，写完一本我国的名著了！';
    } elseif ($chars >= 1000000) {
        echo '全站共 '.$chars.' 字，已写一本列夫·托尔斯泰的《战争与和平》了！';
    }
}

第二处是在文章的页面里，同样打开functions.php文件，在2611行附近找到定义zm_​count_​words函数。删除原来的内容，修改为以下代码。

// 字数统计
function zm_​count_​words($text = '') {
    global $post;
    $output = '';

    // 如果没有传入文本，使用文章内容
    if (empty($text)) {
        $text = $post->post_​content;
    }

    // 排除 PHP、HTML、JS 等常见代码块
    $text_​without_​code = preg_​replace([
        '/<script.*?>.*?<\/script>/is',  // 排除 JavaScript 代码块
        '/<style.*?>.*?<\/style>/is',    // 排除 CSS 样式块
        '/<pre.*?>.*?<\/pre>/is',        // 排除 <pre> 块
        '/<code.*?>.*?<\/code>/is',      // 排除 <code> 块
        '/<\?php.*?\?>/is',              // 排除 PHP 代码
        '/<\?=.*?\?>/is',                // 排除短 PHP 代码
        '/<\!.*?\>/is'                   // 排除 HTML 注释
    ], '', $text); // 替换所有代码块为空字符串

    // 清除 HTML 标签并进行字符解码
    $text_​clean = preg_​replace('/\s+/', ' ', html_​entity_​decode(strip_​tags($text_​without_​code)));

    // 统计字数
    $word_​count = 0;

    // 中文字符按字数计算
    // 使用正则匹配中文字符
    $chinese_​chars = preg_​match_​all('/[\x{4e00}-\x{9fa5}]/u', $text_​clean);
    $word_​count += $chinese_​chars;

    // 英文单词按单词计数
    // 使用 str_​word_​count 来统计英文单词
    $english_​words = str_​word_​count($text_​clean);
    $word_​count += $english_​words;

    // 其他字符（如标点符号）也计入总数
    $punctuation_​chars = preg_​match_​all('/[^\w\s]/u', $text_​clean);
    $word_​count += $punctuation_​chars;

    // 输出结果
    if ($word_​count > 0) {
        $output = '<span class="word-count">共 ' . $word_​count . ' 个字符/单词</span>';
    }

    return $output;
}

四是这个主题的代码似乎有些冲突，文章里的文字只能显示为黑色，其他颜色显示不出来，询问AI，找到了一个临时解决的办法，在style.css文件的最后加入以下代码对字体的颜色进行强调。

.has-vivid-red-color {
    color: red !important;
}

这是显示红色，如果想让其他颜色也显示，应该也是类似方法，具体可以问问AI。

更换博客主题 - 第2张图片

经过这一番修改，目前主题基本上可以正常使用了，如果后续还有其他的修改，老郭还会继续在博客里进行说明。

本文首发于：更换博客主题-老郭博客

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

作者：

《更换博客主题》留言数：0

发表留言