其实之前写过《wordpress 添加fancybox图片暗箱》和《fancybox4插件JS和CSS码云地址》,基本功能上没什么变化，把 Fancybox 4 集成到你的 WordPress 主题里，不用插件、纯代码，自动给文章内所有图片加上灯箱点击放大效果。主要是更新一了function代码。
一、在主题 functions.php 加入代码
// 加载 Fancybox 4（国内CDN + 绝对不报错）
function flat_enqueue_fancybox() {
// 加载 CSS
wp_enqueue_style( 'fancybox-css', 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/@fancyapps/ui/4.0.32/fancybox.css', array(), null );
// 加载 JS（加载完才会执行初始化）
wp_enqueue_script( 'fancybox-js', 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/@fancyapps/ui/4.0.32/fancybox.umd.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'flat_enqueue_fancybox' );
// 页面底部初始化（保证 JS 加载完成）
add_action('wp_footer', function(){
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof Fancybox !== 'undefined') {
Fancybox.bind('.entry-content img, .post-gallery-item img', {
groupAttr: false,
infinite: false
});
}
});
</script>
<?php
});
// 自动给文章图片加灯箱
function flat_add_fancybox_to_content( $content ) {
$pattern = '/<img(.*?)src=["\']([^"\']+)["\']([^>]*)>/i';
$replacement = '<a href="$2" data-fancybox="gallery"><img$1src="$2"$3></a>';
return preg_replace( $pattern, $replacement, $content );
}
add_filter( 'the_content', 'flat_add_fancybox_to_content' );二、作用说明
1、自动加载 Fancybox 4 的 CSS + JS（CDN 加速，国内速度很快） 2、自动给文章内容里的所有图片：2.1包裹 <a href="原图">
2.2加上 data-fancybox="gallery"
题外话
我认为最好是把JS和CSS文件放在本地，即使是官方的CDN国内有时也会抽风！
