Hướng dẫn làm trang nghe nhạc online chuyên nghiệp trong WordPress – Part 1

Chào các bạn! Qua bài viết “Tạo một khung phát nhạc MP3 và ZippyShare trong bài viết” của mình các bạn đã biết cách chèn player để phát nhạc, cụ thể là mp3 và zippyshare. Trong bài viết này mình sẽ hướng dẫn cụ thể cho các bạn cách làm 1 sử dụng player của zippyshare và jwplayer.

Mình sẽ sử dụng 1 Custom Post Types cho bài hát và 2 Custom Taxonomies cho custom post type này để phân loại theo thể loại và ca sĩ.

Theme được mình tạo dựa trên BLANK-Theme. Các bạn có thể bấm vào đây để dowload. Đây là bố cục đơn giản của theme mà mình đã thiết kế sẵn:

Sau khi dowload xong các bạn copy thư mục BLANK-Theme vào thư mục themes, đổi tên và vào file style.css sửa lại với nội dung sau:

Bên trên là toàn bộ css cho theme. Về hình ảnh của theme các bạn có thể dowload tại đây và copy vào thư mục images của theme. Còn về thông tin thì các bạn đổi lại cho phù hợp sau đó vào dashboard kích hoạt theme này lên.

Tiếp đến các bạn vào file functions.php, xóa hết nội dung trong đó và viết lại với nội dung mới sau:

Với code bên trên chúng ta đã đăng ký sidebar, menu và kích hoạt thư viện jquery cho theme. Đó là những thứ tối thiếu nhất phải có.

Tiếp tục với file functions.php. Chúng ta sẽ đăng ký 1 custom post type cho bài hát. Cụ thể như sau:

Bài hát đã có rồi,  để quản lý dễ dàng hơn thì cần phân loại chúng. Ở đây mình phân loại theo thể loại và ca sĩ. Các bạn có thể phân loại tùy ý.

Các bạn vào dashboard kiểm tra, kết quả sẽ như thế này:

Ở đây 1 bài hát mình sẽ có nhiều link nhạc khác nhau, cụ thể của mình là zippyshare, youtube, mp3 và mp4. Ngoài ra còn có thêm lời bài hát. Mình sẽ sử dụng custom field để lưu trữ chúng và dùng meta box để hiển thị các trường dữ liệu.

Để dễ tùy biến và tránh việc lặp lại thao tác cho cùng 1 loại input thì ở trên mình đã tạo ra 1 mảng lưu custom fields và loop qua chúng để hiển thị thông qua hook add_meta_boxes và hàm add_meta_box.

Tiếp tục thêm đoạn code sau để xử lý lưu các thông tin được nhập trên meta box xuống csdl. Ta dùng hook save_post:

Vì có nhiều link nhạc cho 1 bài hát nên mình đã custom lại đường dẫn của bài hát như sau:

http://domain/bai-hat/ten-bai-hat/loại-link-nhạc.html

Thông qua loại-link-nhạc chúng ta sẽ lấy và phát đúng loại link yêu cầu.

Vì thế cần phải đăng ký 1 query var, 1 rewrite rule mới và custom lại permalink của post. Các bạn thêm tiếp đoạn code sau:

Ok. Bây giờ các bạn vào phần quản lý thêm thể loại, ca sĩ và bài hát.

Phần quản lý đã ổn. Bây giờ đến phần hiển thị. Các bạn vào phần quản lý menu và tạo 1 menu với tên tùy ý để hiển thị trang chủ, thể loại và ca sĩ. Sau đó các bạn vào file header.php thêm đoạn code này vào sau thẻ <body  <?php body_class(); ?>>:

Các bạn đổi lại tên menu vừa tạo trên hàm wp_nav_menu để gọi nó ra. Tiếp đến vào file index.php viết lại với nội dung sau:

Đoạn code trên cũng dễ hiểu. Mình dùng WP_Query để custom truy vấn hiển thị các bài hát mới.

Vào tiếp file sidebar.php sửa lại với nội dung bên dưới. File này sẽ hiển thị các bài hát xem nhiều theo tuần, tháng và năm bên sidebar.

Trong file này mình dùng query_posts để hiển thị bài hát theo tuần, tháng, này kết hợp jquery bật, tắt các tabs.

Tiếp đến file footer.php. File này đơn giản chỉ hiển thị copy right thôi. Các bạn có thể tùy chỉnh lại.

Vậy là đã xong phần hiển thị ngoài trang chủ và sidebar. Để hiển thị thông tin bài hát các bạn tạo 1 file với tên single-song.php trong thư mục theme và viết code với nội dung sau:

Code bên trên xử lý hiển thị thông bài hát, gọi player phù hợp cho từng loại link và cập nhật lượt nghe. Với hàm dvd_play() các bạn vào lại file functions.php chèn thêm đoạn code sau:

Hàm trên sẽ chọn player phù hợp cho mỗi loại link. Link zippyshare sẽ dùng player của chính nó, các link còn lại dùng jwplayer. Với link youtube, do có nhiều loại nên cần chuyển nó về 1 loại duy nhất để có thể play được. Về jwplayer các bạn có thể vào đây đăng ký 1 tài khoản và sử dụng bản miễn phí.

Thử vào nghe 1 bài xem sao nhé:

Lời kết

Mình xin kết thúc phần 1 tại đây. Qua bài hướng dẫn này hy vọng nó giúp ích cho các bạn trong việc tạo 1 website nghe nhạc đơn giản. Trong phần kế tiếp mình sẽ hướng dẫn các bạn hoàn thiện các chức năng như xem thêm bài hát mới, tìm kiếm, hiển thị bài hát theo thể loại, ca sĩ …

»Xem tiếp phần 2: Hướng dẫn làm trang nghe nhạc online chuyên nghiệp trong WordPress – Part 2

Related posts:

8 Responses to Hướng dẫn làm trang nghe nhạc online chuyên nghiệp trong WordPress – Part 1

  1. Logan says:

    sao ko thấy link để download vậy bạn ?

    Cảm ơn bài viết hay!!

  2. Ngô Nhật says:

    link tải đâu vậy ad ơi. tìm hoài ko có link tải

  3. Khánh says:

    Bạn ơi. không có link download vậy? Cho mình xin link vào mail bdstuankhanh@gmail.com với ạ. thanks nhiều

  4. Hoàng Anh says:

    AD ơi link không download được nữa ?

  5. chiều says:

    mình tải link thì bị lỗi bảo mật Https cần user đăng nhập mới accept certify được.
    xin theme vào mail: chieudn@gmail.com

Leave a Reply to Hoàng Anh Cancel reply

Your email address will not be published. Required fields are marked *