如何在Word Press添加图片放大显示?

使用word press时,我们文章中的图片常会因为尺寸过大而导致预览图被压缩看不清楚,因此我们需要一个可以点击图片就能放大图片查看的功能,这在其它网站是很常见的一个功能。那么如何实现在Word Press添加图片放大显示?

第一步,准备fancybox插件

我们需要用到fancybox插件:gitbub下载地址,您可以下载并解压到您的网站目录内,仅需要箭头标注的两个文件。

您也可以选择使用作者提供的在线地址,但是我个人觉得还是下载到自己的服务器使用本地文件比较好:

https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js

第二步,添加图片灯箱代码

打开您的wordpress后台,打开外观->主题编辑器->functions.php代码文件。在functions.php文件最底部加入以下代码(如果找不到functions.php文件可能是因为您的主题是子主题,您需要在主题编辑器的右上部分’想要编辑的主题’框中应用到父主题。):

/**图片灯箱自动给图片加链接**/

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

第三步,导入fancybox插件

方法1,使用插件导入

推荐使用插件添加,原因有2,首先使用插件添加比较简单方便。其次使用插件添加,当你更新主题或升级主题后,您仅需要重新添加functions.php中的代码即可,省去了重新导入fancybox的麻烦。

首先安装Header Footer Code Manager插件,启用插件,然后添加代码片段即可(代码可以在下面方法2中拷贝):

方法2,代码导入

在主题编辑器中打开文件header.php中加入以下代码(注意按图片中的位置添加):

<!-- 图片放大 -->
<!-- 如果使用服务器本地文件,src="/您的目录/jquery.fancybox.min.css" -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

在主题编辑器中打开文件footer.php中加入以下代码(注意按图片中的位置添加):

<!-- 图片放大 -->
<!-- 如果使用服务器本地文件,src="/您的目录/jquery.fancybox.min.js" -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

好啦,保存完成后刷新您的文章页面,文章中的图片就可以点击放大查看了。


本文为@艺文笔记原创文章,转载请注明出处:https://www.xuwenyan.com/archives/1430,非常感谢!
上一篇:  下一篇: