0

スマートフォン、タブレット、コンピューター用のレスポンシブ画像を使用して、新しいWordpressレスポンシブWebサイトを構築したいと思います。

デバイスの幅に応じて正しい画像を読み込むjavascript関数（動作）を作成しました。

これが4つの異なるサイズで同じ画像をロードするための私のhtmlレイアウトです：

<div pictures-content alt="alt data">
        <div src="<?php bloginfo('template_directory'); ?>/images/small.jpg">
        <div src="<?php bloginfo('template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
        <div src="<?php bloginfo('template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
        <div src="<?php bloginfo('template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>

これが私の問題です。Wordpressで画像を追加する必要がある場合、4枚の画像をプッシュする必要があります。

Wordpressのビジュアルオプションを使用してコードを直接追加することで、投稿4の画像を追加する便利な方法があるかどうか知りたいですか？

WPギャラリーを使用するのは良い選択ですか？プラグインをダウンロードしてカスタムフィールドを設定する必要がありますか？投稿の唯一の画像に従ってhtmlレイアウトを自動的に構築および追加するJs関数を作成する必要がありますか？

私は他の解決策を取っています、助けてくれてありがとう

4

1 に答える 1

1

完全な答えではありませんが、始めるには十分です。

これにより、次のようなものが得られます。

<?php
function responsive_image($html, $id, $caption, $title, $align, $url, $size, $alt)
{
    $html = '<div pictures-content alt="' . $alt . '" title="' . $title . '">
        <div src="' . wp_get_attachment_image_src($id, 'thumbnail') . '">
        <div src="' . wp_get_attachment_image_src($id, 'medium') . '" data-media="(min-width: 400px)"></div>
        <div src="' . wp_get_attachment_image_src($id, 'large') . '" data-media="(min-width: 950px)"></div>
        <div src="" data-media="(min-width: 1200px)"></div>
        </div>';
}
add_filter('image_send_to_editor', 'responsive_image', 10, 8);

画像サイズを調整してテストし、行き詰まった場合はお知らせください。

于 2013-01-28T20:14:47.167 に答える