一、加载fancybox插件
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--如果主题已经引用了jQuery库，可以忽略这条-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
2022年更新
当然你也可以去官方下载文件到本地加载。fancybox3官方网站
上述CDN库不能用，建议更新以下地址
https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js
https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css二、给图片链接添加标签
新版的fancybox已经使用新的标签data-fancybox=""和data-caption=" "，以前的rel标签已失效！使用图片的结构变成下面的样式：<a href="/XX.png" data-fancybox="gallery" data-caption="图片文章" alt="图片文章" title="图片文章" ><img src="/XX" alt=""/></a>
<a href="/XX" data-fancybox="gallery" data-caption="图片文章" alt="图片文章" title="图片文章" ><img src="/XX.png" alt=""/></a>//自动添加标签属性
add_filter('the_content', 'fancybox');
function fancybox ($content)
{ global $post;
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 data-fancybox="gallery" data-caption="'.get_the_title().'" alt="'.get_the_title().'" title="'.get_the_title().'" $6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}三、文章添加图片链接到媒体文件
其实这个方法可以用到任何网页上来实现图片暗箱效果！
