Question

我正在使用AMP for WordPress插件，并且正在尝试实现amp-image-lightbox

我使用以下命令添加了脚本

add_action('amp_post_template_data', 'xyz_amp_component_scripts');
function xyz_amp_component_scripts( $data ) {
    $data['amp_component_scripts']['amp-image-lightbox'] = 'https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js';
    return $data;
}

并使用以下命令添加了amp-image-lightbox：

add_filter( 'the_content', function( $content ) {
    return $content . '<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>';
} );

剩下的就是将on="tap:lightbox1"属性添加到amp-image标签中，我似乎找不到任何过滤器。有什么办法可以实现？

Answer 1

我正在使用以下方法来实现相同目的。将这些功能放在functions.php中。

add_filter('the_content', 'ampFilterCaller', 99);
function ampFilterCaller($content)
{
     $args = ['image'  => '/<img[^>]+>/i'];
     $newContent = array();
     $count = -1;
     foreach($args as $k => $v)
     {
         $newContent[$k] = array();
         preg_match_all($v, $content, $res);
         array_push($newContent[$k], $res[0]);
     }
     if (!empty($newContent))
     {
         foreach ($newContent as $ky => $value)
         {
             $imgCnt = -1;   
             foreach($value[0] as $k => $v) {   
                $attr = ['tabindex="'.$k.'"', 'on="tap:lightboxImagePopUp"', 'role="button"'];
                $content = str_replace($v, ampContentImageTagReplacer($v, $attr), $content);                    
         }                       
    }    

    /*/Caption Shortcode Replace Call */
    $content = preg_replace('/(<[^>]+) style=".*?"/i', '$1', $content);
    $content = str_replace(['<p><strong><em>Article continues on the next 
page:</em></strong></p>', '<p><!--nextpage--></p>'], ['', ''], $content);         
    echo $content;    
    }
}

function ampContentImageTagReplacer($value, $attr = array()) {
    if($value !== '') {
        $leftImage = str_replace('<img', '<amp-img', $value);
        if (substr($value, -2) == '/>') {
            $newImage = str_replace('/>', implode(' ', $attr) . ' layout="responsive"></amp-img>', $leftImage);
        }
        else { 
            $newImage = str_replace('>', implode(' ', $attr) . ' layout="responsive"></amp-img>', $leftImage);
        }
        return $newImage;
    }
    else {
        echo 'NULL given expected String';
    }
}

将属性添加到WordPress中的<amp-image>标签

1 个答案: