WordPress通过简码插入bilibili视频

发布于：Eucalyptus-Blog

一、前言

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 

示例：WordPress通过简码插入bilibili视频 - Eucalyptus