The Next DisqusJS For WordPress——更优雅的为你的 WordPress 站点部署 DisqusJS

# 前言

在今年4月，我在博客刚刚开通的时候，写了一篇名为《DisqusJS For WordPress! ——为你的WordPress站点部署DisqusJS》的文章，来介绍如何通过修改PHP文件的方式让 WordPress 用上 DisqusJS
实现 WordPress 站点在网络审查区域也能加载 Disqus 评论。

如今，在4个月以后我再回过头来看这一篇文章，顿时感到很扯淡。
先不说直接修改主题PHP文件带来的风险和隐患，那篇文章极其不详细，写的非常粗糙。对于真正有需求的读者而言，基本没有任何帮助。
很多关键步骤写的非常模糊，又或者根本没写，实在称不上一篇称职的教程
并且，在 Sakurairo 主题更新到V3.0以后，原本勉强还能用的教程直接作废，不能用了。
因此，我才决定重写这份教程，以供有需求者参考。

同样的，本教程仅针对 Sakurairo 主题开发，不保证此教程所提及的方法和资源可以在使用其他主题的站点上生效。在进行任何高风险操作前对你的站点进行备份都是一个非常好的习惯

#1 环境准备

根据 DisqusJS 的 Github 主页，有三种部署方式，分别是：

在 HTML 中直接引入
通过 NPM 安装
作为 React 组件使用

我们使用第一种方式，即通过插件，在 WordPress 的 HTML 中直接引入 DisqusJS 的脚本，实现评论加载。

既然我们部署的是Disqus评论系统，那你首先得有一个 Disqus 账号，访问Disqus官网即可注册
除此之外，你还需要：

一双手
一个脑子
充分的耐心
一个已经注册的Disqus站点
一个已经注册的Disqus API Key
一台已经安装好 WordPress 并能够正常运行的主机
高质量的跨境互联网连接

如果你缺少了以上内容中任何一项，尤其是前三项，那我建议你按着键盘的 Alt+F4 关闭网页
限于篇幅，我不会讲述怎么准备后两个条件，如有需求请自行 Google

#2 部署过程

当你准备好上文所提及的所有条件之后，进入 WordPress 的管理员仪表板。
点击插件 - 添加插件，然后搜索 WPCode Lite ，这是一个高性能的代码插件，允许你在不修改主题文件的下直接在指定页面中插入HTML/JS/CSS

安装这个插件，当安装完成后点击启用，你应该就会看到左侧菜单栏底部出现了一个叫“Code Snippets”的选项，如图。

点击这个选项，你应该就能进入WPCode的管理界面，如图

（我已经在这台主机上部署过一次 DisqusJS 了，所以才会有）
点击右上角的“Add New”，创建一个新的 Snippets，Snippet Library 选择 Add Your Custom Code (New Snippet)
如下图所示

在点击“Add Custom Snippet”后，会要求你选择代码类型（Code Type for Your Snippet）
因为我们使用在 HTML 中直接引入的方式安装 DisqusJS，因此选择 HTML Snippet 即可。

选择代码类型后就进入到了创建代码片段的界面，如下图所示。

其中，“Add title for snippet”是代码片段的名称，在这个示例中我填写DQJS
而底下的 Code Preview 则是具体要加载的代码片段，你可以根据 DisqusJS 作者 SukkaW 在项目主页上提供的方式自行填写。
也可以直接使用我提供的示例，我提供的示例已经针对 Sakurairo 主题做了相关优化，只需要修改信息即可

<!-- Next DisqusJS for WordPress -->
<script>
(function() {
    // --- 定义所有需要的变量和函数 ---
    let disqusIsLoading = false;
    let debounceTimer; 

    function runDisqusLogic() {
        if (disqusIsLoading) return;
        if (document.getElementById('dsqjs')) return;

        const isListPage = document.getElementById('pagination');
        const isArticlePost = document.querySelector('article.post');
                             
        const disqusContainer = document.getElementById('disqus_thread');

        if (!isListPage && isArticlePost) {
            
            disqusIsLoading = true;

            let container = disqusContainer;
            if (!container) {
                container = document.createElement('div');
                container.id = 'disqus_thread';
                
                const mainContent = document.getElementById('main');
                if (mainContent) {
                    mainContent.appendChild(container);
                } else {
                    document.body.appendChild(container);
                }
            }
            
            // 【改进】: 从中国大陆友好的CDN加载v1.3的CSS
            if (!document.querySelector('link[href*="disqusjs/1.3"]')) {
                const dsqjs_css = document.createElement('link');
                dsqjs_css.rel = 'stylesheet';
                dsqjs_css.href = 'https://cdn.staticfile.org/disqusjs/1.3.0/disqusjs.min.css';
                document.head.appendChild(dsqjs_css);
            }

            // 【改进】: 从中国大陆友好的CDN加载v1.3的JS
            const dsqjs_script = document.createElement('script');
            dsqjs_script.src = 'https://cdn.staticfile.org/disqusjs/1.3.0/disqus.min.js';
            dsqjs_script.id = 'dsqjs_script';
            dsqjs_script.onload = function() {
                new DisqusJS({
                    // --- API参数 ---
                    shortname: '<填写Disqus分配的shortname>',
                    siteName: '<填写站点名称,该名称应该和Disqus站点设置中的WebsiteName一致>',
                    api: 'https://disqus.skk.moe/disqus/',
                    apikey: '<填写你注册的Api Key>',
                    url: window.location.href,
                    identifier: window.location.pathname,
                    title: document.title,
                    admin: '<填写管理员的Disqus Name>',
                    adminLabel: '<填写你想显示的Label>',

                    // --- 使用v1.3确定有效的参数，彻底禁用自动检测 ---
                    auto: false,
                });
                disqusIsLoading = false;
            };
            dsqjs_script.onerror = function() {
                disqusIsLoading = false;
            };
            
            const oldScript = document.getElementById('dsqjs_script');
            if (oldScript) oldScript.remove();
            
            document.head.appendChild(dsqjs_script);

        } else {
            if (disqusContainer && disqusContainer.innerHTML !== '') {
                disqusContainer.innerHTML = '';
            }
            return;
        }
    }

    // --- 安全启动逻辑 (保持不变) ---
    function main() {
        const observer = new MutationObserver(() => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(runDisqusLogic, 300);
        });
        
        observer.observe(document.body, { childList: true, subtree: true });
        runDisqusLogic();
        console.log('DisqusJS已启动');
    }

    document.addEventListener('DOMContentLoaded', main);

})();
</script>

获取API Key，注册站点可直接参照 DisqusJS 原版教程

#3 修复

如果你直接使用这个脚本，你会发现：
1.评论区在文章底下变得异常的宽
2.评论区距离文章切换按钮的距离太窄了
3. Sakurairo 从 V3.0 使用了浮动页脚，容易遮挡评论区

为了解决上述的问题，你可能还需要加载自定义CSS
将鼠标移动到左侧的“外观”，并点击“自定义”

点击“额外CSS”

将以下CSS粘贴到输入框中

/* 修复 Disqus/DisqusJS 评论区高度异常问题 */
#disqus_thread {
    min-height: 150px !important;
}
/* 限制 Disqus 评论区最大宽度并居中 */
#disqus_thread {
    max-width: 800px !important; /* 您可以修改这个数值 */
    margin: 0 auto !important; /* 这行代码让变窄后的评论区居中显示 */
}
/* 增加 Disqus 评论区与上方元素的间距 */
#disqus_thread {
    margin-top: 40px !important;
}
/* 彻底隐藏 Sakurairo 主题的整个页脚容器 */
#colophon {
    display: none !important;
}

点击“发布”即可

到这里，如果没有出现任何意外，那么 DisqusJS 就已经在你的 WordPress 站点上安装好了教程结束

The Next DisqusJS For WordPress——更优雅的为你的 WordPress 站点部署 DisqusJS

# 前言

#1 环境准备

#2 部署过程

#3 修复

Microsoft Azure 马来西亚西部测评

一点点的装机杂谈

# 前言

#1 环境准备

#2 部署过程

#3 修复

Microsoft Azure 马来西亚西部 测评

一点点的装机杂谈

Microsoft Azure 马来西亚西部测评