amp wordpress_如何在WordPress中使用AMP

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

幸运的是，如果您使用WordPress构建了网站，则可以使用名为AMP-WP的插件将AMPSwift应用于您的网站。 它附带的功能远不止于眼前。 因此，让我们看看它是如何工作的。

激活

首先，登录到您的网站，进入“ 插件”>“添加新屏幕”。 搜索“ AMP； 从Automattic安装并激活一个。

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

如您在上方所见，帖子已获得基本样式，您可以进一步对其进行自定义。

要注意

您目前应该了解一些关于插件状态的信息：

• 当前不支持存档- 类别 ， 标签和自定义分类法 。 它们不会转换为AMP兼容格式。 但是，可以通过过滤器将自定义帖子类型启动到AMP。
• 它不会添加到仪表板的新设置屏幕中。 使用动作，过滤器，类在代码级别进行自定义 。
• 该插件当前并不包含所有AMP自定义元素，例如amp-analytics和amp-ad 。 如果需要这些元素，则必须通过插入插件的“动作”或“过滤器”将其包括在内。

客制化

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

款式

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

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

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/文件夹下提供相同名称的文件，可以接管每个模板。 这些文件放置到位后，插件将选择它们而不是默认文件，并允许我们完全更改这些模板的输出。

twentytwelve
├── 404.php
├── amp
│   ├── meta-author.php
│   ├── meta-taxonomy.php
│   ├── single.php
│   └── style.php

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

挂钩和过滤器清单

如前所述，该插件附带了许多动作和过滤器。 本文不可能一一介绍。 但是，我们可以提供备忘单，摘要以及您需要的摘录：

动作

amp_init ; 对于依赖AMP进行工作的插件，action是有用的； 它在插件已启动时运行。

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

与wp_head操作类似，我们可以使用amp_post_template_head在AMP页面的head标签中包含其他元素，例如meta ， style或script 。

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

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

筛选器

amp_content_max_width用于设置AMP页面的最大宽度。 该宽度还将用于设置诸如YouTube视频之类的嵌入元素的宽度。

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

amp_site_icon_url用于设置图标（图标图标和Apple图标）URL。 默认设置为通过站点图标界面（版本4.3中引入）上载的图像 。

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页面中删除其中一个meta。

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/以外的其他目录中，则很有用。

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 );

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

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

翻译自: https://www.hongkiat.com/blog/how-to-use-amp-wordpress/