hanyu316Hanyu316  2020-04-30 20:54 瀚宇文创 隐藏边栏 |   抢沙发  105 
文章评分 1 次,平均分 5.0

很多小伙伴在使用WordPress发布文章的时候会发现图片并不能像通常那样点击放大,那怎么办呢?这里小瀚总结了一个不使用插件也能做到的办法。

首先,这里我们需要弄明白一个问题,WordPress在写文章编辑图片时有两种图片插入方式:插入图像或插入画廊。

如果是插入图像,则图像并不能点击和放大,所以这里我们需要插入画廊。

在画廊上传图像后在右边的区块管理记得选择链接到媒体文件,这个很重要,关系到图片能不能点击。

之后我们在主题的Header.php中加入以下代码:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">

同样的在Footer.php中加入以下代码:

1
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

最后我们打开主题编辑器,在Functions.php文件的最后加入代码:

1
2
3
4
5
6
7
8
/**图片灯箱自动给图片加链接**/
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;
}

如图所示:

添加完代码记得点击保存,三段代码都添加完毕后,使用非插件实现图像点击放大的方法就实现了。

效果如下:

这里说明一点:如果不添加代码直接使用主题自带的链接媒体文件也是能点击打开图片的,但是不能放大,大家在手机上试试就知道了。

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

Hanyu316
Hanyu316 关注:0    粉丝:0 最后编辑于:2020-07-11
这个人很懒,什么都没写

发表评论

表情 链接 私密 格式 签到

扫一扫二维码分享