自定义短代码-给文章添加音乐弹窗-记录

我们常常希望在文章或页面中嵌入音乐，以营造特定的氛围。然而，有时我们并不想显示默认的播放器控件，只希望音乐在后台播放，将是否播放的选择权留给用户。此外，能够在需要的地方方便调用也是至关重要的。在本文中，我将介绍如何通过短代码轻松实现这一效果。󠄐󠄹󠅀󠄪󠄡󠄣󠄞󠄥󠄩󠄞󠄨󠄥󠄞󠄦󠄤󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄤󠄤󠄢󠄡󠄢󠄦󠄣󠄢󠄬󠅒󠅢󠄟󠄮󠇕󠆬󠅰󠇕󠆯󠅳󠇕󠆞󠆍󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

效果预览

步骤一：创建自定义短代码

首先，我们需要在主题的 functions.php 文件中添加一个自定义短代码。这个短代码将允许我们在文章中嵌入音频文件，同时隐藏默认的播放器控件。

1. 打开functions.php文件：你可以通过后台或直接通过FTP访问主题目录，找到并编辑functions.php文件。
2. 添加以下代码：

function custom_audio_shortcode($atts) {
    // 设置默认值
    $atts = shortcode_atts(
        array(
            'src' => '',  // 音频文件的URL
        ),
        $atts,
        'custom_audio'
    );

    // 如果没有提供src参数，则返回提示
    if (empty($atts['src'])) {
        return '请提供音频文件的URL。';
    }

    // 返回嵌入的HTML和JS，隐藏audio标签
    return '
    <!-- 音乐路径 -->
    <audio src="' . esc_url($atts['src']) . '" id="audio" style="display:none;"></audio>
    <!-- 核心 js 代码开始 -->
    <script src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/1426239465/music/musictc/Music.min.js"></script>
    <!-- 核心 js 结束 -->
    <!-- 音乐调用 js -->
    <script src="https://cdn.jsdelivr.net/gh/1426239465/music/musictc/musicty.js"></script>
    <!-- 音乐调用 js 结束 -->
    ';
}
add_shortcode('custom_audio', 'custom_audio_shortcode');

1. 这个代码段做了以下几件事：
   • 它定义了一个短代码 [custom_audio]，你可以在文章或页面中使用这个短代码来嵌入音乐。
   • 短代码接受一个 src 参数，即音频文件的URL。
   • 通过CSS将 <audio> 标签隐藏，确保页面中不会显示默认的播放器控件。（这里是直接移除）
   • 包含了必要的JavaScript文件，用于控制音频的播放。

步骤二：在文章中使用短代码

添加完短代码后，你可以在需要播放音乐的地方使用它：

[custom_audio src="https://cdn.jsdelivr.net/gh/1426239465/music/yinyue/破茧 - 张韶涵.mp3"]

将 src 参数替换为你自己的音频文件URL即可。自此不出意外，就是效果图中的那样

其它：测试和调整

1. 发布文章： 保存并发布你的文章，查看效果。你会发现文章中没有默认播放器的控件，但音乐文件已经嵌入其中，可以通过自定义的方式控制播放。即是图中效果，不需要再自行写css代码。
2. 调整样式和功能： 也可根据你的需要，做进一步调整functions.php中的代码，或者修改样式和JavaScript代码以实现更多自定义功能。