在FLEX滑块中获取后期Meta

时间:2016-10-24 作者:NW Tech

我使用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;
        }

}

1 个回复
最合适的回答,由SO网友:Dmitriy Gamolin 整理而成

在没有完整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\');
但是自从sliderslides 没有提供我不确定它是否有效。

请在评论中告诉我结果,如果需要,我会尝试改进答案。

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上,我不知道我是如何产生它的,或者它是否是正常的。我正在开发自己的插件,当一个足球队/足球队被输入到一个框中时,它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">