1、在主题页眉文件(header.php)添加下列代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

2、在主题页脚文件(footer.php)添加下列代码:

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

3、在主题函数文件里面添加下列代码:

/**FancyBox图片灯箱**/
add_filter('the_content', 'fancybox');
function fancybox($content){
$pattern = array("/&lt;img(.*?)src=('|")([^&gt;]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)&gt;/i","/&lt;a(.*?)href=('|")([^&gt;]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)&gt;(.*?)&lt;\/a&gt;/i");
$replacement = array('&lt;a$1href=$2$3.$4$5 data-fancybox="images"&gt;&lt;img$1src=$2$3.$4$5$6&gt;','&lt;a$1href=$2$3.$4$5 data-fancybox="images"$6&gt;$7');
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

实现的效果:

当然了,你也可以通过安装插件的方法实现点击图片放大效果:https://wordpress.org/plugins/simple-fancybox/

类似的插件还有ModuloBox。