使用Bootstrap Carousel重写WordPress图库快捷代码

时间:2014-05-23 作者:Stephen S.

在最近发布旅游帖子的个人主题项目中,我希望有一个滑块样式的图像库,而不是WordPress开箱即用的标准列/列表样式。

我喜欢Bootstrap Carousel, 所以我的挑战是:

有没有可能将WordPress Gallery的短代码与Bootstrap的Carousel混合在一起?

我在下面给出了我的解决方案,但我想知道其他人可能会提出什么建议来改进代码并使其更好地工作。

2 个回复
最合适的回答,由SO网友:Stephen S. 整理而成

在另一条线上,我发现确实有可能customize the output of the Gallery Shortcode 在中使用一些代码functions.php.

下面的代码是没有标题的滑块的标准版本。显然,您需要确保像通常使用引导程序那样包含Jquery和引导程序文件。

// Remove built in shortcode
remove_shortcode(\'gallery\', \'gallery_shortcode\');

// Replace with custom shortcode
function shortcode_gallery($attr) {
    $post = get_post();

    static $instance = 0;
    $instance++;

    if (!empty($attr[\'ids\'])) {
        if (empty($attr[\'orderby\'])) {
            $attr[\'orderby\'] = \'post__in\';
        }
        $attr[\'include\'] = $attr[\'ids\'];
    }

    $output = apply_filters(\'post_gallery\', \'\', $attr);

    if ($output != \'\') {
        return $output;
    }

    if (isset($attr[\'orderby\'])) {
        $attr[\'orderby\'] = sanitize_sql_orderby($attr[\'orderby\']);
        if (!$attr[\'orderby\']) {
            unset($attr[\'orderby\']);
        }
    }

    extract(shortcode_atts(array(
        \'order\' => \'ASC\',
        \'orderby\' => \'menu_order ID\',
        \'id\' => $post->ID,
        \'itemtag\' => \'\',
        \'icontag\' => \'\',
        \'captiontag\' => \'\',
        \'columns\' => 3,
        \'size\' => \'thumbnail\',
        \'include\' => \'\',
        \'link\' => \'\',
        \'exclude\' => \'\'
                    ), $attr));

    $id = intval($id);

    if ($order === \'RAND\') {
        $orderby = \'none\';
    }

    if (!empty($include)) {
        $_attachments = get_posts(array(\'include\' => $include, \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\', \'order\' => $order, \'orderby\' => $orderby));

        $attachments = array();
        foreach ($_attachments as $key => $val) {
            $attachments[$val->ID] = $_attachments[$key];
        }
    } elseif (!empty($exclude)) {
        $attachments = get_children(array(\'post_parent\' => $id, \'exclude\' => $exclude, \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\', \'order\' => $order, \'orderby\' => $orderby));
    } else {
        $attachments = get_children(array(\'post_parent\' => $id, \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\', \'order\' => $order, \'orderby\' => $orderby));
    }

    if (empty($attachments)) {
        return \'\';
    }

    if (is_feed()) {
        $output = "\\n";
        foreach ($attachments as $att_id => $attachment) {
            $output .= wp_get_attachment_link($att_id, $size, true) . "\\n";
        }
        return $output;
    }

    //Bootstrap Output Begins Here
    //Bootstrap needs a unique carousel id to work properly. Because I\'m only using one gallery per post and showing them on an archive page, this uses the $post->ID to allow for multiple galleries on the same page.

    $output .= \'<div id="carousel-\' . $post->ID . \'" class="carousel slide" data-ride="carousel">\'; 
    $output .= \'<!-- Indicators -->\';
    $output .= \'<ol class="carousel-indicators">\';

    //Automatically generate the correct number of slide indicators and set the first one to have be class="active".
    $indicatorcount = 0;
    foreach ($attachments as $id => $attachment) {
        if ($indicatorcount == 1) {
            $output .= \'<li data-target="#carousel-\' . $post->ID . \'" data-slide-to="\' . $indicatorcount . \'" class="active"></li>\';
        } else {
            $output .= \'<li data-target="#carousel-\' . $post->ID . \'" data-slide-to="\' . $indicatorcount . \'"></li>\';
        }
        $indicatorcount++;
    }

    $output .= \'</ol>\';
    $output .= \'<!-- Wrapper for slides -->\';
    $output .= \'<div class="carousel-inner">\';
    $i = 0;

    //Begin counting slides to set the first one as the active class
    $slidecount = 1;
    foreach ($attachments as $id => $attachment) {
        $link = isset($attr[\'link\']) && \'file\' == $attr[\'link\'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

        if ($slidecount == 1) {
            $output .= \'<div class="item active">\';
        } else {
            $output .= \'<div class="item">\';
        }

        $image_src_url = wp_get_attachment_image_src($id, $size);
        $output .= \'<img src="\' . $image_src_url[0] . \'">\';
        $output .= \'    </div>\';


        if (trim($attachment->post_excerpt)) {
            $output .= \'<div class="caption hidden">\' . wptexturize($attachment->post_excerpt) . \'</div>\';
        }

        $slidecount++;
    }

    $output .= \'</div>\';
    $output .= \'<!-- Controls -->\';
    $output .= \'<a class="left carousel-control" href="#carousel-\' . $post->ID . \'" data-slide="prev">\';
    $output .= \'<span class="glyphicon glyphicon-chevron-left"></span>\';
    $output .= \'</a>\';
    $output .= \'<a class="right carousel-control" href="#carousel-\' . $post->ID . \'" data-slide="next">\';
    $output .= \'<span class="glyphicon glyphicon-chevron-right"></span>\';
    $output .= \'</a>\';
    $output .= \'</div>\';
    $output .= \'</dl>\';
    $output .= \'</div>\';

    return $output;

SO网友:teja
<?php
/* Template Name:Images */
get_header();

$id = get_the_ID();
 $attachments = get_posts( array(
      \'post_type\' => \'attachment\',
      \'posts_per_page\' => -1,
      \'post_parent\' => $id,
      \'exclude\'     => get_post_thumbnail_id()
    ) );

?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">

    <?php 
    $i=1;
    foreach ( $attachments as $attachment ) {

        if ($i == 1) {
          $class = \'active\';
        }else{
          $class=\'\';
        }
        ?>

        <div class="carousel-item <?php echo $class; ?>">

        <?php $class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
        $thumbimg = wp_get_attachment_link( $attachment->ID, \'thumbnail-size\', true );

        ?>

          <?php echo $thumbimg; ?>
        </div>

        <?php
        $i++;

          }
        ?>
  </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="icon-next" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

<?php
get_footer();
?>
结束

相关推荐

Overwriting a Shortcode

我有一个扩展Visual Composer插件的主题,在首页上有一个滑块。滑块将显示来自五个不同客户的五份推荐信。我想在滑块中添加每个推荐信的特色图像作为缩略图。以下是父主题的简短代码:function jo_customers_testimonials_slider( $atts ) { extract( shortcode_atts( array( \'limit\' => 5, \"widget_title\" => __(\'What Are People Saying