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

第一步，准备fancybox插件

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


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

<pre class="wp-block-code">

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

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

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

<pre class="wp-block-code">

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

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$1href=$2$3.$4$5 data-fancybox=”images”$6>$7‘);
$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中加入以下代码（注意按图片中的位置添加）：

<pre class="wp-block-code">

``` ```


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

<pre class="wp-block-code">


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