如何用AMP插件开发

在本节中，您将学习如何使用AMP插件开发插件，主题和网站。在了解开发工作流程和流程时，您将了解插件的不同部分。

AMP设置页面

让我们从AMP设置页面开始。此页面提供了在站点上设置AMP的不同选项。

有3种模板模式：原生模式，配对模式和经典模式。要了解有关这些模式的更多信息，请访问此文档。

在Native或Paired模式下进行开发将是*有用的。这两种模式都使用活动主题并提供更丰富的AMP体验。

在经典模式下开发有助于向后兼容此插件的先前版本，但它不使用主题模板，不支持小部件，并且它仅支持帖子，页面和媒体。

如果您正在开发主题，还可以通过  编程方式添加主题支持。

AMP插件兼容性工具

AMP插件验证网页的标记。如果可能，它会修改文档并创建完全有效的AMP文档。一些元件被转换成AMP组件，例如<img>到<amp-img>。无效的节点，例如<script>，被剥离。

插件剥离无效节点后，挑战是保留完整功能。当通过JavaScript提供交互性和功能时，这可能会更加困难。

AMP提供了一个庞大的组件库，但也有一些它不允许的标签和属性。作为开发人员，您需要识别被剥离的无效节点，然后找到用它们替换每个节点的正确组件或功能。

你怎么知道什么是无效的？兼容性工具为您提供了解问题所在及其存在位置所需的信息。使用此工具，您将能够处理每个问题区域。如果需要更换节点，则可以利用AMP Project的库。

让我们回顾一下兼容性工具中的两个主要管理页面以及如何使用它们。

AMP验证的网址页面

在开发过程中，您需要知道哪些URL无效以及您需要关注哪些内容。从AMP验证的网址页面开始，因为它会显示AMP验证错误以及这些错误的来源：

请注意，主题生成无效<object>：

从这里，您可以“重新检查”URL或深入了解“详细信息”以更好地了解问题：

AMP验证错误索引

在开发过程中，您需要了解验证错误的类型。AMP验证错误索引页面为您提供此信息。您可以查看错误列表。然后，对于每个错误，此索引提供错误，状态，错误类型，上次查看时间以及发现此错误的URL数。

此索引页对于查找某些类型的错误非常有用。

例如，假设您正在努力减小样式表的大小。使用此工具，您可以验证CSS错误，以了解其是否超过50 KB限制，即使AMP插件的树状抖动也是如此。按错误类型使用过滤器，您可以按“CSS错误”过滤，如下例所示：

AMP组件

AMP插件会自动将某些元素转换为AMP组件。此转换不会导致验证错误。

以下是插件将转换为AMP等效项的所有HTML元素：

非AMPAMP
<img><amp-img>
<iframe><amp-iframe>
<form><amp-form>
<audio><amp-audio>
<video><amp-video>

在大多数情况下，您无需做任何事情，因为插件会自动为您处理转换。一个例外是创建提交POST请求的表单（请参阅下面的详细信息）。

AMP插件使用适配将元素转换为AMP。这些适配存在于包括/适配/中。它们包括允许的标签，音频，评论，嵌入，表单，图库等。有关适配的完整列表，请参阅存储库。

还有适配将几乎所有原生WordPress嵌入和短代码转换为AMP。这是目前的支持。在大多数情况下，您无需做任何事情来使这些AMP兼容。

原生WordPress的功能如何？*佳做法是继续使用这些本机功能。例如，您可以使用wp_get_attachment_image()然后让插件将其转换<img>为<amp-img>。

大多数原生WordPress嵌入也会自动转换为AMP组件。包括Facebook，Instagram，YouTube和Vimeo。

创建提交POST请求的表单

当有一个表格通过POST提交时，即<form method="post">你需要采取额外的步骤。  

  • 该放大器形式的脚本，因为这个插件会做，当它找到一个<form>。

有关更多详细信息，请参阅AMP文档。

插件开发

如果您的插件不会影响网站的前端，那么就不用担心AMP的兼容性了。一个很好的例子是当你的插件向编辑器添加自定义分类元数据集时。

但是，当您的插件或主题确实影响网站的前端时，您可能需要深入了解以解决AMP验证错误。JavaScript可能是AMP不兼容的*可能原因，因为脚本不被允许并且将被剥离。

插件自动完成你可能需要这样做
如果为URL启用了AMP，则呈现完全有效的AMP文档防止输出无效元素，以便验证错误不会禁用AMP
只要未通过验证错误禁用AMP，就会删除无效元素重新实现已删除的元素，如下面AMP绑定取代JavaScript的示例
输出 没有

示例：插件添加小部件

让我们使用名为City Info的示例插件来完成AMP验证过程。您将学习如何使此插件与AMP兼容。

此插件的小部件使用JavaScript显示所选城市的图像：

1.在/wp-admin，转到“AMP设置”>“模板模式”，然后选择“已配对”：

2.转到包含窗口小部件的URL。然后单击管理栏中的“查看AMP”>“重新验证”：

3.这将带您进入验证器UI：

4.单击“错误”列，您将看到以黄色突出显示的无效节点。这是一个<script>。在其他插件上，您可能会看到amp-bind错误。

例如，以下是将脚本排入队列的原始代码段：

if ( is_active_widget( ‘city_info’ ) ) {
        enqueue_script( ‘city-info-selection’ );
}

*先，创建一个函数来检查它是否在AMP URL上：        

/**
 * Whether this is an AMP endpoint.
 *
 * @see https://github.com/Automattic/amp-wp/blob/e4472bfa5c304b6c1b968e533819e3fa96579ad4/includes/amp-helper-functions.php#L248
 * @return bool
 */
function city_info_is_amp() {
        return function_exists( ‘is_amp_endpoint’ ) && is_amp_endpoint();
}

然后，使用该函数仅将脚本排入非AMP URL：

if ( is_active_widget( ‘city_info’ ) && ! city_info_is_amp() ) {
        enqueue_script( ‘city-info-selection’ );
}

接下来，我们将使用amp-bind重新实现JavaScript 。

要查看此窗口小部件的工作方式，更改其值<select>会导致图像src更改：

原始的非AMP标记是：

<select id="destination-city" title="<?php esc_html_e( 'Destination City', 'city-info' ); ?>">
          <option value="guadalajara"><?php esc_html_e( 'Guadalajara', 'city-info' ); ?></option>
          <option value="paris"><?php esc_html_e( 'Paris', 'city-info' ); ?></option>
          <option value="tokyo"><?php esc_html_e( 'Tokyo', 'city-info' ); ?></option>
</select>
<img id="selected-city" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Plaza_de_Armas%2C_Guadalajara%2C_Jalisco%2C_M%C3%A9xico.jpg">

这使用带有事件处理程序的JavaScript文件来侦听<select>更改的值：

document.addEventListener( 'DOMContentLoaded', function() {
          const cities = {
                  guadalajara: 'https://upload.wikimedia.org/wikipedia/commons/2/29/Plaza_de_Armas%2C_Guadalajara%2C_Jalisco%2C_M%C3%A9xico.jpg',
                paris: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/2007_Paris_Seine.jpg/1200px-2007_Paris_Seine.jpg',
               tokyo: 'https://upload.wikimedia.org/wikipedia/commons/6/67/Tokyo_night_view_1.jpg'
  };

               document.getElementById( 'destination-city' ).addEventListener( 'change', function( event ) {
                       const cityImage = cities[ event.target.value ];

                       if ( event.target.matches( 'select' ) && cityImage ) {
                               document.getElementById( 'selected-city' ).setAttribute( 'src', cityImage );
                       }
               } );
} );

用这个来实现 <?php if ( city_info_is_amp() ) : ?> <amp-state id="cityInfo"> <script type="application/json"> {"selectedCity": "", "guadalajara":"https://upload.wikimedia.org/wikipedia/commons/2/29/Plaza_de_Armas%2C_Guadalajara%2C_Jalisco%2C_M%C3%A9xico.jpg", “paris": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/2007_Paris_Seine.jpg/1200px-2007_Paris_Seine.jpg", "Tokyo": "https://upload.wikimedia.org/wikipedia/commons/6/67/Tokyo_night_view_1.jpg" }</script> </amp-state> <?php endif; ?>

<script>AMP状态的内部与cities上面脚本中的常量非常相似。但它使用JSON格式，并且它有一个"selectedCity"值。我们稍后再看一下。

接下来，您可以<select>从上面的JavaScript文件实现更改处理程序。这将涉及在此处向*行和*后一行添加属性：

<select id="destination-city" title="<?php esc_html_e( 'Destination City', 'city-info' ); ?>" <?php echo city_info_is_amp() ? 'on="change:AMP.setState({ cityInfo: {selectedCity: event.value}})"' : ''; ?>>
        <option value="guadalajara"><?php esc_html_e( 'Guadalajara', 'city-info' ); ?></option>
        <option value="paris"><?php esc_html_e( 'Paris', 'city-info' ); ?></option>
        <option value="tokyo"><?php esc_html_e( 'Tokyo', 'city-info' ); ?></option>
</select>
<img id="selected-city" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Plaza_de_Armas%2C_Guadalajara%2C_Jalisco%2C_M%C3%A9xico.jpg" <?php echo city_info_is_amp() ? '[src]="cityInfo[cityInfo.selectedCity]"' : ''; ?>>

在上面的*行，注意on属性：

<?php echo city_info_is_amp() ? 'on="change:AMP.setState({ cityInfo: {selectedCity: event.value}})"' : ''; ?>

这将创建一个处理程序，用于更新selectedCity值<amp-state>。例如，如果用户更改了<select>to tokyo，则值cityInfo.selectedCity 也将更改为tokyo。

然后，*后一行<img>根据该新值更新src ：

<?php echo city_info_is_amp() ? '[src]="cityInfo[cityInfo.selectedCity]"' : ''; ?>

括在括号中的AMP属性使用动态值。例如：

<img src=”/foo.png” [src]=”fooState.imageSrc”>

这src是初始值，[src]可以动态变化。

src除动态外，设置初始值非常重要[src]。否则，src加载页面时将没有值。

替代选择

您还可以让插件剥离<script>并报告验证错误。

插件的用户可能必须接受错误，因此它不会阻止AMP。

为了避免阻止AMP，在上面步骤4的验证UI中，用户需要确保错误的“状态”是“新接受”或“接受”：

请参阅AMP验证 有关这些状态的更多信息。

如果JavaScript不重要，或者它有<noscript>后备，您可能决定不使用AMP绑定重新实现它。

此外，在激活插件时，如果它立即输出无效的AMP，您会看到通知：

但这仅报告了一些可能的错误。对于此示例城市信息插件，在添加窗口小部件之前，它不会报告错误。

主题发展

该插件可为您处理许多AMP要求，包括创建AMP HTML页面中的大部分标记和元数据。

组件脚本

AMP需要脚本。https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

但是当插件在文档中找到这些元素时，它会自动输出组件脚本。你不需要做任何事情。

造型

该插件为您处理样式表和内联样式的大部分工作。

自动 <style amp-custom>

AMP插件允许您使用样式表排列样式表wp_enqueue_style()。然后它打印出样式<style amp-custom>。  

CSS Tree Shaking

AMP将自定义样式限制为50KB。AMP插件为每个URL执行CSS树抖动，以将标记与所需样式进行比较。它删除了不需要的样式，使您更容易达到50KB的限制。

即使树摇动，网页也可能有超过50KB的样式。如果发生这种情况，您将需要手动评估页面并减少样式。

您可以通过转到AMP验证错误索引，过滤CSS错误以及查找excessive_css错误来查看是否有太多样式排队：

您也可以禁用管理栏，因为这需要大约三分之一（在编写本文时为17KB）允许的50KB。只需转到AMP设置并选中“在AMP页面上禁用管理栏”：

内联样式

当有内联样式属性时，插件将创建一个带有样式规则的类并将其添加到元素中。所以你仍然不需要改变任何东西，也不会有验证错误。

例如，这个元素：

<span style="margin-right: 5px">Lorem ipsum</span>

…将删除样式属性，并替换为具有样式规则的类：

！重要的资格赛

在!important预选赛.blocks-gallery-item figcaption { font-size: 1.2rem !important; }

…将显示为允许的样式规则，具有足够的特异性以覆盖其他样式：

示例主题

您可以使用WP Rig开发主题，因为它已准备好AMP。

否则，您可以执行以下步骤，这些步骤与WP Rig中的步骤类似。

步骤1

定义类似于的函数wprig_is_amp()：

function prefix_is_amp() {
        return function_exists( ‘is_amp_endpoint’ ) && is_amp_endpoint();
}

第2步

使用此功能可防止在非AMP网址上排队或打印脚本：

add_action( ‘wp_enqueue_scripts’, function() {
        if ( ! prefix_is_amp() ) {
                return;
        }
        wp_enqueue_script( ‘example-script’ );
        // Enqueue more scripts.
} );

第3步

非AMP页面上的comments.php模板通常允许在没有页面刷新的情况下显示新注释。但这是使用JavaScript，AMP中不允许这样做。

因此，您可以选择在具有amp-live-list的 AMP中实现此功能。WP Rig在其comments.php中有一个这样的例子：

<?php if ( wprig_using_amp_live_list_comments() ) : ?>
        <amp-live-list
        <!-- continue here -->
<?php endif; ?>

这也需要采取下面的步骤4和5。

第4步

您可以选择使用可选参数注册 AMP的主题支持add_theme_support( ‘amp’ )。但是，这需要
amp-live-list 支持，在第5步中提到的参数一起。

amp-live-list 支持，以及步骤5中提到的参数。

如果主题仅用于AMP，则以编程方式注册主题支持*有用。例如，如果它使用AMP组件（如amp-carousel），则可能需要强制使用Native模式。

这将确保不存在非AMP网址，除非用户使用/ wp-admin>“AMP设置”>“支持的模板”选择退出某些模板上的AMP。 

添加主题支持将强制原生或配对模式，具体取决于参数array()或缺少参数。

有关添加主题支持的更多详细信息，请参阅AMP插件服务策略 ，包括参数array()。

以编程方式添加主题支持的替代方法是让用户通过/ wp-admin>“AMP Settings”>“Template Mode”设置模板模式。

第5步

如果您为’amp’添加主题支持，请传递’comments_live_list’ => true给参数array()：

add_theme_support( 'amp', array(
        'comments_live_list' => true
) );

这样可以实现上述步骤3中的评论的实时刷新。

第6步

重新实现JavaScript，可能使用amp-bind。以下是一个可扩展菜单的示例，该菜单在JavaScript中实现非AMP和AMP的AMP绑定。

如该示例所示，您可以使用类似于prefix_is_amp()仅在需要时输出AMP标记的内容：

if ( prefix_is_amp() ) :
        ?>
        <amp-state …>
        <!-- continue here -->
        <?php
endif;

第7步

通过转到“AMP设置”>“AMP验证的网址”检查主题中的验证错误：

如果您在“来源”列中看到主题名称，请点击左侧的网址，如/2018/屏幕截图所示。然后你会看到：

单击“错误”列中的*项（在上面的屏幕截图中圈出）。您将看到有关无效标记的信息。在这种情况下，它来自主题输出a

像往常一样，*常见的错误来源可能是JavaScript。

您还可能希望为AMP组件开发块。例如，这个插件包含几个媒体组件的块，包括amp-jwplayer和amp-ooyala-player。

这些只适用于AMP，因此*好只在Native模式下添加它们。

你可能想要像这个插件一样排队块注册脚本：

add_action( 'enqueue_block_editor_assets', function() {
        if ( function_exists( ‘amp_is_canonical’ ) && amp_is_canonical() ) {
                wp_enqueue_script( ‘my-block-script’ );
        }
} );

因此，只有在使用Native AMP时才会出现该块：

相关文章

滚动至顶部
扫描微信二维码联系我们 关闭