Intereting Posts

сменить шорт-код галереи wordpress на слайдер

Привет, я хотел изменить короткий текст в блоге 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' ); 

этот код удаляет родную галерею wordpress, в которой отображаются эскизы и вызывает постоянную ссылку на файл 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' ); 

теперь у меня проблема с ним, выводя 5 изображений вместо всех трех изображений вложений. Изображения повторяются дважды. Любая помощь будет оценена и обновит окончательный ответ.

Основываясь на том, что у вас есть выше … Я бы изменил «numberposts» на «posts_per_page». И тогда я бы изменил «get_posts» на «новый 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' ); 

Вы удаляете и добавляете правильно, но все еще дергаете всю медиа-библиотеку, что не так полезно. Если вы хотите просто вставить идентификаторы, которые вы включили в соответствующий ярлык галереи, используйте следующий пример:

1) Получить идентификаторы из короткого кода галереи

 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 мы можем grab_ids_from_gallery эти идентификаторы из массива. Я нашел, что это лучшее решение для меня, немного оглядевшись.