WordPress实现图片灯箱效果fslightbox代码版

折腾代码

既然你倾向于代码实现，我们使用 fslightbox。它是目前最流行、最轻量的原生 JS 灯箱库之一，不需要 jQuery，非常符合主题追求性能的调性。

总结你的配置组合：
图片格式：使用 WebP（通过插件或 CDN 转换）。

加载方式：原生 loading=”lazy” 或 Lazysizes（实现淡入）。

灯箱：使用我们之前写的 fslightbox 脚本，它会自动抓取这些延迟加载后的图片。

它集成了以下所有功能：全自动图片灯箱、WebP 格式兼容、自动抓取说明文字以及原生延迟加载优化。你只需要将这一段代码粘贴到 WordPress 主题的 functions.php 中即可，不需要再做任何额外设置。

/**
 * Arkhe 主题全能图片优化方案
 * 集成：全自动灯箱 + 自动说明文字 + WebP支持 + 延迟加载优化
 */
function arkhe_ultimate_image_solution() {
    // 1. 引入轻量级灯箱库 fslightbox (仅 2KB 左右)
    wp_enqueue_script( 'fslightbox', 'https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js', array(), null, true );
    
    // 2. 核心自动化逻辑
    wp_add_inline_script( 'fslightbox', "
        document.addEventListener('DOMContentLoaded', function() {
            // 锁定文章内容区的图片区块
            const images = document.querySelectorAll('.entry-content img, .l-main img');
            
            images.forEach(img => {
                // 确保不重复处理
                if (img.closest('.no-lightbox')) return;

                // 延迟加载优化：WordPress 原生支持 loading='lazy'
                // 如果你有其他插件处理 lazyload，此处会自动获取真实源地址
                const realSrc = img.getAttribute('data-lazy-src') || img.getAttribute('data-src') || img.src;

                // 寻找或包装 a 标签
                let link = img.closest('a');
                if (!link) {
                    link = document.createElement('a');
                    link.href = realSrc;
                    img.parentNode.insertBefore(link, img);
                    link.appendChild(img);
                }

                // 检查是否为图片格式（含 webp）
                if (link.href.match(/\.(jpg|jpeg|png|webp|gif|svg)(\?.*)?$/i)) {
                    link.setAttribute('data-fslightbox', 'arkhe-gallery');
                    
                    // 自动抓取并注入说明文字 (Caption)
                    const figure = img.closest('figure');
                    if (figure) {
                        const caption = figure.querySelector('figcaption');
                        if (caption) {
                            link.setAttribute('data-caption', caption.innerText.trim());
                        }
                    }
                }
            });

            // 刷新灯箱
            if (typeof refreshFsLightbox === 'function') {
                refreshFsLightbox();
            }
        });
    ");

    // 3. 样式优化：美化灯箱文字与延迟加载过渡
    wp_add_inline_style( 'fslightbox', "
        /* 灯箱说明文字样式 */
        .fslightbox-caption {
            background: rgba(0, 0, 0, 0.6) !important;
            color: #fff !important;
            font-size: 14px !important;
            padding: 8px 20px !important;
            border-radius: 30px !important;
            bottom: 30px !important;
            backdrop-filter: blur(5px);
        }
        /* 图片淡入效果 */
        img[loading='lazy'] {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    ");
}
add_action( 'wp_enqueue_scripts', 'arkhe_ultimate_image_solution' );

这段整合代码的亮点：

  1. 真正的全自动：你写文章时只管插图，不管你有没有设置链接，代码都会在前端自动补全。
  2. WebP 完美配合：代码会自动识别 .webp 后缀，点击后灯箱加载的就是 WebP 原图，速度极快。
  3. 用户体验：
    • 自动成组：文中所有图片可以像幻灯片一样左右翻页。
    • 视觉平滑：利用 CSS 为延迟加载的图片添加了淡入动画，避免图片突然“蹦”出来。
    • 语义化说明：只要你在编辑器里写了“说明文字”，灯箱里就会自动同步显示。

性能建议：

由于 Arkhe 追求极致性能，建议你再确认一下：

  • 首屏图片排除：通常文章的第一张图（特色图）不建议延迟加载。WordPress 6.3+ 会自动处理 fetchpriority="high"，你可以放心使用。
  • CDN 加速：如果图片很多，建议使用类似 Cloudflare 或阿里云 OSS 配合 WebP 转换，这样灯箱秒开。