[WPtips] Cách Chèn Nhạc Trong Blog WordPress | ~ Gió Xanh ~

Có thể bạn quan tâm

🍒 Nội dung 🍒 1. Chèn nhạc vào bài viết hoặc trang. 2. Chèn nhạc vào thanh bên hoặc chân trang. 3. Câu hỏi thường gặp (FAQ) Bài viết này được cập nhật lần cuối vào ngày 02/01/2026

hello Hế lô! Nội dung này có vẻ khá là cũ rồi nhỉ? Tuy nhiên sau một thời gian dài không online, mình kiểm tra lại các bài hướng dẫn chèn nhạc từ những trang không được WordPress hỗ trợ như là Zing Mp3, Nhạc Của Tui, Chia Sẻ Nhạc,… trong blog thì thấy code đều hỏng hết cả rồi Mình cũng cố gắng thử lại vài lần nhưng bất lực Đó là lí do bài hướng dẫn tuy cũ mà mới này ra đời

Trước khi đi vào nội dung chính của bài này thì có một số điều mình cần lưu ý với các bạn như sau:

• Tất cả các bài hướng dẫn trong blog này, mình đều hướng dẫn thao tác với ngôn ngữ giao diện là tiếng Anh. Lí do là vì phiên bản ngôn ngữ giao diện tiếng Việt rất dễ thay đổi theo từng lần biên dịch khác nhau, ví dụ hôm nay chữ “Customize” trên giao diện mình hướng dẫn các bạn tên là “Tuỳ chỉnh”, hôm sau thì nó lại tên là “Tuỳ biến”, mình không muốn phải sửa lại liên tục những từ này nên mình dùng bản tiếng Anh cho nhanh, vì nó ít khi thay đổi. Cách chuyển đổi ngôn ngữ giao diện từ tiếng Việt sang tiếng Anh các bạn có thể xem video bên dưới nhé.

Video 1. Chuyển đổi ngôn ngữ giao diện.

• Mình không phải là dân công nghệ thông tin hay nhân viên của WordPress nên mình không dùng các thuật ngữ chuyên ngành (nên các bạn đừng bắt bẻ mình về cách dùng từ nhé). Tất cả các bài hướng dẫn trên blog của mình được viết dưới góc nhìn của một người sử dụng WordPress. Mình chỉ viết hướng dẫn cho blog được tạo miễn phí với WordPress.com, không viết hướng dẫn cho WordPress.org hay những phiên bản tính phí khác.

• Cuối cùng, lưu ý quan trọng, code là mình tự mò, tự học, tự viết và tự thử nghiệm các kiểu, code của mình có thể rườm rà hay không quá tối ưu, nhưng tất cả đều là chất xám của mình, mình bỏ thời gian và công sức ra để viết. Để có thể viết được một bài hướng dẫn thì có khi mình mất cả tuần, thậm chí cả tháng để lên ý tưởng và bắt tay vào viết, sửa code. Nên mình hi vọng các bạn sẽ tôn trọng công sức của mình, không mang bài viết ra khỏi blog khi chưa có sự đồng ý của mình nhé. Cảm ơn các bạn rất nhiều

Còn bây giờ thì chúng ta hãy đi vào từng nội dung chi tiết nhé

1. Chèn nhạc vào bài viết hoặc trang trên blog WordPress

1.1. Chèn nhạc bằng cách nhúng liên kết (Embed)

Trong trường hợp này, tất cả những gì chúng ta cần có là link (URL) dẫn đến bài hát mà các bạn cần chèn vào bài viết hoặc trang. Các bạn chỉ cần sao chép toàn bộ phần link có trong thanh địa chỉ của trình duyệt web rồi dán vào vị trí muốn chèn nhạc là được. Cách làm này sẽ thực hiện được trên cả trình soạn thảo Classic Editor và Block Editor. Khi các bạn dán link bài hát vào vùng soạn thảo, hệ thống của WordPress sẽ tự động chuyển link này thành trình phát nhạc tương ứng với website chứa bản nhạc mà các bạn đã nhúng.

Các website nhạc được WordPress hỗ trợ bao gồm:

• Audiomack • Mixcloud Music • Pocket Casts • RadioPublic • ReverbNation Music • SoundCloud Music • Spotify Music • Cloudup

Đối với trình soạn thảo Block Editor, ngoài cách dán link trực tiếp thì các bạn có thể sử dụng một cách công thức hơn đó là sử dụng các khối gắn với tên của website chèn nhạc như SoundCloud Embed, Spotify Embed, Cloudup Embed, Mixcloud Embed,… Với cách này, các bạn sẽ phải thêm một bước nữa là thêm khối, sau đó mới dán link bản nhạc vào, khá là cồng kềnh phải không nhỉ?

Nếu vẫn chưa làm được, các bạn có thể xem video mình thao tác bên dưới nhé

Video 2. Chèn nhạc bằng cách nhúng liên kết.

1.2. Chèn nhạc bằng cách sử dụng shortcode

Đối với bài viết được soạn thảo trên trình soạn thảo Cổ điển (Classic Editor), các bạn chỉ cần dán shortcode vào vị trí cần chèn nhạc là được. Còn đối với bài viết sử dụng trình soạn thảo Block Editor, các bạn có thể dùng khối Classic hoặc khối Shortcode để dán code nhé.

a) Chèn nhạc từ SoundCloud

Nếu các bạn sử dụng cách 1 để chèn nhạc từ SoundCloud vào blog, chúng ta sẽ không thể tuỳ chỉnh được màu của nút chơi nhạc (Play/Pause), chiều rộng và chiều cao của trình phát nhạc. Do đó, nếu các bạn muốn màu mè cho nó, chúng ta sẽ phải sử dụng shortcode thay vì dán link như bình thường. Để sử dụng được shortcode, chúng ta sẽ cần có id (mình cứ tạm gọi thế chứ mình cũng không biết gọi nó là cái gì nữa ) của bài hát hoặc playlist cần chèn, cách lấy id của bài hát hoặc playlist trên SoundCloud như sau:

• Bước 1. Bấm vào biểu tượng nút chia sẻ ở ngay bên dưới bài hát hoặc playlist cần chèn, sau đó chọn tab Embed.

Ảnh 1. Embed

• Bước 2. Sao chép toàn bộ nội dung trong khung bên dưới mục Code và dán nó Notepad, Word hay bất cứ thứ gì có thể giúp bạn lưu trữ phần code này. Đoạn code mà các bạn sao chép được sẽ có dạng tương tự như sau:

⇒ id của bài hát hoặc playlist sẽ là phần kí tự số nằm giữa chữ “tracks” và chữ “color” trong code. Ví dụ, với đoạn code trên thì id của bài hát sẽ là 244512368

• Tiếp theo, chúng ta sẽ sử dụng id này để dán vào shortcode chèn nhạc nhé. Trình phát nhạc trên SoundCloud gồm 3 kiểu:

Kiểu 1:

Với kiểu này, hình đại diện của bài hát/playlist sẽ được dùng làm hình nền của trình phát nhạc luôn. Chúng ta sẽ có đoạn shortcode như sau:

Lưu ý: Hiện tại WordPress đã hạn chế việc hiển thị và tuỳ chỉnh source code nên mình không thể tuỳ chỉnh màu các kí tự trong code được nên mình sẽ minh hoạ code bằng hình ảnh như bên trên trước, sau đó các bạn hãy bấm vào khung bên dưới để copy code bên trong nhé

Bấm vào để copy code [soundcloud url="https://api.soundcloud.com/tracks/A" params="color=B&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" width="W" height="H" iframe="true" /]

🪴 Trong đó:

• A là id của bài hát hoặc playlist cần chèn.

• B là màu của nút chơi nhạc (Play/Pause). Ở đây chúng ta sẽ sử dụng mã màu Hex và bỏ đi dấu “#” ở đầu nhé. Ví dụ, mình muốn nút chơi nhạc có màu tím, mã Hex của màu này là #6d00b3, mình sẽ bỏ dấu “#” ở đầu đi và chỉ điền đoạn mã 6d00b3 vào shortcode.

• W là chiều rộng của trình phát nhạc tính theo đơn vị px, nhưng chúng mình chỉ cần điền số thôi chứ không cần điền cả chữ “px” nhé. Nếu các bạn muốn chiều rộng của trình phát nhạc bằng với chiều rộng của vùng hiển thị bài đăng thì hãy điền giá trị là 100% cho nó nhé.

• H là chiều cao của trình phát nhạc tính theo đơn vị px, nhưng chúng mình chỉ cần điền số thôi chứ không cần điền cả chữ “px” nhé.

Mình sẽ ví dụ với bài hát trong ảnh bên trên nhé. Ở đây mình có id bài hát là 244512368, màu của nút chơi nhạc là 6d00b3, mình muốn trình phát nhạc của mình có chiều rộng là 400px và chiều cao là 150px. Đoạn code hoàn chỉnh của mình sẽ có dạng như sau:

Kết quả:

Kiểu 2:

Với kiểu này, hình đại diện của bài hát/playlist sẽ trôi sang bên trái và tách riêng với nút chơi nhạc và phần thông tin bài hát. Chúng ta sẽ có đoạn shortcode như sau:

Bấm vào để copy code [soundcloud url="https://api.soundcloud.com/tracks/A" params="color=B&inverse=false&auto_play=false&show_user=true" width="W" height="H" iframe="true" /]

🪴 Trong đó:

• A là id của bài hát hoặc playlist cần chèn.

• B là màu của nút chơi nhạc (Play/Pause). Ở đây chúng ta sẽ sử dụng mã màu Hex và bỏ đi dấu “#” ở đầu nhé. Ví dụ, mình muốn nút chơi nhạc có màu tím, mã Hex của màu này là #6d00b3, mình sẽ bỏ dấu “#” ở đầu đi và chỉ điền đoạn mã 6d00b3 vào shortcode.

• H là chiều cao của trình phát nhạc tính theo đơn vị px, nhưng chúng mình chỉ cần điền số thôi chứ không cần điền cả chữ “px” nhé.

Kiểu 3:

Đây là kiểu trình phát nhạc mini, chúng ta sẽ có shortcode cho kiểu này như sau:

Bấm vào để copy code [soundcloud url="https://api.soundcloud.com/tracks/A" params="color=B&inverse=false&auto_play=false&show_user=true" width="W" height="20" iframe="true" /]

🪴 Trong đó:

• A là id của bài hát hoặc playlist cần chèn.

Với trình phát nhạc kiểu này, chiều cao bắt buộc phải là 20px như trong code mẫu nhé, nếu các bạn sửa giá trị của thuộc tính height cao hơn thì nó sẽ chuyển thành trình phát nhạc giống kiểu 2 nhé.

Lưu ý: Trong shortcode chèn nhạc SoundCloud, mình mặc định thuộc tính tự động phát nhạc (auto_play) là false, nếu các bạn muốn nhạc tự động phát, hãy sửa chữ false trong code mẫu thành chữ true nhé. Nhưng việc nhạc có tự động phát được hay không còn tuỳ thuộc vào trình duyệt mà người dùng đang sử dụng nữa, do đó mình sẽ luôn để trạng thái của trình phát nhạc là không tự động phát trong code mẫu nhé.

b) Chèn nhạc bằng cách sử dụng Direct Link (Hot Link)

Mình sẽ không giải thích lòng vòng, ở đây các bạn chỉ cần hiểu rằng Direct Link của bài hát là phần link có đuôi kết thúc bằng các đuôi định dạng âm thanh như .mp3, .wav, .wma,… là được. Tuy nhiên, không phải định dạng nào WordPress bản miễn phí cũng hỗ trợ, tốt nhất là chúng mình hãy sử dụng file nhạc có định dạng âm thanh là .mp3 nhé.

Để dùng được cách này, các bạn cần phải có một nơi để tải lên và lưu trữ các bài hát cần chèn vào blog, và website lưu trữ đó phải cung cấp được Direct Link cho chúng mình. Ở đây, mình có 2 website gợi ý cho các bạn là CloudUp và Open Drive. Tuy nhiên, hiện tại CloudUp không tiếp nhận người dùng mới nữa, do đó, nếu các bạn chưa có tài khoản CloudUp thì hãy chuyển sang sử dụng Open Drive nhé. Cách lấy Direct Link của bài hát như sau:

• Đối với bài hát được upload trên CloudUp:

Sau khi đăng nhập vào CloudUp, các bạn bấm vào biểu tượng hình dấu cộng ở góc dưới bên phải màn hình để tải bài hát lên.

Ảnh 2. Tải nhạc lên CloudUp

Sau khi bài hát được tải lên, các bạn có thể bấm vào chữ Edit để đổi tên cho bài hát nếu muốn nhé.

Ảnh 3. Đổi tên bài hát

Sau khi đã đổi tên bài hát xong, các bạn bấm vào biểu tượng mũi tên sang trái ở góc trên bên trái màn hình để bắt đầu lấy Direct Link của bài hát nhé. Lúc này, màn hình sẽ hiển thị như sau:

Ảnh 4. Màn hình hiển thị CloudUp

Các bạn click chuột trái vào chữ More ở góc bên phải màn hình, nó sẽ hiện ra nút Direct URL, các bạn click chuột phải vào nút này vào chọn Sao chép địa chỉ liên kết nhé.

Ảnh 5. Sao chép Direct URL

Lúc này, Direct URL của bài hát đã được lưu vào bộ nhớ tạm, các bạn hãy dán nó vào Notepad, Word, hoặc bất cứ thứ gì có thể giúp các bạn lưu trữ được phần Direct Link này nhé.

• Đối với bài hát được upload trên Open Drive:

Sau khi đăng nhập tài khoản Open Drive, các bạn có thể bấm luôn vào biểu tượng nút Upload để tải bài hát lên nhé.

Ảnh 6. Tải nhạc lên Open Drive

Sau khi bài hát đã được tải lên hoàn tất, các bạn bấm vào biểu tượng File Menu và chọn mục Links để lấy Direct Link của bài hát nhé.

Ảnh 7. File Menu\Links

Lúc này, một hộp thoại chứa danh sách các link sẽ hiện ra, các bạn hãy sao chép phần link ở mục Direct Link (streaming) nhé. Tương tự như đối với CloudUp, các bạn hãy dán phần link vừa sao chép được vào Notepad, Word, hoặc bất cứ thứ gì có thể giúp các bạn lưu trữ được phần Direct Link này nhé.

Ảnh 8. Direct Link Open Drive

Vậy là phần lấy Direct Link đã xong, giờ chúng mình sẽ bắt đầu vào việc chính – chèn nhạc! Shortcode chèn nhạc trong trường hợp này sẽ có dạng như sau:

[audio src="Direct Link của bài hát cần chèn" autoplay="0" loop="yes"]

Ví dụ, bài hát mình cần chèn có Direct Link trên Open Drive như sau:

https://od.lk/s/NzBfMjcyMzE5MjBf/Take%20Me%20-%20GD.mp3

Đoạn code hoàn chỉnh của mình sẽ có dạng:

[audio src="https://od.lk/s/NzBfMjcyMzE5MjBf/Take%20Me%20-%20GD.mp3" autoplay="0" loop="yes"]

Kết quả:

Lưu ý: Trong code mẫu, mình mặc định thuộc tính tự động phát nhạc (autoplay) là không tự động phát, nếu các bạn muốn nhạc tự động phát, hãy thay giá trị 0 trong code thành 1 nhé. Tuy nhiên, cũng giống như SoundCloud, nhạc có tự động phát hay không còn phải do trình duyệt web mà người dùng đang sử dụng nữa nhé

Ngoài ra, với trình soạn thảo Block Editor, các bạn có thể nhúng Direct Link của bài hát vào khối Audio và tuỳ chỉnh tự động phát nhạc cho nó ở phần cài đặt khối (block) nhé. Khi các bạn dùng khối này để nhúng Direct Link, trình phát nhạc sẽ có màu xám như bên dưới thay vì màu đen như khi sử dụng shortcode nhé.

Ảnh 9. Chèn nhạc bằng khối Audio

2. Chèn nhạc vào thanh bên (Sidebar) hoặc chân trang (Footer)

Hiện tại, theme của WordPress có 2 hệ thống tuỳ chỉnh là trình chỉnh sửa Cổ điển (mình tạm gọi là Customize) và trình chỉnh sửa dạng khối (mình tạm gọi là Site Editor). Sẽ có một vài theme có cả 2 trình chỉnh sửa này, nhưng hầu hết các theme đều chỉ sử dụng một trong hai trình chỉnh sửa này thôi. Mình sẽ tách riêng cách chèn nhạc vào thanh bên (sidebar) và chân trang (footer) đối với 2 trình chỉnh sửa này nhé.

2.1. Chèn nhạc trên trình chỉnh sửa Customize

Thông thường, những theme có trình chỉnh sửa Customize sẽ thuộc loại Classic Theme. Trình chỉnh sửa theme mới nhất của WordPress là trình chỉnh sửa Site Editor, do đó, khi các bạn tìm kiếm theme trong hệ thống theme hiện hành của WordPress, rất khó để các bạn tìm ra những theme thuộc loại Classic Theme nếu không nhập tên của theme đó vào khung tìm kiếm, bởi vì hầu như WordPress sẽ chỉ hiện ra gợi ý các theme sử dụng trình chỉnh sửa Site Editor. Theo mình, với những người mới bắt đầu sử dụng WordPress thì trình chỉnh sửa Customize sẽ dễ sử dụng hơn. Các bạn có thể xem danh sách một số Classic Theme ở ĐÂY nhé. Còn cách chèn nhạc thì các bạn hãy xem video mình hướng dẫn bên dưới cho dễ hiểu nhé.

Video 3. Chèn nhạc trên trình chỉnh sửa Customize

2.2. Chèn nhạc trên trình chỉnh sửa khối (Site Editor)

Với trình chỉnh sửa này, chúng mình cũng thực hiện thao tác chèn nhạc tương tự như khi soạn thảo trên trình soạn thảo Block Editor. Các bạn có thể xem video mình hướng dẫn bên dưới nhé.

Video 4. Chèn nhạc trên trình chỉnh sửa Site Editor

3. Câu hỏi thường gặp (FAQ)

a) Sera ơi, mình chỉ muốn trình phát nhạc hiển thị ở trang chủ (Homepage) của blog thôi thì phải làm thế nào?

Trả lời: Hiện tại tính năng này chỉ có ở những theme sử dụng trình chỉnh sửa Customize, còn với trình chỉnh sửa Site Editor thì không khả dụng với WordPress bản miễn phí, nếu muốn sử dụng tính năng này, các bạn cần nâng cấp blog lên phiên bản trả phí để sử dụng plugin. Tuy nhiên, các bạn vẫn có thể lách luật bằng cách sử dụng code ghim thanh phát nhạc vào trình duyệt (mình sẽ hướng dẫn ở mục b bên dưới), còn việc tuỳ chỉnh ẩn/hiện trên các widget thanh bên (sidebar), chân trang (footer) hay đầu trang (header) là không thể vì khi bạn chỉnh sửa một trang trong template, trình chỉnh sửa Site Editor sẽ tự động đồng bộ các trang còn lại giống với trang bạn vừa chỉnh sửa. Cách cài đặt tính năng hiển thị widget ở trang chủ các bạn hãy xem video hướng dẫn bên dưới nhé.

Video 5. Chèn nhạc ở trang chủ

b) Bạn ơi, mình muốn có thanh phát nhạc ghim vào màn hình giống như ở trang chủ của bạn thì phải làm sao?

Trả lời: Ý bạn là thanh phát nhạc màu đen giống như mình sử dụng trong bài này phải không? Bạn hãy sử dụng code bên dưới nhé, đoạn code này mình đã rút ngắn 1 thẻ div so với đoạn code mình dùng trong video, vì mình thấy nếu bỏ đi thì cũng không có vấn đề gì cả

Các bạn có thể dùng shortcode nhạc sử dụng Direct Link từ CloudUp hoặc Open Drive, hoặc sử dụng shortcode nhạc SoundCloud dạng mini để thanh nhạc không chiếm quá nhiều diện tích của blog nhé. Nếu bạn chưa biết cách dán code này vào đâu, hãy xem video mình hướng dẫn bên dưới nhé.

Video 6. Ghim thanh phát nhạc vào cuối blog

Vậy là mình đã hướng dẫn xong các bạn cách chèn nhạc vào blog trên WordPress Chúc các bạn thành công nhé