joppot

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

ソフトウェア

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

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

Pocket

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

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

関連記事

userstyles.orgにある「原宿」テーマをsafariのstylishに適応する

概要 みなさんこんにちはcandleです。今回はuserstyles.orgにある原宿バージョンのテーマをsafariに適応していきます。 前提 safariを持っていること stylishがインスト …

スライド(パワースポイント)でクリエイティブコモンズが「表示」の写真の使い方

概要 みなさんこんにちは、最近サービスを作ろうとして忙しいcandleです。今回はクリエイティブコモンズの「表示」が指定されている画像のパワーポイントでの使い方です。 簡単にクリエイティブコモンズの説 …

MacにPlantUML環境をbrewを使って構築する

概要 みなさんこんにちはcandleです。 今回はUMLを簡単に作成できるplantUMLの環境をMacに構築したいと思います。 私はUML作成ツールはこれまで、starUMLを使っていましたが、どう …

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

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

emacsのReactの開発をrjsx-modeで行う

English 日本語 概要 みなさんこんにちはcandleです。 今回はemacsのreact開発用のメージャーモードのrjsx-modeを導入してみたいと思います。 Reactの開発はこれまで、w …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ