sadržaj MarketingMarketing alati

WordPress: Ugradite MP3 uređaj u svoj blog post

Uz tako rasprostranjene podcastinge i razmjenu muzike na mreži, postoji izvrsna prilika da poboljšate iskustvo posjetitelja na svojoj web lokaciji ugrađivanjem zvuka u postove na blogu. Srećom, WordPress nastavlja razvijati svoju podršku za ugrađivanje drugih vrsta medija - i mp3 datoteke su jedne od onih koje je lako učiniti!

Iako je prikazivanje uređaja za nedavni intervju izvrsno, hosting stvarne audio datoteke možda neće biti preporučljiv. Većina web hostova za WordPress web lokacije nisu optimizirani za streaming medija - zato nemojte biti iznenađeni ako počnete nailaziti na neke probleme u kojima dolazite do ograničenja propusnosti ili zvučnih kablova. Preporučio bih hosting stvarne audio datoteke na usluzi audio streaminga ili na mehanizmu za hosting podcasta. I ... budite sigurni da vaš domaćin podržava SSL (https: // putanja) ... blog koji je sigurno hostiran neće reproducirati audio datoteku koja nije sigurno hostirana negdje drugdje.

Međutim, ako znate lokaciju svoje datoteke, ugrađivanje u post na blogu je prilično jednostavno. WordPress ima svoj vlastiti HTML5 audio player ugrađen direktno u njega tako da možete koristiti kratki kod za prikaz playera.

Evo primjera iz nedavne epizode podcasta koju sam radio:

Sa najnovijom iteracijom Gutenberg editora u WordPress-u, samo sam zalijepio putanju audio datoteke i urednik je zapravo kreirao kratki kod. Slijedi stvarni kratki kod, gdje biste zamijenili src punim URL-om datoteke koju želite reproducirati.

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

WordPress podržava mp3, m4a, ogg, wav i wma datoteke. Možete čak imati i kratki kôd koji pruža rezervni slučaj u slučaju da posjetitelji koriste preglednike koji ne podržavaju jedan ili drugi:

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

Kratki kod možete poboljšati i drugim opcijama:

  • petlja - opcija za ponavljanje zvuka.
  • automatska reprodukcija - opcija za automatsko reproduciranje datoteke čim se učita.
  • prethodno učitavanje - opcija za prethodno učitavanje audio datoteke sa stranicom.

Sve to spojite i evo šta ćete dobiti:

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

Audio plejliste u WordPressu

Ako želite imati popis za reprodukciju, WordPress trenutno ne podržava eksterno hostiranje svake vaše datoteke za reprodukciju, ali nude je ako interno hostirate audio datoteke:

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

Oni su neka rješenja tamo možete dodati svojoj dječjoj temi koja će omogućiti vanjsko učitavanje audio datoteka.

Dodajte svoj RSS feed za Podcast na bočnu traku

Koristeći WordPress player, napisao sam dodatak za automatski prikaz vašeg podcasta u widgetu bočne trake. Možeš pročitajte o tome ovdje i preuzmite dodatak iz spremišta WordPress.

Prilagođavanje WordPress audio uređaja

Kao što možete vidjeti sa moje stranice, MP3 player je prilično jednostavan u WordPress-u. Međutim, pošto je to HTML5, možete ga prilično dotjerati koristeći CSS. CSSIgniter je napisao odličan tutorijal o prilagođavanje audio uređaja pa neću sve ovdje ponavljati ... ali evo opcija koje možete prilagoditi:

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

Poboljšajte svoj WordPress MP3 uređaj

Postoje i neki dodaci koji se plaćaju za prikazivanje vašeg MP3 zvuka u nekim apsolutno zapanjujućim audio uređajima:

Disclosure: Martech Zone koristi affiliate linkove za gore navedene dodatke uključujući Codecanyon, fantastična web lokacija s dodatcima koja ima dobro podržane dodatke i izvanrednu uslugu i podršku.

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desetinama uspješnih MarTech startupova, pomogao je u dubinskom pregledu od preko 5 milijardi dolara u Martechovim akvizicijama i investicijama, te nastavlja da pomaže kompanijama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak za digitalnu transformaciju i MarTech stručnjak i govornik. Douglas je također objavljeni autor Dummie's vodiča i knjige o poslovnom liderstvu.

Vezani članci

Nazad na vrh dugmeta
blizu

Adblock otkriven

Martech Zone je u mogućnosti da vam pruži ovaj sadržaj bez ikakvih troškova jer mi unovčavamo našu stranicu putem prihoda od oglasa, partnerskih veza i sponzorstava. Bili bismo zahvalni ako biste uklonili svoj blokator oglasa dok gledate našu web stranicu.