web-dev-qa-db-ja.com

レスポンシブイメージ機能の使い方 WP あなたのテーマの4.4

私はWordPressが私のテーマで提供する新しいレスポンシブ画像機能をどのように使用することができるか本当にわかりません。

例：

私のテーマでは、ヘッダ画像を追加します。そこで私はカスタマイザORの投稿サムネイルのcustom-header-imageを使います。

<figure id="header-image" class="uk-margin-remove">
<?php if ( ( is_single() || ! is_home() ) && has_post_thumbnail() ) : ?>
    <?php the_post_thumbnail(); ?>
<?php else: ?>
    ???
<?php endif; ?>
</figure>

だから最初のケースでは、出力はこれです：

<img src="http://xxx.dev/wp-content/uploads/x.jpg" srcset="http://xxx.dev/wp-content/uploads/x-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/x-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/x-1024x241.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" alt="">

これはまったく問題ありません。しかし、添付ファイルIDで画像を表示したいのであれば、どの機能を使用しても、期待する出力が得られません。

例：

上記のコードでは、「???」と表示されています。その場所で、私はいくつかのことを試しました。例えばこれ：

<?php echo wp_get_attachment_image( get_custom_header()->attachment_id, 'full' ); ?>

これは1つのサイズにしかなりません（sizes属性を参照）。

<img src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" class="attachment-full size-full" alt="Delft_IMG_6275" srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" height="451" width="1920">

それで、それがthe_post_thumbnail()と同じような結果を出力するようにテーマの中に画像を表示するための適切な方法は何ですか？

theme-developmentimagesresponsivewp-get-attachment-image
2
SVARTBERG

私たちの意見交換の後、私はあなたの質問を読み直し、かなり簡単な答えを得ます。

うまく機能しているようです。

あなたは2番目の例でsizes属性について心配しています、しかしそれはあなたが見るべきであるsrcset属性であり、そしてそれはあなたのすべての画像サイズを示す is です：

<img 

src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" 

class="attachment-full size-full" alt="Delft_IMG_6275" 

srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w"

sizes="(max-width: 1920px) 100vw, 1920px"

height="451" width="1920">

あなたのブラウザはこのような属性を読みます：

1 - sizes属性を調べて、現在のビューポート幅に最初に一致するものを見つけます。この場合、ビューポートの幅が1920pxまでであれば、pxに変換された100vw値を使用し、そうでなければ1920pxを使用します。

2 - srcset属性を見て、（1）からの値に合う画像を選択します。

全幅ウィンドウのあるニースの大画面では、ブラウザはsizesの値1920pxを選択します。これにより、ブラウザは、srcset属性の1920wでマークされた画像と、フルサイズ画像のURLを参照します。

ビューポートの幅が768pxの縦長のiPadでは、（1）で取得される値は100vwになります。このビューポートの値は768pxです。 768wのsrcsetを見ると、medium_largeの画像サイズ（管理インターフェースには表示されないWP4.4の新しいデフォルトサイズ）へのURLが得られます。

ビューポートの幅が完全に一致しない場合、ブラウザは次に大きいサイズを選択する必要があります。

今、あなたがあなたのテーマでadd_image_size()を使って追加できる画像のより長いリストを供給したいかもしれない状況があります。 WPは、選択した画像サイズの縦横比に一致するすべての画像を使用してsrcset属性を作成します。

カスタムのsizes属性が欲しくて、そのために属性をフィルタすることができる状況もありますが、あなたの質問が立っているように私はそれがあなたが望んでいることではないと思います。

1
Andy Macaulay-Brook

一方では、あなたがすべきことは何もありません、他方では、ワードプレスは、実際に反応の良いイメージを作成しません。

登録されている画像サイズに基づいて画像関連のAPIを使用するときはいつでも、Wordpressはsrcset属性を作成し、すべての画像は縦横比に一致します。あなたがする必要があるのは、wordpressが画像を生成することができるように関連画像サイズを登録させておき、それらをsrcsetで使うことです。

あなたの "失敗した"例ではwordpressは元の画像より大きい画像を生成しないのでフル画像は決して反応しないでしょう（そしていずれにせよある画像から別の画像に変わるサイズの画像生成をコーディングするのは難しいです）.

あなたがあなたのテーマでする必要があるのは、あなたがどのサイズをサポートしたいかを決めること、そしてそれらを最初に定義することです。たとえば、150 x 150のサムネイルをx 2の網膜にも配信する場合は、150 x 150サイズと300 x 300サイズの両方を登録する必要があります。携帯電話でサムネイルに50x50のスペースを割り当てる場合は、50x50と100x100（網膜用）のサイズも登録する必要があります。これが実際には賢明ではないが、それが理論です。

Rant：Wordpressのコアが機能を果たしていると言うことは、知性に対する侮辱です。多くのAPI呼び出しをしなくて済むようにするのは甘味料ですが、実際に必要なサイズを実際に設計するのに役立ちませんし、それでもそれらを使用するようにwordpressを設定するのは面倒です。

0
Mark Kaplun

サイズとして array を使用できます。

wp_get_attachment_image( get_custom_header()->attachment_id, array('700', '600'));

編集：

@downvoterはなぜあなたが投票しているのか言います。私は間違っていたことには同意しますが、「はい、画像のサイズを変更するために配列を使用できます。ただし、既定の画像サイズに最も近いサイズのみがデフォルトになります。

定義された画像はバックエンド管理のSETTINGS - > MEDIAのmediaセクションで設定されます。これらはカスタム使用で "thumbnail"、 "medium"、 "full" ORになり、あなたの関数でadd_image_size('name-you want-use', 340, 230, true);を使用できます。ファイルETC ... ETC ..

0
Malisa