web-dev-qa-db-ja.com

ワードプレスで画面サイズに応じて異なる画像を配信する方法

私はモバイルファーストアプローチでレスポンシブWordPress Webサイトを作成しています。

私のクライアントがブログ投稿のために画像をアップロードするとき、私はWordPressに画像のより小さなバージョン（より小さなファイルサイズで！）を生成させて、それからより小さな画面サイズに配信させたいですか？

ユーザーが自分自身で画像のいくつかのバージョンをアップロードしなければならない場合でも、これはまだ良い解決策になります。

私はadd_image_sizeと呼ばれる関数があることを知っています、しかし私はこれが画像の寸法を変えるだけで実際のファイルサイズは変えないと信じます。ファイルサイズの違いは、ここで最も重要なことです。

それで、これを可能にするために書かなければならないプラグインやコードはありますか？

私はこの質問についての助言やアドバイスをお待ちしています。

ありがとう

imagesresponsive
3
Adam

add_image_sizeは画像ファイルの実際のサイズを変更します。

私が試したこと：

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true );//OF course the dimensions are not correct...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Image size for iphone' );
    $sizes['tablet-size'] = __( 'image size for tablet' );

    return $sizes;
}
add_action( 'init', 'odevice_image_sizes' );
add_filter('image_size_names_choose', 'show_odevice_at_img_select');

デバイスの種類（iPhoneまたはタブレット）を確認するときは、次のようなカスタムイメージを使用できます。

<?php the_post_thumbnail( 'iphone-size' ); ?>

必要な評判がないので、スクリーンショットを送ることはできません。しかし、アップロードフォルダを見ると、カスタムサイズで入力された画像のサイズが（ディスク上で）異なるため、帯域幅が異なることがわかります。寸法が小さいほど、帯域幅は狭くなります。

1
panos

panosはそれを正しくしました。さまざまな目的のためにさまざまなサイズの画像を作成するには、add_image_sizeを使用します。あなたの質問をもう少し続けるために、私は付け加えたいと思います：

Add_image_sizeを使用してさまざまな画像サイズを作成したら、WordpressプラグインMobble（または他のphpベースのデバイス認識）を使用してさまざまなデバイスサイズに対応させることができます http://wordpress.org/plugins/mobble

単純なif elseステートメントがこのような何かをするだけです：

if ( is_mobile() ) : the_post_thumbnail( 'mobile-size' );
elseif( is_tablet() ) : the_post_thumbnail( 'tablet-size' );
else : the_post_thumbnail( 'full' );
endif;
0
jounileander

最も簡単な方法は css を使うことです

私のサイトでは以下のコードを使用しています。

.your_div img {
height:auto;
max-width:100%;
}

上記のCSSコードがお役に立てば幸いです。

0
v123shine