学习记录

快讯

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

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

  4周前 (03-18)

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

  1个月前 (03-18)

• 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 挂载配置文件等方法 (超出本教程范围)。

  1个月前 (03-13)