WordPress: በብሎግ ልጥፍዎ ውስጥ የ MP3 ማጫወቻን ይዝጉ

Douglas Karr ሰኞ, ጃንዋሪ 11, 2021

0 2,234 3 ደቂቃዎች ያነባል

በፖድካስቲንግ እና በሙዚቃ ማጋራት በመስመር ላይ በጣም በተስፋፋ ሁኔታ በብሎግ ልጥፎችዎ ውስጥ ድምጽን በማካተት የጎብኝዎችዎን ተሞክሮ በጣቢያዎ ላይ ለማጎልበት ትልቅ ዕድል አለ ፡፡ እንደ አመሰግናለሁ ፣ WordPress ሌሎች የሚዲያ ዓይነቶችን ለመክተት ድጋፉን ማሻሻል ቀጥሏል - እና mp3 ፋይሎች ለማከናወን ቀላል ከሆኑት ውስጥ አንዱ ናቸው!

ለቅርብ ጊዜ ቃለ መጠይቅ አጫዋች ማሳየቱ በጣም ጥሩ ቢሆንም ትክክለኛውን የድምፅ ፋይል ማስተናገድ ጥሩ ላይሆን ይችላል ፡፡ አብዛኛዎቹ የዎርድፕረስ ጣቢያዎች የድር አስተናጋጆች ለዥረት ሚዲያ የተመቻቹ አይደሉም - ስለዚህ በመተላለፊያ ይዘት አጠቃቀም ወይም በድምጽ ማደያዎ ላይ ሙሉ በሙሉ ወሰን በሚያደርጉባቸው አንዳንድ ጉዳዮች ላይ መሮጥ ቢጀምሩ አይገርሙ ፡፡ ትክክለኛውን የኦዲዮ ፋይል በድምጽ ዥረት አገልግሎት ወይም በፖድካስት አስተናጋጅ ሞተር ላይ እንዲያስተናግድ እመክራለሁ ፡፡ እና… አስተናጋጅዎ ኤስኤስኤልን እንደሚደግፍ እርግጠኛ ይሁኑ (አንድ https: // ዱካ) secure ደህንነቱ በተጠበቀ ሁኔታ የተስተናገደ ብሎግ በሌላ ቦታ ደህንነቱ በተጠበቀ ሁኔታ ያልተስተናገደ የድምጽ ፋይል አይጫወትም ፡፡

ያ ማለት፣ የፋይልዎን ቦታ የሚያውቁ ከሆነ፣ በብሎግ ልጥፍ ውስጥ መክተት በጣም ቀላል ነው። ዎርድፕረስ የራሱ HTML5 ኦዲዮ ማጫወቻ ስላለው ተጫዋቹን ለማሳየት አጭር ኮድ መጠቀም ይችላሉ።

እኔ ካደረግሁት የቅርብ ጊዜ የፖድካስት ክፍል አንድ ምሳሌ ይኸውልዎት-

በዎርድፕረስ ውስጥ ባለው የጉተንበርግ አርታኢ የቅርብ ጊዜ ድግግሞሽ የኦዲዮ ፋይል ዱካውን ለጥፌያለሁ እና አርታዒው በትክክል አቋራጩን ፈጠረ። ትክክለኛው አቋራጭ ኮድ የሚከተለው ነው፣ እርስዎ መጫወት በሚፈልጉት ፋይል ሙሉ ዩአርኤል src የሚተኩበት።

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

ዎርድፕረስ mp3, m4a, ogg, wav እና wma filetypes ይደግፋል. አንዱን ወይም ሌላውን የማይደግፉ አሳሾችን የሚጠቀሙ ጎብኝዎች ባሉዎት አጋጣሚ ውድቀትን የሚሰጥ አቋራጭ ኮድ እንኳን ሊኖርዎት ይችላል-

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

እንዲሁም ከሌሎች አማራጮች ጋር የአጭር ኮዱን ማሻሻል ይችላሉ-

loop - ድምጹን ለመቅረጽ አማራጭ።
ራስ-አጫውት - ፋይሉን እንደጫነ በራስ-ሰር ለማጫወት አማራጭ።
preload - የድምጽ ፋይሉን ከገጹ ጋር ለመጫን አማራጭ።

ሁሉንም በአንድ ላይ ያጣምሩት እና ያገኙትን እነሆ

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

የድምፅ አጫዋች ዝርዝሮች በዎርድፕረስ ውስጥ

የአጫዋች ዝርዝር እንዲኖርዎት ከፈለጉ WordPress በአሁኑ ጊዜ የእያንዳንዱን ፋይሎችዎን ለመጫወት ውጫዊ ማስተናገጃን አይደግፍም ፣ ግን የኦዲዮ ፋይሎችዎን በውስጣቸው የሚያስተናግዱ ከሆነ ያቀርባሉ-

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

አሉ አንዳንድ መፍትሄዎች ውጭ የድምጽ ፋይልን መጫን የሚያስችል የልጅዎን ገጽታ ላይ ማከል ይችላሉ።

የእርስዎን ፖድካስት RSS RSS ወደ የጎን አሞሌዎ ያክሉ

የዎርድፕረስ ማጫወቻውን በመጠቀም ፖድካስትዎን በራስ-ሰር የጎን አሞሌ መግብር ለማሳየት ተሰኪ ፃፍኩ ፡፡ ትችላለህ ስለሱ እዚህ ላይ አንብቡ ና ተሰኪውን ያውርዱ ከዎርድፕረስ ማከማቻ.

የዎርድፕረስ ኦዲዮ ማጫወቻን ማበጀት

ከራሴ ጣቢያ ማየት እንደምትችለው፣ MP3 ማጫወቻው በዎርድፕረስ ውስጥ በጣም መሠረታዊ ነው። ሆኖም፣ HTML5 ስለሆነ፣ በመጠቀም ትንሽ ልታለብሰው ትችላለህ የሲ ኤስ ኤስ. CSSIgniter ላይ አሪፍ አጋዥ ጽፏል የኦዲዮ ማጫወቻውን ማበጀት ስለዚህ ሁሉንም እዚህ አልደግመውም… ግን ሊያበizeቸው የሚችሏቸው አማራጮች እነሆ

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