我们常常希望在文章或页面中嵌入音乐,以营造特定的氛围。然而,有时我们并不想显示默认的播放器控件,只希望音乐在后台播放,将是否播放的选择权留给用户。此外,能够在需要的地方方便调用也是至关重要的。在本文中,我将介绍如何通过短代码轻松实现这一效果。
效果预览
步骤一:创建自定义短代码
首先,我们需要在主题的 functions.php
文件中添加一个自定义短代码。这个短代码将允许我们在文章中嵌入音频文件,同时隐藏默认的播放器控件。
- 打开
functions.php
文件:你可以通过后台或直接通过FTP访问主题目录,找到并编辑functions.php
文件。 - 添加以下代码:
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');
- 这个代码段做了以下几件事:
- 它定义了一个短代码
[custom_audio]
,你可以在文章或页面中使用这个短代码来嵌入音乐。 - 短代码接受一个
src
参数,即音频文件的URL。 - 通过CSS将
<audio>
标签隐藏,确保页面中不会显示默认的播放器控件。(这里是直接移除) - 包含了必要的JavaScript文件,用于控制音频的播放。
- 它定义了一个短代码
步骤二:在文章中使用短代码
添加完短代码后,你可以在需要播放音乐的地方使用它:
[custom_audio src="https://cdn.jsdelivr.net/gh/1426239465/music/yinyue/破茧 - 张韶涵.mp3"]
将 src
参数替换为你自己的音频文件URL即可。自此不出意外,就是效果图中的那样
其它:测试和调整
- 发布文章: 保存并发布你的文章,查看效果。你会发现文章中没有默认播放器的控件,但音乐文件已经嵌入其中,可以通过自定义的方式控制播放。即是图中效果,不需要再自行写css代码。
- 调整样式和功能: 也可根据你的需要,做进一步调整
functions.php
中的代码,或者修改样式和JavaScript代码以实现更多自定义功能。
© 版权声明
THE END