WordPress文章中图片设置点击放大

前言

由于看文章的时候发现图片太小，看不清。我在想，要是图片可以点击放大就好了

所以给本站添加了图片点击放大的功能

首先安装一个wordpress图片放大插件

auto-highslide

不知道什么原因该插件用WordPress下架了

文末会提供下载

安装启用完成后需要配置主题目录下的 header.php文件，在</head>之前加上下面的代码：

<!-- 自链图片+点击图片放大-ZZLZ.NET -->
<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
$(function() {  
    $('.article-content img').each(function(i){  
        if (! this.parentNode.href) {  
            $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");  
        }  
    });  
});  
</script> 
<script type="text/javascript">
jQuery(document).ready(function($){
 
$('.entry-content img,.entry-featured img').each(function(i){
if (! this.parentNode.href) {
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
});
});
</script>

以上代码集成了图片自链及点击图片放大功能的代码

一般WordPress网站如果有用到相册灯箱等功能都需要图片自链

如果你之前有用过图片自链，请自行去除掉图片自链的代码

<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
$(function() {  
    $('.article-content img').each(function(i){  
        if (! this.parentNode.href) {  
            $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");  
        }  
    });  
});  
</script> 

说明

有种情况，明明放了一张超大的图片，但是点击放大后，图片尺寸没什么变化

导致这种情况的可能是你的WordPress媒体文件被限制大小了

要关闭图片自动缩放功能其实很简单

• 进入 控制板
• 进入 设置 ——> 媒体 页面
• 在 图片尺寸 下面清除不需要的尺寸设置（将其宽、高设置为 0），当然也可选择性地保留一些自动缩放的尺寸（见下图）
• 保存更改