每天分享一点点，
希望能给大家带来一点点帮助！
        找回密码
当前位置：多一点点 学习记录 正文

WordPress古藤堡编辑器嵌入区块功能列表

2025-03-18 分类：学习记录 阅读(9) 评论(0)
序号名称用途国内访问状态
1Flickr 嵌入照片分享与托管（国际平台）不可访问
2Vimeo 嵌入高清视频分享（创作者社区）不可访问
3Animoto 嵌入在线视频制作工具（模板化创作）需VPN
4Cloudup 嵌入文件快速分享与云存储不可访问
5Crowdsignal 嵌入创建在线调查与投票部分功能可用
6Dailymotion 嵌入视频分享（欧洲主流平台）不可访问
7Imgur 嵌入图片托管与表情包社区不可访问
8Issuu 嵌入电子杂志与出版物展示部分受限
9Kickstarter 嵌入创意项目众筹平台不可访问
10Mixcloud 嵌入音乐与播客混音分享不可访问
11Pocket Casts 嵌入播客订阅与管理工具需VPN
12Reddit 嵌入社交新闻与兴趣社区不可访问
13ReverbNation 嵌入独立音乐人推广平台不可访问
14Screencast 嵌入屏幕录制与视频托管部分功能可用
15Scribd 嵌入电子书/文档共享（需订阅）不可访问
16SmugMug 嵌入专业摄影师图片展示与销售不可访问
17Speaker Deck 嵌入幻灯片与演讲展示平台需VPN
18TikTok 嵌入短视频创作与分享（国际版）需使用国内版抖音
19TED 嵌入科技/教育类演讲视频可访问（国内镜像）
20Tumblr 嵌入轻博客与多媒体内容社区不可访问
21VideoPress 嵌入视频托管与播放（WordPress关联服务）不可访问
22WordPress.tv 嵌入WordPress教程与活动视频不可访问
23Amazon Kindle 嵌入电子书内容嵌入（国际版服务）不可访问
24Pinterest 嵌入图片灵感收集与分类不可访问
25Wolfram 嵌入数学计算与知识引擎需VPN
26Bluesky 嵌入去中心化社交平台（Twitter替代品）不可访问
赞(0) 打赏
未经允许不得转载：多一点点 » WordPress古藤堡编辑器嵌入区块功能列表
分享到

相关推荐

评论 抢沙发

取消

吐血推荐

小米、OPPO和vivo正在与印度制造商就在当地生产手机向全球出口展开磋商。

快讯

  • WordPress古藤堡编辑器嵌入区块功能列表

    序号名称用途国内访问状态
    1Flickr 嵌入照片分享与托管（国际平台）不可访问
    2Vimeo 嵌入高清视频分享（创作者社区）不可访问
    3Animoto 嵌入在线视频制作工具（模板化创作）需VPN
    4Cloudup 嵌入文件快速分享与云存储不可访问
    5Crowdsignal 嵌入创建在线调查与投票部分功能可用
    6Dailymotion 嵌入视频分享（欧洲主流平台）不可访问
    7Imgur 嵌入图片托管与表情包社区不可访问
    8Issuu 嵌入电子杂志与出版物展示部分受限
    9Kickstarter 嵌入创意项目众筹平台不可访问
    10Mixcloud 嵌入音乐与播客混音分享不可访问
    11Pocket Casts 嵌入播客订阅与管理工具需VPN
    12Reddit 嵌入社交新闻与兴趣社区不可访问
    13ReverbNation 嵌入独立音乐人推广平台不可访问
    14Screencast 嵌入屏幕录制与视频托管部分功能可用
    15Scribd 嵌入电子书/文档共享（需订阅）不可访问
    16SmugMug 嵌入专业摄影师图片展示与销售不可访问
    17Speaker Deck 嵌入幻灯片与演讲展示平台需VPN
    18TikTok 嵌入短视频创作与分享（国际版）需使用国内版抖音
    19TED 嵌入科技/教育类演讲视频可访问（国内镜像）
    20Tumblr 嵌入轻博客与多媒体内容社区不可访问
    21VideoPress 嵌入视频托管与播放（WordPress关联服务）不可访问
    22WordPress.tv 嵌入WordPress教程与活动视频不可访问
    23Amazon Kindle 嵌入电子书内容嵌入（国际版服务）不可访问
    24Pinterest 嵌入图片灵感收集与分类不可访问
    25Wolfram 嵌入数学计算与知识引擎需VPN
    26Bluesky 嵌入去中心化社交平台（Twitter替代品）不可访问

  • 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 视频。

  • 1Panel 面板： PHP 8.2 环境安装 Imagick 扩展

    本教程将指导您如何在 1Panel 面板的 Docker PHP 环境中，为 PHP 8.2 版本安装 Imagick 扩展。 请按照以下步骤操作：

    前提条件：

    • 您已成功登录 1Panel 面板。
    • 您的 WordPress 网站正在使用 1Panel 提供的 Docker 部署的 PHP 8.2 环境 (或其他您需要安装 Imagick 扩展的 PHP 8.2 环境)。

    步骤 1: 进入 PHP 8.2 Docker 容器终端

    1. 在 1Panel 面板中，找到您的 PHP 8.2 容器。 通常在 "容器" 或 "Docker" 管理菜单下，容器名称可能类似于 php-fpm-8.2 或包含 8.2 字样。 请根据您的实际容器名称为准。
    2. 进入容器终端。 使用 1Panel 提供的 "终端" (Terminal) 或 "控制台" (Console) 功能，或者使用 "Web Shell" 或 SSH 终端，通过 docker exec -it <您的PHP 8.2容器名称> /bin/bash 命令进入 PHP 8.2 Docker 容器的 Bash shell 环境。 示例命令 (请替换 <您的PHP 8.2容器名称> 为实际容器名称): Bashdocker exec -it php-fpm-8.2 /bin/bash

    步骤 2: 更新容器软件包索引

    在 PHP 容器终端中，执行以下命令更新 Alpine Linux 的软件包索引：

    Bash

    apk update

    步骤 3: 安装 Imagick 扩展

    使用 apk 包管理器安装 PHP 8.2 版本的 Imagick 扩展：

    Bash

    apk add php82-extension-imagick

    步骤 4: 验证 Imagick 模块是否安装成功

    安装完成后，运行以下命令，列出已安装的 PHP 模块：

    Bash

    php -m

    检查命令输出的 [PHP Modules] 部分，确认是否包含 imagick 模块。 如果看到 imagick，则表示安装成功。

    步骤 5: 重启 PHP-FPM 服务

    在 PHP 容器终端中，使用以下命令重启 PHP-FPM 服务，使 Imagick 扩展生效：

    Bash

    rc-service php-fpm restart

    步骤 6: 退出 PHP 容器终端

    在 PHP 容器终端中，输入 exit 命令并回车，退出容器的 shell 环境。

    步骤 7: 清除 WordPress 缓存 (如果适用)

    如果您为 WordPress 网站使用了缓存插件，请清除 WordPress 缓存，确保 WordPress 能够正确识别新的 PHP 扩展。

    步骤 8: 检查 WordPress 后台 Imagick 状态

    重新登录 WordPress 后台，检查之前提示 Imagick 模块未安装或未配置的页面，确认错误提示是否消失，或者 Imagick 相关的功能是否可以正常使用。

    恭喜！ 您已成功在 1Panel 的 PHP 8.2 环境中安装并启用了 Imagick 扩展。

    故障排除提示:

    • 如果 apk update 或 apk add 命令失败， 请检查您的容器网络连接是否正常。
    • 如果 apk add php82-extension-imagick 命令提示 "package not found"， 请尝试使用 apk search php-extension-imagick 命令搜索可用的 Imagick 软件包，并尝试安装其他匹配您 PHP 版本的软件包 (例如 php-extension-imagick, php8.2-extension-imagick 等)。
    • 如果在 php -m 的输出中没有看到 imagick 模块， 请重新检查安装步骤，并确认是否重启了 PHP-FPM 服务。
    • 如果 WordPress 后台仍然提示 Imagick 未安装， 请尝试清除 WordPress 缓存，并检查您是否为正确的 PHP 版本容器安装了 Imagick 扩展。

    重要说明:

    • 本教程适用于 1Panel 面板中 Docker 部署的 PHP 8.2 环境，并且假设您的 PHP 容器基于 Alpine Linux 系统 (使用 apk 包管理器)。 如果您的 PHP 环境配置不同，请根据实际情况调整操作步骤。
    • 在 Docker 容器中进行的任何更改都是 临时的。 如果容器被删除或重新创建，您需要 重新执行本教程中的步骤 来安装 Imagick 扩展。 为了持久化您的更改，您可能需要构建自定义的 Docker 镜像，或者使用 Docker Volume 挂载配置文件等方法 (超出本教程范围)。

热门专题

随机推荐

这里是广告位。

最新评论

    网站统计

    • 日志总数：3
    • 评论总数：0
    • 标签总数：7
    • 页面总数：9
    • 分类总数：8
    • 链接总数：1
    • 用户总数：4
    • 最后更新：2025-03-18

    贡献力量希望对你有所帮助

    每天贡献一点点资源给大家分享

    觉得文章有用就打赏一下文章作者

    非常感谢你的打赏，我们将继续提供更多优质内容，让我们一起创建更加美好的网络世界！

    支付宝扫一扫

    微信扫一扫

    登录

    找回密码

    注册