画像の最適化に$ content_widthを使用するのに適した代替手段は何ですか?


14

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

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

$content_width = 584; // Twenty Twelve example

投稿に大きな画像(デフォルトは1024x1024)を挿入すると、次の結果になります。

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倍以上の節約になります。

add_image_sizeフルサイズの画像を挿入する機能を使用および削除することは、より良いオプションではありませんか?

追伸 もっと正確なデータでここに書いた


1
これはwp-hackersメーリングリストで取り上げられるもののように思えます。
eddiemoya

回答:


7

$content_widthグローバルは画像だけでなく、ビデオなどの埋め込みオブジェクトにも使用されることに注意してください。そのため、どのソリューションも、$content_widthそれ自体の使用/サポートを中止するだけのケースではありません。

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

  1. 大きな画像サイズ:$content_widthテーマデザインに適したものを定義する
  2. オリジナル/フル画像サイズ:CSSルールを定義して、#content img { max-width: XXX; height: auto; }挿入されるフルサイズ画像がレイアウトを壊さないようにします
  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ます。

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' );

包括的な答えをくれたチップに感謝しget_optionます。値の設定については考えませんでした。残りは、リンクでリンクされたgist.github.com/wycks/4949242を使用している要点に似ています。また、テーマが変更された場合、これを実際にスケーリングする方法については灰色の領域のようです。
ワイク

また、私はそれを削除する$content_widthか設定しないことに言及するのを忘れましたが、それはまだデフォルトで私が思う埋め込みオブジェクトに適用されます。
ワイク

image_size_names_choose今までそのフィルターを見たことがない!私は今まで、フィールド全体を置き換えてカスタムサイズを取得していました。3.5チップでは新しいですか?
サンチョテファ

私はそれが3.3からだと思う、私はそれをadd_image_size多言語のラベルを作るために使っていて、それからこの画像サイズの問題に使うのも良いと思った。ローカライズが不要な場合は、ハードコーディングする代わりに配列に押し込むことができます。
ワイク

@sanchothefatいつ追加されたのかわかりません。Wyckが3.3だったと言っているように見える?何かを拡張/変更する必要があるときに、ソースを調べて、その特定のものにフィルターが追加されているのを見つけるのが大好きです。:)
チップベネット

2

はい、そう思います。$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...
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.