当前位置:首页 > 网站运营 > 正文内容

为wordpress文章图片添加原图链接和图片放大效果

葱子6年前 (2017-05-27)网站运营2586

今天接到用户反馈,葱子的博客文章,点击图片无法查看大图,只能右键新窗口打开看。

这个体验非常的不好。

所以,我今天搜集了下方案,实现了文章页中点击图片放大的效果。

你可以点击下面这张图片试下效果:

问题分析:

1、如何实现点击图片放大的效果?

解决方案:

1、安装wp的插件Auto Highslide,点击下载

插件安装好后,就实现了图片点击放大的效果。

接着又出现新的问题了。

这个点击放大效果需要文章图片本身链接到源文件,很多以往的旧文章里面的图片没有链接到源文件,一个个的修改起来非常的麻烦。

怎么办?

找到了解决办法:

添加下面的JS代码到当前主题header.php模版文件中的<head>标签下方:

<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

<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>

该脚本会检查文章中的图片是否包含了链接,如果没有,会自动为图片添加链接到原图。

修改其中的 .entry 为你主题正文的CSS类。

重点部分我已经标红了,怎么去寻找这个.entry呢?

打开你博客任一篇文章,右键查看源代码:搜索“article”,找到类似的红框中的信息,替换entry即可

扫描二维码推送至手机访问。

版权声明:本文由葱子博客发布,如需转载请注明出处。

本文链接:https://www.aitiancheng.com/article-753.html

相关文章

详解WDCP3.2.8自动配置HTTPS功能

详解WDCP3.2.8自动配置HTTPS功能

wdcp最新版3.2.8已经支持在后台直接配置HTTPS了,不过很多站长似乎不太会使用这个功能。 下面我就简单的给大家讲解下如何使用这个功能: 一、新建网站 在wdcp...

windows server2008中用IIS7.0为网站开启HTTPS

windows server2008中用IIS7.0为网站开启HTTPS

前面的文章中我们已经开启了添加好了网站,并且可以正常访问了。 那么接下来我将要为网站配置https。 第一步:申请SSL证书 关于如何申请SSL证书,请看我之前的教程。 h...

葱子的wordpress博客开启https访问了:解决百度分享、畅言无法使用的问题

葱子的wordpress博客开启https访问了:解决百度分享、畅言无法使用的问题

我的博客一直是放在阿里云虚拟主机上面的,今天因为虚拟主机快到期的缘故,将博客转移到了自己的独立ECS服务器上面了。 借着wordpress博客搬家这个机会,一并将博客的https也给开启了。 下面我简单...

网站快照劫持又一例:svchost.exe病毒快照劫持的解决办法

网站快照劫持又一例:svchost.exe病毒快照劫持的解决办法

近日某个站长的discuz网站被快照劫持,在discuz后台查看最近修改文件,没有发现异常文件。 通过以往的案例分析,发现这次的网站挂马比较特殊。 后来在查看其网页源代码时发现,每个页面头部和底部都存在有异常代码。 上面...

【干货】百度搜索对HTTPS站点全流程支持方案【转载】

【干货】百度搜索对HTTPS站点全流程支持方案【转载】

5月25日,VIP大讲堂用3个小时的时间给大家介绍网站HTTPS改造方案等内容,那么百度搜索对HTTPS站点的支持到底怎样了吗?让我们赶紧看看搜索工程师是怎么说的。...

常用云服务器主机管理面板推荐

常用云服务器主机管理面板推荐

在之前【对于新建discuz网站的一些建议:X3.4、服务器、HTTPS】这篇文章中,葱子我给大家讲过在新建站点时尽量使用云服务器,同时可以通过使用服务器面板来管理云服务器,实现可视化操作。 下面葱子给大家介绍一下云服务器的一些使用指南。...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。