Làm khung phát nhạc MP3 và ZippyShare trong bài

add_linkmp3_field

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:

add_linkmp3_field

Kế tiếp là tạo link ZippyShare với tên là link_zippyshare, cũng là loại Text luôn nhé

add_linkzippyshare_field

Ok, bây giờ khi vào Post bạn sẽ thấy nó có hai khung nhập link như thế này:

linkmp3_post

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 '<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ó.


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

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


<?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="https://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 https://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. 😀

Nguồn: Làm khung phát nhạc MP3 và ZippyShare trong bài | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Các mẹo hay cho WordPress #1
Hiển thị tên tác giả lên Facebook cho WordPress trong 30 giây.
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme