如何让pdf显示在WordPress网页前端（含代码操作）

这里我就拿一个商标证pdf文件来做演示

方法一：用html代码直接实现

1.上传文件

2.前台添加html代码模块

不管你用的是avada主题还是elementor插件还是其他的插件，都可以找到html代码模块

比如你用avada就可以选择code block，elementor就选择html模块

这里显示的模块很少，是因为我把他们隐藏了，这篇文章有介绍过《你还觉得Avada搭建的网站加载很慢是因为你根本没有进行优化》

3.复制文件链接

4.写入html代码

<embed src="https://neijuli.cn/wp-content/uploads/2023/09/shangbiao.pdf" type="application/pdf" width="100%" height="800px">

这段代码是有缺陷的，有可能你的用户浏览器并不支持直接查看pdf文件，这时候就需要对代码进行优化，接着网下看最终的代码

5.优化代码（最终代码，可直接复制到你的网站，注意修改语言）

这时候就已经可以显示出来了，要注意的是，可能用户的浏览器不支持直接查看pdf文档。

<div>
    <object data="https://neijuli.cn/wp-content/uploads/2023/09/shangbiao.pdf" type="application/pdf" width="100%" height="800px">
        <p>抱歉，你的浏览器不支持直接查看PDF文件。你可以<a href="https://neijuli.cn/wp-content/uploads/2023/09/shangbiao.pdf">点击这里</a>下载文件。</p>
    </object>
</div>

解释一下：

• 这里的链接要换成你自己的pdf文档链接。
• 里面的文本如果你做的是英文站的话需要翻译成英文。
• width 后面跟着的数值表示你的文档在前台显示的宽度，可以显示100%，也可以改成你想要的像素大小，比如400px。
• height 后面跟着的数值表示你的文档在前台显示的高度，可以任意调整，比如600px，800px

方法二：用插件实现

你在插件后台搜索pdf可以找到很多的插件，可以一个个试一试，我这里帮你们试了两个。

1.插件一：PDF Embedder

像我这样添加后你在前台就可以看到

2.插件二：Embed PDF Viewer

这个插件可以让你不用点击预览就能看到具体样子

结语

我个人不喜欢添加太多的插件，插件太多对网站速度是有影响的，如果可以尽量选择纯代码方式实现。