Tạo một khung phát nhạc MP3 và ZippyShare đơn giản trong bài
Quy trình thực hiện
Trong bài này chúng ta có thể làm rất đơn giản bằng chức năng custom field của WordPress. Để thuận tiện trong việc tạo field cũng như khuyến khích, mình sẽ sử dụng plugin Advanced Custom Field để làm.
Đầu tiên là chúng ta sẽ tạo 2 field khác nhau, một field để nhập link mp3 và một field là để nhập ID của bài hát trên ZippyShare. Sau đó chúng ta sẽ chèn cái player vào theme và gọi giá trị trong field ra để thay thế link cần phát nhạc là được. Quá dễ dàng.
Cách thực hiện
Trước tiên bạn tạo một field loại là Text với tên là link_mp3 như sau, các phần khác để nguyên cũng được:
Kế tiếp là tạo link ZippyShare với tên là link_zippyshare, cũng là loại Text luôn nhé
Ok, bây giờ khi vào Post bạn sẽ thấy nó có hai khung nhập link như thế này:
Tích hợp Player vào theme
Tích hợp MP3 Player (HTML5)
Bước này ta sẽ chỉ cần nhúng một file Javascript vào theme mà thôi chứ không làm gì nhiều đâu. Hãy tải file này về máy, giải nén nó ra và copy file audio.min.js và file player-graphics.gif trong thư mục audiojs vào thư mục theme đang sử dụng.
Sau đó mở file funtions.php chèn đoạn code sau vào:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/* Mp3 Player Core */function mp3_javascript() { wp_enqueue_script( 'audio-script', get_template_directory_uri() . '/audio.min.js', array(), true );}add_action( 'wp_enqueue_scripts', 'mp3_javascript' );function mp3_head() { echo '<script> audiojs.events.ready(function() { var as = audiojs.createAll(); }); </script>';}add_action( 'wp_head', 'mp3_head' ); |
Kế tiếp mở file single.php, tìm the_content(); và thêm đoạn ở dưới lên trên hoặc xuống dưới nó.
|
1
2
3
|
<?php if ( get_field('link_mp3') ) {?> <audio src="<?php the_field('link_mp3'); ?>" preload="auto" /><?php } ?> |
Ok rồi, hãy vào một bài và đăng link có đuôi .mp3 vào phần Link Mp3 xem nó có hiển thị chưa.
Chèn player ZippyShare
Cũng mở file single.php và chèn đoạn dưới đây vào ngay bên trên hoặc dưới the_content():
|
1
2
3
|
<?php if ( get_field('link_zippyshare') {?> <script type="text/javascript">var zippywww="11";var zippyfile="<?php the_field('link_zippyshare'); ?>";var zippytext="#000000";var zippyback="#e8e8e8";var zippyplay="#ff6600";var zippywidth=850;var zippyauto=false;var zippyvol=80;var zippywave = "#000000";var zippyborder = "#cccccc";</script><script type="text/javascript" src="http://api.zippyshare.com/api/embed_new.js"></script><?php } ?> |
Sau đó khi chèn nhạc ở phần ZippyShare, bạn chỉ cần điền ID của bài hát vào khung nhập link ZippyShare nhé. Ví dụ link một bài hát sẽ có dạng http://www11.zippyshare.com/v/97448700/file.html thì cái 97448700 chính là ID của bài nhạc.
Lời kết
Trong bài này bạn đã biết được cách tích hợp một player bên ngoài khác là như thế nào cũng như cách sử dụng nó. Tất nhiên chẳng có gì là nâng cao cả, chỉ cần bạn biết qua cách sử dụng custom field và advanced custom field là có thể làm được dễ dàng. Hy vọng sẽ sớm có hướng dẫn làm trang nghe nhạc cho mọi người.
Liên Quan Khác
Related posts:
Leave a Reply