Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

Watch this video on YouTube


The final result:

Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

In this tutorial we are going to add a Button for HTML5 audio tag in order to insert music in WordPress easily.

It is easy to implement.

 

【Step 1】 Copy the following code and paste it into the functions.php file.

Paste it in the last paragraph but within the PHP tag. Be careful of the last PHP close tag, we need to put before it.

Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

Then update the functions.php file. You will able to see a new button tag called “audio” in your WordPress Editor default text view.

 

【Step 2】 Insert the audio player when you need it. In post editor, switch to the Text view. Find the “audio” tag button and click on it. It would generate part of HTML5 audio code until the URL, like this:

Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

Past your music link, and then click on the audio tag again it would be closed the audio tag. So the result would be something like this: (The highlighted is my music URL)

Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

When you switch back to the Visual view, it looks like this:

Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

After you publish it, people will see like this:

Add music/audio insert button to WordPress post Editor | Create custom tag in Editor for WordPress

That’s it!

 

Reference: Quicktags API

 

</catmee> 文章全部原创、谢绝转载,作者「BianLei」,如果喜欢欢迎分享链接,相关内容参见本站版权声明
如果您觉得本站的存在对您多少有所帮助,可以用手机支付宝扫一扫以下二维码支付任意金额作为支持:支付宝
本站相关:QQ空间 | Facebook
Tagged , . Bookmark the permalink.

Create code highlighter without plugin by use “google-code-prettify” in WordPress
Create code highlighter without plugin by use “google-code-prettify” in WordPress

My 3 days itinerary in Shenzhen: People, places, and first impression
My 3 days itinerary in Shenzhen: People, places, and first impression

Dying Light – How to cheat in Bozak Horde, unlimited challenge timer
Dying Light – How to cheat in Bozak Horde, unlimited challenge timer

How to Cloak Affiliate Links in WordPress without Plugin
How to Cloak Affiliate Links in WordPress without Plugin

2 Ways to notify WordPress comments author upon their replies without plugins
2 Ways to notify WordPress comments author upon their replies without plugins

COMMENTS: 6

  1. Weidan says:

    老大你是哪里人啊= =

  2. Anonymous says:

    您好,请问可以允许我把您这段关于音乐播放插件的代码复制到我的个人站点文件中吗?纯粹作为站点的代码使用,不会出现在文章中。如果可以的话,不胜感激!

Comment Anonymously? No Problem! | 可以匿名评论了我会说?

Fill up Email address to subscribe reply and display your avatar from Gravatar (If any)
填写邮箱即可显示您在Gravatar的头像