web-dev-qa-db-ja.com

画像の最適化に$ content_widthを使用するのに代わる良い方法は何ですか？

WordPressの$content_width GLOBALは、画像のサイズを制限して投稿に埋め込むことで、多くのテーマや一部のプラグインにも影響を与えます。これは、wordpress.orgに送信されるテーマの要件です。

これを使用して設定されます。

$content_width = 584; // Twenty Twelve example

大きな画像（デフォルトは1024 x 1024）を投稿に挿入すると、次のようになります。

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

代わりにこのグローバル設定を削除して実際の画像サイズを挿入すると、add_image_sizeで設定した結果は次のようになります。

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328"

グローバルを削除して大きな画像を挿入する これは非常に一般的です 、複数の画像があるページでは2倍以上の節約になることがよくあります数百KBページに保存負荷。

add_image_sizeを使用してフルサイズの画像を挿入する機能を削除することは、より良い選択肢ではありませんか？

ps。私は ここに書いた より正確なデータで書いた

imagesoptimizationglobals
14
Wyck

$content_widthグローバルは、画像だけでなくビデオなどの埋め込みオブジェクトにも使用されることに注意してください。したがって、どの解決策も単に$content_width自体の使用/サポートをやめることにはならないでしょう。

通常、テーマはいくつかの方法でコンテンツエリアの画像を制限します。

  1. 大 画像サイズ：$content_widthをテーマ設計に適したものに定義する
  2. オリジナル/フル 画像サイズ：挿入されたフルサイズの画像がレイアウトを壊さないようにするための#content img { max-width: XXX; height: auto; }のCSSルールの定義
  3. サムネイル 画像サイズ： set_post_thumbnail_size() を呼び出して、おすすめ画像/投稿サムネイルのデフォルトのthumbnailサイズを定義します。 （注：私は個人的にはこの方法を使用することをお勧めしません。注目画像の特定の場所に固有のカスタム画像サイズを定義し、the_post_thumbnail( $size )を介して特定のテンプレートの場所でそのカスタムサイズを呼び出します。）

あなたが発見したように、WordPressが任意の与えられた画像要求に使用するために中間的な画像サイズで選択する方法のために、その要求はブラウザ規模の画像をもたらすかもしれません。

大きな画像のテーマ定義値

1つの選択肢は大きな画像サイズの設定を再定義するです。 （慎重に進めてください。これはあなた自身のサイトには問題ありませんが、ユーザー設定と混同する公に配布されているテーマは、最高でもグレーの領域です。）

大きな画像寸法設定は次のように保存されます。

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

それで、あなたはあなたの$content_width値に従ってそれらの値をsetすることができます：

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

（もちろん、これを回避するためのフェイルセーフ/エラーチェックを適切に行う必要があります。）

フルサイズの画像を挿入するオプションを削除

ユーザがフルサイズの画像を挿入できないようにしたいだけの場合は（もう一度注意してください。これはプラグインの領域かもしれません）、'image_size_names_choose'をフィルタリングできます。

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

繰り返しますが、このフィルタは複数の場所で使用されているため、ここにいくつかの正当なフェイルセーフを追加することをお勧めします。

全幅画像のカスタム画像サイズを定義する

前のオプションに関連して、'full-post-width'イメージサイズを定義することができます：

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

次に、それを利用可能なオプションのリストに追加します。

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );
7
Chip Bennett

はい、そう思います。レポに提出されたテーマの$content_width問題を回避するために、私はデザインのために選択したサイズを強制するためにオプションフィルターを使います。

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...
2
sanchothefat