Menu Close

免插件实现 WordPress LightBox 灯箱效果

lcc0556

第一：需要先部署三个文件，两个 JS 一个 CSS 。为了避免拷贝错误，可以直接从此链接下载所需文件，包括代码部分。
FancyBox-解压密码oneinf.com.zip

一般情况下第一个文件 jquery-3.2.1.min.js 主题都会引用所以就不需要了。 下面两个是必须要用的，本文中是我博客的路径，请根据你自己的路径设置正确的链接。

<script src="http://www.qishuo.xin/wordpress/wp-admin/css/jquery-3.2.1.min.js"></script>
<script src="http://www.qishuo.xin/wordpress/wp-admin/css/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="http://www.qishuo.xin/wordpress/wp-admin/css/jquery.fancybox.min.css" />

第二：将部署的文件引入你 WordPress 主题当中 header.php 文件的 之前。

我的主题是bizdir,在主题目录中我未找到header.php文件，我最终加在wp-content/themes/customify/header.php的文件中。

示例：

vim /var/www/html/lccdba/wp-content/themes/customify/header.php

第三：将下面的代码放入你 WordPress 主题下的 functions.php 文件的结尾即可实现效果。
/var/www/html/lccdba/wp-content/themes/bizdir/functions.php

/**FancyBox图片灯箱**/
add_filter('the_content', 'fancybox1');
add_filter('the_content', 'fancybox2');
function fancybox1($content){
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf|webp)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
function fancybox2($content){ 
    global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf|webp)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

第四：重新加载nginx

/usr/sbin/nginx -c /etc/nginx/nginx.conf -s reload

最后的效果如下：
http://img.oneinf.com/2019/04/FancyBox.png

参考：https://oneinf.com/tech/3272.html

Post Views: 401
Tagged ,