Question

我想使amp-carousel画廊上的按钮始终可见，并且需要controls属性。由于我使用的是AMP官方插件，因此我不知道将此属性添加到amp-carousel输出中，因为该插件控制着该输出。

Answer 1

经过一段时间尝试按照您的要求进行操作后，我找到了解决此问题的方法。希望对您有帮助。

在您的wordpress项目中，文件夹wp-content->主题->的文件名为functions.php。

您必须使用功能amp_content_sanitizers钩住操作add_filter，然后实现自己的功能。但首先您需要创建一个从AMP_Base_Sanitizer扩展的新类，并覆盖方法sanitize()，如：

添加新文件

文件名，例如：Custom_AMP_Carousel_Injection_Sanitizer.php

位于主题文件夹内的“类”文件夹中。

<?php

require_once( AMP__DIR__ . '/includes/sanitizers/class-amp-base-sanitizer.php' );

class Custom_AMP_Carousel_Injection_Sanitizer extends AMP_Base_Sanitizer {
    public function sanitize() {
        $ampCarouselNodeList = $this->dom->getElementsByTagName('amp-carousel');
        foreach($ampCarouselNodeList as $node){
            $node->setAttribute('controls', '');
        }
    }
}

在您主题文件夹的functions.php中

add_filter( 'amp_content_sanitizers', 'custom_amp_add_carousel_sanitizer', 10, 2 );
function custom_amp_add_carousel_sanitizer( $sanitizer_classes, $post ) {
    require_once( dirname(__FILE__) . '/classes/custom_amp_carousel_injection_sanitizer.php' );
    $sanitizer_classes['Custom_AMP_Carousel_Injection_Sanitizer'] = array();
    return $sanitizer_classes;
}

这也可以帮助您：

https://amp-wp.org/documentation/how-the-plugin-works/amp-content-rendering-in-wordpress/

https://developer.wordpress.org/reference/functions/add_filter/

Answer 2

在文档本身中定义了在controls中添加amp-carousel属性的方法。

如上所述：

controls-永久显示向左和向右箭头，供用户在移动设备上浏览轮播项目。

这是一个实现方式的示例，摘自documentation。

<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"
  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <amp-img src="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

使用AMP插件时如何在“ amp-carousel”中添加“ controls”属性？

2 个答案: