Sisältö MarkkinointiMarkkinointityökalut

WordPress: Upota MP3-soitin blogiviestiin

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 kaistanleveyden käyttöä koskevat rajoitukset tai äänen pysähtyminen kokonaan. Suosittelen varsinaisen äänitiedoston isännöintiä suoratoistopalveluun tai podcast-isäntäkoneeseen. Ja ... varmista, että isäntäsi tukee SSL: ää (https: // polku) ... turvallisesti isännöity blogi ei toista äänitiedostoa, jota ei ole suojattu muualla.

Jos tiedät tiedostosi sijainnin, sen upottaminen blogitekstiin on melko yksinkertaista. WordPressissä on oma HTML5-äänisoitin suoraan sisäänrakennettuna, joten voit käyttää lyhytkoodia soittimen näyttämiseen.

Tässä on esimerkki viimeaikaisesta tekemästäni podcast-jaksosta:

WordPressin Gutenberg-editorin uusimmalla iteraatiolla liitin juuri äänitiedoston polun ja editori itse asiassa loi lyhytkoodin. Varsinainen lyhytkoodi seuraa, jossa korvaat src:n sen tiedoston täydellisellä URL-osoitteella, jonka haluat toistaa.

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

WordPress tukee mp3-, m4a-, ogg-, wav- ja wma-tiedostotyyppejä. Sinulla voi olla jopa lyhytkoodi, joka tarjoaa varavarauksen, 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.

Laita 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 toistettavien tiedostojesi ulkoista isännöintiä, 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ä ja lataa laajennus WordPress-arkistosta.

WordPress Audio Playerin mukauttaminen

Kuten omalta sivustoltani näet, MP3-soitin on melko perus WordPressissä. Kuitenkin, koska se on HTML5, voit pukea sitä melko paljon käyttämällä CSS. CSSIgniter on kirjoittanut loistavan 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:

Disclosure: Martech Zone käyttää affiliate-linkkejä yllä oleville laajennuksille, mukaan lukien Codecanyon, upea laajennussivusto, jolla on hyvin tuetut laajennukset ja erinomainen palvelu ja tuki.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.