WordPress通过简码插入bilibili视频

目录

一、前言

二、代码

三、WPCode

3.1、WPCode介绍

3.2、自定义代码到WPCode

3.3、使用简码

发布于：

WordPress通过简码插入bilibili视频 | Eucalyptushttps://blog.eucalyptus.cc/2025/03/25/BILIBILI%E7%AE%80%E7%A0%81/

一、前言

B站是国内非常受欢迎的视频分享平台，上面不仅内容丰富，而且很多视频制作精良、趣味十足。很多人，比如我，就喜欢将B站的视频通过 iframe 嵌入到自己的网页中，但这段代码又长又复杂，字符长度大约有230个，每次使用都很麻烦。为了让大家更方便地在 WordPress 网站中插入B站视频，我准备了一个简单实用的短代码教程，轻松几步就能搞定。

二、代码

将以下代码复制到网站主题的 functions.php 文件末尾即可完成添加。

/** * 添加插入Bilibili视频的短代码 * * @param array $atts 短代码属性数组 * @param string|null $content 短代码内容（未使用） * @return string 返回生成的HTML代码 */ function vbilibili_shortcode( $atts, $content = null ) { // 默认参数值 $defaults = array( 'av' => '', // Bilibili视频的AV号 'bv' => '', // Bilibili视频的BV号 'w' => '100%', // 默认宽度为100% ); // 解析短代码中的参数 $atts = shortcode_atts( $defaults, $atts ); // 如果参数 av 和 bv 都为空，则返回错误信息 if ( empty( $atts['av'] ) && empty( $atts['bv'] ) ) { return '<p>av 和 bv 不可为空</p>'; } // 如果参数 av 和 bv 同时存在，则返回错误信息 if ( ! empty( $atts['av'] ) && ! empty( $atts['bv'] ) ) { return '<p>av 和 bv 不可同时存在</p>'; } // 根据参数 av 或 bv 构建 iframe 的 URL if ( ! empty( $atts['av'] ) ) { $iframe_url = 'https://player.bilibili.com/player.html?aid=' . esc_attr( $atts['av'] ) . '&high_quality=1'; } elseif ( ! empty( $atts['bv'] ) ) { $iframe_url = 'https://player.bilibili.com/player.html?bvid=' . esc_attr( $atts['bv'] ) . '&high_quality=1'; } // 构建 iframe 的 HTML 代码，并直接应用内联样式 $iframe = '<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:0 auto;"><iframe src="' . $iframe_url . '" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>'; // 返回 iframe 的 HTML 代码 return $iframe; } add_shortcode( 'vbilibili', 'vbilibili_shortcode' );

将内容嵌入到<iframe>中，并通过设置相关属性来限制<iframe>内的页面无法在新窗口或新标签页中打开，从而防止跳转到 B 站。可以通过在<iframe>标签中添加 sandbox 属性，结合 allow 属性精确控制权限，确保用户在当前页面内浏览，不被引导至其他网站。这种方式有助于提升用户体验的连续性，同时防止意外跳转带来的干扰。

sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"

三、WPCode

如果你使用的是一个经常更新的主题，每次更新后都需要将代码添加到 functions.php 文件中，这显然十分麻烦。为了解决这个问题，你可以使用 WPCode 插件，在不修改主题文件的情况下，轻松实现自定义代码片段的添加和管理。

3.1、WPCode介绍

WPCode 是一款流行的WordPress插件，它允许用户在不修改主题文件的情况下，向WordPress网站添加自定义代码片段。这款插件非常适合需要在网站中添加额外功能的站长，例如，添加Google分析或百度统计的代码，或者插入自定义CSS、JavaScript等。

WPCode插件还提供了一个代码片段库，您可以在这个库里面找到经过验证的PHP代码片段，例如：禁用REST API、禁用 XML-RPC、禁用注释、允许 SVG 文件上传、禁用 Gutenberg、添加经典编辑器等，而无需为每个请求安装单独的插件。使用这个插件，还可以控制代码的激活状态，如果需要在调试情况下先不适用某个功能，可以先不激活，而不是直接删除。

总之非常方便，如果您的网站也是WordPress网站，那么站长建议您可以安装下这个插件试一试。

3.2、自定义代码到WPCode

3.3、使用简码

[vbilibili 参数名="参数值"][/vbilibili]

参数：

示例：

[vbilibili bv=BV1SoZ5YVEJg][/vbilibili]

注意：
Bilibili 视频的 AV 号或 BV 号是必须的，但只要输入 AV 号或 BV 号的其中一个即可。
Bilibili 视频的 AV 号不要带上 av