web-dev-qa-db-fra.com

changer le shortcode de la galerie wordpress en slider

Bonjour, je voulais changer le code de la galerie WordPress par défaut et en faire un curseur.

   remove_shortcode( 'gallery' );
function gallery_filter( $atts, $content = null ) {

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'numberposts' => 3,
        'post_parent' => $post->ID,
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'post_mime_type' => 'image'

        );
        $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/lightbox.js"></script>
<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>
<link rel="stylesheet" href="'. get_bloginfo( 'template_directory' ) .'/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
';
        $output .= '
        <script type="text/javascript">
   jQuery(window).load(function() {
         jQuery(".gallery-slider").bjqs({

width : 639,
height : 300,
animtype : "slide", 
animduration : 450, 
animspeed : 4000, 
automatic : false,
showcontrols : true, 
centercontrols : false, 
nexttext : "Next", 
prevtext : "Prev",
showmarkers : false, 
centermarkers : false, 
keyboardnav : true, 
hoverpause : true, 
usecaptions : true, 
randomstart : true, 
responsive : true 
});
     });
</script>';

$output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";

  $attachments = get_posts( $args );

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {                   
             $output .= "<li>";
            $output .= "<a rel='example_group' href='".wp_get_attachment_url( $attachment->ID )."' title='". get_the_title()."'>";
            $output .= "<img width='639px' height='300px' src='".wp_get_attachment_url( $attachment->ID )."' />";
            $output .= "</a>";
             $output .= "</li>";    


              }
             $output .= " </ul></div>";
  }
  return $output;

  }
add_shortcode( 'gallery' , 'gallery_filter' );
shortcodegalleryslideshowwp-get-attachment-image
2
chris_r

ce code supprime la galerie native wordpress dans laquelle s'affichent les vignettes et appelle le lien permanent vers attachment.php où il affiche l'image par lui-même.

le code suivant en fait un curseur utilisant un curseur simple avec des effets d'animation et de transition limités.

1. Appelle les arguments de l'effet de transition et appelle le js 

            $output .= '
            <script type="text/javascript">
       jQuery(window).load(function() {
             jQuery(".gallery-slider").bjqs({

    width : 639,
    height : 300,
    animtype : "slide", 
    animduration : 450, 
    animspeed : 4000, 
    automatic : false,
    showcontrols : true, 
    centercontrols : false, 
    nexttext : "Next", 
    prevtext : "Prev",
    showmarkers : false, 
    centermarkers : false, 
    keyboardnav : true, 
    hoverpause : true, 
    usecaptions : true, 
    randomstart : true, 
    responsive : true 
    });
         });
    </script>';

2. Affiche l'effet du curseur. 

$output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";

  $attachments = get_posts( $args );

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {                   
             $output .= "<li>";
             $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
             $output .= "</li>";    
        }
             $output .= " </ul>";
  }
  return $output;

  }

ci-dessous vous mettez tout cela ensemble. avec les js et les arguments pour définir les effets de transition.

remove_shortcode( 'gallery' );
    function gallery_filter( $atts, $content = null ) {

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'numberposts' => 3,
        'post_parent' => $post->ID,
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'post_mime_type' => 'image'

        );
        $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
        $output .= '
        <script type="text/javascript">
   jQuery(window).load(function() {
         jQuery(".gallery-slider").bjqs({

width : 639,
height : 300,
animtype : "slide", 
animduration : 450, 
animspeed : 4000, 
automatic : false,
showcontrols : true, 
centercontrols : false, 
nexttext : "Next", 
prevtext : "Prev",
showmarkers : false, 
centermarkers : false, 
keyboardnav : true, 
hoverpause : true, 
usecaptions : true, 
randomstart : true, 
responsive : true 
});
     });
</script>';

$output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";

  $attachments = get_posts( $args );

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {                   
             $output .= "<li>";
             $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
             $output .= "</li>";    
        }
             $output .= " </ul>";
  }
  return $output;

  }
add_shortcode( 'gallery' , 'gallery_filter' );

maintenant, j'ai un problème avec la sortie de 5 images au lieu de toutes les 3 images jointes. Les images se répètent deux fois. Toute aide serait appréciée et mettrait à jour la réponse finale.

0
chris_r

Basé sur ce que vous avez ci-dessus ... je changerais "numberposts" en "posts_per_page". Et puis je changerais le "get_posts" en "nouveau WP_Query"

    remove_shortcode( 'gallery' );
    function gallery_filter( $atts, $content = null ) {

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'posts_per_page' => 3,
        'post_parent' => $post->ID,
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'post_mime_type' => 'image'
        );

        $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
        $output .= '
        <script type="text/javascript">
   jQuery(window).load(function() {
         jQuery(".gallery-slider").bjqs({

width : 639,
height : 300,
animtype : "slide", 
animduration : 450, 
animspeed : 4000, 
automatic : false,
showcontrols : true, 
centercontrols : false, 
nexttext : "Next", 
prevtext : "Prev",
showmarkers : false, 
centermarkers : false, 
keyboardnav : true, 
hoverpause : true, 
usecaptions : true, 
randomstart : true, 
responsive : true 
});
     });
</script>';

$output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";

             $attachments = new WP_Query( $args );
while ($attachments->have_posts()) : $attachments->the_post(); $do_not_duplicate = $post->ID;               
             $output .= "<li>";
             $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
             $output .= "</li>";    
             endwhile;
             $output .= " </ul>";
             endif;
  return $output;

  }
add_shortcode( 'gallery' , 'gallery_filter' );
0
Courtney Ivey

Vous supprimez et ajoutez correctement, mais vous intégrez tout de même la médiathèque, ce qui n’est pas très utile. Si vous voulez simplement extraire les identifiants que vous avez inclus dans le shortcode de la galerie correspondante, utilisez l'exemple suivant:

1) Obtenir les identifiants de la galerie shortcode

function grab_ids_from_gallery() {

global $post;
$attachment_ids = array();
$pattern = get_shortcode_regex();
$ids = array();

if (preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches ) ) { 
$count=count($matches[3]);
for ($i = 0; $i < $count; $i++){
    $atts = shortcode_parse_atts( $matches[3][$i] );
    if ( isset( $atts['ids'] ) ){
    $attachment_ids = explode( ',', $atts['ids'] );
    $ids = array_merge($ids, $attachment_ids);
    }
}
}
  return $ids;

 }
add_action( 'wp', 'grab_ids_from_gallery' );

2) Remplacer la galerie par un curseur

remove_shortcode( 'gallery' );
    function gallery_filter( $atts, $content = null ) {

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'posts_per_page' => -1,
        'post_parent' => $post->ID,
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'post_mime_type' => 'image'

        );
        $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
        $output .= '
        <script type="text/javascript">
        jQuery(window).load(function() {
            jQuery(".gallery-slider").bjqs({
                height : 550,
                animtype : "fade", 
                animduration : 450, 
                animspeed : 4000, 
                automatic : false,
                showcontrols : true, 
                centercontrols : true, 
                nexttext : "&#9654;", 
                prevtext : "&#9664;",
                showmarkers : true, 
                centermarkers : true, 
                keyboardnav : true, 
                hoverpause : true, 
                usecaptions : true, 
                randomstart : true, 
                responsive : true 
            });
       });
       </script>';

$output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";

  $attachments = get_posts( $args );
  $grabids = grab_ids_from_gallery();

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {     
            if ( in_array( $attachment->ID, $grabids ) ) {             
                 $output .= "<li>";
                 $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
                 $output .= "</li>";  
            }  
        }
             $output .= " </ul>";
  }
  return $output;

  }

  add_shortcode( 'gallery' , 'gallery_filter' );

En ajoutant la fonction grab_ids_from_gallery, nous pouvons ensuite extraire ces identifiants du tableau. J'ai trouvé que c'était la meilleure solution pour moi après avoir cherché un peu.

0
adamhairfield