首页 > 文章专栏 > 正文

WordPress视频居中新手教程

在 WordPress 初期的版本中,仅仅是将视频居中显示,就常常让人感到头疼。

猫哥在帮助了许多新手之后,发现这并不是个例——它仍是大家在排版时最常问的问题之一。

好消息是,现在使用区块编辑器后,居中视频变得非常简单。但很多人在嵌入 YouTube 或 Vimeo 视频时仍然会遇到困难。

在本文中,我们将为你介绍在 WordPress 中居中视频最简便的方法。

如何在 WordPress 中居中视频

快速回答:如何居中视频

有两种方法:

  • 使用区块编辑器(现代 WordPress):利用内置对齐选项快速居中,或为自定义嵌入添加简单的 HTML。
  • 使用经典编辑器(旧版 WordPress):在文本视图中,用 <div style="text-align:center;"> 包裹你的视频嵌入代码。

为什么要居中视频?

默认情况下,WordPress 会将嵌入或上传的视频左对齐。这会让页面显得不平衡,尤其是当视频是主要内容时。居中视频可以让布局更干净、更专业:

  • 更好的视觉平衡:保持布局均匀,避免一侧出现多余空白。
  • 突出焦点:自然地将注意力吸引到视频上。
  • 改善用户体验:让内容流更顺畅、更易阅读。

这个小小的改变就能显著提升页面效果。

如何在区块编辑器中居中视频

最简单的方法:直接将 YouTube 或 Vimeo 的 URL 粘贴到编辑器中。WordPress 会自动将其转换为视频块。

你也可以手动添加视频块,或从媒体库上传视频。

在区块编辑器中粘贴视频嵌入代码

选中视频块,点击工具栏中的“对齐”按钮,从下拉菜单中选择“居中对齐”。

将视频居中对齐

预览并发布即可看到视频居中显示。

居中后的视频预览

如果你想使用完整的嵌入代码(例如设置视频开始播放时间),或使用 WordPress 不支持自动嵌入的平台,可以改用 自定义 HTML 块

对于已有视频块的情况,点击视频块工具栏上的三点图标,选择“以 HTML 方式编辑”,然后包裹以下代码:

<div style="text-align:center;">
/// 你的视频嵌入代码
</div>

如果你的主题支持“宽幅”和“全宽”对齐,你还可以在工具栏中选择这些选项,让视频进一步延伸。

如何在经典编辑器中居中视频

如果你仍在使用经典编辑器,先切换到“文本”视图,然后输入:

<div style="text-align:center;">
/// 你的视频嵌入代码
</div>

将“你的视频嵌入代码”替换为实际的视频嵌入代码即可。

在经典编辑器中居中视频

保存并预览,视频就会居中显示。

经典编辑器居中视频预览

常见问题

为什么看不到“宽幅”和“全宽”对齐选项?
这些选项需要你的主题支持。如果未显示,只能使用标准“居中对齐”。

居中视频会影响移动端显示吗?
不会。WordPress 区块编辑器会自动处理响应式缩放,视频在手机和平板上同样美观。

可以居中自己上传的视频吗?
可以。方法同上,选中视频块后使用对齐工具栏即可。

希望本文能帮助你轻松居中视频。更多 WordPress 技巧,欢迎访问猫哥网站。

文章标签:#WordPress#区块编辑器#嵌入视频#经典编辑器#视频居中

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/wordpress视频居中新手教程