先前介绍过如何在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
WordPress AMP配置Disqus评论功能