wake-up-neo.net

ändern Sie den WordPress-Galerie-Shortcode in "Slider"

Hallo, ich wollte den Standard-Shortcode für die WordPress-Galerie ändern und ihn zu einem Schieberegler machen.

   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' );
2
chris_r

dieser Code entfernt die native WordPress-Galerie, in der Miniaturansichten angezeigt werden, und ruft den Permalink zu attachment.php auf, in dem das Bild von selbst angezeigt wird.

mit dem folgenden Code wird es zu einem Schieberegler, der einen einfachen Schieberegler mit begrenzten Animations- und Übergangseffekten verwendet.

1. Ruft die Argumente für den Übergangseffekt auf und ruft das js auf

            $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. Gibt den Slider-Effekt aus.

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

  }

unten fügst du alles zusammen. mit dem js und den argumenten, um die übergangseffekte einzustellen.

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' );

jetzt habe ich ein Problem mit der Ausgabe von 5 Bildern anstelle aller 3 Anhangsbilder. Bilder werden zweimal wiederholt. Jede Hilfe wäre dankbar und würde die endgültige Antwort aktualisieren.

0
chris_r

Basierend auf dem, was du oben hast ... würde ich "numberposts" in "posts_per_page" ändern. Und dann würde ich die "get_posts" in "new WP_Query" ändern

    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

Sie entfernen und fügen sie korrekt hinzu, ziehen aber immer noch die gesamte Medienbibliothek ein, was nicht so hilfreich ist. Wenn Sie nur die im entsprechenden Galerie-Shortcode enthaltenen IDs eingeben möchten, verwenden Sie das folgende Beispiel:

1) Holen Sie sich IDs aus der 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) Galerie durch Schieberegler ersetzen

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' );

Durch Hinzufügen der Funktion grab_ids_from_gallery können wir diese IDs aus dem Array ziehen. Ich fand das die beste Lösung für mich, nachdem ich mich ein bisschen umgesehen hatte.

0
adamhairfield