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

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

関連記事

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

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

photoshopのブラシを反転させる方法

English 日本語 概要 みなさんこんにちはcandleです。今回はブラシを反転させる方法を紹介します。 前提 なし

Aptana Studio 3でソースコードのどこにカーソルがあっても改行する方法

概要 みなさんこんにちはcandleです。今回はAptana Studio 3の素晴らしい機能の1つを紹介します。 改行はソースコードを書く上では大変重要になります。 新しくコードを書いている時は改行 …

wordpress gutenbergはmarkdown書けるよという話

概要 みなさんこんにちはcandleです。今回は最近メジャーバージョンアップグレードがあったwordpressのgutebergでmarkdownがかけるよという話をします。 主題の通りなのですが、こ …

docker for Macのdocker containerからホストのmysqlに接続する

概要 みなさんこんにちはcandleです。 今回はMacのdocker containerからホストのmysqlにつなぐ方法を紹介します。 例えば、docker上でrailsやwordpressなどを …

  • English
  • 日本語

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