前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >推荐一款Wordpress点击文章图片放大效果的插件

推荐一款Wordpress点击文章图片放大效果的插件

作者头像
程序员纬度
发布2021-03-02 11:02:15
2.3K0
发布2021-03-02 11:02:15
举报
文章被收录于专栏:奇异维度

今天小维跟大家讲下如何为WordPress文章内图片添加点击放大功能,关于文章图片中的事件效果,有的是弹出放大,有的是新窗口放大,根本功能的定义略有不同,今天跟大家分享一个可以直接用wordpress插件高效解释的方案,并且支持自适应页面的结构与布局。

第一步:安装Auto Highslide插件并启用。

Auto Highslide

登录WordPress后台,上传插件(如下图) 或者上传至服务器的wp-content/plugins/目录文件夹下。

第二步:启用插件后,需要设置图片添加链接。

wordpress主题默认不添加链接到原图,所以需要添加一段代码,使程序为图片添加链接。编辑主题文件夹下的 header.php ,添加下面的js代码:

代码语言:javascript
复制
<script type="text/javascript">
$(function() {
$('.entry img').each(function(i){
if (! this.parentNode.href) {
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
});
});
</script>

第三步:将修改好的header.php覆盖上传即可。

当然如果已经默认加了图片链接的文章,可以直接跳过这个步骤。

版权声明:本站原创文章 推荐一款Wordpress点击文章图片放大效果的插件 由 小维 发表!

转载请注明:推荐一款Wordpress点击文章图片放大效果的插件 - 小维的个人博客

部分素材来源于网络,如有侵权请联系删除!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020 年 06 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档