向“Flexslider插件”添加标题区域 [英] Adding caption area to 'Flexslider Plug-in'
问题描述
我有这个问题在Wordpress堆栈交换，以及，但没有任何运气。所以，因为我的解决方案可能涉及我硬编码PHP和CSS，这可能是更好的在这里。
I have this question on the Wordpress stack exchange as well, but not having any luck there. So, as my solution probably involves me hard-coding php and css, It may be better to have it here.
我使用'Flex Slider'插件工作在我的Wordpress 3.2网站上的WP旋转器插件的顶部。我已经实现罚款，并开始看看插入我的内容 - 但我需要添加一个标题在滑块的顶部。如同在Web上的大多数滑块上，在工具的非Wordpress插件的文档中，它建议我可以做类似的;
I'm using 'Flex Slider' plugin - that works on top of 'WP rotator' plug-in on my Wordpress 3.2 website. I have it implemented fine, and beginning to look at inserting my content - but I need to add a caption to be on top of the slider. As are present on most sliders on the web, within the documentation of the non-Wordpress plugin of the tool it suggests I can do something like;
<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插件版本，我不能找到那个标记在里面工作。
Problem is; with the Wordpress plug-in version, I can't find that markup to work inside.
这里是插件目录中唯一的非css非js文件，所以我假设我必须在那里工作。
Here's the only non-css non-js file in the plug-ins directory, so I assume I have to work in there.
我试过插入上面建议的非Wordpress标记，但不知道在哪里插入它，因为它破坏了我的尝试迄今为止。
I've tried inserting the mark-up that was suggested non-Wordpress above, but not sure where to insert it as it's broke it with my attempts thus far.
<?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’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;
?>
我已经联系过插件开发者，他没有回应，所以我认为他不会支持我的问题 - 所以我留给手写代码。
I have contacted the plug-in developer, he's not responding so I assume hes not going to support my question - so I'm left to handcode.
http://wordpress.org / extend / plugins / wp-rotator /
http://flex.madebymufffin.com/
http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/
感谢任何指针！
推荐答案
只要您将字幕设为显示旋转器信息（ wp_rotator_show_info ...可能在插件设置页面或个人帖子页面上）。自动字幕由帖子的标题加上摘录组成。这里是上面插件的关键部分：
It looks like captions are automatically added to the slider as long as you set the post to show rotator info (wp_rotator_show_info... probably on the plugin settings page or on your individual post page). The automatic caption is made up of the title of the post plus the excerpt. Here's the key part in the plugin above:
$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 = '';
}
更新：如果你想要的标题显示无论什么，部分：
UPDATE: If you want the caption to show no matter what, replace the above portion with this:
$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的部分。
Note that I merely deleted the part that checks for wp_rotator_show_info.
这篇关于向“Flexslider插件”添加标题区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
