您可以从WP Gallery shortcode 渲染滑块。此示例改编自Owl Carousel Demo / Docs.

要使用它，请创建WP Gallery 并添加属性owl="true". 显然有更好的方法enqueue scripts 但这可以指导您修改库。

<小时>

 [gallery owl="true" link="none" size="medium" ids="378,377,376,375,374,373"]

<小时>NOTE: 最好将此短代码放在插件中，但也可以将其添加到functions.php -- 在这一点上，它将是特定主题的。如果应用到默认主题并进行更新，则这些更改将被覆盖。您已收到警告。

为了便于定位，请将其放入wp-content/mu-plugins/gallery-owl-shortcode.php. 它将始终加载，您不需要制作完整的插件。

<小时>UPDATE:

我意识到，如果每篇文章都有图库，那么这段代码可能会在博客页面上重复很多JS和CSS，所以我添加了一个检查，看看这部分是否已经包含在内。缺点是所有库的设置都相同。

<小时>

<?php

add_shortcode( \'gallery\', \'modified_gallery_shortcode\' );

function modified_gallery_shortcode($attr)
{
    // Replace WP gallery with OWL Carousel using gallery shortcode -- just add `owl=true`
    //
    // [gallery owl="true" link="none" size="medium" ids="378,377,376,375,374,373"]

    if( isset($attr[\'owl\']))
    {
        $attr[\'itemtag\']="span";

        $output = gallery_shortcode($attr);

        $output = strip_tags($output,\'<a><img><span><figcaption>\'); // remove extra tags, but keep these
        $output = str_replace("span", "div", $output); // replace span for div -- removes gallery wrap
        $output = str_replace(\'gallery-item\', "item", $output); // remove class attribute

        $output = "<div class=\\"owl-demo\\" >$output</div>"; // wrap in div

        // begin styles and js

        static $js_loaded; // only create once
        if( empty ( $js_loaded )) {

        ob_start();
        ?> 
        <style>
            .owl-demo .item{
                margin: 3px;
            }
            .owl-demo .item img{
                display: block;
                width: 100%;
                height: auto;
            }
        </style>
        <script defer src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
        <script>
            jQuery(\'head\').append(\'<link defer id="owl-carousel-css" rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" type="text/css" />\');
            jQuery(\'head\').append(\'<link defer id="owl-theme-css" rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" type="text/css" />\');

            jQuery(document).ready(function () {

                // pulling example from -- including CSS
                // http://owlgraphic.com/owlcarousel/demos/images.html

                // notice I replaced #id with .class for when you want to have more than one on a page
                jQuery(".owl-demo").owlCarousel({

                    autoPlay: 3000, //Set AutoPlay to 3 seconds

                    items: 1,
                    itemsDesktop: [1199, 1],
                    itemsDesktopSmall: [979, 1] // adaptive image count
                });
            });
        </script>
        <?php
        $js_loaded = ob_get_clean(); // store in static var

        // add the HTML output
        $output .= $js_loaded;
        }
    }
    else
    {
        // default gallery
        $output = gallery_shortcode($attr);
    }

    return $output; // final html

<小时>

ALTERNATE

因此，上面的代码可以工作，但创建一个全新的界面，而不是在WP提供的库中进行黑客攻击，可能会更好。由于ID是在属性中传递的，您可以从头构建自己的解决方案（包括自定义链接），只需确保注册链接字段。

if( isset($attr[\'owl\']))
{
    $image_ids = explode(\',\', $attr[\'ids\']);

    $output = \'\';
    $size = isset($attr[\'size\']) ? $attr[\'size\'] : \'medium\';

    foreach($image_ids as $attachment_id) {

        // http://wordpress.stackexchange.com/questions/1051/how-to-retrieve-an-image-attachments-alt-text

        $img_src = \'\';//esc_url(  wp_get_attachment_image_url( $attachment_id, $size ) );
        $img_srcset = esc_attr( wp_get_attachment_image_srcset( $attachment_id, $size ) );

        $alt = esc_attr ( get_post_meta($attachment_id, \'_wp_attachment_image_alt\', true) );
        $link = esc_attr ( get_post_meta($attachment_id, \'_gallery_link_url\', true) );
        $the_attachment = get_post($attachment_id); // post
        $caption = esc_attr ( $the_attachment->post_excerpt );

        $img = "<img src=\\"{$img_src}\\" srcset=\\"{$img_srcset}\\"
             sizes=\\"auto\\" alt=\\"{$alt}\\">";
        $link = empty($link) ? $img : "<a href=\\"{$link}\\" >{$img}</a>";
        $caption = "<figcaption>{$caption}</figcaption>";
        $item = "<div class=\\"item\\">{$link}{$caption}</div>";

        $output .= $item;
    }

    $output = "<div class=\\"owl-demo\\" >$output</div>"; // wrap in div

    //... include JS & CSS stuff
}

寄存器Custom Link field 在库附件上

add_filter( \'attachment_fields_to_edit\', \'apply_filter_attachment_fields_to_edit\', null, 2 );
add_filter( \'attachment_fields_to_save\', \'apply_filter_attachment_fields_to_save\', null , 2 );
function apply_filter_attachment_fields_to_edit( $form_fields, $post )
{
    // Gallery Link URL field
    $form_fields[\'gallery_link_url\'] = array(
        \'label\' => \'Gallery Link URL\',
        \'input\' => \'text\',
        \'value\' => get_post_meta( $post->ID, \'_gallery_link_url\', true ),
    );
    return $form_fields;
}

function apply_filter_attachment_fields_to_save( $post, $attachment ) {
    // Save our custom meta fields
    if( isset( $attachment[\'gallery_link_url\'] ) ) {
        update_post_meta( $post[\'ID\'], \'_gallery_link_url\', $attachment[\'gallery_link_url\'] );
    }
    return $post;
} // End function apply_filter_attachment_fields_to_save()