wordpress 中添加图片放大功能

功能描述

  1. 使用 Fancybox 实现图片放大和灯箱效果。
  2. 自动为文章内容中的图片添加链接,使其支持 Fancybox。
  3. 修改了 header.phpfooter.php 以引入必要的 CSS 和 JS 文件。
  4. functions.php 中通过过滤器自动为图片添加 data-fancybox 属性。

最终代码

1. 修改 header.php

<head> 标签内添加以下代码:

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

2. 修改 footer.php

在关闭的 </body> 标签前添加以下代码:

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

3. 修改 functions.php

functions.php 中添加以下代码:

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

配置后效果

  1. 自动链接图片

    文章中的 <img> 标签会自动嵌套在 <a> 标签中,并添加 data-fancybox 属性,使图片支持 Fancybox 的放大和灯箱功能。

  2. Fancybox 样式和功能

    放大图片时,带有过渡动画,背景半透明,支持左右导航切换。

  3. 多图支持

    多张图片会自动分组到同一个灯箱中(data-fancybox="gallery")。


验证步骤

1. 验证图片自动加链接

发布或编辑一篇文章,确保图片没有手动添加链接。刷新页面后检查 HTML 代码:

  • 图片应该被包裹在 <a> 标签中。

  • 例如:

    php 复制代码
    <a href="image-url.jpg" data-fancybox="gallery"> <img src="image-url-thumb.jpg" alt="图片描述"> </a>
2. 检查资源加载

使用浏览器的开发者工具(F12)确认:

  • jquery.fancybox.min.cssjquery.fancybox.min.js 文件是否加载成功。
  • 没有 JavaScript 报错。
3. 测试图片效果

点击文章中的图片:

  • 图片会以 Fancybox 弹出显示,背景半透明。
  • 如果有多张图片,可以点击左右箭头切换。
相关推荐
到底起什么网名才能不重名1 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
用户9272472502191 小时前
PHP+JS+CSS+JSON 单页新闻系统实现方案
php
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
Ashlee_code4 小时前
什么是Web3?金融解决方案
开发语言·金融·架构·eclipse·web3·区块链·php
码哥DFS5 小时前
Flex布局原理
前端·css·css3
小飞悟8 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
Sally璐璐9 小时前
IPSAN 共享存储详解:架构、优化与落地实践指南
开发语言·php
晴殇i10 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟10 小时前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
Clownseven11 小时前
Shell 脚本实战指南:内网 ARP 洪泛监控与飞书/邮件自动告警
网络·php·飞书