joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

wordpress4.4の画像にsrcsetが埋め込まれるのを削除する

投稿日:2016年1月20日 更新日:


srcset_top_thumb

概要

みなさんこんにちはcandleです。今回はwordpress4.4で追加された、retinaやレスポンシブに対応した画像のsrcsetの削除の仕方を紹介します。

wordpressの画像はewwwなどを使っていると、内部で複数のサイズの画像を持ちます。
例えば、サムネイルなら小さい画像にしたりできます。

問題は、投稿に挿入したい際に、retinaでみたい場合に画素数が足りなかったり、モバイルで見る場合は画像が大きすぎて無駄だったりすることです。

そこで、wordpressは4.4からsrcsetというのを導入して、必要に応じたサイズの画像をロードするようになったのですが、私のようにs3にアップロードする人はこれの影響で、s3のアドレスではなく、サーバのアドレスが挿入されてしまい、画像が404になってしまいました。

このような感じです。

<img class="alignnone size-medium wp-image-825" src="https://joppot.s3.amazonaws.com/wp-content/uploads/2010/01/dd.jpg" sizes="(max-width: 630px) 100vw, 630px" srcset="http://joppot.info/wp-content/uploads/2010/01/dd.jpg 630w, http://joppot.info/wp-content/uploads/2010/01/dd.jpg 968w, http://joppot.info/wp-content/uploads/2010/01/dd.jpg 1023w" alt="dd" width="630" height="330" />

しばらくはこの機能をオフにしておきたいと思います。

参考
http://wordpress.stackexchange.com/questions/211375/how-do-i-disable-responsive-images-in-wp-4-4

srcsetを無効化する

wordpressのプロジェクトに移動します。

*追記)

テーマの中のfunctions.phpに記述する方法の方が最も良い方法です。
wp-content/themes/使用しているテーマ/functions.phpを開いて、一番最後に以下を記述します。

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

add_filter_calc

保存すれば、srcsetが挿入されずに画像が表示されます。

==============ここまで追記

下の方法だとwrodpressをバージョンアップするたびに書き加えなくてはならないので、非推奨です。


wp-includes/media.phpをエディタで開きます。
function wp_calculate_image_srcset
を探します。
その次の行に以下を記述します。
add_filter( ‘wp_calculate_image_srcset_meta’, ‘__return_null’ );


まとめ

srcsetは多分便利なものだと思うので、うまく両立できるようにしたいですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ブルーライトカットソフト[ f.lux ]の使い方

概要 どうもみなさんこんにはcandleです。今回はf.luxの導入と使い方を説明したいと思います。 f.luxはブルーライトをなるべく減らすソフトウェアです。 f.luxはシークバーでブルーライトカ …

MAMPでphpのshell_execを使用してunixコマンドを実行できない場合の対処(imagemagick,convert)

概要 みなさんこんにちはcandleです。今回はちょっと問題が起きてshell_execがうまくいかないときのトラブルシューティングをまとめます。 私はMAMPをバージョンアップする前は、phpのsh …

Mac YosemiteのFinderをカスタマイズして使いやすくする

概要 みなさんこんにちはcandleです。今回はfinderの設定を行い、より使いやすいfinder構成を行いましょう。 finderはプログラマーでもよく使うソフトでこれが使いにくいとストレスしかた …

mac のiterm2でaltキーをescに割り当て、カーソル移動を早くする

概要 皆さんこんにちはcandleです。今回はiterm2のキーを設定して、カーソル移動を楽にします。 emacsユーザーなら分かると思いますが、カーソルの高速移動はalt+fで前へalt+bで後ろへ …

Mac OS MavericksにX11(Xquartz)をインストールする

概要 みなさんこんにちはcandleです。今回はX11のインストールを行います。MavericksからかMountain Lionからか忘れましたが、MacではX11が標準でインストールされなくなりま …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー