WordPress使用经验——WordPress如何对文章中的图片实现点击放大的效果
分类:计算机 | 其它 | 个人博客 | WordPress 2181
更新:2021-06-17 19:51:07编辑
1 说明
- WordPress版本:wordpress-5.7.2-zh_CN
- PHP版本:PHP 8.0.6
2 实现方法
2.1 首先在主题页眉文件header.php的head标签中添加css引用文件
<!-- 图片放大 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
2.2 然后在主题页脚文件footer.php中添加js引用文件
<!-- 图片放大 -->
<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;
}
2.4 最终实现的效果如下
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据10951
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目9502
- 3Microsoft Visual C++ Redistributable是什么,有什么作用?7280
- 4mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)5846
- 5uni-app使用经验—vue页面和html页面如何互相调用接口并传参5485
- 6Intellij IDEA下的版本控制VCS的启用与关闭4906
- 7Spring学习经验—@ResponseBody注解的使用说明4897
- 8Druid异常解决经验—java.sql.SQLException url not set4514
- 9如何用批处理命令(bat脚本)启动和停止windows服务4286
- 10nuxt.js项目中如何添加和使用全局变量4159
- 11解决SpringBoot使用maven下载不了jar包的问题3500
- 12linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”3397
- 13nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数3247
- 14在Nuxt.js项目的head中引用外部js文件3089
- 15在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一3068