我使用WooCommerce的Flexslider来浏览给定类别的许多帖子。此处可见:http://csl.nsta.org/development/
隐藏在图像后面的是滑块的“flex control导航”。。。设置样式后,这将显示为滑块底部的点;没有样式,它们只是一个编号列表,显示幻灯片的编号(1、2、3、4等),不要被帖子的ID混淆。
我正在尝试更改控件导航的内容,以显示帖子的标题,甚至可能是类别。
我认为这可以通过使用滑块中帖子的数据属性来完成,然后通过jquery获取这些属性。我的问题是,我不知道如何循环并获取这些帖子的每个属性。我想我需要做一些“foreach”的陈述?
从flexslider的jquery中,以下是控制导航的代码:
setupPaging: function() {
var type = (slider.vars.controlNav === "thumbnails") ? \'control-thumbs\' : \'control-paging\',
j = 1,
item,
slide;
slider.controlNavScaffold = $(\'<ol class="\'+ namespace + \'control-nav \' + namespace + type + \'"></ol>\');
if (slider.pagingCount > 1) {
for (var i = 0; i < slider.pagingCount; i++) {
slide = slider.slides.eq(i);
if ( undefined === slide.attr( \'data-thumb-alt\' ) ) { slide.attr( \'data-thumb-alt\', \'\' ); }
var altText = ( \'\' !== slide.attr( \'data-thumb-alt\' ) ) ? altText = \' alt="\' + slide.attr( \'data-thumb-alt\' ) + \'"\' : \'\';
item = (slider.vars.controlNav === "thumbnails") ? \'<img src="\' + slide.attr( \'data-thumb\' ) + \'"\' + altText + \'/>\' : \'<a href="#">\' + j + \'</a>\';
if ( \'thumbnails\' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
var captn = slide.attr( \'data-thumbcaption\' );
if ( \'\' !== captn && undefined !== captn ) { item += \'<span class="\' + namespace + \'caption">\' + captn + \'</span>\'; }
}
slider.controlNavScaffold.append(\'<li>\' + item + \'</li>\');
j++;
}
}
在为滑块设置的循环中,标题是如何设置的,希望能够提取其数据属性:
<h2 data-title="<?php the_title(); ?>" title="<?php the_title(); ?>" class="slider-post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
我想如果我能代替
j
使用某种类型的foreach变量
data-title
从标题中。
我不知道如何做到这一点。有什么建议吗?谢谢
edit: 滑块循环使用以下设置:
class genesis_responsive_sliderWidget extends WP_Widget {
function __construct() {
$widget_ops = array( \'classname\' => \'genesis_responsive_slider\', \'description\' => __( \'Displays a slideshow inside a widget area\', \'genesis-responsive-slider\' ) );
$control_ops = array( \'width\' => 200, \'height\' => 250, \'id_base\' => \'genesisresponsiveslider-widget\' );
parent::__construct( \'genesisresponsiveslider-widget\', __( \'Genesis - Responsive Slider\', \'genesis-responsive-slider\' ), $widget_ops, $control_ops );
}
function save_settings( $settings ) {
$settings[\'_multiwidget\'] = 0;
update_option( $this->option_name, $settings );
}
// display widget
function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = apply_filters( \'widget_title\', $instance[\'title\'], $instance, $this->id_base );
if ( $title )
echo $before_title . $title . $after_title;
$term_args = array( );
if ( \'page\' != genesis_get_responsive_slider_option( \'post_type\' ) ) {
if ( genesis_get_responsive_slider_option( \'posts_term\' ) ) {
$posts_term = explode( \',\', genesis_get_responsive_slider_option( \'posts_term\' ) );
if ( \'category\' == $posts_term[\'0\'] )
$posts_term[\'0\'] = \'category_name\';
if ( \'post_tag\' == $posts_term[\'0\'] )
$posts_term[\'0\'] = \'tag\';
if ( isset( $posts_term[\'1\'] ) )
$term_args[$posts_term[\'0\']] = $posts_term[\'1\'];
}
if ( !empty( $posts_term[\'0\'] ) ) {
if ( \'category\' == $posts_term[\'0\'] )
$taxonomy = \'category\';
elseif ( \'post_tag\' == $posts_term[\'0\'] )
$taxonomy = \'post_tag\';
else
$taxonomy = $posts_term[\'0\'];
} else {
$taxonomy = \'category\';
}
if ( genesis_get_responsive_slider_option( \'exclude_terms\' ) ) {
$exclude_terms = explode( \',\', str_replace( \' \', \'\', genesis_get_responsive_slider_option( \'exclude_terms\' ) ) );
$term_args[$taxonomy . \'__not_in\'] = $exclude_terms;
}
}
if ( genesis_get_responsive_slider_option( \'posts_offset\' ) ) {
$myOffset = genesis_get_responsive_slider_option( \'posts_offset\' );
$term_args[\'offset\'] = $myOffset;
}
if ( genesis_get_responsive_slider_option( \'post_id\' ) ) {
$IDs = explode( \',\', str_replace( \' \', \'\', genesis_get_responsive_slider_option( \'post_id\' ) ) );
if ( \'include\' == genesis_get_responsive_slider_option( \'include_exclude\' ) )
$term_args[\'post__in\'] = $IDs;
else
$term_args[\'post__not_in\'] = $IDs;
}
$query_args = array_merge( $term_args, array(
\'post_type\' => genesis_get_responsive_slider_option( \'post_type\' ),
\'posts_per_page\' => genesis_get_responsive_slider_option( \'posts_num\' ),
\'orderby\' => genesis_get_responsive_slider_option( \'orderby\' ),
\'order\' => genesis_get_responsive_slider_option( \'order\' ),
\'meta_key\' => genesis_get_responsive_slider_option( \'meta_key\' )
) );
$query_args = apply_filters( \'genesis_responsive_slider_query_args\', $query_args );
add_filter( \'excerpt_more\', \'genesis_responsive_slider_excerpt_more\' );
?>
<div id="genesis-responsive-slider">
<div class="flexslider">
<ul class="slides">
<?php
$slider_posts = new WP_Query( $query_args );
if ( $slider_posts->have_posts() ) {
$show_excerpt = genesis_get_responsive_slider_option( \'slideshow_excerpt_show\' );
$show_title = genesis_get_responsive_slider_option( \'slideshow_title_show\' );
$show_type = genesis_get_responsive_slider_option( \'slideshow_excerpt_content\' );
$show_limit = genesis_get_responsive_slider_option( \'slideshow_excerpt_content_limit\' );
$more_text = genesis_get_responsive_slider_option( \'slideshow_more_text\' );
$no_image_link = genesis_get_responsive_slider_option( \'slideshow_no_link\' );
}
while ( $slider_posts->have_posts() ) : $slider_posts->the_post();
?>
<li>
<?php if ( $show_excerpt == 1 || $show_title == 1 ) { ?>
<div class="slide-excerpt slide-<?php the_ID(); ?>">
<div class="slide-background"></div><!-- end .slide-background -->
<div class="slide-excerpt-border ">
<?php
if ( $show_title == 1 ) {
?>
<h2 data-title="<?php the_title(); ?>" title="<?php the_title(); ?>" class="slider-post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php
}
if ( $show_excerpt ) {
if ( $show_type != \'full\' )
the_excerpt();
elseif ( $show_limit )
the_content_limit( (int)$show_limit, esc_html( $more_text ) );
else
the_content( esc_html( $more_text ) );
}
?>
</div><!-- end .slide-excerpt-border -->
</div><!-- end .slide-excerpt -->
<?php } ?>
<div class="slide-image">
<?php
if ( $no_image_link ) {
?>
<img src="<?php genesis_image( \'format=url&size=slider\' ); ?>" alt="<?php the_title(); ?>" />
<?php
} else {
?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php genesis_image( \'format=url&size=slider\' ); ?>" alt="<?php the_title(); ?>" /></a>
<?php
} // $no_image_link
?>
</div><!-- end .slide-image -->
</li>
<?php endwhile; ?>
</ul><!-- end ul.slides -->
</div><!-- end .flexslider -->
</div><!-- end #genesis-responsive-slider -->
<?php
echo $after_widget;
wp_reset_query();
remove_filter( \'excerpt_more\', \'genesis_responsive_slider_excerpt_more\' );
}
/** Widget options */
function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( \'title\' => \'\') );
$title = $instance[\'title\'];
?>
<p><label for="<?php echo $this->get_field_id( \'title\' ); ?>"><?php _e( \'Title:\', \'genesis-responsive-slider\' ); ?> <input class="widefat" id="<?php echo $this->get_field_id( \'title\' ); ?>" name="<?php echo $this->get_field_name( \'title\' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></label></p>
<?php
echo \'<p>\';
printf( __( \'To configure slider options, please go to the <a href="%s">Slider Settings</a> page.\', \'genesis-responsive-slider\' ), menu_page_url( \'genesis_responsive_slider\', 0 ) );
echo \'</p>\';
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$new_instance = wp_parse_args( (array) $new_instance, array( \'title\' => \'\' ) );
$instance[\'title\'] = strip_tags( $new_instance[\'title\'] );
return $instance;
}
}