wordpress在bootstrap popover中的文章摘录


wordpress post excerpt in bootstrap popover

我正在尝试使用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!