ビューポートのサイズに応じてPHP値を切り替えます

Question

私は画像を出力するためにWordPressでACF pluginを使用しています。私のfunctions.phpファイル内で、私は2つの画像のサイズがあります、私のテーマの中で

<?php 
    function responsive_image($image_id,$image_size,$max_width){ 

     // check the image ID is not blank 
     if($image_id != '') { 

      // set the default src image size 
      $image_src = wp_get_attachment_image_url($image_id, $image_size); 

      // set the srcset with various image sizes 
      $image_srcset = wp_get_attachment_image_srcset($image_id, $image_size); 

      // generate the markup for the responsive image 
      echo 'src="'.esc_url($image_src).'" srcset="'.esc_attr($image_srcset).'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"'; 

     } 
    } 
?> 

：

<?php 
    add_image_size('full', 1024, 400, true); 
    add_image_size('square', 540, 540, true); 

のimg srcsetとACFで動作するように、私はのfunctions.php内の次のヘルパーのコードを持っています私は、持っている：

<img <?php responsive_image(get_field('image'), 'full', '1024px'); ?> alt="<?= esc_attr(get_field('alt')); ?>"> 

これは、フロントエンドで次のように出力します

<img src="test-1024x400.jpg" srcset="test-1024x400.jpg 1024w, test-300x117.jpg 300w, test-768x300.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" alt="Image Alt"> 

この画像の画像のクロッピングは、1024px×400pxのワイド（フル）です。

モバイルでは、これを（正方形）540ピクセル×540ピクセルに切り替える必要があります。モバイルクラスを持つimgタグを追加し、display: noneとdisplay: blockを使用して2つの画像を切り替えることで、これを実現できます。この方法の唯一の欠点は、ロードする必要がある余分な画像です。

ビューポートに応じて条件付きWordPressイメージのサイズを読み込むことができるテーマPHP内の方法はありますか？

Answer 1

ブール値を返すWordpress関数を使用すると、特定のユーザーエージェントに対して異なる出力を表示できます。

ただし、携帯電話またはタブレットのいずれかを使用している場合はtrueを返します。両者を区別することはできません。

https://codex.wordpress.org/Function_Reference/wp_is_mobile

簡単な例：

if(wp_is_mobile()) { 
    // display your mobile/tablet related item here 
} else { 
    // display the desktop alternative here 
} 

Answer 2

okが、これはもう少し複雑です。 PHPはサーバーサイドの言語なので、視点を得ることはできません。 視点に応じてサイトを変更できるようにするには、JavaScriptなどのクライアント側の言語を使用する必要があります。

画像を2つ作成して表示/非表示する必要はありません。視点に応じて画像のクラスを変更する方が簡単で効率的です。

HTML：

<img src="/path/to/img" class="imgs"> 

CSS：

.mobile { 
    width: 540px; 
    height: 540px; 
    overflow: hidden; 
    // whatever style you want for mobile view 
} 
.normal { 
    width: 1024px; 
    height: 400px; 
    overflow: hidden; 
    // whatever style you want for normal view 
} 

JS：基本的にはそう

var cw = document.documentElement.clientWidth; // get horizontal viewpoint 
var ch = document.documentElement.clientHeight; // get vertival viewpoint 
if (cw <= 540 || ch <= 540) { // if it is mobile 
    var images = document.GetElementByClassName('imgs'); // get all images (where class is 'imgs') 
    for (var i = 0; i < images.length; ++i) { 
     images[i].className = "imgs mobile"; // add class 'mobile' 
    } 
} 
else { 
    var images = document.GetElementByClassName('imgs'); 
    for (var i = 0; i < images.length; ++i) { 
     images[i].className = "imgs normal"; // add class 'normal' 
    } 
} 

、毎回、ページの負荷は、JSは視点をチェックし、クラスを変更しますそれに応じて画像。