• 最近一段好忙, 忙的都没时间去管理网站,网站被举报 被攻击 我也是醉了 :sad:

  • 好久没发说说了,感觉与世隔绝了 :lol:

  • 今天更换Git主题,以后本站由Git主题强力驱动 :mrgreen: :mrgreen:
  • 六一儿童节快乐

  • 今天全站启用又拍云 CDN进行加速

  • 这两天有些忙所以没来得及更新,愿一切安好
  • 锲而不舍是取得成功关键的一环
  • 当你无助时,你可以哭,但哭过你必须要振作起来,绝地逢生并不罕见,何况不是绝境! 早安!

  • 今天五一,没有出去玩,主要是人太多了

  • 今天外面风好大,天气也有点冷,出门一定要多穿衣服!

给wordpress文章图片加上灯箱效果

wp优化 慕白 2个月前 (05-21) 257次浏览 已收录 1个评论

给文章图片加上灯箱效果

今天看到别人网站的文章图片灯箱效果特别好看效果如下图

是不是很好看的   加了一个框架看着效果就是不一样哈哈

接下来把代码贴下去

步骤一

先去下载FancyBox插件

步骤二

然后把压缩包解压之后的fancybox文件夹通过FTP上传到 wp-content/themes/你现在用的主题名字哦/ 插件目录

步骤三

找到你现在使用主题的footer.php文件,然后在</header>上面添加以下代码:

<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’) ?>/fancybox/jquery.fancybox.css” />
<script src=”<?php bloginfo(‘template_url’) ?>/fancybox/jquery.fancybox.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.fancybox”).fancybox();
});
</script>

这有个需要注意的点:如果你主题使用的是wordpress内置的jQuery库,你需要把$(document).ready(function() 改成 jQuery(document).ready(function($),如果你现在主题没有使用jQuery库,自己看着引用一下版本1.9以上的jquery库。

步骤四

编辑你现在使用主题的functions.php文件,在<?php下面添加下面代码:

//by http://www.aimubai.com.cn
add_filter(‘the_content’, ‘replace_content’);
function replace_content ($content){
global $post;
$pattern = “/<a(.*?)href=(‘|\”)([^>]*).(bmp|gif|jpeg|jpg|png)(‘|\”)(.*?)>(.*?)<\/a>/i”;
$replacement = ‘<a$1href=$2$3.$4$5 class=”fancybox”$6>$7’;
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

到这一步代码已经配置完成还有最后一步

在你上传图片的时侯,“附件显示设置”中的“链接到”选择“媒体文件”再插入文章,然后文章中的图片点击就会有fancybox灯箱效果!是不是很简单呢!

关注清宁时光每天分享不一样的知识


清宁时光 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:给wordpress文章图片加上灯箱效果
喜欢 (1)
[6447834@qq.com]
分享 (0)
慕白
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 文章不错支持一下
    头条新闻2021-06-04 17:40 回复