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>

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

题外话:提高用户留存 链接在新窗口打开

国外上网的使用习惯是点击链接直接在当前页面打开,不会打开一个新的页面。考虑到国内用户的使用习惯。我们还是设置一下打开一个新的页面!

在对应主题后台选择 header.php 在 </head>标签前添加如下代码:

<base target="_blank"> 

测试一下,大功告成!

有料文章

0

评论0

没有账号? 注册  忘记密码?