web-dev-qa-db-ja.com

ネイティブのギャラリー出力の画像タグに "data-"属性を追加する方法

WordPressと Galleria を友達にしようとしている間、私はすでに良い結果を得ています。 Galleriaは、ネイティブのWordPressギャラリーを簡単に表示するために使用できます。私はプラグインを使用していますが、それはまったく必要ありません。ただし、私が欠けているのは、ギャラリーのサムネイルの画像プロパティに属性data-bigをaddしてGalleriaに強制的に使用させる方法です。フルスクリーンモードでの「フル」画像。 HTMLでは、これは次のようになります。

<div class="galleria">
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description"></a>
</div>

Galleriaがサムネイルを表示するのに<img>を使い、通常の画像には<a href ...>を使うところ。それは魅力的で、箱から出してすぐに機能します。しかし、私はどのように解決策を見つけられませんでした

  • add属性data-bigから<img>
  • その引数と共にWP画像サイズ（例： "full"）を渡す

私を正しい方向に向けさせたり、その方法を例に挙げたりできる人はいますか。免責事項：私はWPフィルタとフックの使用経験がありますが、PHP専門家であることには程遠いです。

前もって感謝します。

編集：もう少し具体的に言うと、 "data-big"の値はすでに利用可能です（大きい/フルサイズの画像）ので、基本的にタグに新しい属性を追加してフルURLを渡したいと思います。サイズの画像。

imagesjavascriptgallerywp-get-attachment-imageattribute
3
eventcom

Galleriaプラグインが添付画像フィルタとどのように相互作用しているかに応じて、wp_get_attachment_image_attributesフィルタを使用してデータ属性を挿入できるはずです。

明らかに、この属性はwp_get_attachment_image()を使ったものに追加されますが、それはあなたが求めていることをするでしょう。

/**
 * Filter attributes for the current gallery image tag.
 *
 * @param array   $atts       Gallery image tag attributes.
 * @param WP_Post $attachment WP_Post object for the attachment.
 * @return array (maybe) filtered gallery image tag attributes.
 */
function wpdocs_filter_gallery_img_atts( $atts, $attachment ) {
    if ( $full_size = wp_get_attachment_image_src( $attachment->ID, 'full' ) ) {
        if ( ! empty( $full_size[0] ) ) {
            $atts['data-big'] = $full_size[0];
        }
    }
    return $atts;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpdocs_filter_gallery_img_atts', 10, 2 );

これは、標準設定を使用してギャラリーに次のマークアップを出力します。

<div class="gallery galleryid-2160 gallery-columns-3 gallery-size-thumbnail" id="gallery-1">
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image1.png"><img width="150" height="150" data-big="http://...image1.png" alt="" class="attachment-thumbnail" src="http://...image1-150x150.png"></a>
        </div>
    </figure>
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image2.png"><img width="150" height="150" data-big="http://...image2.png" alt="" class="attachment-thumbnail" src="http://...image2-150x150.png"></a>
        </div>
    </figure>
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image3.png"><img width="150" height="150" data-big="http://...image3.png" alt="" class="attachment-thumbnail" src="http://...image3-150x150.png"></a>
        </div>
    </figure>
</div>
1
DrewAPicture