Thời gian qua mình có nhận được một số câu hỏi như kiểu cách làm một chức năng nghe nhạc trong bài, đặc biệt là phát nhạc từ ZippyShare hoặc có thể phát nhạc từ một link mp3 bất kỳ. Nhân tiện mình cũng muốn làm một trang nghe nhạc đơn giản trên WordPress mà tutorial đó chỉ quan trọng phần làm chức năng nghe nhạc nên mình sẽ viết trước một bài riêng về vấn đề này để bạn có thể hiểu rõ.

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:

/* 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 ''; } 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ó.

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():

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. 😀