Как переопределить галерею Wordpress по умолчанию с Bootstrap Карусель?

Question

Я хочу настроить (то есть переопределить) галерею Wordpress по умолчанию и сделать так, чтобы изображения отображались в карусели Bootstrap. Я добавил следующий код, адаптированный из здесь к функциям. php и, хотя макет в порядке и все изображения загружаются (в исходном коде), карусель не работает, не может перейти к следующее изображение - это stati c. Буду очень признателен за любые мысли о том, что не так!

add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
global $post, $wp_locale;

static $instance = 0;
$instance++;


extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'div',
    'icontag'    => 'div',
    'captiontag' => 'div',
    'columns'    => 3, // Changing the default thumbs per row
    'size'       => 'wpf-thumb', // Making the thumbnail size my custom one
    'include'    => '',
    'exclude'    => ''
), $attr));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $include = preg_replace( '/[^0-9,]+/', '', $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) ) {
    $exclude = preg_replace( '/[^0-9,]+/', '', $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;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$output = apply_filters('gallery_style', "
    <style type='text/css'>
    .carouselimg {
        max-height: 450px;
        height: 100%;
        margin: 0 auto;
        display: block;
      }
      #custom-carousel-2 .carousel-item {
      background-color: #000;
      }

    </style>
    <!-- see gallery_shortcode() in wp-includes/media.php -->
    <div id='#custom-carousel-2' class='carousel carousel-h slide'  data-interval='10000' data-ride='true'><div class='carousel-inner row w-100 mx-auto' role='listbox'>");

$i = 0;
foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr['link'])  ? wp_get_attachment_link($id, $size, $permalink = false, $icon = false, $text = false) : wp_get_attachment_link($id, $size, $permalink = false, $icon = false, $text = false );
    $image = wp_get_attachment_metadata($id);
    $imagelink = $image['file'];
    $medium = wp_get_attachment_image_src($id, $size = 'medium_large', $icon = false);
    $original = wp_get_attachment_image_src($id, $size = 'full', $icon = false);

    if ($i==0) {
    $active = "active";
    }
    else {
      $active = "";
    }

    $output .= "<{$itemtag} class='carousel-item $active' >";
    $output .= "

          <a href='#custom-carousel-2' data-slide='next'>   <img class='carouselimg' src='$medium[0]'></a>
        ";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
        $output .= "
            <{$captiontag} class='carousel-caption'>
            " . wptexturize($attachment->post_excerpt) . "
            </{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '';
   $i=$i+1;
 }


$output .= "</div>
<a class='carousel-control-prev' href='#custom-carousel-2' role='button' data-slide='prev'>
<span class='carousel-control-prev-icon' aria-hidden='true'></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' href='#custom-carousel-2' role='button' data-slide='next'>
<span class='carousel-control-next-icon' aria-hidden='true'></span>
<span class='sr-only'>Next</span>
</a></div>\n";

return $output;
}

РЕДАКТИРОВАТЬ

Мне удалось заставить его работать, теперь это работающая карусель с индикаторами миниатюр, интегрированная с fancybox - изменил карусельную часть кода на:

    $output = apply_filters('gallery_style', "
    <style type='text/css'>
    .carouselimg {
        max-height: 450px;
        height: 100%;
        margin: 0 auto;
        display: block;
      }


    </style>
    <!-- see gallery_shortcode() in wp-includes/media.php -->
    <div id='custom-carousel-3' class='carousel carousel-h slide' data-interval='10000' data-ride='true'>
    <div class='carousel-inner' role='listbox'>
    <a class='carousel-control-prev' href='#custom-carousel-3' role='button' data-slide='prev'>
      <span class='carousel-control-prev-icon' aria-hidden='true'></span>
      <span class='sr-only'>Previous</span>
    </a>
    <a class='carousel-control-next' href='#custom-carousel-3' role='button' data-slide='next'>
      <span class='carousel-control-next-icon' aria-hidden='true'></span>
      <span class='sr-only'>Next</span>
    </a>

      ");

$i = 0;

foreach ( $attachments as $id => $attachment ) {

  $medium = wp_get_attachment_image_src($id, $size = 'medium_large', $icon = false);
  $original = wp_get_attachment_image_src($id, $size = 'full', $icon = false);
  $caption = wp_get_attachment_caption($id);

  if ($i==0) {
  $active = "active";
  }
  else {
    $active = "";
  }

$output .= "

    <div class='carousel-item $active'>
      <div class='carousel-caption'><p>$caption</p></div>
      <a href='#custom-carousel-3' data-slide='next'>  <img class='carouselimg' src='$medium[0]'></a>
      <div class='carousel-caption'>
      <a class='fullscreen' data-fancybox='gallery' data-caption='$caption' href='$original[0]'> <img class='fullscreen-img' style='text-align:right;' src='/img/feather/maximize.svg'>Fullscreen</a><br><br>
      </div>
    </div>
 ";
$i=$i+1;

}

$output .= "</div><ol class='carousel-indicators' >";

  $i = 0;

  foreach ( $attachments as $id => $attachment ) {
    $thumbnail2 = wp_get_attachment_image_src($id, $size = 'thumbnail', $icon = false);

    if ($i==0) {
    $active = 'active';
    }
    else {
      $active = '';
    }
      $output .= "
      <li data-target='#custom-carousel-3-3' data-slide-to='$i' class='$active'><img src='$thumbnail2[0]'></li>
      ";
  $i=$i+1;

  }

$output .= "</ol >";

return $output;
}