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

我们常常希望在文章或页面中嵌入音乐,以营造特定的氛围。然而,有时我们并不想显示默认的播放器控件,只希望音乐在后台播放,将是否播放的选择权留给用户。此外,能够在需要的地方方便调用也是至关重要的。在本文中,我将介绍如何通过短代码轻松实现这一效果。

效果预览

图片[1]-自定义短代码-给需要的文章添加音乐弹窗-记录

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

首先,我们需要在主题的 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"]
图片[2]-自定义短代码-给需要的文章添加音乐弹窗-记录

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

其它:测试和调整

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