web-dev-qa-db-ja.com

アンカータグ内に 'data-caption'を追加する方法

以下はカスタムギャラリーコードです。

function custom_gallery_shortcode( $attr = array(), $content = '' )

{

        $attr['itemtag']        = "li";
        $attr['icontag']        = "";
        $attr['captiontag']     = "p";

        // Run the native gallery shortcode callback:    
        $html = gallery_shortcode( $attr );
        // Remove all tags except a, img,li, p
        $html = strip_tags( $html, '<a><img><li><p>' );
        // Some trivial replacements:
        $from = array(  

            "class='gallery-item'", 
            "class='gallery-icon landscape'", 
            'class="attachment-thumbnail"',
            'a href=', 

        );              

        $to = array( 

            '',

            '',

            '', 

            'a data-caption="" class="ilightbox" href=', 

        );

        $html = str_replace( $from, $to, $html );

        // Remove width/height attributes:

        $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
        // Wrap the output in ul tags:

        $html = sprintf( '<ul class="gallery">%s</ul>', $html );

        return $html;

}



add_shortcode( 'gallery', 'custom_gallery_shortcode' );
add_filter( 'use_default_gallery_style', '__return_false' );

しかし、今私はの中に画像のキャプションを追加したいです。私のコードを見てください'a data-caption="" class="ilightbox" href=',そこdata-caption = "追加したい画像キャプション"今画像キャプションの外側に来る

このように

  • <a data-caption="" class="ilightbox" href="http://xxxxxxx.com/Snack-bar-1024x682.jpg"><img src="http:xxxxxxxxxx.com/Snack-bar-1024x682-150x150.jpg" alt="testing caption"></a>

                <p class="wp-caption-text gallery-caption">
                testing caption
                </p></li>
    • functionsgallerycaptions
    1
    Accore LTD

    このコードを試して、htmlコードに新しい属性を追加することができます。

    $dom = new DOMDocument();
$dom->loadHTML($html);

foreach ($dom->getElementsByTagName('a') as $item) {

    $item->setAttribute('data-caption', 'This is an anchor tag');
    echo $dom->saveHTML();
    exit;
}
    1
    WisdmLabs