wordpress网站文章或者帖子等等添加AI摘要

技术教程2年前 (2023)更新 qifo
2,199 0 0

没有修改过的js

wordpress网站文章或者帖子等等添加AI摘要

前言

这个并不是我开发的是由这个人开发的,我只是将这个东西做了一些简单的理解,其中包含了word press的字段理解于自定义css于自定义js的问题。

设置

这个东西依赖于主题的自定义js【显示在底部】主题不同请根据主题提供的自定义代码位置进行调整,由于我没有那么多主题站进行测试,这儿就以子比主题和onenav主题进行一个简单的演示

注意以下几点

  1. 这个东西不是免费的
  2. 9.9元可以调用5万字,已经调用过的不会再次扣除api费用,而是从官网数据库中直接调用
  3. 购买地址:文章摘要生成器 API KEY 密钥-来自张洪Heo丨爱发电 (afdian.net)
  4. 我的教程可能不是适用于所有主题但是一定对你有帮助

onenav主题

在主题自定义代码中-底部(footer)自定义 js 代码-里面添加

如果你想在文章中显示

<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.11/tianli_gpt.css">
<script>
let tianliGPT_postSelector = '.post-template-default .panel-body';//这儿是每个主题的文章自定义字段设置,详细获取方式在下面,onenav主题直接复制此代码即可
let tianliGPT_key = '5Q5mpqRK5DkwT1X9Gi5e';//这儿是你购买的key
</script>
<script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.11/tianli_gpt.js"></script>

如果你想在网址中显示

<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.11/tianli_gpt.css">
<script>
let tianliGPT_postSelector = '.sites-template-default .panel-body';
let tianliGPT_key = '5Q5mpqRK5DkwT1X9Gi5e';
</script>
<script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.11/tianli_gpt.js"></script>

子比主题

在主题设置-文章内容后-里添加下面的代码

<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.8/tianli_gpt.css"> 
<script>
let tianliGPT_postSelector = '.single-post .wp-posts-content'; 
let tianliGPT_key = '5Q5mpqRK5DkwT1X9Gi5e'; 
</script> 
<script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.8/tianli_gpt.js"></script>

自定义字段获取方式

这个纯属个人研究不一定正确

首先在你想要添加这个摘要的任何一个文章或者以文章为衍生出来的页面详细内容中,打开开发者模式,如下图

先找到整个页面的body class

例如onenav主题的

wordpress网站文章或者帖子等等添加AI摘要

这个里面包含的class有一个就是-let tianliGPT_postSelector-中第一个参数,不会的可以去慢慢尝试每一个,这是最笨的办法,只要你稍微对wordpress有些研究就会发现是-sites-template-default-

好了有了第一个参数,第二个就是整个内容页面的<div>class,如下图

wordpress网站文章或者帖子等等添加AI摘要

这个和上面的一样同样也能获取到,但是onenav主题有些不同,他是后缀需要一个-body用于继承,所以就是panel-body

关于某些主题暗色主题和日间主题切换存在摘要文字与背景融合看不清解决方案

将下方的css代码放在自定义代码中或者主题目录钟main-css中即可

.tianliGPT-explanation {
color: black;/*文字颜色始终为黑色*/
font-weight: bold;/*文字颜色粗体显示,不喜欢可以删除*/
}

 

好了教程结束有什么问题请在下方评论区回复我。

© 版权声明

相关文章

没有相关内容!

暂无评论

暂无评论...