当前位置:首页 > 建站 > 正文内容

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

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

第一步,准备fancybox插件

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

![](/zb_users/upload/2021/03/image-38.png)
您也可以选择使用作者提供的在线地址,但是我个人觉得还是下载到自己的服务器使用本地文件比较好:
<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’);

![](/zb_users/upload/2021/03/image-39-1024x415.png)
**第三步,导入fancybox插件**

方法1,使用插件导入

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

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

![](/zb_users/upload/2021/03/image-40.png)
![](/zb_users/upload/2021/03/image-41.png)
![](/zb_users/upload/2021/03/image-42.png)
**方法2,代码导入**:

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

<pre class="wp-block-code">
``` ```
![](/zb_users/upload/2021/03/image-43.png)
在主题编辑器中打开文件footer.php中加入以下代码(注意按图片中的位置添加):
<pre class="wp-block-code">
![](/zb_users/upload/2021/03/image-44.png)
好啦,保存完成后刷新您的文章页面,文章中的图片就可以点击放大查看了。
    文章作者:xuwenyan
    版权声明:本文为本站原创文章,转载请注明出处,非常感谢,如版权漏申明或您觉得任何有异议的地方欢迎与本站取得联系。

    扫描二维码推送至手机访问。

    版权声明:本文由艺文笔记发布,如需转载请注明出处。

    本文链接:https://www.xuwenyan.com/archives/1430

    分享给朋友:

    “如何在Word Press添加图片放大显示?” 的相关文章

    为WordPress文章添加转载申明版权信息等

    为WordPress文章添加转载申明版权信息等

    浏览别人的博客文章时,会发现文章底部往往会有一些申明,如(本文转载于xxx的文章xxx)或(本文由xxx原创,禁止转载)之类的。如果这种申明完全靠写文章时手动添加,那会相当麻烦又累,特别想要修改时,那往期的文章那么多,可谓是欲哭无泪呀。 添加转载申明代码 找到主题中的functions...

    如何实现Word Press文章底部相关文章推荐?

    如何实现Word Press文章底部相关文章推荐?

    如何实现Word Press相关文章推荐?推荐一个比较好用的插件:Yet Another Related Posts Plugin (YARPP),可以在管理后台插件商城搜索到。 使用这款插件后,就可以自动在你的文章底部自动添加相关的文章推荐了,有助提高博客文章的阅读量。 插件功能:...

    推荐一个Word Press自定义关键词的插件G Meta Keywords

    推荐一个Word Press自定义关键词的插件G Meta Keywords

    虽然现在的搜索引擎对关键词已经不那么看重了,但也不排除有一些搜索引擎还是会考察的。其实有一些插件可以根据文字内容自动生成关键词,虽然不是很精确,缺也做到了省事。但是如何根据自己的意愿自定义关键词呢?推荐一个Word Press自定义关键词插件“G Meta Keywords”。 如何安装G...

    Linux如何通过命令终端修改文件内容?

    Linux如何通过命令终端修改文件内容?

    Linux如何通过命令终端修改文件内容? 比如在/test/test.txt文件中增加一行 hello linux world ! 命令是:vi,vim vi 编辑器,相当于记事本,有编辑功能,但较弱vim 复杂的编辑器,相当于windows的 editplus, notepad...

    Word Press如何生成站点地图Sitemap

    Word Press如何生成站点地图Sitemap

    站点地图是针对搜索引擎的,它的作用就是告诉搜索引擎本站有哪些页面,哪些页面比较重要。有了站点地图,能让我们的网站页面更好的被搜索引擎所收录。那么Word Press如何生成站点地图? Word Press里面生成站点地图的插件有很多,我们只介绍Rank Math SEO。 Rank Math S...

    如何创建Word Press子主题,创建子主题有什么好处?

    如何创建Word Press子主题,创建子主题有什么好处?

    使用Word Press时往往有这个现象,无论使用什么主题,总会有不合自己心意的地方,有代码基础的人可能就会打开文件管理器开始改代码了。但是,主题作者是会更新的呀,或许优化了显示问题,或许优化了安全问题等等,这时候你就尴尬了,你是更新还是不更新呢?一旦选择更新,自己自定义的代码将统统被覆盖,得升级完...