先前介绍过如何在WordPress的AMP页面配置相关文章与分享按钮，
这回将介绍如何在AMP页面加载Disqus评论框，
与Disqus Conditional Load外挂同样采取延迟加载的方式不会拖慢网页性能，
透过amp-iframe框架进行设定，
需要使用其他子域名进行托管AMP版Disqus页面方可正常加载评论框。

Disqus AMP官方消息 https://blog.disqus.com

Disqus AMP官方安装说明 https://github.com/disqus

请在WordPress当前使用的布景主题资料夹底下建立amp资料夹，
从AMP外挂模板复制single.php到资料夹中，
请在</head>前方写入

<script async custom-element="amp-iframe" 
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

接下来将以下代码复制并建立成新的html档案

<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
 if (event.data) {
 var msg;
 try {
 msg = JSON.parse(event.data);
 } catch (err) {
 // Do nothing
 }
 if (!msg)
 return false;

if (msg.name === 'resize') {
 window.parent.postMessage({
 sentinel: 'amp',
 type: 'embed-size',
 height: msg.data.height
 }, '*');
 }
 }
}
</script>
<script>
 function getQueryVariable(variable) {
 var query = window.location.search.substring(1);
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++) {
 var pair = vars[i].split("=");
 if(pair[0] == variable){return pair[1];}
 }
 return(false);
 }
 var disqus_config = function () {
 this.page.url = decodeURIComponent(getQueryVariable("url")); // Replace PAGE_URL with your page's canonical URL variable
 this.page.identifier = decodeURIComponent(getQueryVariable("identifier")); // Replace PAGE_IDENTIFIER with your page's unique identifier variable
 };
 (function() { // DON'T EDIT BELOW THIS LINE
 var d = document, s = d.createElement('script');

s.src = '//disqususer.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());
 (d.head || d.body).appendChild(s);
 })();
</script>

请将//disqususer.disqus.com/embed.js的disqususer修改成您站点使用的disqus域名，
并保存到其他域名的站点，其他站点不能与原本要加载DisqusAMP的站点域名相同。

接下来，请在WordPress当前使用的布景主题底下布景函式库functions.php加入以下代码

if ( ! function_exists( 'add_disqus' ) ) {
 function add_disqus( $content ) {
 if(is_amp_endpoint()) {
 $post = get_post();
 $content .= '
 <amp-iframe width=600 height=140
 layout="responsive"
 sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
 resizable
 frameborder="0"
 src="https://otherurl/disqus-amp.html?url='.urlencode(get_permalink()).'&identifier='.urlencode($post->ID).'"
 >
 <div overflow tabindex=0 role=button aria-label="Comentários">Comentários</div>
 </amp-iframe>';
 }
 return $content;
 }
}
add_action( 'the_content', 'add_disqus' );

其中https://otherurl/disqus-amp.html即为上个步骤产生html档案存放的其他域名，
保存后即可在AMP页面测试Disqus加载情形，
如果没有加载成功请在 https://disqus.com/admin/settings/advanced/
允许其他域名加载评论内容，
并检查headers的X-Frame-Options是否允许自其他域名加载，
若Disqus AMP评论框顺利加载即完成配置。

参考教学 https://github.com/disqus