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

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

/**图片灯箱自动给图片加链接blogc.com**/
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;
}

效果如下:

赞同(0) 打赏
未经允许不得转载:BlogC » 给WordPress主题添加图片点击放大效果
分享到

评论 抢沙发