Podcastingin ja musiikin jakamisen kanssa, joka on niin yleistä verkossa, on loistava tilaisuus parantaa kävijöiden kokemusta sivustollasi upottamalla ääntä blogiviesteihisi. Onneksi WordPress kehittää edelleen tukeaan muiden mediatyyppien - ja mp3 tiedostot ovat yksi niistä, jotka on helppo tehdä!
Vaikka soittimen näyttäminen äskettäisessä haastattelussa on hienoa, varsinaisen äänitiedoston isännöinti ei ehkä ole suositeltavaa. Suurinta osaa WordPress-sivustojen web-isäntiä ei ole optimoitu median suoratoistoon - joten älä hämmästy, jos alat törmätä joihinkin ongelmiin, joissa saavutat kaistanleveyden käytön rajoituksia tai äänentoisto pysähtyy kokonaan. Suosittelen varsinaisen äänitiedoston isännöintiä äänen suoratoistopalveluun tai podcast-hosting-moottoriin. Ja ... varmista, että isäntäsi tukee SSL: ää (https: // polku) ... turvallisesti isännöity blogi ei toista äänitiedostoa, jota ei ole suojattu muualla.
Se sanoi, että tiedät tiedostosi sijainnin, upottaminen blogikirjoitukseen on melko yksinkertaista. WordPressissä on oma HTML5-audiosoitin, joka on rakennettu suoraan siihen, joten voit käyttää soittinta lyhytkoodilla.
Tässä on esimerkki viimeaikaisesta tekemästäni podcast-jaksosta:
Gutenberg-editorin viimeisimmällä iteroinnilla WordPressissä liitin juuri äänitiedostopolun ja editori tosiasiallisesti loi lyhytkoodin. Seuraavassa on varsinainen lyhytkoodi, jossa korvataan src toistettavan tiedoston täydellä URL-osoitteella.
[audio src="audio-source.mp3"]WordPress tukee mp3-, m4a-, ogg-, wav- ja wma-tiedostotyyppejä. Sinulla voi olla jopa lyhytkoodi, joka tarjoaa varajärjestelmän, jos vierailijasi käyttävät selaimia, jotka eivät tue yhtä tai toista:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]Voit parantaa lyhytkoodia myös muilla vaihtoehdoilla:
- silmukka - vaihtoehto äänen silmukoimiseksi.
- automaattinen toisto - mahdollisuus toistaa tiedosto automaattisesti heti, kun se latautuu.
- esilataus - mahdollisuus ladata äänitiedosto sivulle.
Kokoa kaikki yhteen ja saat tämän:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]Audio-soittolistat WordPressissä
Jos haluat soittolistan, WordPress ei tällä hetkellä tue kaikkien tiedostojesi ulkoista isännöintiä toistettavaksi, mutta ne tarjoavat sen, jos isännöit äänitiedostojasi sisäisesti:
[playlist ids="123,456,789"]On joitain ratkaisuja siellä, jonka voit lisätä lapsiteemallesi, mikä mahdollistaa ulkoisen äänitiedoston lataamisen.
Lisää Podcast RSS -syötteesi sivupalkkiin
Kirjoitin WordPress-soittimen avulla laajennuksen näyttämään podcastisi automaattisesti sivupalkin widgetissä. Sinä pystyt Lue siitä täältä että lataa laajennus WordPress-arkistosta.
WordPress Audio Playerin mukauttaminen
Kuten omasta sivustostani näet, MP3-soitin on melko yksinkertainen WordPressissä. Koska se on HTML5, voit pukeutua siihen melko vähän CSS: n avulla. CSSIgniter on kirjoittanut upean opetusohjelman audiosoittimen mukauttaminen joten en toista kaikkea täällä ... mutta tässä on vaihtoehtoja, joita voit muokata:
/* 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;
}Paranna WordPress-MP3-soitinta
On myös joitain maksettuja laajennuksia MP3-äänen näyttämiseen joissakin aivan upeissa soittimissa:
- MP3-Sticky Player WordPress -laajennus
- Royal Audio Player WordPress-laajennus
- HTML5-äänisoittimet WordPress Plugins Bundle
- Easy Audio Player WordPress -laajennus
- Sonaar MP3-soitin WordPress-laajennus
Ilmoitus: Käytän tytäryhtiölinkkejäni yllä oleviin laajennuksiin Codecanyon, upea laajennussivusto, jolla on hyvin tuetut laajennukset ja erinomainen palvelu ja tuki.
