フレックススライダーでポストメタを取得する
私は、WooCommerceのFlexsliderを使用して、特定のカテゴリの投稿をスライドさせています。ここに見られる： http://csl.nsta.org/development/
画像の後ろに隠れているのは、スライダーの "flex-control-nav"です。スタイルを設定すると、スライダーの下部にドットとして表示されます。スタイリングなしで、それらはスライドの番号（1、2、3、4など）を示す単なる番号付きリストです。投稿のIDと混同しないでください。
私は投稿のタイトルを表示するためにthatコントロールナビゲーションのコンテンツを変更しようとしています。
スライダー内の投稿のデータ属性を使用して、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をタイトルからdata-titleを取得するある種のforeach変数に置き換えることができると思いました。
これを達成する方法がわかりません。助言がありますか？ありがとうございます。
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;
}
}
完全なHTMLがなくてもうまくいくソリューションを提供するのは少し面倒です。リンク先のページを確認しましたが、ページ区切りはありません（あなたが言及したflex-control-navを検索しましたが、見つかりませんでした）。だから私の解決策はあなたが提供したコードと私があなたのページで見たHTMLから来る。
私が正しければ、ループ内に変数を追加し、jをこの変数に置き換えるだけです。これがコードです：
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' ) + '"' : '',
slideTitle = jQuery('#genesis-responsive-slider .slider-post-title').eq(j).data('title');
item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"' + altText + '/>' : '<a href="#">' + slideTitle + '</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++;
}
}
}
私も「安全のために」維持しようと試みました、それで衝突を引き起こさないならばjQueryを$に自由に置き換えてください。 slideTitleの定義もこのように動作します：
slideTitle = slide.eq(j).find('h2.slider-post-title').data('title');
しかし、sliderとslidesの定義は提供されていないので、それがうまくいくかどうかはわかりません。
結果についてコメントで教えてください。必要に応じて回答を改善するようにします。