Content Marketingเครื่องมือการตลาด

WordPress: ฝังเครื่องเล่น MP3 ในบล็อกโพสต์ของคุณ

ด้วยการแบ่งปันพอดแคสต์และเพลงที่แพร่หลายทางออนไลน์จึงมีโอกาสที่ดีในการปรับปรุงประสบการณ์ของผู้เยี่ยมชมบนไซต์ของคุณด้วยการฝังเสียงไว้ในโพสต์บล็อกของคุณ โชคดีที่ WordPress พัฒนาอย่างต่อเนื่องเพื่อรองรับการฝังสื่อประเภทอื่น ๆ และ mp3 ไฟล์เป็นหนึ่งในไฟล์ที่ทำได้ง่าย!

แม้ว่าการแสดงผู้เล่นสำหรับการสัมภาษณ์ล่าสุดจะดีมาก แต่อาจไม่แนะนำให้โฮสต์ไฟล์เสียงจริง โฮสต์เว็บส่วนใหญ่สำหรับไซต์ WordPress ไม่ได้รับการปรับให้เหมาะกับการสตรีมสื่อดังนั้นอย่าแปลกใจหากคุณเริ่มพบปัญหาบางอย่างที่คุณใช้งานแบนด์วิดท์หรือแผงเสียงของคุณถึงขีด จำกัด ทั้งหมด ฉันขอแนะนำให้โฮสต์ไฟล์เสียงจริงในบริการสตรีมเสียงหรือเครื่องมือโฮสติ้งพอดคาสต์ และ…ต้องแน่ใจว่าโฮสต์ของคุณรองรับ SSL (เส้นทาง https: //) …บล็อกที่โฮสต์อย่างปลอดภัยจะไม่เล่นไฟล์เสียงที่ไม่ได้โฮสต์อย่างปลอดภัยที่อื่น

อย่างไรก็ตาม หากคุณทราบตำแหน่งที่ตั้งของไฟล์ของคุณ การฝังไฟล์นั้นในบล็อกโพสต์นั้นค่อนข้างง่าย WordPress มีโปรแกรมเล่นไฟล์เสียง HTML5 ในตัวโดยตรง ดังนั้นคุณจึงสามารถใช้รหัสย่อเพื่อแสดงเครื่องเล่นได้

นี่คือตัวอย่างจากตอนล่าสุดของพอดคาสต์ที่ฉันทำ:

ด้วยการทำซ้ำล่าสุดของตัวแก้ไข Gutenberg ใน WordPress ฉันเพิ่งวางเส้นทางไฟล์เสียงและตัวแก้ไขได้สร้างรหัสย่อขึ้นมา รหัสย่อตามจริง ซึ่งคุณจะแทนที่ src ด้วย URL แบบเต็มของไฟล์ที่คุณต้องการเล่น

[audio src="audio-source.mp3"]

WordPress รองรับไฟล์ประเภท mp3, m4a, ogg, wav และ wma คุณยังสามารถมีรหัสย่อที่เป็นทางเลือกในกรณีที่คุณมีผู้เยี่ยมชมที่ใช้เบราว์เซอร์ที่ไม่สนับสนุนอย่างใดอย่างหนึ่ง:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

คุณสามารถปรับปรุงรหัสย่อด้วยตัวเลือกอื่น ๆ :

  • loop - ตัวเลือกสำหรับการวนซ้ำเสียง
  • เล่นอัตโนมัติ - ตัวเลือกสำหรับการเล่นไฟล์โดยอัตโนมัติทันทีที่โหลด
  • พรีโหลด - ตัวเลือกในการโหลดไฟล์เสียงล่วงหน้าด้วยเพจ

รวมทุกอย่างเข้าด้วยกันและนี่คือสิ่งที่คุณจะได้รับ:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

รายการเพลงเสียงใน WordPress

หากคุณต้องการมีเพลย์ลิสต์ WordPress ยังไม่รองรับการโฮสต์ภายนอกของไฟล์แต่ละไฟล์ของคุณให้เล่น แต่จะมีให้หากคุณโฮสต์ไฟล์เสียงของคุณไว้ภายใน:

[playlist ids="123,456,789"]

มี วิธีแก้ปัญหาบางอย่าง คุณสามารถเพิ่มลงใน Child Theme ที่จะเปิดใช้งานการโหลดไฟล์เสียงภายนอก

เพิ่มฟีด RSS Podcast ของคุณไปยังแถบด้านข้างของคุณ

ฉันใช้โปรแกรมเล่น WordPress เพื่อแสดงพอดคาสต์ของคุณโดยอัตโนมัติในวิดเจ็ตแถบด้านข้าง คุณสามารถ อ่านได้ที่นี่ และ ดาวน์โหลดปลั๊กอิน จากที่เก็บ WordPress

การปรับแต่ง WordPress Audio Player

อย่างที่คุณเห็นจากเว็บไซต์ของฉัน เครื่องเล่น MP3 นั้นค่อนข้างพื้นฐานใน WordPress อย่างไรก็ตาม เนื่องจากมันเป็น HTML5 คุณจึงแต่งมันได้นิดหน่อยโดยใช้ CSS. CSSIgniter ได้เขียนบทช่วยสอนที่ยอดเยี่ยมเกี่ยวกับ การปรับแต่งเครื่องเล่นเสียง ดังนั้นฉันจะไม่พูดซ้ำทั้งหมดที่นี่ ... แต่นี่คือตัวเลือกที่คุณสามารถปรับแต่งได้:

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
.mytheme-mejs-container .mejs-button > button {
  background-image: url("images/mejs-controls-dark.svg");
}

.mytheme-mejs-container .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
  height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
  top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
  margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
  top: 19px;
}

ปรับปรุงเครื่องเล่น MP3 WordPress ของคุณ

นอกจากนี้ยังมีปลั๊กอินแบบชำระเงินสำหรับการแสดงเสียง MP3 ของคุณในเครื่องเล่นเสียงที่น่าทึ่งบางตัว:

การเปิดเผยข้อมูล: Martech Zone กำลังใช้ลิงค์พันธมิตรสำหรับปลั๊กอินด้านบนรวมถึง CodeCanyonไซต์ปลั๊กอินที่ยอดเยี่ยมที่มีปลั๊กอินที่ได้รับการสนับสนุนอย่างดีและบริการและการสนับสนุนที่โดดเด่น

Douglas Karr

Douglas Karr เป็น CMO ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

บทความที่เกี่ยวข้อง

กลับไปด้านบนปุ่ม
ปิดหน้านี้

ตรวจพบการบล็อกโฆษณา

Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา