纯代码实现WordPress网站点击图片放大灯箱效果（Fancybox/lightbox）

为什么我们要让网站图片点击后自动放大？很多时候，我们插入文章、页面中的图片因为尺寸或其他原因，图片是不太清晰的，尤其是截图。这样读者在观看的时候，体验会非常差。特别是有些教程中的图片，本来图片中的文字很小，如果图片还不是很清晰，教程的效果就会打折扣。实现图片点击放大功能，方法有很多种，有添加代码的，也有插件的。本着能不用插件就不用插件的原则，尽量还是用代码实现功能。本文主要分享如何实现这种fancybox/lightbox灯箱效果，点击WordPress网站上所有图片都可以自动放大。我们需要在3个地方增加代码：

1、主题页眉header.php文件中添加以下代码，位置在</header>之前

/**图片放大，页头head代码**/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />

2、主题页脚文件footer.php中添加以下代码，位置在</body>之前

/**图片放大，页脚footer代码**/
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

3、在子主题函数文件functions.php中添加以下代码，位置任意

建议1：在子主题functions.php中添加，避免主题升级后覆盖消失，就要重新添加代码
建议2：在代码管理插件Code Snippets中添加，同样也是避免主题升级导致代码被覆盖，需要重新添加

/**Fancybox图片自动放大功能代码，添加到functions.php**/
add_filter('the_content', 'fancybox');
function fancybox($content){
$pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
$replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

总结

这种方法实现起来还是比较简单的，复制代码的时候，注意空格，以及添加代码的位置。注意，这种方法添加在主题文件header.php、footer.php、functions.php中的代码会随着主题升级更新而覆盖，就需要重新添加。为了网站速度和安全考虑，虽然能不用插件就不用插件，但是仍然建议安装1个代码管理插件，来管理所有代码，比如免费的code snippets等。插件添加代码的方法推荐参考：

如何避免WordPress主题更新重复手动添加自定义代码
Code Snippets教程-最好用的WordPress网站自定义代码管理插件