web-dev-qa-db-fra.com

Ajouter un attribut de données à un lien de galerie?

J'utilise la galerie WordPress pour afficher un groupe d'images miniatures. Je veux pouvoir utiliser jQuery afin d'ajouter data-fancybox="whatever" immédiatement après la balise <a> comme ceci:

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

La manière dont les liens sont configurés est la suivante:

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

....

Ce que je voudrais faire, c'est ajouter le data-fancybox="group" à la balise <a> qui se trouve sur les liens wp_attachment pour la galerie, comme ceci:

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

Est-ce que quelqu'un sait comment je peux faire ça? J'apprécierais beaucoup toute aide - si je peux clarifier, s'il vous plaît faites le moi savoir.

Merci mike

gallerywp-get-attachment-image
2
Mixmastermichael

Cette solution ajoutera le data-fancybox="group" à la galerie de liens générés par le shortcode [gallery] par défaut. Cela a été testé et fonctionne indépendamment du fait que les thèmes aient pris en charge les thèmes HTML5 activés pour les galeries ou non.

La solution fonctionne en utilisant le filtre post_gallery pour accéder à la sortie du shortcode de la galerie. À partir de là, le code HTML est analysé et manipulé à l’aide de DOMDocument() et DOMXpath() de PHP.

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;
}

Ce code est un peu bavard, principalement parce qu’il adresse un groupe de gothcas avec DOMDocument().

Vous pouvez également envisager d’adapter les réponses à ces questions similaires:

3
Dave Romsey