是否将数据属性添加到图库链接?

时间:2017-05-08 作者:Mixmastermichael

我正在使用WordPress图库显示一组缩略图。我希望能够使用jQuery来添加data-fancybox="whatever" 紧接着<a> 标记如下:

<a data-fancybox="whatever" href="https://google.com"</a>
链接的现有设置方式如下:

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

我想做的是添加data-fancybox="group"<a> 位于库的wp\\U附件链接上的标记,如下所示:

<dt class="gallery-icon landscape">
    <a data-fancybox="group" href="http://" class="attachment-thumbnail size-thumbnail" ></a>
</dt>
有人知道我怎么做吗?我将非常感谢任何帮助-如果我能澄清,请让我知道。

谢谢你

1 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

此解决方案将添加data-fancybox="group" 到默认生成的库链接[gallery] 短代码。无论主题是否HTML5 theme support 是否为库启用。

该解决方案通过使用post_gallery 筛选以访问库快捷码的输出。然后,使用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().

您还可以考虑对这些类似问题的答案进行调整:

结束

相关推荐

Get images by category

我目前获取滑块图像的方法是使用以下工作正常的代码:$args = array( \'post_type\' => \'attachment\', \'sort_order\' => \'ASC\', \'sort_column\' => \'menu_order\', ); $attachments = get_posts($args); if ($attachments) { $