原创WP主题添加文章图片点击弹窗预览特效(适用DUX)

2935868921

发表文章数:76

首页 » WordPress » 正文

原创WP主题添加文章图片点击弹窗预览特效(适用DUX)

 

 

 

原创WP主题添加文章图片点击弹窗预览特效(适用DUX)

 

PS:本教程100%适用于大前端DUX主题,其他主题可以鉴借

 

首先打开DUX主题js文件夹的main.js

查找以下代码

<div class="modal-dialog" style="margin-top:200px;width:340px;">

将其修改为

<div class="modal-dialog" style="margin-top:50px;width:1080px;">

 

 

打开DUX的functions-theme.php文件

找到合适的位置添加以下代码

 function auto_post_link($content) {
 global $post;
 $content = preg_replace('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i', "<a class=\"sns-wechat\" href=\"javascript:;\" title=\"".$post->post_title."\" data-src=\"$2\" alt=\"".$post->post_title."\" /><img src=\"$2\" alt=\"".$post->post_title."\" /></a>", $content);
 return $content;
}
add_filter ('the_content', 'auto_post_link',0);

dux是一定可以实现的,我的JS水平有限无法再做修改了,其他主题可以鉴借以上的教程自行修改

不会修改可以直接下载本站修改好的js文件

 

 

文件下载

附件:弹窗图片

文件大小:5.0KB

更新时间:2020年07月16日

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

未经允许不得转载:作者:2935868921, 转载或复制请以 超链接形式 并注明出处 小狐狸资源网
原文地址:《原创WP主题添加文章图片点击弹窗预览特效(适用DUX)》 发布于2020-07-16

分享到:
赞(0) 打赏 生成海报
招聘广告位

评论 抢沙发

9 + 8 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册