Question

我有一个Wordpress博客，正在尝试实施foresight.js图片脚本。简而言之，我需要定位所有帖子图片，用src, width, & height属性换出data-src, data-width, & data-height属性。然后，我需要复制图像行并将其包装在<noscript>标记中。这是我试图让Wordpress生成/创建的结构：

<img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img">
<noscript>
    <img src="wordpress/image/url/pic.jpg">
</noscript>

More info can be found at foresight.js' website

我搜索了Wordpress codex，我找到的最佳路线是使用过滤器（即'get_image_tag'＆amp; 'image_tag'）来修改Wordpress为每个图像输出的HTML。我认为其中一个选项应该可行，或者我可以使用正则表达式进行模式匹配（我知道，不理想），抛出preg_replace然后将其注入进入the_content过滤器。

我已尝试过其中一些选项，但无法使用。有人可以提供一些帮助吗？

'get_image_tag'尝试：

在网络上找到了这个特殊的，但它需要修改以适合我的逻辑（参见上面的结构）...无法理解preg_replace数组在我自己做什么的

<?php function image_tag($html, $id, $alt, $title) {
    return preg_replace(array(
        '/'.str_replace('//','\/\/',get_bloginfo('url')).'/i',
        '/\s+width="\d+"/i',
        '/\s+height="\d+"/i',
        '/alt=""/i'
    ),
    array(
        '',
        '',
        '',
        alt='"' . $title . '"'
    ),
    $html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);
?>

另一个'get_image_tag'尝试：

<?php function get_image_tag($id, $alt, $title, $align, $size='full') {
    list($width, $height, $type, $attr) = getimagesize($img_src);
    $hwstring = image_hwstring($width, $height);

    $class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id;
    $class = apply_filters('get_image_tag_class', $class, $id, $align, $size);

    $html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />';
    $html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size);

    return $html;
}
?>

模式匹配尝试：

尝试在这个上创建我自己的正则表达式，但不确定它是否正确。

<?php function restructure_imgs($content) {
    global $post;
    $pattern = "/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)(|\")(.*?)>/i";

    list($width, $height, $type, $attr) = getimagesize($2$3.$4$5);
    $hwstring = image_hwstring($width, $height);

    $replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'restructure_imgs');
?>

不幸的是，无法使这些示例中的任何一个工作。任何帮助或分享您预先编写的脚本/功能将不胜感激！感谢您帮助学生学习!!

Answer 1

你的方法是在页面渲染之前，我认为在wordpress中并非不可能，但是你可以在页面用javascript渲染之后做同样的。我试图用jQuery做到这一点，而且似乎有效：

<img src="http://fotografia.deagostinipassion.com/resources/photos/2/2n/ilCielo.JPG" width="200px" height="300px">  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function () { $("img").wrap(function() { $(this).wrap(function() { var newimg = '<img data-src="' + $(this).attr('src') + '" data-width="' + $(this).attr('width') + '" data-height="' + $(this).attr('height') + '" class="fs-img">'; return newimg; }); return '<noscript>'; }); }); </script>

如果您需要更多帮助，请问我。

在Wordpress中更改所有img标签的html结构

'get_image_tag'尝试：

另一个'get_image_tag'尝试：

模式匹配尝试：

1 个答案: