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

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

1.上传文件

2.前台添加html代码模块

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

比如你用avada就可以选择code block,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

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

结语

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

如果对本文有疑问,可以在下方评论区留言,看到后我会在这里回复你。

关于作者:张东星

我是一位打工人 & 创业者,曾在某世界500强公司打工,现在正在创业,喜欢折腾wordpress,为外贸创业者提供wordpress的建站技术支持,我会为您解决wordpress、Avada以及服务器等的操作使用方面的相关问题。 工作时间:9:00~24:00

加微信咨询(为了方便大家添加微信,直接放在这里了):

发表评论

13 + 3 =

相关文章

目录