Переписывание короткого кода в WordPress с карусели Bootstrap

В недавно личном тематическом проекте для публикации сообщений о путешествиях я хотел создать галерею изображений в стиле слайдера, а не стандартный стиль столбца / списка, который WordPress использует из коробки.

Мне нравится внешний вид Bootstrap Carousel , поэтому моя задача заключалась в следующем:

Возможно ли размыть Shortcode Gallery WordPress с помощью карусели Bootstrap?

Я дал свое решение ниже, но было бы интересно узнать, что другие люди могут предложить улучшить код и заставить его работать лучше.

Solutions Collecting From Web of "Переписывание короткого кода в WordPress с карусели Bootstrap"

В отдельном потоке я узнал, что действительно можно настроить вывод Shortcode Gallery с помощью некоторого кода в functions.php .

Код ниже будет довольно стандартной версией слайдера без титров. Вам, очевидно, нужно будет включить файлы Jquery и Bootstrap, как обычно, используя Bootstrap.

 // 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; с // 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; 
 <?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(); ?>