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

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

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

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

这个体验非常的不好。

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

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

问题分析:

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

相关文章

这样做你的网站才能通过百度站长平台的HTTPS认证

这样做你的网站才能通过百度站长平台的HTTPS认证

最近百度站长工具后台新增了https认证项目,很多站长都迫不及待的给网站上马了https。 但是在提交认证的时候,发现老是认证不通过。 看上图的提示信息,根本没有很好的提示是哪里出...

代码适配的网站如何优化

来自百度站长官方文档: 为了使百度能够知道当您的页面发生变化时,同时需要用其他的ua重新抓取一遍,请您添加Vary HTTP标头。Vary HTTP 标头具有以下两个非常重要且实用的作用:  a) 它会向 ISP 和其他位置使用的缓存...

通过nginx目录跳转实现:将旧栏目URL跳转到新栏目URL

近期我的古玩收藏网站——收藏大家坛做了搬家,同时也对现有的文章栏目布局做了一定的调整。 具体调整如下: 将以前的一级文章栏目全部转为二级文章栏目。 举例说明下:...

windows server2008中用IIS7.0新建网站

windows server2008中用IIS7.0新建网站

上一篇文章我们安装好了php运行环境,这里我就开始新建网站。 第一步:首先打开IIS,选择“网站”,然后右键添加网站 第二步:配置网站信息 IIS中对网站进行配置,主要...

windows server2008服务器安装一键php环境包

windows server2008服务器安装一键php环境包

最近在阿里云购买了一台Windows server2008的ECS服务器,准备在这上面安装一个php环境来运行discuz网站。 windows系统下,一般是使用IIS(7.0/7.5)作为web服务器。 所以为了安装php环境包...

如何关闭445端口?比特币勒索445端口关闭的方法教程

如何关闭445端口?比特币勒索445端口关闭的方法教程

445端口怎么关闭,这2天被比特币勒索刷屏了,WanaCrypt0r 2.0勒索软件在无需用户任何操作的情况下,Wcry2.0即可扫描开放445文件共享端口的Windows机器,从而植入恶意程序。那么只要关闭电脑的445端口就可以解决...

发表评论

访客

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