WordPress主题：修改源码实现点击观看原图

很长时间以来，我一直在与这个博客wordpress的主题作斗争。经过几个小时的搜索，我没有找到另自己满意的答案，不得不吐槽国内几个常见的国内主题实际上看起来不太好。真不知道当初为什么要买。对于挑选主题也算有点心得。有一次，我在wordpress的背景下看到了当前的那个，我真的很喜欢它。由于没有免费的主题背景管理，因此缺少许多功能。而且由于它是英语主题，因此汉字的改编也有些问题。但是我总体上喜欢它，没有办法。只能先慢慢使用。在这里，我正在修改增强型主题的某些部分，并且其中的步骤适用于所有免费主题。因此，也在此处记录下来，以免以后忘记升级。
废话就不多说了，直接讲干货吧。主要解决的问题是wordpress默认文章内图片是不能点击放大，这一点非常不友好，用户使用不方便，当然可以使用插件，比如如下两个：

Easy FancyBox
FancyBox for WordPress

但是能不用插件就不要用，对于百度的收录以及网站的相应速度都是有影响的。

实现功能：点击图片放大高亮

先测试效果吧

是没有问题的。

具体如何实现：

1：安装点击图片放大框架

这里并没有选择如上两个插件，使用网上 github 开源的一个框架。点击下载框架
2：解压到 WP 主题所在文件夹

/wp-content/themes/主题名/fancybox

header.php添加代码，放在</head>之前

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

注意位置，是`</head>`而不是`<head>`

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>

这样就大功告成了，完成之后可以点击测试一下站点。