WordPress点击图片放大效果代码的方法

1、在主题页眉文件(header.php)添加下列代码: 2、在主题页脚文件(footer.php)添加下列代码: 3、在主题函数文件里面添加下列代码: /**FancyBox图片灯箱**/ add_filter('the_content','fancybox'); functionfancybox($content){ $pattern=array("/<img(.*?)src=('|\\"…

1、在主题页眉文件(header.php)添加下列代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

2、在主题页脚文件(footer.php)添加下列代码:

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

3、在主题函数文件里面添加下列代码:

/**FancyBox图片灯箱**/
add_filter(‘the_content’, ‘fancybox’);
function fancybox($content){
$pattern = array("/&lt;img(.*?)src=(‘|")([^&gt;]*).(bmp|gif|jpeg|jpg|png|swf)(‘|")(.*?)&gt;/i","/&lt;a(.*?)href=(‘|")([^&gt;]*).(bmp|gif|jpeg|jpg|png|swf)(‘|")(.*?)&gt;(.*?)&lt;\/a&gt;/i");
$replacement = array(‘&lt;a$1href=$2$3.$4$5 data-fancybox="images"&gt;&lt;img$1src=$2$3.$4$5$6&gt;’,’&lt;a$1href=$2$3.$4$5 data-fancybox="images"$6&gt;$7′);
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

实现的效果:

WordPress点击图片放大效果代码的方法

当然了,你也可以通过安装插件的方法实现点击图片放大效果:https://www.cuikaiyun.cn/wordpress-plug-simple-fancybox.html

类似的插件还有ModuloBox。

本博客 [ 秋硕笔记 ] 内带有 原创 标签文章,均为秋硕独立创作。

撰文不易,转载请注明文章来源并保留原文链接:本文转载自 秋硕笔记。

本文链接:https://www.cuikaiyun.cn/wordpress-click-the-image-to-enlarge-the-code-version.html

主题图片放大插件添加

原创文章,作者:秋硕笔记,如若转载,请注明出处:https://www.davidwu.net/archives/1376

发表评论

电子邮件地址不会被公开。 必填项已用*标注