给你的wordpress添加文章内图片鼠标点击放大浏览的功能吧~

最新推荐文章于 2024-11-27 18:14:57 发布

靠谱杨

最新推荐文章于 2024-11-27 18:14:57 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

分类专栏：工作总结文章标签： android

本文链接：https://blog.youkuaiyun.com/weixin_45556024/article/details/133987551

工作总结专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在WordPress网站中添加并配置Fancybox插件，以实现图片点击后弹出放大查看的效果。通过修改header.php、footer.php和functions.php三个文件，将代码片段插入到相应位置，可以自动为文章中的图片添加链接，从而实现轻量级的图片灯箱效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：笔者已启用WP Githuber MD插件使用Markdown语法进行文章编辑，启用的主题为generatepress。

1、进入你的宝塔面板首页

点击文件选项：

2、分别找到以下几个文件进行修改

2.1、header.php

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

2.2、footer.php

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

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