#0 阅前提示
本文提及的内容由于时间或技术上的原因 不准确或已经失效 请谨慎对待
——2025年8月6日,WuYou
#1 前言
博客基本建好了,就该考虑评论系统了
考虑到我上一个WordPress站点由于安全防护没做好导致后台被爆破了,脚本小子在我的评论区的文章中放了一大堆Yellow WebSite URL
直接导致那个站点的域名的ICP证被管局吊销了,域名也被封了
并且WordPress自带的评论系统功能过于简陋,无法满足我对评论系统功能性的要求,因此我决定使用第三方的评论系统
说到博客的评论功能,我第一时间想到的就是Github的Discussions(讨论)功能,对于绝大多数博客来说Github Discussions是完全够用的。
但作为一个讨论用的工具,他设计并不是专用于评论的,并且我的博客也不是托管在GitHub的开源项目。存在潜在的数据丢失风险,所以Pass
那么在一顿综合比较之后,我发现最适合的仍然是老牌的社区评论服务——Disqus
但是这个家伙有个问题,因为互联网审查的原因,Disqus无法在中国内地正常使用
这直接导致我一开始就知道有这么一个东西,但是没有立即选择Disqus作为SeeLcom's Blog的评论系统的原因
直到我Google了“Disqus China”时。发现有这么一个项目——DisqusJS


当我发现这个项目后立刻!马上!毫不犹豫!的把整个项目的介绍看了一遍 (不是
但是看完后我就发现一个问题

在所有已收录的案例中,几乎所有案例都是纯静态的博客,没有任何一个像我这样使用WordPress作为CMS部署DisqusJS的案例
于是我本着“世间本没有路,走的人多了,便有了路”的道理。
决定来当一回探路者,亲自琢磨一下在WordPress上部署DisqusJS。
尽管在这个工程开始前我的前端经验和PHP经验都是0 : )
#2 教程开始前的免责声明
由于WordPress是一个基于PHP文件的CMS,不同主题之间文件区别较大
本站点使用Sakurairo主题,因此部署方案仅保证对该主题生效
部署到其他主题请自行依照其他主题文件进行修改
由于是纯前端部署,因此在本教程中涉及到大量修改主题文件的内容
为了您的数据安全,在部署前请务必备份全部文件
如果您因为操作前未备份文件导致数据丢失或站点损坏,本教程不负任何责任
#3 开始部署
本教程使用官方安装方案中的在 HTML 中直接引入进行部署
对于绝大多数的WordPress主题而言,你的评论区肯定是在文章下面
因此,你需要将以下代码复制插入到主题的header.php文件中
#这是DisqusJS的CSS,把这个CSS插入到header.php中的</head>之前
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@3.0/dist/browser/styles/disqusjs.css">
(展开) header.php在哪?


我不建议你直接在WordPress的编辑器中修改header.php,因为这个编辑器缺少很多格式显示/检查功能
如果你使用网站主机,我建议使用主机面板提供的在线编辑器,这类在线编辑器通常都会提供相对完善的功能
如果你使用服务器并且服务器安装了面板,那我建议使用面板提供的编辑器,如果没有安装面板那我建议你将文件复制到本地的文本编辑器进行编辑
这可以让你避免潜在的格式错误

(将DisqusJS的CSS插入到header.php中的</head>之前)
在你编辑完成header.php之后,就可以进行下一步,将评论JS代码插入到single.php文件中
插入评论代码之后就可以创建DisqusJS容器,然后填写DisqusJS参数,具体参数如何填写请参考官方安装方案

当你按照填写完所有参数,保存后,理论上评论区就会加载了
但如果你的站点启用了CSP(内容安全策略 - Content Security Policy)严格,可能会导致DisqusJS的CSS被安全机制拦截,因此你需要给DisqusJS的CSS添加白名单
#在header.php的<head>部分添加以下代码
<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://cdn.jsDelivr.net;">

此时,如果不出意外且你所有配置正确,那么恭喜你!
你就已经在WordPress上安装了DisqusJS,最终安装完成的效果应该长这样

