我正在尝试使用wordpress-post-exerpts动态填充引导程序popover。我觉得我很快就可以像这把小提琴一样工作了:http://jsfiddle.net/dalecameron/QZj5P/11/
到目前为止,我的代码如下:
function powerloop_excerpt( $atts ) {
global $post;
$defaults = array(
'class' => '',
'title' => 'Popover Title',
'content' => 'Content'
);
$atts = shortcode_atts( $defaults, $atts );
ob_start();
?>
<script>
jQuery(function(){
jQuery("a[rel=popover]")
.popover({
html:true,
trigger: 'hover',
content: function () {
return $out;
},
title: ''
})
.click(function(e) {
e.preventDefault()
});
});
</script><?php
$excerpt = get_the_excerpt();
//post format
$media = pagelines_media( array( 'thumb-size' => 'full' ) );
$powerloop_quote = has_post_format( 'quote' );
$powerloop_link = has_post_format( 'link' );
if(!$powerloop_quote && !$powerloop_link):
$out = sprintf('<p class="%s power-excerpt">%s</p>',
$atts['class'],
$excerpt
);
else:
$out = '';
endif;
$expop = sprintf('<a href="#" rel="popover" data-placement="right"><i class="fa fa-info-circle"></i></a>');
return $expop;
}
您在这里混合了PHP和JS变量。此:
content: function () {
return $out;
},
无法工作,因为$out
是一个PHP变量,它是在您尝试打印它之后定义的
另一个问题是使用ob_start()
捕获输出(这是个好主意),但从不返回内容。您返回的是弹出链接,因此JS部分被跳过。
我建议将您的功能更改为:
function powerloop_excerpt( $atts ) {
global $post;
$defaults = array(
'class' => '',
'title' => 'Popover Title',
'content' => 'Content'
);
$atts = shortcode_atts( $defaults, $atts );
//post format
$media = pagelines_media( array( 'thumb-size' => 'full' ) );
$powerloop_quote = has_post_format( 'quote' );
$powerloop_link = has_post_format( 'link' );
$excerpt = get_the_excerpt();
$title = get_the_title();
if(!$powerloop_quote && !$powerloop_link) {
$content = sprintf('<p class="%s power-excerpt">%s</p>',
$atts['class'],
$excerpt
);
} else {
$content = '';
}
ob_start();
?>
<script type="text/javascript">
jQuery(function(){
jQuery("a[rel=popover]")
.popover({
html:true,
trigger: 'hover',
title: '<?php echo $title; ?>',
content: '<?php echo $content; ?>'
})
.click(function(e) {
e.preventDefault()
});
});
</script>
<?php
$out = ob_get_clean();
$out .= '<a href="#" rel="popover" data-placement="right"><i class="fa fa-info-circle"></i></a>';
return $out;
}
如果它能帮助任何人,那么它的最终功能代码是:
function powerloop_excerpt( $atts ) {
global $post;
$defaults = array(
'class' => '',
'content' => 'Content'
);
$atts = shortcode_atts( $defaults, $atts );
//post format
$media = pagelines_media( array( 'thumb-size' => 'full' ) );
$powerloop_quote = has_post_format( 'quote' );
$powerloop_link = has_post_format( 'link' );
$excerpt = get_the_excerpt();
if(!$powerloop_quote && !$powerloop_link) {
$content = sprintf('<p class="%s power-excerpt">%s</p>',
$atts['class'],
$excerpt
);
} else {
$content = '';
}
ob_start();
?>
<script type="text/javascript">
jQuery(function(){
jQuery("a[rel=popover]")
.popover({
html:true,
trigger: 'hover',
content: '<?php echo $content; ?>'
})
.click(function(e) {
e.preventDefault()
});
});
</script>
<?php
$out = ob_get_clean();
$out .= '<a href="#" rel="popover" title="" data-content="%s" data-placement="left"><i class="fa fa-info-circle"></i></a>';
return $out;
}
非常感谢Vard!