dongshanji3102
dongshanji3102
2015-11-09 15:42
浏览 50

wordpress post excerpt in bootstrap popover

I'm trying to dynamically fill out a bootstrap popover using wordpress post exerpts. I feel that I am pretty close to getting this working similar to this fiddle: http://jsfiddle.net/dalecameron/QZj5P/11/

The code I have so far is as follows:

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;
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douzhi2012
    douzhi2012 2015-11-09 16:20
    已采纳

    You're mixing PHP and JS variables here. This:

    content: function () {
      return $out;
    },
    

    Can't work as $out is a PHP variable, and it is defined after you're trying to print it.

    An other issue you have is that you use ob_start() to capture the output (which is a good idea) but never return it content. You return instead the popup link, so the JS part is being skipped.

    I suggest to change your function to this:

    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;
    }
    
    点赞 评论
  • doushen2154
    doushen2154 2015-11-09 17:40

    Final functioning code if it helps anyone:

    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;
    }
    

    Huge thanks to Vard!

    点赞 评论

相关推荐