アドバンストカスタムフィールド内の画像にIDを追加する画像の基本表示

Question

CSSを使用してスライドショー内の画像をターゲットにしたいと考えています。

私は高度なカスタムフィールドを持つWordpressを使用して、PHPを使用してイメージDIVを生成しています。

マイコード：

<?php $image = get_field('product1_image1'); 

    $size = 'large'; // (thumbnail, medium, large, full or custom size) 
    if($image) { 

    echo wp_get_attachment_image($image, $size); 
} ?> 

このコードは、このようなものを生成：私はそれを標的とすることができるように生成されたIMGタグに「product1_image1」のIDをさせていただきたいと思い

<img width="2000" height="1333" src="http://www.johanvanhengel.com/wp-content/uploads/2016/06/TOR_for_Montis_by_Lambi__Van_Hengel_04-2000x1333.jpg" class="attachment-large size-large cycle-slide cycle-sentinel" alt="text" sizes="(max-width: 2000px) 100vw, 2000px" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;"> 

をCSSを使用します。

ex＃product1_image1 {opacity：1; }

乾杯！

Answer 1

変更。..へ

echo wp_get_attachment_image($image, $size);

：

echo wp_get_attachment_image($image, $size, '', array("id" => "product1_image1"));

あなたは関数が四番目のパラメータなどの属性をサポートしているドキュメントに表示されるように。 https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

Answer 2

danjahの答えが正しいcompleteleyですが、私はちょうど、コードの可読性を高めるために少しさらに行くだろう...

このコードを試してみてくださいは：

<?php 
    $acf_img = get_field('product1_image1'); 

    $size = 'large'; // (thumbnail, medium, large, full or custom size) 
    if($acf_img) { 
    $image = wp_get_attachment_image_src($acf_img, $size); 

    echo '<img src="'.$image[0].'" width="'.$image[1].'" height="'.[2].'" class="your-class" id="product1_image1" />'; 
    } 
?> 

wp_get_attachment_image_src()はの配列を作成しますあなたのイメージ[0] => source, [1] => width, [2] => height。

最終的には違いはありませんが、このコードは出力可能なhtmlマークアップを直接見ることができるので、このコードは読めると思います。 AND：あなたはあなたのマークアップを完全にコントロールしています - 時にはWordPressが毎回必要としない機能の出力を変更します。 （彼らはsrcsetsを実装していました。私はビューポートに基づいて画像サイズを変更するフレームワークを使用していたため、私のサイトでは必要ありませんでした...）