给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 添加以下代码:

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

效果如下:

0 打赏
未经允许不得转载:杨哥视界 » 给WordPress主题添加图片点击放大效果
分享到

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏