如何在 WordPress 中使用 AMP

AMP 是一项共同努力，承诺为移动环境中的网站提供更好的页面加载性能。但是，正如您从我们之前的教程中可以发现的那样，您将不得不牺牲网站上的花哨内容，并严格遵守规则、遵守指南并验证页面。听起来有很多事情要做，不是吗？

幸运的是，如果您使用 WordPress 构建了网站，则可以使用名为AMP-WP的插件快速将 AMP 应用到您的网站。它附带的功能比看上去的要多。那么，让我们看看它是如何工作的。

激活

首先，登录到您的网站，转到插件 > 添加新屏幕。搜索“AMP；安装并激活来自Automattic的那个。

AMP，由 Automattic 开发，在 WordPress 插件搜索结果中。

/amp/激活后，您可以通过在帖子 URL 的末尾添加路径（例如）来查看 AMP 转换后的帖子http://wp.com/post/amp/，如果您没有在您的网站上使用Pretty Permalinks?amp=1功能，则可以使用（例如）。http://wp.com/post/?amp=1

正如您在上面所看到的，帖子已被赋予基本样式，您可以进一步自定义这些样式。

要注意

目前您应该了解有关插件状态的几件事：

目前不支持档案——类别、标签和自定义分类法。它们不会被转换为 AMP 兼容格式。但是，可以通过过滤器将自定义帖子类型启动到 AMP 中。
它不会在仪表板中添加新的设置屏幕。自定义是在代码级别使用 Actions、Filters、Class 完成的。
该插件目前不包含所有 AMP 自定义元素，例如开箱即用amp-analytics。amp-ad如果您需要这些元素，则必须通过挂接到插件的操作或过滤器来包含它。

另请阅读：
如何在主题自定义中使用 WordPress Action Hooks

客制化

该插件提供了大量的操作和过滤器，可以灵活地自定义样式、页面内容，甚至整个 AMP 页面的 HTML 标记。

样式

我确定这是您在激活插件后想要立即更改的一件事，例如更改标题背景颜色、字体系列和字体大小以更好地匹配您的网站品牌和个性。

为此，我们可以amp_post_template_css在functions.php主题文件中使用 Action。

1个
2个
3个
4个
5个
6个

function theme_amp_custom_styles() { ?>
  nav.amp-wp-title-bar {
    background-color: orange;
  }
<?php }
add_action( 'amp_post_template_css', 'theme_amp_custom_styles' );

如果我们查看 Chrome DevTools，这些样式会附加到<style amp-custom>元素中，并覆盖前面的样式规则。因此，橙色背景色现在应用于标题。

您可以像往常一样继续编写样式规则。但是，请记住一些限制，并将样式尺寸保持在以下范围内50Kb。如有疑问，请参阅我们之前关于如何验证 AMP 页面的文章。

模板化

如果您似乎除了样式之外还需要进行很多更改，您可能需要考虑自定义整个模板。插件 amp-wp 提供了许多内置模板，即：

header-bar.php
meta-author.php
meta-taxonomy.php
meta-time.php
single.php
style.php

这些模板很像常规的WordPress 模板层次结构。

/amp/这些模板中的每一个都可以通过在主题文件夹下提供同名文件来接管。一旦这些文件就位，插件将选择它们而不是默认文件，并允许我们完全更改这些模板的输出。

20 12
├── 404.php
├── 耳放
│ ├── 元作者.php
│ ├── 元分类.php
│ ├── single.php
│ └── style.php

您可以通过文件重写整个样式，style.php或使用single.php. 尽管如此，您仍必须保留更改以符合 AMP 法规。

钩子和过滤器列表

如前所述，此插件附带了许多操作和过滤器。本文不可能一一介绍。但是我们可以使用备忘单、摘要以及您需要的片段：

动作

; amp_init_ action 对于依赖 AMP 的插件很有用；它在插件已经启动时运行。

1个
2个
3个
4个

function amp_customizer_support_init() {
  require_once dirname( __FILE__ ) . '/amp-customizer-class.php';
}
add_action( 'amp_init', 'amp_customizer_support_init' );

与wp_headaction 类似，我们可以使用在 AMP 页面的标记amp_post_template_head中包含其他元素，例如、或。headmetastylescript

1个
2个
3个
4个

function theme_amp_google_fonts() { ?>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic|Roboto+Slab:400,700&subset=latin,latin">
<?php }
add_action( 'amp_post_template_head', 'theme_amp_google_fonts' );

amp_post_template_footer这个动作类似于wp_footer。

1个
2个
3个
4个
5个
6个

function theme_amp_end_credit() { ?>
  <footer class="amp-footer">
    <p>© Hongkiat.com 2016</p>
  </footer>
<?php }
add_action( 'amp_post_template_footer', 'theme_amp_end_credit' );

过滤器

amp_content_max_width用于设置 AMP 页面的最大宽度。宽度还将用于设置嵌入元素的宽度，例如 Youtube 视频。

1个
2个
3个
4个

function theme_amp_content_width() {
  return 700;
}
add_filter( 'amp_content_max_width', 'theme_amp_content_width' );

amp_site_icon_url用于设置图标——favicon 和苹果图标——URL。默认为通过网站图标界面上传的图像，该界面在 4.3 版中引入。

1个
2个
3个
4个

function theme_amp_site_icon_url( ) {
    return get_template_directory_uri() . '/images/site-icon.png';
}
add_filter( 'amp_site_icon_url', 'theme_amp_site_icon_url' );

amp_post_template_meta_parts用于当您需要自定义帖子的元数据输出时，例如作者姓名、类别和时间戳。通过此过滤器，您可以打乱默认顺序，或从 AMP 页面中删除其中一个元数据。

1个
2个
3个
4个
5个
6个
7
8个
9

function theme_amp_meta( $meta ) {
 
  foreach ( array_keys( $meta, 'meta-time', true ) as $key ) {
    unset( $meta[ $key ] );
  }
 
  return $meta;
};
add_filter( 'amp_post_template_meta_parts', 'theme_amp_meta' );

amp_post_template_metadata用于自定义AMP 页面中的Schema.org 数据结构。以下示例展示了我们如何提供将在 Google 搜索结果的 AMP 轮播中显示的站点徽标，并删除页面修改时间戳。

function amp_schema_json( $metadata ) {
 
  unset( $metadata[ 'dateModified' ] );
 
  $metadata[ 'publisher' ][ 'logo' ] = array(
    '@type' => 'ImageObject',
    'url' => get_template_directory_uri() . '/images/logo.png',
    'height' => 60,
    'width' => 325,
  );
  return $metadata;
}
add_filter( 'amp_post_template_metadata', 'amp_schema_json', 30, 2 );

amp_post_template_file这是覆盖模板文件的另一种方法。如果您希望将自定义 AMP 模板文件托管在除/amp/.

1个
2个
3个
4个
5个
6个
7

function theme_custom_template( $file, $type, $post ) {
    if ( 'meta-author' === $type ) {
        $file = get_template_directory_uri() . '/partial/amp-meta-author.php';
    }
    return $file;
}
add_filter( 'amp_post_template_file', 'theme_custom_template', 10, 3 );

amp_query_var用于在启用 URL 永久链接时更改 AMP 页面端点。默认设置为/amp/。/m/鉴于以下情况，现在可以通过添加URL（例如）来访问 AMP 页面www.example.com/post-slug/m/。

1个
2个
3个
4个

function custom_amp_endpoint( $amp ) {
    return 'm';
}
add_filter( 'amp_query_var' , 'custom_amp_endpoint' );