目录一、前言二、代码三、WPCode3.1、WPCode介绍3.2、自定义代码到WPCode3.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 pav 和 bv 不可为空/p; } // 如果参数 av 和 bv 同时存在则返回错误信息 if ( ! empty( $atts[av] ) ! empty( $atts[bv] ) ) { return pav 和 bv 不可同时存在/p; } // 根据参数 av 或 bv 构建 iframe 的 URL if ( ! empty( $atts[av] ) ) { $iframe_url https://player.bilibili.com/player.html?aid . esc_attr( $atts[av] ) . high_quality1; } elseif ( ! empty( $atts[bv] ) ) { $iframe_url https://player.bilibili.com/player.html?bvid . esc_attr( $atts[bv] ) . high_quality1; } // 构建 iframe 的 HTML 代码并直接应用内联样式 $iframe div styleposition:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:0 auto;iframe src . $iframe_url . styleposition:absolute; top:0; left:0; width:100%; height:100%; frameborderno scrollingno allowfullscreenallowfullscreen/iframe/div; // 返回 iframe 的 HTML 代码 return $iframe; } add_shortcode( vbilibili, vbilibili_shortcode );将内容嵌入到iframe中并通过设置相关属性来限制iframe内的页面无法在新窗口或新标签页中打开从而防止跳转到 B 站。可以通过在iframe标签中添加 sandbox 属性结合 allow 属性精确控制权限确保用户在当前页面内浏览不被引导至其他网站。这种方式有助于提升用户体验的连续性同时防止意外跳转带来的干扰。sandboxallow-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、自定义代码到WPCode3.3、使用简码[vbilibili 参数名参数值][/vbilibili]参数参数名可选值默认值解释是否必须av––Bilibili 视频的 AV 号是bv––Bilibili 视频的 BV 号是示例[vbilibili bvBV1SoZ5YVEJg][/vbilibili]注意Bilibili 视频的 AV 号或 BV 号是必须的但只要输入 AV 号或 BV 号的其中一个即可。Bilibili 视频的 AV 号不要带上 av
目录一、前言二、代码三、WPCode3.1、WPCode介绍3.2、自定义代码到WPCode3.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 pav 和 bv 不可为空/p; } // 如果参数 av 和 bv 同时存在则返回错误信息 if ( ! empty( $atts[av] ) ! empty( $atts[bv] ) ) { return pav 和 bv 不可同时存在/p; } // 根据参数 av 或 bv 构建 iframe 的 URL if ( ! empty( $atts[av] ) ) { $iframe_url https://player.bilibili.com/player.html?aid . esc_attr( $atts[av] ) . high_quality1; } elseif ( ! empty( $atts[bv] ) ) { $iframe_url https://player.bilibili.com/player.html?bvid . esc_attr( $atts[bv] ) . high_quality1; } // 构建 iframe 的 HTML 代码并直接应用内联样式 $iframe div styleposition:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:0 auto;iframe src . $iframe_url . styleposition:absolute; top:0; left:0; width:100%; height:100%; frameborderno scrollingno allowfullscreenallowfullscreen/iframe/div; // 返回 iframe 的 HTML 代码 return $iframe; } add_shortcode( vbilibili, vbilibili_shortcode );将内容嵌入到iframe中并通过设置相关属性来限制iframe内的页面无法在新窗口或新标签页中打开从而防止跳转到 B 站。可以通过在iframe标签中添加 sandbox 属性结合 allow 属性精确控制权限确保用户在当前页面内浏览不被引导至其他网站。这种方式有助于提升用户体验的连续性同时防止意外跳转带来的干扰。sandboxallow-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、自定义代码到WPCode3.3、使用简码[vbilibili 参数名参数值][/vbilibili]参数参数名可选值默认值解释是否必须av––Bilibili 视频的 AV 号是bv––Bilibili 视频的 BV 号是示例[vbilibili bvBV1SoZ5YVEJg][/vbilibili]注意Bilibili 视频的 AV 号或 BV 号是必须的但只要输入 AV 号或 BV 号的其中一个即可。Bilibili 视频的 AV 号不要带上 av
)
