非插件将WordPress插入文章中的相册(Gallery)变成幻灯

WordPress插入的相册是默认以横竖排列，即：列表。如果将相册(Gallery)变成幻灯，非插件的方式呢？

引入幻灯组件：

要用到幻灯组件：swiper，在主题的functions.php加入：

wp_enqueue_style('swiper-style', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/swiper.min.css', array(), null, 'all');
wp_enqueue_script('swiper-script', 'https://cdn.jsdelivr.net/npm/sw[email protected]/dist/js/swiper.min.js', array('jquery'), null, true);

幻灯代码拼接：

if ($(".single .gallery").length > 0) {
    $(".single .gallery").each(function() {
        var container = '<div class="swiper-container"><div class="swiper-wrapper">';
        $(this).find("img").each(function() {
            var url = $(this).attr("src");
            var alt = $(this).attr("alt");
            var item = '<div class="swiper-slide"><a href="' + url + '" data-lightbox="' + alt + '" data-title="' + alt + '"><img src="' + url + '"></a></div>';
            container += item;
        });
        container += '</div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div>';
        $(".gallery").before(container);
        lightbox.option({
            'showImageNumberLabel': false,
        })
    });

    var swiper = new Swiper('.post-content .swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
        centeredSlides: true,
    });
}

注意：

这里我还用了WordPress非插件方式实现图片lightbox效果这个方法，所以在拼接：

var item = '<div class="swiper-slide"><a href="' + url + '" data-lightbox="' + alt + '" data-title="' + alt + '"><img src="' + url + '"></a></div>';

的时候，多出了 data-lightbox、data-title参数，你也可以根据自己需求去拼接。

还有幻灯的css，就自己写了吧。