WordPress编辑器直接粘贴B站链接的方法

网上找了很久，文章加入B站链接相对比较麻烦，基本都需要手动粘贴短码，后来想到可以把古藤堡编辑器里很多用不到的外网嵌入区块修改下使用，下面方法是两种，一个是直接粘贴到编辑器，一个是替换掉vimeo嵌入区块，粘贴bilibili的链接自动识别。

为了实现在 WordPress 站点中方便地嵌入 Bilibili 视频这一目标，采用了两种主要的方法：

1. 自动嵌入 Bilibili 链接： 当用户在文章内容中粘贴 Bilibili 视频链接（包含在 <a> 标签内）时，这些链接会被自动替换为实际的 Bilibili 视频嵌入代码，无需用户手动添加 iframe 等代码。
2. 替换 Vimeo 嵌入模块： WordPress 的 Gutenberg 编辑器默认提供了 Vimeo 的嵌入模块。为了更贴合国内用户的使用习惯，将该 Vimeo 模块的功能替换为嵌入 Bilibili 视频。

代码结构与功能详解：

<?php
/**
 * 自动嵌入 Bilibili 视频
 */
function auto_embed_bilibili( $content ) {
    // 匹配 Bilibili 视频链接
    $pattern = '/<a href="https?:\/\/.*?bilibili\.com\/video\/(av\d+|BV\w+).*?"[^>]*>.*?<\/a>/i';

    // 替换链接为嵌入代码
    $content = preg_replace_callback( $pattern, 'replace_bilibili_link', $content );

    return $content;
}
add_filter( 'the_content', 'auto_embed_bilibili' );

/**
 * 替换 Bilibili 链接为嵌入 iframe
 *
 * @param array $matches 匹配到的链接信息.
 * @return string Bilibili 嵌入 iframe 代码.
 */
function replace_bilibili_link( $matches ) {
    $url = $matches[0];
    if (preg_match('/bilibili\.com\/video\/(av\d+|BV\w+)/i', $url, $video_matches)) {
        $video_id = htmlspecialchars($video_matches[1]);
        $embed_code = '<iframe src="https://player.bilibili.com/player.html?bvid=' . $video_id . '" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>';
        return $embed_code;
    }
    return $url; // 如果不是 Bilibili 链接，则返回原始链接
}

/**
 * 替换 Vimeo 嵌入为 Bilibili 嵌入
 */
function replace_vimeo_with_bilibili_embed() {
    global $wp_embed;

    // 移除 Vimeo 的默认嵌入处理函数
    wp_embed_unregister_handler( 'vimeo' );

    // 注册 Bilibili 的嵌入处理函数来替换 Vimeo
    wp_embed_register_handler(
        'bilibili_replaced_vimeo',
        '#https?://(?:www\.)?bilibili\.com/(?:video/|BV)([a-zA-Z0-9]+)(?:/.*)?#i',
        'wp_embed_handler_bilibili_replaced_vimeo'
    );
}
add_action( 'init', 'replace_vimeo_with_bilibili_embed' );

/**
 * Bilibili 嵌入处理函数 (替换 Vimeo)
 *
 * @param array $matches 正则匹配结果.
 * @param array $attr    属性数组.
 * @param string $url     原始 URL.
 * @param array $rawattr 原始属性数组.
 * @return string          HTML 嵌入代码.
 */
function wp_embed_handler_bilibili_replaced_vimeo( $matches, $attr, $url, $rawattr ) {
    $video_id = htmlspecialchars($matches[1]);
    $embed = '<iframe src="https://player.bilibili.com/player.html?bvid=' . $video_id . '" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>';
    return apply_filters( 'embed_bilibili_replaced_vimeo', $embed, $matches, $attr, $url, $rawattr );
}

提供的代码主要包含两个核心功能模块，分别通过不同的函数实现。

模块一：自动嵌入 Bilibili 视频

这部分代码通过 WordPress 的内容过滤钩子 (the_content)，在文章内容输出到前端页面之前，检查并替换其中的 Bilibili 视频链接。

• function auto_embed_bilibili( $content ):
  • 用途： 定义一个名为 auto_embed_bilibili 的函数，该函数的作用是接收 WordPress 文章的内容 ($content)，并在其中查找特定的 Bilibili 视频链接，然后进行替换。
  • 实现方式： 该函数通过 add_filter( 'the_content', 'auto_embed_bilibili' ); 挂载到 WordPress 的 the_content 过滤器上。这意味着在 WordPress 准备显示文章内容时，会先执行这个函数。
  • 内部逻辑：
    • $pattern = '/<a href="https?:\/\/.*?bilibili\.com\/video\/(av\d+|BV\w+).*?"[^>]*>.*?<\/a>/i';: 定义了一个正则表达式 $pattern。这个正则表达式用于在文章内容中查找符合特定模式的 Bilibili 视频链接。
      • <a href=": 匹配 HTML <a> 标签的 href 属性开始部分。
      • https?:\/\/: 匹配 http:// 或 https://。
      • .*?: 匹配任意字符零次或多次，非贪婪模式。
      • bilibili\.com\/video\/: 匹配 bilibili.com/video/ 字符串。
      • (av\d+|BV\w+): 这是一个捕获分组，用于匹配 Bilibili 视频的 av 号（av 后面跟着一个或多个数字）或者 BV 号（BV 后面跟着一个或多个字母或数字）。| 表示“或”的关系。
      • .*?: 匹配任意字符零次或多次，非贪婪模式。
      • "[^>]*>": 匹配双引号、非 > 字符零次或多次，以及 > 字符，即 <a> 标签的结束部分。
      • .*?: 匹配任意字符零次或多次，非贪婪模式，用于匹配链接文本。
      • <\/a>: 匹配 HTML </a> 标签的结束部分。
      • /i: 正则表达式的修饰符，表示匹配时不区分大小写。
    • $content = preg_replace_callback( $pattern, 'replace_bilibili_link', $content );: 调用 preg_replace_callback 函数。这个函数会在 $content 中查找所有符合 $pattern 的链接，并对每个匹配到的链接调用 replace_bilibili_link 函数进行处理。处理结果会替换掉原来的链接。
    • return $content;: 函数最终返回经过处理后的文章内容。
• function replace_bilibili_link( $matches ):
  • 用途： 定义一个名为 replace_bilibili_link 的回调函数，该函数用于将匹配到的 Bilibili 链接替换为实际的嵌入代码。
  • 参数： 接收一个 $matches 数组作为参数，这个数组包含了 preg_replace_callback 函数匹配到的信息。$matches[0] 是完整的匹配项（即完整的 <a> 标签），$matches[1] 是正则表达式中第一个捕获分组的内容（即 av 号或 BV 号）。
  • 内部逻辑：
    • $url = $matches[0];: 将完整的匹配项（即原始的 <a> 标签）赋值给 $url 变量。
    • if (preg_match('/bilibili\.com\/video\/(av\d+|BV\w+)/i', $url, $video_matches)) { ... }: 再次使用 preg_match 函数，从完整的链接 $url 中提取 Bilibili 视频的 av 号或 BV 号，并将匹配结果存储在 $video_matches 数组中。
    • $video_id = htmlspecialchars($video_matches[1]);: 从 $video_matches 数组中获取捕获到的视频 ID（av 号或 BV 号），并使用 htmlspecialchars() 函数对其进行 HTML 转义，以提高安全性。
    • $embed_code = '<iframe src="https://player.bilibili.com/player.html?bvid=' . $video_id . '" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>';: 构建 Bilibili 视频的 iframe 嵌入代码。这里使用了 bvid 参数，并将提取到的 $video_id 插入到 src 属性中。同时设置了 width 为 100%，height 为 500px，移除了边框，并允许全屏播放。
    • return $embed_code;: 函数返回生成的 iframe 嵌入代码，这个代码将替换掉原始的 Bilibili 链接。
    • return $url;: 如果 $url 中没有匹配到 Bilibili 视频链接，则函数返回原始的 $url，不做任何修改。

模块二：替换 Vimeo 嵌入模块为 Bilibili

这部分代码用于修改 WordPress 编辑器中处理视频嵌入的行为，将原本用于 Vimeo 的模块替换为用于 Bilibili。

• function replace_vimeo_with_bilibili_embed() { ... }:
  • 用途： 定义一个名为 replace_vimeo_with_bilibili_embed 的函数，该函数负责注销 Vimeo 的嵌入处理器并注册 Bilibili 的嵌入处理器。
  • 实现方式： 该函数通过 add_action( 'init', 'replace_vimeo_with_bilibili_embed' ); 挂载到 WordPress 的 init 动作钩子上，确保在 WordPress 初始化时执行。
  • 内部逻辑：
    • global $wp_embed;: 声明使用 WordPress 全局对象 $wp_embed，该对象管理 WordPress 的嵌入功能。
    • wp_embed_unregister_handler( 'vimeo' );: 调用 $wp_embed 对象的 unregister_handler 方法，移除名为 'vimeo' 的嵌入处理器，从而禁用 WordPress 默认对 Vimeo 链接的处理。
    • wp_embed_register_handler( ... );: 调用 $wp_embed 对象的 register_handler 方法，注册一个新的嵌入处理器来处理 Bilibili 链接，并将其关联到之前 Vimeo 使用的机制上。
      • 'bilibili_replaced_vimeo': 这是为新的嵌入处理器指定的唯一名称。
      • '#https?://(?:www\.)?bilibili\.com/(?:video/|BV)([a-zA-Z0-9]+)(?:/.*)?#i': 这是用于匹配 Bilibili 视频 URL 的正则表达式，与自动嵌入部分类似，用于识别 Bilibili 视频链接。
      • 'wp_embed_handler_bilibili_replaced_vimeo': 指定当用户在编辑器中粘贴 Bilibili 链接时，将调用的函数名称。
• function wp_embed_handler_bilibili_replaced_vimeo( $matches, $attr, $url, $rawattr ):
  • 用途： 定义一个回调函数，用于处理通过替换 Vimeo 机制粘贴的 Bilibili 链接，并生成嵌入代码。
  • 参数： 与 replace_bilibili_link 函数类似，接收匹配到的 URL 信息等参数。
  • 内部逻辑：
    • $video_id = htmlspecialchars($matches[1]);: 从 $matches 数组中获取捕获到的视频 ID（av 号或 BV 号），并进行 HTML 转义。
    • $embed = '<iframe src="https://player.bilibili.com/player.html?bvid=' . $video_id . '" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>';: 构建 Bilibili 视频的 iframe 嵌入代码，与自动嵌入部分生成的代码格式相同。
    • return apply_filters( 'embed_bilibili_replaced_vimeo', $embed, $matches, $attr, $url, $rawattr );: 对生成的嵌入代码应用一个过滤器，并返回嵌入代码。

这段代码通过两种方式增强了 WordPress 对 Bilibili 视频的支持。第一部分实现了在文章内容中自动将 Bilibili 链接转换为嵌入视频的功能。第二部分则更进一步，直接替换了 WordPress 编辑器中 Vimeo 的嵌入模块，使得用户在编辑器中粘贴 Bilibili 链接时，能够像使用 Vimeo 模块一样方便地嵌入 Bilibili 视频。这两部分代码共同作用，为用户提供了更便捷的 Bilibili 视频嵌入体验。

将以上代码添加到主题的 functions.php 文件（推荐使用子主题）后，当在 Gutenberg 编辑器中粘贴一个符合 Bilibili 视频 URL 格式的链接时，WordPress 将不再尝试将其识别为 Vimeo 视频，而是会使用定义的逻辑将其嵌入为 Bilibili 视频。