默认情况下本站主题使用的是 layui 家的 layer 弹出层组件来提供图片灯箱功能。

使图片灯箱生效代码是主题目录下 /js/kratos.js 文件内 showPhotos() 函数。

	var showPhotos = function() {
		layer.photos({
		  photos: '.kratos-post-content'
		  ,anim: 0
		}); 
	}

并在 /functions.php 文件内引入相关 JS 和 CSS 文件。

wp_enqueue_style( 'layer', $dir . '/css/layer.min.css', array(), KRATOS_VERSION);

wp_enqueue_script( 'layer', $dir . '/js/layer.min.js', array(), '3.0.3');

这功能忍它很久了，以下两点让人不爽：

1. 点击后放大图片是根据显示器的比例来放大的，如果一张高分辨率图片就不能进行放大等动作，而且在手机小屏幕上由于边距设置得很大又不能放大缩小，看图一点帮助都没有，这就是鸡肋了。
2. 不能控制作用范围，友情链接读者墙之类的地方点击用户头像也给一个弹出层遮挡，影响体验。

解决方案（转载）

在 header.php 添加以下代码

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

在 footer.php 添加以下代码

<!-- 图片放大 -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

在 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;
}

效果如下：

---

当然第一次用为了尽量排除其他可能造成的不确定因素，我把 JS 和 CSS 文件都下载到了本地，按照主题原来的方式进行引用。

结果….并没有图内完整的效果：

• 没有工具栏
• 点击图片返回后图片就从网页消失了

刚开始以为还要加什么料，在 ryanzoe.top 家一个个地翻看它的 js 等文件，还交叉替换了 js 文件，搞老半天问题依旧，还好它的主题和本站的 kratos 都是一个老板做的，很多东西看上去比较熟悉。那最可能的是本站主题某个配置引起的问题了。

/**
 * Auto post link
 * 
 * @author Vtrois <seaton@vtrois.com>
 * @license GPL-3.0
 */  

function kratos_auto_post_link($content) {
  global $post;
  $content = preg_replace('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i', "<img layer-src=\"$2\" src=\"$2\" alt=\"《".$post->post_title."》\" />", $content);
  return $content;
  }
add_filter ('the_content', 'kratos_auto_post_link',0);

这是本站主题 functions.php 下的一个函数，用于给 img 标签自动加 alt 属性，属性值为文章标题。

问题就在 add_filter() 第三个参数 0 上，它表示这个过滤函数的优先级，数字越大表示越后面执行，默认为 10。它先执行就会和我们上面的 fancybox() 产生冲突。

把 0 改成 99 就一切都好了，就这样:
add_filter ('the_content', 'kratos_auto_post_link',99);

完成！该删的删，来张大图效果（点击图片）如下：

爽了！

---

2021-10-02：错了，在 kratos_auto_post_link() 中 img 标签还自定义了一个“layer-src”属性，这个也是关键吧。