将WordPress图库快捷代码更改为滑块

时间：2012-12-06 作者：chris_r

嗨，我想更改默认的WordPress gallery短代码并将其设置为滑块。

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

3 个回复
最合适的回答,由SO网友:chris_r 整理而成

此代码删除wordpress本机库，其中显示缩略图并调用永久链接到附件。php，其中它自己显示图像。

下面的代码使用具有有限动画和过渡效果的简单滑块使其成为滑块。

1. Calls the arguments for the transition effect and call the 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 the slider effect.

$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\' );
现在我有一个问题，它输出5个图像，而不是所有3个附件图像。图像重复了两次。任何帮助都将不胜感激，并将更新最终答案。

SO网友:Courtney Ivey

基于以上内容。。。我会将“numberposts”改为“posts\\u per\\u page”。然后我会将“get\\u posts”更改为“new WP\\u 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\' );

SO网友:adamhairfield

您正在正确地删除和添加，但仍在拉入整个媒体库，这没有多大帮助。如果只想拉入包含在相应库快捷码中的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\' );
将库替换为滑块
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。我四处看看后发现这是我最好的解决方案。

结束
标签： shortcode   gallery   slideshow   images   小码农  

相关推荐

Shortcode interpreted as text

我在我的一页中有以下短代码[[Intern: Termine/News]] 这适用于受密码保护的子页。现在，我希望所有终端/新闻类别的新闻都在父页面上。所以我把代码放在受密码保护的父页面上。现在文本已呈现-我只能看到短代码文本。但我应该看看所有的文章！怎么了？还是我误解了什么？编辑：找到了答案。模板中直接有一些代码，因此WP后端中的内容被完全忽略。在模板php文件中添加了代码，现在可以使用了。