WordPress中如何用带变量的Iframe展示Spotify粉丝及关注按钮？

嘿，这个需求我刚好折腾过，给你一套完整的实现方案，亲测有效：

1. 从用户个人资料的Spotify链接中提取Artist ID #

首先，用户填的Spotify链接一般是类似https://open.spotify.com/artist/40Ojab0UtVQFjA76qXr8Ot?si=xxx这样的，我们需要从中抠出Artist ID（就是artist/后面那串字符），用来生成Spotify要求的URI格式。

用PHP的字符串处理就能搞定：

// 获取当前用户的Spotify链接（假设你在用户资料里加的自定义字段名是user_spotify_link）
$spotify_link = get_user_meta(get_current_user_id(), 'user_spotify_link', true);
if (!empty($spotify_link)) {
    // 用正则匹配提取Artist ID
    preg_match('/artist\/([a-zA-Z0-9]+)/', $spotify_link, $matches);
    $artist_id = $matches[1] ?? '';
    $spotify_uri = 'spotify:artist:' . $artist_id;
}

2. 在个人资料前端输出带粉丝数的Spotify关注按钮 #

Spotify给的size=detail参数的iframe刚好会显示粉丝数+关注按钮，我们只需要把提取到的Artist ID插进去就行，分两种实现方式：

方式一：直接在主题模板里硬编码 #

找到你主题里的用户个人资料模板（比如author.php或者自定义的single-user.php），插入这段代码：

<?php
// 获取当前作者的Spotify链接
$spotify_link = get_user_meta(get_queried_object_id(), 'user_spotify_link', true);
if (!empty($spotify_link)) {
    preg_match('/artist\/([a-zA-Z0-9]+)/', $spotify_link, $matches);
    $artist_id = $matches[1] ?? '';
    if ($artist_id) {
        // 拼接iframe的源地址
        $iframe_src = "https://open.spotify.com/follow/1/?uri=spotify:artist:$artist_id&size=detail&theme=light";
        // 输出iframe，记得用esc_url保证安全
        echo '<div class="spotify-follow-widget">';
        echo '<iframe src="' . esc_url($iframe_src) . '" width="300" height="56" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowtransparency="true"></iframe>';
        echo '</div>';
    }
}
?>

方式二：注册短代码（更灵活） #

如果你想在文章、页面或者自定义区块里调用这个按钮，可以在主题的functions.php里加这段代码注册短代码：

function spotify_follow_widget_shortcode($atts) {
    // 允许传入用户ID参数，默认取当前用户
    $atts = shortcode_atts(array(
        'user_id' => get_current_user_id(),
    ), $atts);
    
    $spotify_link = get_user_meta($atts['user_id'], 'user_spotify_link', true);
    if (empty($spotify_link)) return '';
    
    preg_match('/artist\/([a-zA-Z0-9]+)/', $spotify_link, $matches);
    $artist_id = $matches[1] ?? '';
    if (!$artist_id) return '';
    
    $iframe_src = "https://open.spotify.com/follow/1/?uri=spotify:artist:$artist_id&size=detail&theme=light";
    return '<div class="spotify-follow-widget"><iframe src="' . esc_url($iframe_src) . '" width="300" height="56" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowtransparency="true"></iframe></div>';
}
add_shortcode('spotify_follow', 'spotify_follow_widget_shortcode');

之后在需要的地方用[spotify_follow user_id="123"]就能调用（把123换成目标用户的ID就行）。

3. 样式微调（可选） #

如果想让按钮更美观，比如居中、加个上下间距，给主题的自定义CSS或者style.css加这段：

.spotify-follow-widget {
    margin: 20px 0;
    text-align: center;
}

踩坑提醒 #

• 一定要让用户填艺术家页面的Spotify链接，普通的歌曲、播放列表链接没法生成关注按钮；
• 如果用户填了短链（比如https://spoti.fi/xxxx），上面的正则可能匹配不到，这种情况需要额外处理跳转解析，但一般用户都会填完整的艺术家链接，所以问题不大。

内容的提问来源于stack exchange，提问作者B Project