WordPress: Blog postingizga MP3 pleer joylashtiring

WordPress bilan Blog Post MP3 pleyeri

Podkasting va musiqa almashinuvi juda keng tarqalgan onlayn rejimda, blog yozuvlaringizga audio qo'shib, saytingizda mehmonlarning tajribasini oshirish uchun ajoyib imkoniyat mavjud. Yaxshiyamki, WordPress boshqa media turlarini joylashtirish uchun qo'llab-quvvatlashni rivojlantirishda davom etmoqda - va mp3 fayllarni bajarish oson bo'lganlardan biridir!

Yaqinda o'tkazilgan intervyu uchun pleyerni namoyish qilish juda yaxshi bo'lsa ham, haqiqiy audio faylni joylashtirish maqsadga muvofiq emas. WordPress saytlari uchun aksariyat veb-xostlar ommaviy axborot vositalarini uzatish uchun optimallashtirilmagan - shuning uchun siz tarmoq o'tkazuvchanligidan foydalanish cheklovlariga duch kelgan yoki audio stendlaringizni bir nechta muammolarga duch kelsangiz ajablanmang. Haqiqiy audio faylni audio translatsiya xizmati yoki podcast hosting tizimida joylashtirishni tavsiya qilaman. Va… sizning xostingiz SSL-ni qo'llab-quvvatlashiga ishonch hosil qiling (https: // yo'l) ... xavfsiz joylashtirilgan blog boshqa joyda xavfsiz joylashtirilmagan audio faylni o'ynatmaydi.

Ya'ni, siz o'zingizning faylingiz joylashuvini bilasiz, uni blog postiga joylashtirish juda oddiy. WordPress-da o'z ichiga o'rnatilgan HTML5 audio pleer mavjud, shuning uchun pleerni ko'rsatish uchun qisqa koddan foydalanishingiz mumkin.

Yaqinda podkast qismidan misol keltirdim:

WordPress-dagi Gutenberg muharririning so'nggi takrorlanishi bilan men faqat audio fayl yo'lini yopishtirdim va muharriri aslida qisqa kodni yaratdi. Haqiqiy qisqa kod quyidagicha keladi, u erda siz src-ni kerakli faylning to'liq URL manzili bilan almashtirasiz.

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

WordPress mp3, m4a, ogg, wav va wma fayl turlarini qo'llab-quvvatlaydi. Hatto birortasini yoki boshqasini qo'llab-quvvatlamaydigan brauzerlardan foydalangan holda tashrif buyuruvchilaringiz bo'lgan taqdirda, sizni qaytarib beradigan qisqa kodga ega bo'lishingiz mumkin:

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

Qisqa kodni boshqa variantlar bilan yaxshilashingiz mumkin:

  • loop - ovozni ko'chirish uchun imkoniyat.
  • autoplay - fayl yuklangandan so'ng uni avtomatik ravishda ijro etish imkoniyati.
  • oldindan yuklash - audio faylni sahifa bilan oldindan yuklash imkoniyati.

Barchasini birlashtiring va mana sizga nima bo'ladi:

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

WordPress-dagi audio pleylistlar

Agar siz pleylistga ega bo'lishni istasangiz, WordPress hozirda sizning har bir faylingizning tashqi xostingini qo'llab-quvvatlamaydi, ammo agar siz audio fayllaringizni ichki joylashtirsangiz:

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

Bu yerda ba'zi echimlar u erda siz tashqi audio fayllarni yuklashni ta'minlaydigan Child Theme-ga qo'shishingiz mumkin.

Podcast RSS tasmangizni yon panelingizga qo'shing

WordPress pleyeridan foydalanib, podkastingizni yon paneldagi vidjetda avtomatik ravishda ko'rsatish uchun plagin yozdim. Siz .. qila olasiz; siz ... mumkin bu erda bu haqda o'qing va plaginni yuklab oling WordPress havzasidan.

WordPress audio pleerini sozlash

O'zingizning saytingizda ko'rganingizdek, MP3 pleer WordPress-da juda oddiy. Ammo HTML5 bo'lgani uchun uni CSS-dan foydalanib biroz kiyintirishingiz mumkin. CSSIgniter ajoyib qo'llanma yozdi audio pleyerni sozlash shuning uchun hammasini bu erda takrorlamayman ... lekin siz sozlashingiz mumkin bo'lgan variantlar:

/* 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 pleeringizni yaxshilang

MP3 audio-ni juda ajoyib audio pleerlarda namoyish qilish uchun bir nechta pulli plaginlar mavjud:

Ma'lumot: Men yuqoridagi plaginlari uchun sheriklik havolalaridan foydalanayapman Codecanyon, yaxshi qo'llab-quvvatlanadigan plaginlari va ajoyib xizmati va qo'llab-quvvatlashiga ega bo'lgan ajoyib plagin sayti.

Siz nima deb o'ylaysiz?

Ushbu sayt spamni kamaytirish uchun Akismet-dan foydalanadi. Fikringiz ma'lumotlarining qanday ishlashini bilib oling.