Wordpress插件与设计 - WP教程 10 - 添加音视频内容,使展示页面更加丰富多彩! - 特色图片

WP教程 10 - 添加音视频内容,使展示页面更加丰富多彩!

在上一篇文章中,我讲解了如何在文章或网页中添加文件下载功能。

今天,我要讲解的是如何在文章和网页中添加音频、视频或社交媒体内容。

由于所有社交媒体内容的讲解难以在一篇文章中完成,所以本篇文章将主要讲解如何添加和设置音频和视频。

1.添加视频的方式

要在Wordpress的文章或者页面中添加视频主要有以下几种方式。

  • 使用视频区块:使用视频区块是比较直接也是最快添加视频的方式。添加的视频将上传到服务器,保存在媒体库。
  • 使用嵌入区块:可使用区块库中的Youtube,或者Vimeo等区块,只需复制第三方服务的嵌入代码即可显示视频内容。好处在于视频内容不用上传到服务器,只需添加链接即可。
  • 使用外部链接:使用外部云盘服务,如Amazon,Google等,将云盘中的视频共享形式嵌入到文章或者页面中。
  • 使用WP插件:WP有很多第三方插件提供视频嵌入功能,如Presto Player,Arve和EmbedPlus等。第三方插件提供更多自定义选项和高级功能

无论使用哪种方式,都能实现文章或页面中添加视频内容的需求。但是,对于新手小白来说,使用Wordpress 古腾堡编辑器自带的视频区块或者嵌入区块就能快速实现视频的嵌入。

2.导入视频内容

2-1 使用视频区块导入视频

首先,我们使用Wordpress的视频区块来添加视频内容。

添加视频区块的方式如下:

  1. 在文章编辑页面中的段落处点击”+”号,或者点击编辑页面左上方的”+”按钮打开区块库。
  2. 在区块库中寻找或搜索”视频”区块。
  3. 点选导入到编辑页面。

导入视频区块后,就可以上传或者在媒体库中,通过URL展示视频内容。

上图显示的是通过URL添加视频的效果。添加视频后,还可以在视频底部添加文字描述。

2-2 使用嵌入区块导入视频

除了上述的视频区块导入方法,Wordpress的古腾堡编辑器还提供了第三方视频嵌入区块。

下面,我们使用YouTube的嵌入区块来测试嵌入后的内容展示效果。

嵌入视频的方法很简单,只需要将视频的URL链接复制粘贴到上图的URL输入框即可。

从上图中可以看出,无论是使用媒体视频区块还是YouTube嵌入区块,YouTube视频的显示效果是一样的。

若需要重新输入或输入其他第三方平台的视频内容,可以点击区块工具栏中的“替换”按钮,输入新的URL,便可快速更换为另一个视频。

WordPress支持跨平台视频替换,例如可以将YouTube视频替换为Vimeo视频,更新后的视频区块将显示相应平台的标识图片。

2-3 其他热门服务的嵌入区块

视频嵌入区块是多种媒体类型的一部分。

在区块库的嵌入类型一览中,可以看到一系列第三方平台的嵌入区块,包括Twitter、Instagram、Facebook、SoundCloud等热门服务。

只需将这些资源的URL粘贴到编辑器,WordPress即可自动生成相应的嵌入区块,轻松引用各类多媒体内容。

3.嵌入音频文件

WordPress的古腾堡编辑器为音频文件的添加提供了专门的嵌入区块。

许多博主现在喜欢将文章内容转化为语音,放置在文章的起始位置,让用户可以通过声音来阅读文章。

如果你也想展示类似的内容,了解如何添加音频文件是必要的。

3-1 导入音频

导入音频区块的方法与导入视频区块的方式相同,文件的上传方式也没有区别。

你可以上传音频文件,从媒体库中选择已有的音频文件,或通过URL从第三方服务导入。

如果音频文件不大,可以直接将文件拖拽到音频区块中。WordPress会自动上传音频文件到媒体库,并生成带有美观播放条的音频区块。你还可以在区块下方添加文章说明,方便用户了解音频内容。

3-2 音频播放设置

当你点击音频区块时,画面右侧会弹出设置面板。值得关注的设置项包括:

  • 自动播放:选择是否启用自动播放功能。启用后用户打开网站页面时,将自动播放音频内容。
  • 循环:选择是否启用循环播放功能。启用后音频内容将无限循环播放。
  • 预加载:选择音频文件的预加载方式。

默认情况下,自动播放和循环播放功能是关闭的。为了避免打扰用户,建议默认关闭这两个选项。”预加载”选项可以在页面加载时就开始加载音频文件,因此,用户点击播放后能更快开始播放。但是,预加载会消耗更多流量,所以建议权衡使用。

4.要点总结

本文主要介绍如何在WordPress的文章和页面中嵌入视频、音频等多媒体内容。使用YouTube、Vimeo等视频托管平台,您可以轻松将视频嵌入到网站中。WordPress会自动识别粘贴的视频URL,并生成便于视听的视频区块。

对于本地音频文件,你可以通过上传或拖放的方式,快速添加带有播放条的音频区块。而且,WordPress还支持Twitter、Instagram等多种热门平台内容的一键嵌入。

在嵌入多媒体内容时,需要注意平衡内容质量和用户体验。例如,选择清晰度适中、时长适当的视频,避免冗长的视频导致用户流失。在添加音频时,最好提供适度的音量,并默认关闭自动播放,以给用户更多控制权。图文并茂,适当引入视频音频,能使文章页面更丰富生动,但要避免滥用,以免适得其反。

另外,嵌入第三方内容时,需要考虑技术实现和知识产权问题。要谨慎使用未经授权的资源,以免侵犯他人权益。如果决定自己托管视频音频,需要权衡服务器成本和用户体验。合理使用内容分发网络(CDN)可以显著提升媒体文件的加载速度。

总的来说,WordPress强大的多媒体嵌入功能为网站创作提供了丰富的表现形式。结合一些技巧和经验,你也可以创造出引人入胜的精彩内容。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

相关 文章
Wordpress插件与设计 - Elementor 专业教程 23 - Facebook Comments小工具的设置和使用方法 - 特色图片
Elementor 专业教程 23 - Facebook Comments小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 26 - 简码小工具的设置和使用方法 - 特色图片
Elementor 基础教程 26 - 简码小工具的设置和使用方法
Wordpress插件与设计 - JetEngine 使用教程 1 - 如何制作自定义文章类型以及进行具体设置和使用方法 - 特色图片
JetEngine 使用教程 1 - 如何制作自定义文章类型以及进行具体设置和使用方法
Wordpress插件与设计 - WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家 - 特色图片
WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家
Wordpress插件与设计 - Elementor 基础教程 14 - 图像幻灯器小工具的设置和使用方法 - 特色图片
Elementor 基础教程 14 - 图像幻灯器小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 27 - Lottie小工具的设置和使用方法 - 特色图片
Elementor 专业教程 27 - Lottie小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 28 - Code Highlight小工具的设置和使用方法 - 特色图片
Elementor 专业教程 28 - Code Highlight小工具的设置和使用方法
Wordpress插件与设计 - WP教程 1 - 为什么WordPress是小白建站的不二之选? - 特色图片
WP教程 1 - 为什么WordPress是小白建站的不二之选?
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 17 - 轻松添加和编辑小工具,让网站与用户的互动更加有趣!
Wordpress插件与设计 - Elementor 基础教程 19 - 证明小工具的设置和使用方法 - 特色图片
Elementor 基础教程 19 - 证明小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - Mystrika - AI冷邮件软件 - 特色图片
Mystrika - AI冷邮件神器,个性化邮件,提高回复率和转化率,助力邮件营销更高效
YYP-2024-06-28-14-01-40
LiarLiar.ai - 透视谎言,AI虚拟“测谎仪”!
AI工具与服务推荐 - AI-Robot - 智能写作平台 - 特色图片
AI-Robot - 长臂猿智能写作平台,内容创作与营销更高效,助力业务增长
AI工具与服务推荐 - Fotor - 免费在线图片编辑器 - 特色图片
Fotor - 轻松P图,在线编辑超简易
AI工具与服务推荐 - Superhuman - AI电子邮件工具 - 特色图片
Superhuman - 高效团队必备AI邮件工具,释放生产力新高度
AI工具与服务推荐 - 零一万物(01.AI) - AI大语言模型平台 - 特色图片
01.AI - 引领AI 2.0新时代,为每个人带来触手可及的AGI技术
Canva Post
Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片
Canva新手指南8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级
Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片
Canva新手指南1 - 全面解析Canva文本框的基本功能!
Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片
Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择?
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Smm Post
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片
如何正确选择一款适合自己的视频编辑软件?
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片
从零到一!创建YouTube频道并上传视频的全流程
社媒运营推广 - Youtube - 解密YouTube用户互动策略!掌握频道人气的秘诀 - 特色图片
解密YouTube用户互动策略!掌握频道人气的秘诀
社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片
YouTube Shorts!解析短视频创作和收益的秘密
AI工具 分类筛选
AI Main Category checkbox