wordpress 中添加图片放大功能
功能描述
- 使用 Fancybox 实现图片放大和灯箱效果。
- 自动为文章内容中的图片添加链接，使其支持 Fancybox。
- 修改了
header.php和footer.php以引入必要的 CSS 和 JS 文件。 - 在
functions.php中通过过滤器自动为图片添加data-fancybox属性。
最终代码
1. 修改 header.php
在 <head> 标签内添加以下代码：
<!-- 图片放大 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
2. 修改 footer.php
在关闭的 </body> 标签前添加以下代码：
<!-- 图片放大 --> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>3. 修改 functions.php
在 functions.php 中添加以下代码：
/** 图片灯箱自动为图片添加链接 **/ add_filter('the_content', 'fancybox'); function fancybox($content){ // 匹配图片并为其添加 Fancybox 的 data 属性 $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; }配置后效果
-
自动链接图片：
文章中的<img>标签会自动嵌套在<a>标签中，并添加data-fancybox属性，使图片支持 Fancybox 的放大和灯箱功能。 -
Fancybox 样式和功能：
放大图片时，带有过渡动画，背景半透明，支持左右导航切换。 -
多图支持：
多张图片会自动分组到同一个灯箱中（data-fancybox="gallery"）。
验证步骤
1. 验证图片自动加链接
发布或编辑一篇文章，确保图片没有手动添加链接。刷新页面后检查 HTML 代码：
- 图片应该被包裹在
<a>标签中。 - 例如：
<a href="image-url.jpg" data-fancybox="gallery"> <img src="image-url-thumb.jpg" alt="图片描述"> </a>
2. 检查资源加载
使用浏览器的开发者工具（F12）确认：
jquery.fancybox.min.css和jquery.fancybox.min.js文件是否加载成功。- 没有 JavaScript 报错。
3. 测试图片效果
点击文章中的图片：
- 图片会以 Fancybox 弹出显示，背景半透明。
- 如果有多张图片，可以点击左右箭头切换。