Obtenir des méta-post dans le curseur Flex
J'utilise le Flexslider de WooCommerce pour, bien, faire défiler un certain nombre de messages d'une catégorie donnée. Vu ici: http://csl.nsta.org/development/
Le curseur "flex-control-nav" du curseur est caché derrière l'image ... lorsqu'il est stylé, il est représenté par les points situés au bas du curseur; sans style, il s'agit simplement d'une liste numérotée, indiquant le numéro de la diapositive (1, 2, 3, 4, etc.), à ne pas confondre avec l'ID de la publication.
J'essaie de changer le contenu de la liste de contrôle pour afficher le titre de l'article, et peut-être même sa catégorie.
J'ai pensé que cela pourrait être fait en utilisant des attributs de données pour les publications dans le curseur, puis en les récupérant via jquery. Mon problème est que je n'arrive pas à comprendre comment passer en revue et attribuer chacun des attributs de ces publications. Je suppose que je dois faire une sorte de déclaration "foreach"?
À partir de jquery de flexslider, voici le code pour la navigation:
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++;
}
}
Dans la boucle configurée pour le curseur, voici comment le titre est configuré, dans l’espoir d’obtenir leurs attributs de données:
<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>
Je pensais que si je pouvais remplacer j par une sorte de variable foreach qui récupère le data-title des titres.
Je ne sais pas comment accomplir cela. Aucune suggestion? Merci!
edit: La boucle du curseur est configurée avec ceci:
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;
}
}
Il est un peu délicat de fournir la solution qui fonctionnerait pour vous sans HTML complet. J'ai vérifié la page liée, mais il n'y a pas de pagination (j'ai recherché flex-control-nav que vous avez mentionné et que je n'ai pas trouvé). Ma solution vient donc du code que vous avez fourni et du code HTML que j'ai vu sur votre page.
Si je vous ai bien compris, il vous suffit d'ajouter une variable dans votre boucle et de remplacer j par cette variable. Voici le code:
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++;
}
}
}
J'ai aussi essayé de rester "du bon côté", alors n'hésitez pas à remplacer jQuery par $ si cela ne provoque pas de conflits. De plus, la définition slideTitle pourrait fonctionner comme ceci:
slideTitle = slide.eq(j).find('h2.slider-post-title').data('title');
Mais comme les définitions de slider et slides ne sont pas fournies, je ne suis pas sûr que cela fonctionnerait.
S'il vous plaît laissez-moi savoir le résultat dans un commentaire et j'essayerais d'améliorer la réponse si nécessaire.