如何设置 WordPress 和 AMP：加速移动页面：附加设置分析、AdSense、社交媒体指南

已发表: 2016-09-25

setup-amp-and-wordpress-all-in-one-guide

最近几天有很多关于 Google AMP 的讨论。 Google 正式宣布将 AMP 页面支持作为移动搜索页面的一部分。这真的很有趣。到目前为止，我出于某种原因避免在 Crunchify 上实施 AMP，并且从未觉得它有任何重要性。

但是在查看了 Barry 的推文后，我也决定AMPlify Crunchify。

哈哈..都是手机！！嗯..这里完全相反..几乎所有桌面 pic.twitter.com/9tDCAYa1SJ
— Crunchify (@Crunchify) 2016 年 9 月 16 日

您在寻找 AMP 和 wordpress 提示吗？您想使用 Google 的 Accelerated Mobile Pages 来增强您的 WordPress 网站吗？或者您想在 WordPress 中安装 AMP？在本教程中，我们将详细介绍如何通过所有详细步骤对您的 WordPress 网站进行 AMPlify。

什么是加速移动页面 (AMP)？

Accelerated Mobile Pages (AMP) 项目是一个开源项目，在创建时牢记速度，它创建了一次移动优化内容，并在任何地方立即加载。页面上根本没有加载 JavaScript。具有严格限制的 CSS 加载非常少。我注意到你甚至不能在 CSS 中使用!important的观察结果之一。

有以下任何问题吗？

Google AMP：它是什么以及它是否适合您的 WordPress 网站
为 AMP 设置 WordPress 的最佳方式
如何从 Google AMP 页面和 WordPress 开始
加速移动页面wordpress插件
WordPress 放大器页面
Yoast amp 胶水和 wordpress 查询

让我们开始吧：为您的 WordPress 帖子启用 AMP

第1步

安装官方 AMP 插件。

激活后，一切就绪。您不会看到任何选项菜单。
您必须转到Settings ->“ Permalinks ”菜单。单击Save Changes而不进行任何更改。

官方 AMP 插件提供基本功能，您的所有帖子都将自动 AMPlify。您可以通过在任何帖子 URL 的末尾添加/amp/来访问您的帖子的 AMPlified 版本。

看一个例子：

Original帖网址：https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
AMPlify发布网址：https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

第2步

~~为 Yoast SEO 和 AMP 插件安装 Glue。~~ 我相信从0.4 AMP WordPress version开始，您不需要任何其他与 AMP 相关的插件。

现在：

转到Appearance -> AMP 。
提供Header和Background颜色，然后单击Save 。

amp-wordpress-plugin-customization-option

第三步

我看到这个插件的唯一问题是它在页面底部添加了Powered by WordPress链接。为了更改它，您可能需要使用以下代码更改footer.php页面。

转到Plugins -> Editor
选择插件AMP
选择文件 amp/templates/ footer.php

< footer class = "amp-wp-footer" >

< div >

< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >

< p >

Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a >   •   < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a >   •   < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >

< / p >

< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >

< / div >

< / footer >

根据您的需要修改版权行代码

第四步

将Analytics和Social Media图标添加到您的 AMP 页面。

crunchify_amp_add_analytics_social_ads_js函数会将所需的分析和社交媒体javascript代码添加到您的 amp 页面。
crunchify_amp_add_analytics_social_code函数将添加实际的分析代码和社交媒体图标。
请确保在下方更新您的Google Analytics Universal tracking ID和Facebook App ID 。

// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~

add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;

function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {

$ post_id = $ amp_template - > get ( 'post_id' ) ;

? >

<?php

}

add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;

function crunchify_amp_add_analytics_social_code ( $amp_template ) {

$post_id = $amp_template - > get ( 'post_id' ) ;

< amp - analytics type = "googleanalytics" id = "analytics1" >

{

"vars" : {

"account" : "UA-43876549-1" // Modify universal tracking ID

} ,

"triggers" : {

"trackPageview" : {

"on" : "visible" ,

"request" : "pageview"

}

</script>

< / amp - analytics >

// Social Media Code

< div align = "center" >

< amp - social - share type = "twitter"

width = "30"

height = "30" > < / amp - social - share >

< amp - social - share type = "gplus"

width = "30"

height = "30" > < / amp - social - share >

< amp - social - share type = "facebook"

width = "30"

height = "30"

data - param - app_id = "509582389234904" > < / amp - social - share > // Modify your App ID

< / div >

< ? php

}

// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

第 5 步

将 Google Adsense 代码添加到您的 AMP 页面。就我而言，我想在特色图片下方添加300x250的 Adsense 代码。没有任何官方挂钩可供使用，因此我修改了位于 <AMP Plugin directory> amp/templates/single.php的single.php文件。