Content MarketingOrodja za trženje

WordPress: v svoj blog post vdelajte MP3 predvajalnik

S tako razširjenim podcastingom in izmenjavo glasbe v spletu je odlična priložnost, da izboljšate izkušnjo obiskovalcev na svojem spletnem mestu z vdelavo zvoka v objave v blogu. Na srečo WordPress še naprej razvija svojo podporo za vdelavo drugih vrst medijev - in mp3 datoteke so ene tistih, ki jih je enostavno narediti!

Čeprav je predvajanje predvajalnika za nedavni intervju odlično, gostovanje dejanske zvočne datoteke morda ni priporočljivo. Večina spletnih gostiteljev za spletna mesta WordPress ni optimizirana za pretakanje medijev - zato ne bodite presenečeni, če začnete naleteti na nekatere težave, pri katerih dosežete omejitve uporabe pasovne širine ali zvočnih stojnic. Priporočam, da dejansko zvočno datoteko gostite v storitvi za pretakanje zvoka ali v gostitelju podcast. In ... prepričajte se, da vaš gostitelj podpira SSL (pot https: //) ... spletni dnevnik, ki gostuje varno, ne bo predvajal zvočne datoteke, ki ni varno gostovana drugje.

Kljub temu, če poznate lokacijo svoje datoteke, je vdelava v objavo v spletnem dnevniku precej preprosta. WordPress ima lasten zvočni predvajalnik HTML5, vgrajen neposredno vanj, tako da lahko uporabite kratko kodo za prikaz predvajalnika.

Tu je primer iz nedavne epizode podcasta, ki sem jo naredil:

Z najnovejšo ponovitvijo urejevalnika Gutenberg v WordPressu sem le prilepil pot zvočne datoteke in urejevalnik je dejansko ustvaril kratko kodo. Sledi dejanska kratka koda, kjer bi zamenjali src s polnim URL-jem datoteke, ki jo želite predvajati.

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

WordPress podpira vrste datotek mp3, m4a, ogg, wav in wma. Lahko imate celo kratko kodo, ki zagotavlja nadomestno možnost, če imate obiskovalce, ki uporabljajo brskalnike, ki ne podpirajo enega ali drugega:

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

Kratko kodo lahko izboljšate tudi z drugimi možnostmi:

  • zanka - možnost zanke zvoka.
  • samodejno predvajanje - možnost samodejnega predvajanja datoteke takoj, ko se naloži.
  • prednalaganje - možnost prednalaganja zvočne datoteke s strani.

Vse skupaj združite in dobite naslednje:

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

Zvočni seznami predvajanja v WordPressu

Če želite imeti seznam predvajanja, WordPress trenutno ne podpira zunanjega gostovanja posameznih datotek za predvajanje, vendar ga ponuja, če zvočne datoteke gostite znotraj:

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

obstajajo nekaj rešitev tam lahko svojo otroško temo dodate, ki bo omogočila nalaganje zunanjih zvočnih datotek.

Dodajte svoj vir RSS Podcast v stransko vrstico

Z uporabo predvajalnika WordPress sem napisal vtičnik za samodejni prikaz vašega podcasta v pripomočku stranske vrstice. Ti lahko preberite o tem tukaj in prenesite vtičnik iz repozitorija WordPress.

Prilagajanje predvajalnika zvoka WordPress

Kot lahko vidite na mojem spletnem mestu, je predvajalnik MP3 v WordPressu precej preprost. Ker pa gre za HTML5, ga lahko precej polepšate z uporabo CSS. CSSIgniter je napisal odlično vadnico o prilagajanje predvajalnika zvoka zato ne bom vsega ponovil tukaj ... ampak tukaj so možnosti, ki jih lahko prilagodite:

/* 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;
}

Izboljšajte svoj MP3 predvajalnik WordPress

Obstaja tudi nekaj plačljivih vtičnikov za prikaz vašega MP3 zvoka v nekaterih popolnoma osupljivih predvajalnikih zvoka:

Razkritje: Martech Zone uporablja pridružene povezave za zgornje vtičnike, vključno z Codecanyon, fantastično mesto vtičnikov, ki ima dobro podprte vtičnike ter izjemne storitve in podporo.

Douglas Karr

Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

Povezani članki

Nazaj na vrh
Zapri

Zaznan Adblock

Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.