WordPress Block 小工具自定义社交图标

前言

自从 WordPress 开始使用 Block 编辑器，新版小工具对用户的不同需求适配性并不优秀。如果想要继续使用旧版工具，还可以选择屏蔽新版编辑器。然而，在使用社交小工具时发现无法支持中国专属社交平台图标，例如微博、QQ、微信和哔哩哔哩。为了满足这些需求，我们可以自定义现有社交 Block 小工具，以实现对国内社交图标的支持。

WordPress Block 小工具自定义社交图标

代码解析

以下代码将实现对 WordPress Block 社交小工具的自定义，将新增并以 SVG 的形式加入微博、QQ、微信和哔哩哔哩图标。

/**
 * 过滤社交链接区块的内容，替换或添加自定义图标。
 *
 * @package lerm
 * @link   https://lerm.net.
 *
 * @param string $block_content 区块的 HTML 内容。
 * @param array  $block         区块的完整数据，包括名称和属性。
 * @return string 修改后的区块内容。
 */
function social_link_icon_classes( $block_content, $block ) {
	// 确保仅修改社交链接（social-link）区块。
	if ( strpos( $block_content, 'wp-social-link' ) === false ) {
		return $block_content;
	}

	// 定义社交平台与自定义图标或样式的映射关系。
	$custom_svgs = array(
		'weibo'    => array(
			'domains' => array( 'weibo.com', 'weibo.cn' ), // 对应微博的域名
			'svg'     => '<svg  width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"><path d="..."></path></svg>', // 微博图标 SVG
		),
		'qq'       => array(
			'domains' => array( 'qq.com' ), // 对应 QQ 的域名
			'svg'     => '<svg  width="21" height="24" viewBox="0 0 21 24" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"><path d="..."></path></svg>', // QQ 图标 SVG
		),
		'weixin'   => array(
			'domains' => array( '#wechat', '#weixin' ), // 对应微信的标识
			'svg'     => '<svg  width="27" height="24" viewBox="0 0 27 24" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"><path d="..."></path></svg>', // 微信图标 SVG
		),
		'bilibili' => array(
			'domains' => array( 'bilibili.com' ), // 对应哔哩哔哩的域名
			'svg'     => '<svg  width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"><path d="..."></path></svg>', // 哔哩哔哩图标 SVG
		),
	);

	// 替换默认 SVG 图标为自定义图标。
	$block_content = preg_replace_callback(
		'/<a[^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/i',
		function ( $matches ) use ( $custom_svgs ) {
			$url     = $matches[1]; // 提取链接地址
			$content = $matches[2]; // 提取链接内容

			foreach ( $custom_svgs as $platform ) {
				foreach ( $platform['domains'] as $domain ) {
					// 检查链接地址是否包含指定域名或标识
					if ( strpos( $url, $domain ) !== false ) {
						return str_replace( $content, $platform['svg'], $matches[0] ); // 替换为自定义 SVG
					}
				}
			}

			// 默认返回原始内容（如果未匹配到自定义图标）。
			return $matches[0];
		},
		$block_content
	);

	// 可选的字符串替换（如果定义了 $search_replace）。
	if ( isset( $search_replace['search'], $search_replace['replace'] ) ) {
		$block_content = str_replace( $search_replace['search'], $search_replace['replace'], $block_content );
	}

	// 应用过滤器以允许其他开发者进一步修改内容。
	return apply_filters( "lerm/block/{$block['blockName']}/content", $block_content, $block );
}

// 将自定义函数挂钩到社交链接区块的渲染过滤器中。
add_filter( 'render_block_core/social-link', 'social_link_icon_classes', 10, 2 );

代码实现说明

  1. 定义映射关系：
    • 使用 $custom_svgs 数组映射社交平台的域名和 SVG 图标。
    • 微博、QQ、微信和哔哩哔哩均对应各自的域名或标识。
  2. 替换逻辑：
    • 通过 preg_replace_callback 函数匹配区块中的 <a> 标签，并根据链接地址判断所属平台。
    • 如果匹配到对应的域名或标识，则将默认图标替换为自定义 SVG 图标。
  3. 挂钩机制：
    • 使用 add_filter 将 social_link_icon_classes 函数挂载到 render_block_core/social-link 钩子中，以在社交链接区块渲染时生效。

使用方法：

插入社交图标小工具，点击Link,点击图标，在输入框中输入链接社交网站链接即可。

效果展示

在上述代码实现后，WordPress 的社交链接小工具将支持显示国内社交平台（微博、QQ、微信、哔哩哔哩）的图标，并且图标均为 SVG 格式，支持高分辨率显示。

此方法有效扩展了 WordPress 默认功能，能够更好地满足国内用户的需求，可根据需求增加需要的社交图标。也可以微信二维码，可以看本页的侧边栏微信图标，参照一下文章。

CSS实现鼠标悬停弹出微信二维码

发表评论

游客欢迎您