WordPress: Блогтоо MP3 тоглуулагч оруулах

WordPress-тэй блог бичлэг хийх MP3 тоглуулагч

Подкастинг, хөгжмийн солилцоо онлайнаар маш их тархсан тул блог дээрээ бичлэг оруулах замаар зочдынхоо туршлагыг сайжруулах сайхан боломж байна. Талархууштай нь, WordPress бусад медиа төрлийг оруулахад чиглэсэн дэмжлэгээ улам бүр сайжруулсаар байна mp3 файлууд нь хийхэд хялбар файлуудын нэг юм!

Саяхны ярилцлагад тоглуулагчийг харуулах нь гайхалтай боловч бодит аудио файлыг байрлуулахыг зөвлөдөггүй байж магадгүй юм. WordPress сайтуудын ихэнх вэб хостууд медиа дамжуулахад тохиромжгүй байдаг тул та зурвасын өргөнийг хязгаарлах эсвэл аудио мухлагуудаа зарим асуудалд оруулаад эхлэхэд гайхах хэрэггүй. Би аудио цацах үйлчилгээ эсвэл подкаст хостингийн хөдөлгүүр дээр бодит аудио файл байрлуулахыг зөвлөж байна. Таны хост SSL (https: // зам) дэмждэг гэдэгт итгэлтэй байгаарай ... аюулгүйгээр байрлуулсан блог нь өөр газар аюулгүй байршуулаагүй аудио файлыг тоглуулахгүй.

Энэ нь таны файлын байршлыг мэддэг бөгөөд үүнийг блогтоо оруулах нь маш энгийн зүйл юм. WordPress нь өөрийн HTML5 аудио тоглуулагчийг шууд суулгасан тул богино кодыг ашиглан тоглуулагчийг харуулах боломжтой.

Саяхны хийсэн подкаст ангиас жишээ татъя.

WordPress дээр Gutenberg редакторын хамгийн сүүлийн давталтыг хийснээр би аудио файлын замыг наасан бөгөөд редактор нь богино кодыг үүсгэсэн. Богино кодыг дагаж мөрдөх бөгөөд та src-ийг тоглуулахыг хүссэн файлынхаа URL хаягаар орлуулах болно.

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

WordPress нь mp3, m4a, ogg, wav, wma файлын хэлбэрийг дэмждэг. Та нэг эсвэл өөрийг нь дэмждэггүй хөтөч ашиглан зочин ирэхэд буцааж өгдөг богино кодтой байж болно.

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

Та богино кодыг бусад сонголтуудын хамт сайжруулах боломжтой:

  • давталт - аудио давталт хийх сонголт.
  • autoplay - файлыг ачаалмагц автоматаар тоглуулах сонголт.
  • preload - аудио файлыг хуудастай хамт урьдчилан ачаалах сонголт.

Бүгдийг нь нэгтгэж, эндээс олж авах зүйл бол:

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

WordPress дээр аудио тоглуулах жагсаалтууд

Хэрэв та тоглуулах жагсаалттай байхыг хүсвэл WordPress таны файл тус бүрийг гадны хост хийхийг одоогоор дэмждэггүй боловч хэрэв та аудио файлуудаа дотроо байршуулж байгаа бол үүнийг санал болгодог.

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

байдаг зарим шийдэл Хүүхдийн сэдэвт гадны аудио файлыг ачаалах боломжийг олгох сэдвийг нэмж оруулах боломжтой.

Podcast RSS тэжээлээ хажуугийн самбартаа нэмээрэй

WordPress тоглуулагчийг ашиглан би өөрийн подкастыг хажуугийн самбар дээрх виджетэд автоматаар харуулах залгаас бичсэн. Чи чадна Эндээс уншина уу болон залгаасыг татаж авах WordPress сангаас.

WordPress Аудио тоглуулагчийн тохируулга

Миний өөрийн сайтаас харахад 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;
}

WordPress MP3 тоглуулагчаа сайжруулах

Таны MP3 аудиог зарим гайхалтай аудио тоглуулагч дээр харуулах төлбөртэй залгаасууд бас байдаг.

Тодруулга: Дээрх залгаасуудад өөрийн харьяа холбоосуудыг ашиглаж байна Codecanyon, гайхалтай залгаасын сайт, сайн дэмжигдсэн залгаасууд, гайхалтай үйлчилгээ, дэмжлэгтэй.

Чи юу гэж бодож байна?

Энэ сайт нь спамыг багасгахын тулд Akismet-ийг ашигладаг. Таны өгөгдлийг хэрхэн боловсруулдаг талаар суралц.