WordPressで反応型イメージを無効にする

Last Updated：2016年09月06日| | 6のコメント

Disable image responsiveness in WP

WordPressで反応型イメージ（responsive images）機能を使用していない

WordPress 4.4（「Clifford "）からのすべての画像のタグに「srcset」属性を追加する新しい機能が追加されたそうです。 この機能に応じていくつかの解像度の画像があれば、ブラウザで自主的に判断して、解像度に合わせて画像をロードします。

この機能は非常に便利ですが、たまに画像が反応型で表示されないことをお勧めすることができます。

この場合は、次のようなコードを追加して、 srcset 属性を無効にすることができます。

add_filter('wp_get_attachment_image_attributes', function($attr) {
if (isset($attr['sizes'])) unset($attr['sizes']);
if (isset($attr['srcset'])) unset($attr['srcset']);
return $attr;
}, PHP_INT_MAX);
add_filter('wp_calculate_image_sizes', '__return_false', PHP_INT_MAX);
add_filter('wp_calculate_image_srcset', '__return_false', PHP_INT_MAX);
remove_filter('the_content', 'wp_make_content_images_responsive');
// Source: stackexchange

上記のコードを使用している WordPressの関数ファイル（のfunctions.php）に追加するか、サイトレベルの関数ファイル（ "WordPress プラグインとテーマの比較 - サイト別プラグ作成「注）に追加してください。

参考までに、上記のコードを追加する前に、PHP 5.3以降を使用していることを確認してください。

注 - モバイルバージョンを無効にする場合

Avada, Enfoldのようないくつかの人気のテーマでは、反応型を無効にして、モバイル版でもPC版（デスクトップ版）のように見えるようにする機能を提供します。

もしテーマ内でこのような機能を提供していない場合は、モバイル版に適用されるCSSメディアクエリのコードを検索して削除する必要があります。

6のコメント

コメント

  1. 良い投稿ありがとうございます。
    この方法でなら、携帯電話からpc版に見える時、画面をズームインも可能でしょうか？

    応答

  3. 質問します.... 投稿して写真を載せるとモバイルでその写真サイズが大きすぎるようですね..
    ポストに追加された写真を携帯電話にぴったり合うようにサイジュを変えてくれるイトナヨ？

    応答

    • こんにちは？

      ブログを訪問していただきありがとうございます。

      質問の内容だけでは正確な答えを与えることができない点ご了承ください。

      普通の反応型に反応して、モバイルの時にも本体の幅に合わせて表示されます。 もし、特定のテーマでそのような問題が表示される場合は、テーマ開発者（販売）に問い合わせてみて、最も正確な答えを得ることができるようになります。

      応答

    • 参考までに、以下のようなCSSを適用してテストしてみてください。

      @media only screen and (max-width:767px) {
      .image-resized img {
      width:100%;
      height:auto;
      }
      }

      実際の要素の名前は、適切に変更してください。

      一般的には、サムネイルのサイズを定義して、適切にサムネイルサイズを呼び出すと反応型で動作するものと思われます。

      応答