在魔改主题过程中遇到一个问题：插入的图片由于过大无法完整展示，WordPress自带处理方法一是采用原图的小尺寸图片（这样会创建多个小尺寸图片副本，占用主机空间），二是将全尺寸图片直接压缩，但是往往压缩后很不清晰，严重影响美观！！！美观！！！。

有不少插件能够实现这种功能，例如FancyBox，FancyZoom，比较新的Cleaner Gallery。但是本着wp能不用插件就尽量不用的原则，我们选择从一个实现该效果的插件中提取其功能，然后用代码实现。我们选择使用FancyBox。

原理说明

However，博主习惯用Markdown，在MD中插入图片写法是：

![tag](url)

其通过MD解释器转换为html为：

<img title="name" alt="name" src="url">

日常使用这种语法没有问题，但是如果要使用这种点击放大效果的插件我们发现他们都是要求图片格式如：

<a href=""><img src="url"></a>

原地爆炸（╯‵□′）╯︵┴─┴）所以针对Markdown语法我们需要做一点预处理。

插件安装

首先我们需要获取FancyBox的程序，此处下载FancyBox

解压至WP主题所在文件夹，/wp-content/themes/主题名/fancybox,如果为了精简使用可以先将压缩包中的demo文件夹删掉再上传。

修改文件所属组www:root及访问权限755

cd /home/wwwroot/phower.me/wp-content/themes/主题名
chown -R www:root fancybox
chmod -R 755 fancybox

在主题的header.php中添加以下代码，放在</head>之前

<link href="<?php bloginfo('template_url'); ?>/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" media="all" />

在主题的footer.php中添加以下代码，放在</body>之前

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
    // 给图片添加链接
    $(document).ready(function() {
        $("p img").each(function() {
        var strA = "<a id='yourid' href='" + this.src + "'></a>";
        $(this).wrapAll(strA);
        });
    });
    // fancybox
    $("#yourid").fancybox({
        openEffect    : 'elastic',
        closeEffect   : 'elastic',
    });
</script>

效果

点击之前文章中的图片，就会出现如下的效果了。除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，效果满分，欢迎尝试。

参考 & 致谢