web-dev-qa-db-ja.com

ワードプレスギャラリーのショートコードをスライダーに変更

こんにちは私は、デフォルトのWordPressギャラリーのショートコードを変更し、それをスライダーにしたいと思いました。

   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

このコードはサムネイルを表示しているワードプレスのネイティブギャラリーを削除し、それがそれ自身で画像を表示しているattachment.phpへのパーマリンクを呼び出します。

次のコードでは、アニメーションとトランジション効果が制限された簡単なスライダーを使用してスライダーにしています。

1。トランジション効果の引数を呼び出して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。スライダー効果を出力します

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

  }

下にあなたはそれをすべてまとめる。遷移効果を設定するためのjsと引数を使用します。

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

今私はそれがすべての3つの添付ファイルの画像の代わりに5つの画像を出力する問題を抱えています。画像が2回繰り返されています。どんな助けでも感謝されて、最終的な答えを更新するでしょう。

0
chris_r

上記に基づいて... "numberposts"を "posts_per_page"に変更します。それから、「get_posts」を「new 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

あなたは正しく削除して追加していますが、メディアライブラリ全体をまだ引き込んでいますが、それはそれほど役に立ちません。あなたがちょうどしたい場合は、対応するギャラリのショートコードに含まれているIDを引き込んでください：

1）ギャラリーのショートコードからIDを取得する

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）ギャラリーをスライダーに置き換える

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

grab_ids_from_gallery関数を追加することで、配列からそれらのIDを引き出すことができます。ちょっと見回してみると、これが私にとって最良の解決策であることがわかりました。

0
adamhairfield