3

私は Wordpress ブログを持っており、forsight.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>

詳しくは foresight.js のウェブサイトをご覧ください。

私はWordpress codexを検索しましたが、Wordpressが各画像に対して出力するhtmlを変更するためにフィルター（つまり、 'get_image_tag' & 'image_tag' ）を使用するのが最善の方法です。これらのオプションのいずれかが機能するか、または正規表現でパターン マッチングを行い(理想的ではないことはわかっています)、 a をスローしてから、これをフィルター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');
?>

残念ながら、これらの例を機能させることはできません。事前に作成されたスクリプト/関数を共有したり、助けていただければ幸いです。学生の学習を助けてくれてありがとう!!

4

1 に答える 1

0

あなたのアプローチはページレンダリングの前であり、ワードプレスでは不可能ではないと思いますが、ページがjavascriptでレンダリングされた後に同じことを行うことができます。私はjQueryでそれをやろうとしましたが、tiは機能しているようです：

<!-- Example image -->
<img src="http://fotografia.deagostinipassion.com/resources/photos/2/2n/ilCielo.JPG" width="200px" height="300px">

<!-- Import jquery -->
<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>

さらにサポートが必要な場合は、私に聞いてください。

于 2013-02-18T22:33:32.700 に答える