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

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

葱子9年前 (2017-05-27)网站运营3382

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

这个体验非常的不好。

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

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

问题分析:

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

相关文章

iframe高度自适应的一个方法

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。 第一想到的就是使用iframe框架来实现。 有个问题就是,目标页面的高度是动态调整的,非固定的。 在网上搜索了下,找个一个不错的解决方法,使用js来...

”site域名后提示“危险网站”怎么办?这才是正确的解决姿势!

”site域名后提示“危险网站”怎么办?这才是正确的解决姿势!

站长们在使用site命令查询网站信息时会出现“危险网站”提示,这到底是怎么回事呢?又该如何解决? 一、为什么会提示“危险网站” 针对这个问题,百度方面表示,百度云加速使用的漏洞扫描器是企业级别扫描器,对站点安全要求更...

WDCP面板升级组件脚本及方法

  坛子里面安装WDCP面板的帖有很多,但WDCP的组件也是老了一些,今天哥就带大家飞,升级各组件版本。       WDCP的Apache原则上是不能进行升级...

wordpress使用当前文章tag标签调用相关文章

大部分的wordpress主题在文章页都没有调用相关文章的功能,今天我找到了一份wordpress下使用当前文章tag标签调用相关文章的代码,分享给大家。 一、为什么要使用tag标签调用文章: 1、标签比分类更...

百度主动推送怎么用_百度主动推送PHP演示代码分享

近期在搜外问答上看到有很多人咨询百度主动推送API接口怎么调用的问题,看了很多回答内容,并没有讲到本质上。 虽然百度站长平台有提供类似的接口调用演示,但是对于基础比较薄弱的站长来讲,还是不会使用。 今天葱子给大家提供一份百度主动推送PH...

centos(Linux)系统如何挂载数据盘

centos(Linux)系统如何挂载数据盘

大部分的网站服务器都是使用的centos作为服务器程序,一旦磁盘空间爆满,就需要更换更大的硬盘。不过现在很多IDC服务商已经支持挂载数据盘了。 下面以阿里云ECS服务器为例,开始讲解centos如何挂载数据盘。...

发表评论

访客

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