web-dev-qa-db-ja.com

ギャラリーリンクにデータ属性を追加しますか？

私はWordPressギャラリーを使用して画像のサムネイルグループを表示しています。このようにdata-fancybox="whatever"タグの直後に<a>を追加するためにjQueryを使用できるようにしたいです。

<a data-fancybox="whatever" href="https://google.com"</a>

リンクが設定されている既存の方法は、次のとおりです。

 <dt class="gallery-icon landscape">
    <a href="http://" class="attachment-thumbnail size-thumbnail" ></a>
 </dt>

…….

私がやりたいことは、galleryのwp_attachmentリンクにあるdata-fancybox="group"タグに<a>を追加することです。

<dt class="gallery-icon landscape">
    <a data-fancybox="group" href="http://" class="attachment-thumbnail size-thumbnail" ></a>
</dt>

誰もが私がそれを行うことができる方法を知っていますか？私はどんな助けにも大いに感謝します - 私がはっきりさせることができるならば、私に知らせてください。

ありがとうマイク

gallerywp-get-attachment-image
2
Mixmastermichael

このソリューションは、デフォルトのdata-fancybox="group"ショートコードによって作成されたギャラリーリンクに[gallery]を追加します。テーマが HTML5テーマをサポートしているか ギャラリーで有効になっているかどうかにかかわらず、これはテストされ動作します。

このソリューションは、ギャラリーのショートコードの出力にアクセスするためにpost_galleryフィルタを使用することによって機能します。そこから、HTMLはPHPの DOMDocument() および DOMXpath() を使用して解析および操作されます。

add_filter( 'post_gallery', 'wpse_gallery_shortcode', 10, 3 );
/**
 * Filters the default gallery shortcode output.
 *
 * @see gallery_shortcode()
 *
 * @param string $output   The gallery output. Default empty.
 * @param array  $attr     Attributes of the gallery shortcode.
 * @param int    $instance Unique numeric ID of this gallery shortcode instance.
 */
function wpse_gallery_shortcode( $output, $attr, $instance ) {
    // Temporarily remove our filter to prevent infinite loop.
    remove_filter( 'post_gallery', 'wpse_gallery_shortcode', 10, 3 );

    // Use WordPress' native function for generating gallery output.
    $gallery_html = gallery_shortcode( $attr );

    // Create an instance of DOMDocument.
    $dom = new \DOMDocument();

    // Supress errors due to malformed HTML.
    // See http://stackoverflow.com/a/17559716/3059883
    $libxml_previous_state = libxml_use_internal_errors( true );

    // Populate $dom with $gallery_html, making sure to handle UTF-8, otherwise
    // problems will occur with UTF-8 characters.
    // Also, make sure that the doctype and HTML tags are not added to our HTML fragment. http://stackoverflow.com/a/22490902/3059883
    $dom->loadHTML( mb_convert_encoding( $gallery_html, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    // Restore previous state of libxml_use_internal_errors() now that we're done.
    // Again, see http://stackoverflow.com/a/17559716/3059883
    libxml_use_internal_errors( $libxml_previous_state );

    // Create an instance of DOMXpath.
    $xpath = new \DOMXpath( $dom );

    // Match elements with the class gallery-icon (these can be <div> or <dt> depending on whether the theme has support for HTML5.
    // See http://stackoverflow.com/a/26126336/3059883
    $gallery_icons = $xpath->query( "//*[contains(concat(' ', normalize-space(@class), ' '), ' gallery-icon ')]" );

    // Iterate over the the gallery icons.
    foreach ( $gallery_icons as $gallery_icon ) {
        // Find the <a> tags and add our custom attribute and value.
        $gallery_icon_child_node_link = $xpath->query( "//a", $gallery_icon );
        foreach ( $gallery_icon_child_node_link as $node_link ) {
            $gallery_icon_data_fancy_box = $dom->createAttribute( 'data-fancybox' );
            $gallery_icon_data_fancy_box->value = 'group';

            $node_link->appendChild( $gallery_icon_data_fancy_box );                
        }
    }

    // Save the updated HTML.
    $gallery_html = $dom->saveHTML();   

    // Add our filter back so that it will run the next time that the gallery shortcode is used.
    add_filter( 'post_gallery', 'wpse_gallery_shortcode', 10, 3 );

    // Return the modified HTML.
    return $gallery_html;
}

このコードは少し冗長ですが、それはDOMDocument()でたくさんのゴスカス語を扱うためです。

あなたはまたこれらの同じような質問に答えを適応させることを考えるかもしれません：

3
Dave Romsey