Question

我在Wordpress堆栈交换上也有这个问题，但那里没有运气。所以，因为我的解决方案可能涉及我对php和css进行硬编码，所以最好将它放在这里。

我正在使用'Flex Slider'插件 - 在我的Wordpress 3.2网站上运行'WP rotator'插件之上。我已经实现了很好，并开始考虑插入我的内容 - 但我需要添加一个标题在滑块上。正如网络上的大多数滑块一样，在该工具的非Wordpress插件的文档中，它表明我可以做类似的事情;

<div class="flex-container">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="slide1.jpg" />
        <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
      </li>
      <li>
        <img src="slide2.jpg" />
        <p class="flex-caption">This image is wrapped in a link!</p>
      </li>
      <li>
        <img src="slide3.jpg" />
      </li>
    </ul>
  </div>
</div>

问题是;使用Wordpress插件版本，我找不到该标记可以在里面工作。

这是插件目录中唯一的非css非js文件，因此我假设我必须在那里工作。

我已经尝试插入上面建议使用非Wordpress的标记，但不知道在哪里插入它，因为它已经破坏了我的尝试到目前为止。

<?php
/*
Plugin Name: Flex Slider for WP Rotator
Plugin URI: http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/
Description: Turns WP Rotator into FlexSlider, a fully responsive jQuery slider.
Version: 1.1
Author: Bill Erickson
Author URI: http://www.billerickson.net/blog/wordpress-guide
*/

class BE_Flex_Slider {
    var $instance;

    function __construct() {
        $this->instance =& $this;
        register_activation_hook( __FILE__, array( $this, 'activation_hook' ) );
        add_action( 'plugins_loaded', array( $this, 'init' ) ); 
    }

    /**
     * Activation Hook
     * Confirm WP Rotator is currently active
     */
    function activation_hook() {
        if( !function_exists( 'wp_rotator_option' ) ) {
            deactivate_plugins( plugin_basename( __FILE__ ) );
            wp_die( sprintf( __( 'Sorry, you can&rsquo;t activate unless you have installed <a href="%s">WP Rotator</a>', 'flex-slider-for-wp-rotator'), 'http://wordpress.org/extend/plugins/wp-rotator/' ) );
        }
    }

    function init() {
        // Remove original scripts and styles
        remove_action('wp_head','wp_rotator_css');
        remove_action('admin_head','wp_rotator_css');
        remove_action('wp_head','wp_rotator_javascript');
        remove_action('admin_head','wp_rotator_javascript');
        remove_action('init','wp_rotator_add_jquery');
        remove_action('admin_init','wp_rotator_add_jquery');

        // Enqueue Scripts and Styles
        add_action( 'init', array( $this, 'enqueue_scripts_and_styles' ) );

        // Remove original outer markup
        remove_action( 'wp_rotator', 'wp_rotator' );

        // Add new markup
        add_action( 'wp_rotator', array( $this, 'flex_slider' ) );
        remove_shortcode( 'wp_rotator' );
        add_shortcode( 'wp_rotator', array( $this, 'flex_slider_markup' ) );
    }

    function enqueue_scripts_and_styles() {
        // Use this filter to limit where the scripts are enqueued.
        $show = apply_filters( 'be_flex_slider_show_scripts', true );
        if ( true === $show ) {
            wp_enqueue_style( 'flex-slider', plugins_url( 'flexslider.css', __FILE__ ) );
            wp_enqueue_script( 'jquery ');
            wp_enqueue_script( 'flex-slider', plugins_url( 'jquery.flexslider-min.js', __FILE__ ), array( 'jquery' ) );
            add_action( 'wp_head', array( $this, 'flex_slider_settings' ) );
        }
    }

    function flex_slider_settings() {
        ?>
        <script type="text/javascript" charset="utf-8">
          jQuery(window).load(function() {
            jQuery('.flexslider').flexslider({
                <?php
                $flex_settings = array(
                    'animation' => '"' . wp_rotator_option( 'animate_style' ) . '"',
                    'slideshowSpeed' => wp_rotator_option( 'rest_ms' ),
                    'animationDuration' => wp_rotator_option( 'animate_ms' ),
                );

                $flex_slide_settings = array(
                    'controlsContainer' => '".flex-container"'
                );

                if( 'slide' == wp_rotator_option( 'animate_style' ) )
                    $flex_settings = array_merge( $flex_settings, $flex_slide_settings );

                $flex_settings = apply_filters( 'be_flex_slider_settings', $flex_settings );
                foreach ( $flex_settings as $field => $value ) {
                    echo $field . ': ' . $value . ', ';
                }
                ?>
            });
          });
        </script>
        <?php
    }

    function flex_slider_markup() {
        $output = '';

        if( 'slide' == wp_rotator_option( 'animate_style' ) )
            $output .= '<div class="flex-container">';

        $output .= '<div class="flexslider"><ul class="slides">';

        $loop = new WP_Query( esc_attr( wp_rotator_option('query_vars') ) );
        while ( $loop->have_posts() ): $loop->the_post(); global $post;

            $url = esc_url ( get_post_meta( $post->ID, 'wp_rotator_url', true ) );
            if ( empty( $url ) ) $url = get_permalink($post->ID);
            $show_info = esc_attr( get_post_meta( $post->ID, 'wp_rotator_show_info', true ) );
            if ( true == $show_info ) {
                $title = get_the_title();
                if ( get_the_excerpt() ) $excerpt = get_the_excerpt(); 
                else $excerpt = '';
                $caption = $title . ' <span class="excerpt">' . $excerpt . '</span>';
                $info = '<p class="flex-caption">' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '</p>';
            } else {
                $info = '';
            }
            $image =  wp_get_attachment_image_src( get_post_thumbnail_id(), 'wp_rotator' );

            $slide = '<li><a href="' . $url . '"><img src="' . $image[0] . '" /></a>' . $info . '</li>';
            $output .= apply_filters( 'be_flex_slider_slide', $slide );

        endwhile; wp_reset_query();

        $output .= '</ul></div>';

        if( 'slide' == wp_rotator_option( 'animate_style' ) )
            $output .= '</div>';

        return $output;
    }

    function flex_slider() {
        echo $this->flex_slider_markup();
    }

}

new BE_Flex_Slider;
?>

我已经联系了插件开发人员，他没有回复所以我认为他不会支持我的问题 - 所以我只能手动编码。

http://wordpress.org/extend/plugins/wp-rotator/

http://flex.madebymufffin.com/

http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/

感谢您的任何指示！

Answer 1

只要您将帖子设置为显示旋转器信息（wp_rotator_show_info ...可能在插件设置页面或您的个人帖子页面上），看起来自动将标题添加到滑块。自动标题由帖子的标题和摘录组成。这是上面插件中的关键部分：

        $show_info = esc_attr( get_post_meta( $post->ID, 'wp_rotator_show_info', true ) );
        if ( true == $show_info ) {
            $title = get_the_title();
            if ( get_the_excerpt() ) $excerpt = get_the_excerpt(); 
            else $excerpt = '';
            $caption = $title . ' <span class="excerpt">' . $excerpt . '</span>';
            $info = '<p class="flex-caption">' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '</p>';
        } else {
            $info = '';
        }

更新：如果您希望标题无论如何显示，请用以下内容替换上述部分：

    $title = get_the_title();
    if ( get_the_excerpt() ) $excerpt = get_the_excerpt(); 
    else $excerpt = '';
    $caption = $title . ' <span class="excerpt">' . $excerpt . '</span>';
    $info = '<p class="flex-caption">' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '</p>';

请注意，我只是删除了检查wp_rotator_show_info的部分。

为'Flexslider Plug-in'添加标题区域

1 个答案: