Question

我正在尝试使用wordpress post exerpts动态填写bootstrap 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;
}

Answer 1

您在此处混合使用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;
}

Answer 2

最终功能代码，如果它可以帮助任何人：

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！

wordpress post excerpt in bootstrap popover

2 个答案: