WP优化

给WordPress主题添加图片点击放大效果

11个月前 (06-16)   482   本文共888个字  

目前很多主题都带有这个效果,但有时候还是会遇到某些主题点击图片会直接跳转图片地址的尴尬地步,所以杨哥分享一个给Wordpress主题添加图片点击放大效果的代码:

在 header.php 添加以下代码:

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

在 footer.php 添加以下代码:

<!-- 图片放大 -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

在 functions.php 添加以下代码:

/**图片灯箱自动给图片加链接yangge.net**/
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="gallery"&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;
}

效果如下:

版权声明:YANGGE 发表于 2021年06月16日
转载请注明:给WordPress主题添加图片点击放大效果 | YANGGE

您可能感兴趣的

暂无评论

暂无评论...