许多 WordPress 用户希望实现点击图片后放大预览的灯箱效果，但又不希望为此安装额外的插件。实际上，通过少量代码即可实现这一功能，不仅轻量高效，还能避免插件可能带来的性能负担。
实现后的效果是：点击文章内的图片，会以弹层形式平滑放大显示，背景变暗，并支持通过左右箭头、ESC键或点击背景关闭。
实现步骤
1. 获取必要文件
首先，你需要获取实现灯箱效果的 CSS 和 JavaScript 文件。你可以使用成熟的轻量级开源库，例如 Lightbox2 或 Fancybox。以下以 Lightbox2 为例：
- 访问 Lightbox2 的官方 GitHub 仓库 (https://github.com/lokesh/lightbox2/) 下载最新版本。
- 解压后，你需要的主要文件是
dist/css/lightbox.min.css和dist/js/lightbox-plus-jquery.min.js（此文件已包含 jQuery）。
2. 将文件放入主题目录
在你的 WordPress 主题目录下（例如 /wp-content/themes/your-theme/），创建一个用于存放资源的文件夹，例如 /assets/lightbox/。将上一步获取的 .css 和 .js 文件复制到该文件夹中。
3. 在主题中引入文件
需要修改主题文件，在页面头部引入 CSS，在页面底部引入 JS。推荐通过 WordPress 的标准方式（wp_enqueue_style 和 wp_enqueue_script）添加，以确保依赖关系和加载顺序正确。
打开你主题的 functions.php 文件，在末尾添加以下代码：
function mytheme_enqueue_lightbox() {
// 引入 Lightbox CSS
wp_enqueue_style(
'lightbox-css',
get_template_directory_uri() . '/assets/lightbox/lightbox.min.css',
array(), // 无依赖
'2.11.4' // 版本号，请根据实际文件更新
);
// 引入 Lightbox JS (此版本已内置jQuery)
wp_enqueue_script(
'lightbox-js',
get_template_directory_uri() . '/assets/lightbox/lightbox-plus-jquery.min.js',
array(), // 注意：此文件已包含jQuery，不要重复添加jquery依赖
'2.11.4',
true // 在页脚加载
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_lightbox');重要提示：如果你使用的 Lightbox JS 文件不包含 jQuery（例如 lightbox.min.js），则需要将上面的 array() 依赖项改为 array('jquery')。
4. 为文章图片添加灯箱属性
引入文件后，还需要让文章中的图片能被灯箱脚本识别。通常，灯箱库会通过链接（<a>）的特定属性（如 data-lightbox）来触发。
对于古腾堡 (Gutenberg) 编辑器用户：
在编辑文章插入图片时，在图片块的设置侧边栏中，将“链接到”选项设置为“媒体文件”。这样，图片就会被包裹在一个指向大图的链接中。Lightbox2 等库会自动检测这类链接并启用灯箱效果，无需额外步骤。
对于经典编辑器用户或需要更多控制：
你可能需要手动为图片链接添加 data-lightbox 属性。例如，在文本编辑模式下，图片的HTML可能如下：
<a href="large-image.jpg" data-lightbox="image-1" data-title="我的图片说明">
<img src="thumbnail-image.jpg" alt="示例">
</a>其中 data-lightbox 的值用于分组（相同值的图片会在灯箱中形成画廊），data-title 用于设置灯箱中显示的标题。
注意事项与优化建议
- 主题兼容性：此方法依赖于修改主题的
functions.php文件。更换主题后需要重新操作。建议在子主题中进行修改。 - 性能：相比插件，此方法只加载必要的 CSS 和 JS 文件，通常更轻量。你可以进一步将文件托管在 CDN 上。
- 自定义样式：如果需要修改灯箱的外观（如箭头颜色、背景透明度），可以直接编辑引入的
lightbox.min.css文件，或在其后添加自定义CSS规则进行覆盖。 - 库的选择：除了 Lightbox2，你也可以选择其他库，如 Fancybox 3、Magnific Popup 等，它们的集成步骤类似，主要是文件路径和初始化代码的差异。
通过以上步骤，你无需安装任何插件，即可为 WordPress 网站添加一个美观、高效的图片灯箱功能。