子比主题接入文章AI摘要，AI增强客服和AI知识库并替代原有搜索

引用这两个平台的官方介绍，两者都是一个团队开发的哦

推广邀请得奖励与激活

这是我的邀请链接：https://ai.zhheo.com/console/login?InviteID=63772604

你在该平台开通会员时，你我都将获得会员时长奖励（被邀请用户开通1年，双方获得31日奖励。被邀请用户开通1个月，双方获得7天奖励。）

在此处绑定你的网址，格式为：https://wxsnote.cn/（注意，网站一定要安装SSL证书，并强制跳转到https，否则无法使用）

复制你的key，用于后续放在代码中用于调用服务

代码添加在那里？

在你的主题根目录下创建func.php文件（仅适用于子比主题）

编辑文件func.php，在顶部输入<?php，保存，在下面就可以添加自定义代码了

部署AI摘要

为全局添加AI客服

此为为全局添加AI摘要

在func.php添加以下代码，将以下代码填入，修改$aikey = "修改这里";，将你的key填入，保存即可

//添加AI客服
add_action( 'wp_footer', 'add_all_ai_footer' );
function add_all_ai_footer() {
    $aikey = "修改这里"; //这里填写key
    ?>
<script>
var postChatConfig = {
    addButton: false, //按钮是否显示，为true时为显示
    backgroundColor: "#3e86f6", //调整按钮背景色彩
    bottom: "16px", //按钮距离底部的边距
    left: "16px", //按钮距离左侧的边距，如果填写负值，则是距离右侧的边距。例如left为-3px，实际为right 3px
    width: "44px", //调整按钮尺寸宽,如填写：20px
    height: "44px", //调整按钮尺寸高,如填写：20px
    fill: "#FFFFFF", //调整按钮图标icon颜色
    frameWidth: "375px", //仅在iframe模式下有效，显示的对话窗口大小，frameWidth为宽度
    frameHeight: "600px", //仅在iframe模式下有效，显示的对话窗口大小，frameHeight为高度
    <?php echo wp_is_mobile() ? 'userMode: "iframe",' : 'userMode: "magic",'; ?> //用户唤起聊天的方式，分别有iframe(兼容性更好，支持聊天历史记录)和magic(现代)两个模式。这里的代码为手机使用iframe电脑使用magic，只是王先生笔记的个人喜好，如果只使用某一个，请将此行改为userMode: "magic",

    defaultInput: false, //此参数为true时，用户点击按钮后会自动添加本页面标题，让用户更方便的询问关于本页的内容
    <?php echo is_single() ? 'upLoadWeb: true,' : 'upLoadWeb: false,'; ?> //此处判断是否为文章页面，因为王先生笔记只想让文章导入到知识库，其它页面的输出不适合动态站点。此是否上传当前页面内容到知识库，true为上传，静态网站推荐开启。开启后，任意用户访问网页都会将网页内容发送到知识库，无需人工干预即可上传。上传内容为文章所有文字内容，上限2000字，取前1000和后1000字。如果你想提交每个页面到知识库，请将此行改为upLoadWeb: true,
    
    showInviteLink: true, //是否用户点击PostChat对话中的图标后会通过邀请链接进入PostChat，通过这种方式邀请的好友如果开通了会员，可以获得会员时长奖励。如果不填写此参数，默认为false。
    userTitle: "王先生笔记的助理", //此参数填写你要自定义的PostChat界面标题
    userDesc: "如果你对网站的内容有任何疑问，可以来问我哦～", //此参数填写你要自定义的PostChat聊天界面描述
    userIcon: "", //仅在Magic模式下有效，此参数可以更改聊天AI的图标，如填写：<svg class="icon" aria-hidden="true"><use xlink:href="#qq"></use></svg>
    defaultChatQuestions: ["你好","你是谁","你是做什么的","你有什么功能","你有什么用"], //聊天页面的提问，仅Magic模式下有效
    defaultSearchQuestions: ["视频压缩","制作黄焖鸡"], //聊天页面的搜索，仅Magic模式下有效
    //PostChat兼容文章摘要的通用参数，详细请查看https://postchat.zhheo.com/addCode.html#独立参数
};
</script>
<script data-postChat_key="<?php echo $aikey ?>" src="https://ai.tianli0.top/static/public/postChatUser.min.js"></script>
        <?php
}

按钮效果

聊天页面效果

文章AI摘要，AI增强的客服，AI知识库搜索 全都要

可操作的可就太多了，我只提供我在用的吧。

PHP部分

此为为添加文章AI摘要及AI增强的客服

在func.php添加以下代码，将以下代码填入，修改$aikey = "修改这里";，将你的key填入，保存即可

//添加AI摘要及tianliGPT
add_action( 'wp_footer', 'add_guest_ai_footer' );
function add_guest_ai_footer() {
    $aikey = "修改这里"; //这里填写key
    // 当前页面是一个单篇文章页
    if ( is_single() ) {
    ?>

<link rel="stylesheet" href="https://ai.tianli0.top/static/public/postChatUser_summary.min.css">
<script>
let tianliGPT_key = '<?php echo $aikey ?>';
let tianliGPT_postSelector = '.single-post .wp-posts-content';
let tianliGPT_Title = '智能总结摘要';
let tianliGPT_Name = '王先生助理';
let tianliGPT_postURL = "/^https?:\\/\\/[^/]+\\/\\d+\\.html$/";
let tianliGPT_blacklist = '';
let tianliGPT_wordLimit = '5000';
let tianliGPT_typingAnimate = true;
let tianliGPT_podcast = false; //播客，请先在洪墨AI开启，设置为true启用
let tianliGPT_theme = '';
</script>
    <?php
    }
    //下方全局输出
    ?>
<script>
var postChatConfig = {
    //backgroundColor: "#3e86f6",
    //bottom: "16px",
    //left: "16px",
    //fill: "#FFFFFF",
    //width: "44px",
    frameWidth: "375px",
    frameHeight: "600px",
    <?php echo wp_is_mobile() ? 'userMode: "iframe",' : 'userMode: "magic",'; ?>

    defaultInput: false,
    <?php echo is_single() ? 'upLoadWeb: true,' : 'upLoadWeb: false,'; ?>
    <?php echo is_single() ? 'hotKeys: true,' : 'hotKeys: false,'; ?>
    showInviteLink: true,
    userTitle: "王先生笔记的助理",
    userDesc: "如果你对网站的内容有任何疑问，可以来问我哦～",
    addButton: false,
    beginningText: "这篇文章介绍了"
};
</script>
    <?php
    //上方全局输出结束
    // 当前页面是一个单篇文章页，打印文章摘要及tianliGPT的js
    if ( is_single() ) {
        
        ?>
<script data-postChat_key="<?php echo $aikey ?>" src="https://ai.tianli0.top/static/public/postChatUser_summary.min.js"></script>
        <?php
    } else {
        // 当前页面不是一个单篇文章页，只打印tianliGPT的js
        ?>
<script data-postChat_key="<?php echo $aikey ?>" src="https://ai.tianli0.top/static/public/postChatUser.min.js"></script>
        <?php
    }
}

JS通用参数(如果你要添加后面的js，请先添加这段代码，以供后面的js调用)

//在head标签中添加内容
function add_wxs_head(){
  ?>
<script>
//是否为首页
var isHomePage = <?php echo is_front_page() ? 'true' : 'false'; ?>;
//是否为文章页
var isArticlePage = <?php echo is_single() ? 'true' : 'false' ?>;
//是否手机
var ismobile = <?php echo wp_is_mobile() ? 'true' : 'false' ?>
</script>
  <?php
}
add_action('wp_head', 'add_wxs_head');

JS部分

由于无法直接通过function覆盖原代码，直接改源码更新会失效入侵性太强，所以我使用JS进行修改前端，看你想添加到那里，静态引入或是子比后台全局自定义都可以

1.子比主题全局AI搜索按钮添加

//ai搜索按钮添加
document.addEventListener("DOMContentLoaded", function() {
    // 选择搜索弹窗的外层div
    var searchModal = document.querySelector('.main-search.fixed-body.main-bg.box-body.navbar-search.nopw-sm');

    // 创建 MutationObserver 实例来监测 class 属性的变化
    var observer = new MutationObserver(function(mutationsList, observer) {
        mutationsList.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                // 检查当前是否包含 'show' 类
                if (searchModal.classList.contains('show')) {
                    // 查找form
                    var form = searchModal.querySelector('form.padding-10.search-form');
                    
                    // 确保新的<a>元素只插入一次
                    if (form && !document.getElementById('search-heoGPT-tips')) {
                        // 创建新的<a>元素
                        var aiSearchLink = document.createElement('a');
                        aiSearchLink.id = 'search-heoGPT-tips';
                        aiSearchLink.className = 'search-ai-btn';
                        aiSearchLink.href = 'javascript:;';
                        aiSearchLink.rel = 'external nofollow';
                        aiSearchLink.title = '数字人助理';
                        aiSearchLink.innerHTML = '<i class="fa fa-smile-o"></i><span class="search-heoGPT-text">试试使用AI进行搜索，搜索结果更加精准</span><span class="search-heoGPT-text-right">推荐</span>';

                        // 将新的<a>元素插入到form之后
                        form.parentNode.insertBefore(aiSearchLink, form.nextSibling);

                        // 为新创建的<a>元素添加点击事件监听器
                        aiSearchLink.addEventListener('click', function(event) {
                            event.preventDefault();
                            const searchInput = form.querySelector('input[name="s"]'); // 确保获取到正确的输入框
                            const content = searchInput.value;
                            postChatUser.setSearchInput(content);
                        });
                    }
                }
            }
        });
    });

    // 配置观察选项
    var config = { attributes: true };

    // 开始观察
    observer.observe(searchModal, config);
});

2.子比主题首页搜索框修改，添加AI搜索

前提是仅PC显示，请自己修改，如果你有能力，可以修改判断

//搜索搜索框修改
if (isHomePage) {
    if (!ismobile) {
    // 获取目标的 <div> 元素
    var targetDiv = document.querySelector('.abs-right.muted-color');
        // 检查目标 <div> 是否存在
        if (targetDiv) {
            // 删除 <div> 中现有的 <button> 元素
            var buttonToRemove = targetDiv.querySelector('button');
            if (buttonToRemove) {
                targetDiv.removeChild(buttonToRemove);
            }
        
            // 创建新的 <a> 元素
            var newLink = document.createElement('a');
            newLink.id = 'aisearch';
            newLink.className = 'btn wxs-search-button-red';
            newLink.innerHTML = 'AI搜索';
        
            // 创建新的 <button> 元素
            var newButton = document.createElement('button');
            newButton.type = 'submit';
            newButton.tabIndex = 2;
            newButton.className = 'btn wxs-search-button-blue';
            newButton.textContent = '站内搜索';
        
            // 将新的元素添加到 <div> 中
            targetDiv.appendChild(newLink);
            targetDiv.appendChild(newButton);
        }
    }
}
//监听AI搜索按钮被点击
if (isHomePage) {
    if (!ismobile){
        // 等待页面加载完成后执行以下代码，确保DOM元素已经存在可以被获取到
        window.addEventListener('load', function() {
            // 获取AI搜索对应的a标签元素
            const aiSearchLink = document.querySelector('.btn.wxs-search-button-red');
            // 获取输入框元素
            const searchInput = document.getElementsByName('s')[0];
        
            // 给AI搜索对应的a标签添加点击事件监听器
            aiSearchLink.addEventListener('click', function(event) {
                // 阻止a标签默认的点击行为，避免出现意外跳转等情况
                event.preventDefault();
        
                // 获取输入框中的内容
                const content = searchInput.value;
                // 调用postChatUser.sendSearchMsg方法，传入获取到的搜索内容
                postChatUser.sendSearchMsg(content);
            });
        });
    }
}

3.子比右侧悬浮按钮修改

先添加按钮，按钮链接为#ai-duihua

其中需要将wxsicon-koubei修改为你的SVG图标id

//修改AI聊天按钮
document.addEventListener("DOMContentLoaded", function () {
    const aiDuihuaElement = document.querySelector('a[href="#ai-duihua"]');
    if (aiDuihuaElement) {
        aiDuihuaElement.setAttribute("href", "javascript:;");
        aiDuihuaElement.classList.add('aitip');
        aiDuihuaElement.addEventListener("click", function () {
            postChatUser.setPostChatInput("请问");

            const getCookieValue = (name) => {
                let cookies = document.cookie.split('; ');
                for (let cookie of cookies) {
                    let parts = cookie.split('=');
                    if (parts[0] === name) {
                        return parts[1];
                    }
                }
                return null;
            };
            const themeModeFromCookie = getCookieValue('theme_mode');
            if (themeModeFromCookie === 'white-theme') {
                postChatUser.setPostChatTheme('white');
            } else if (themeModeFromCookie === 'dark-theme') {
                postChatUser.setPostChatTheme('dark');
            } else {
                const body = document.body;
                if (body.classList.contains('dark-theme')) {
                    postChatUser.setPostChatTheme('dark');
                } else {
                    postChatUser.setPostChatTheme('white');
                }
            }
        });

        const svgIcon = aiDuihuaElement.querySelector('svg use');
        if (svgIcon) {
            svgIcon.setAttribute('xlink:href', '#wxsicon-koubei');
        }
    }
});

CSS代码

这个没必要取舍了，依旧是静态引入或是子比后台全局自定义都可以

/*首页搜索按钮样式*/
.wxs-search-button-red {
    background: rgb(255, 24, 86);
    right: 106%;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    color: rgb(255, 255, 255);
    position: absolute;
}
.wxs-search-button-blue {
    background: rgb(0, 136, 255);
    border: 1px solid #33aaff;
    color: rgb(255, 255, 255);
    border-radius: 18px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    margin-right: -17px;
}

/*全局搜索按钮样式*/
a#search-heoGPT-tips {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--main-color);
    max-width: 600px;
    margin: auto;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center
}

span.search-heoGPT-text {
    margin-left: 8px;
    line-height: 1.2
}

span.search-heoGPT-text-right {
    margin-left: auto;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgb(87, 189, 106);
  
    color: rgb(255, 255, 255);
    line-height: 1;
    font-size: 12px;
    white-space: nowrap
}

其它可选的功能

1.为AI搜索框及AI聊天按钮添加引导使用(分首页与文章页)

2.选择文字右键提问AI菜单

右键菜单

输入到对话窗口

首先你需要先看以下内容将菜单部署好

内容选取AI菜单代码：

总结

随着人工智能技术的不断发展，网站智能化已成为必然趋势。在本文中，我们详细介绍了如何在 WordPress 子比主题中接入 TianliGPT 平台和 PostChat 平台提供的功能，实现文章 AI 摘要、AI 增强客服和 AI 知识库搜索等强大功能。

通过这些功能的应用，站长能够显著提升网站的竞争力，为读者带来前所未有的阅读体验。AI 摘要帮助读者快速抓取文章要点，节省时间；AI 增强客服提供便捷的互动渠道，及时解答读者疑问；AI 知识库搜索则让知识获取更加精准高效。

希望本文提供的方法和思路能够为广大站长和开发者提供有益的参考，助力大家在网站建设中充分发挥人工智能的优势，打造更加智能、便捷、高效的网站。未来，随着技术的进一步演进，我们相信网站智能化将展现出更多的可能性，为互联网世界带来更多的创新与变革。让我们共同期待并积极探索这一充满无限潜力的领域。

PS：从12点写到18点，边写边截图，纯手敲啊，午饭都没吃饭，给孩子饿坏了，先去吃饭了

未授权禁止转载，已发布到公众号，受到创作保护，署名：王先生笔记 天无神话

原文链接(非王先生笔记发布均为盗版)：https://wxsnote.cn/5655.html