וורדפרס: הטמע נגן MP3 בהודעת הבלוג שלך

נגן MP3 בבלוג עם WordPress

עם פודקאסטים ושיתוף מוזיקה כה נפוצים ברשת, יש הזדמנות מצוינת לשפר את חוויית המבקרים באתר שלך על ידי הטמעת שמע בתוך הודעות הבלוג שלך. למרבה המזל, וורדפרס ממשיכה לפתח את תמיכתה בהטמעת סוגי מדיה אחרים - ו mp3 קבצים הם אחד הקלים לביצוע!

אמנם הצגת נגן לראיון שנערך לאחרונה היא נהדרת, אך לא מומלץ לארח את קובץ האודיו בפועל. מרבית מארחי האתרים לאתרי וורדפרס אינם מותאמים להפעלת מדיה זורמת - לכן אל תתפלאו אם תתחילו להיתקל בבעיות בהן אתם פוגעים במגבלות השימוש ברוחב הפס או בדוכני האודיו שלכם לחלוטין. אני ממליץ לארח את קובץ האודיו בפועל בשירות הזרמת שמע או במנוע אירוח פודקאסטים. ו ... היה בטוח שהמארח שלך תומך ב- SSL (נתיב https: //) ... בלוג שמתארח באופן מאובטח לא ינגן קובץ שמע שלא מתארח בצורה מאובטחת במקום אחר.

עם זאת, אתה יודע שמיקום הקובץ שלך, הטמעתו בפוסט בבלוג היא די פשוטה. לוורדפרס יש נגן שמע משלו HTML5 מובנה ישירות בתוכו כך שתוכל להשתמש בקוד קצר כדי להציג את הנגן.

הנה דוגמה מפרק פודקאסטים שעשיתי לאחרונה:

עם האיטרציה האחרונה של עורך גוטנברג בוורדפרס, פשוט הדבקתי את נתיב קובץ השמע והעורך למעשה יצר את הקוד הקצר. הקוד הקצר אמור להופיע, שם היית מחליף את ה- src בכתובת האתר המלאה של הקובץ שברצונך להשמיע.

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

וורדפרס תומך בסוגי הקובץ mp3, m4a, ogg, wav ו- wma. אתה יכול אפילו לקבל קוד קצר המספק נסיגה במקרה שיש לך מבקרים המשתמשים בדפדפנים שאינם תומכים בזה או אחר:

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

אתה יכול לשפר את הקצר וגם עם אפשרויות אחרות:

  • לולאה - אפשרות לולאת שמע.
  • הפעלה אוטומטית - אפשרות להפעלת הקובץ באופן אוטומטי ברגע שהוא נטען.
  • טעינה מוקדמת - אפשרות לטעינה מוקדמת של קובץ השמע בדף.

חבר הכל והנה מה שאתה מקבל:

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

רשימות השמעת שמע בוורדפרס

אם ברצונך לקבל רשימת השמעה, WordPress אינה תומכת כרגע באחסון חיצוני של כל אחד מהקבצים שלך להפעלה, אך הם מציעים זאת אם אתה מארח את קבצי השמע שלך באופן פנימי:

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

יש כמה פתרונות שם תוכלו להוסיף לנושא ילדכם שיאפשר טעינה של קובץ שמע חיצוני.

הוסף את עדכון ה- RSS שלך לפודקאסט לסרגל הצד שלך

באמצעות נגן הוורדפרס כתבתי תוסף להצגת הפודקאסט שלך באופן אוטומטי ביישומון סרגל הצד. אתה יכול קרא על זה כאן ו הורד את התוסף ממאגר וורדפרס.

התאמה אישית של נגן האודיו של וורדפרס

כפי שניתן לראות באתר שלי, נגן ה- MP3 די בסיסי בוורדפרס. עם זאת, מכיוון שמדובר ב- HTML5, תוכלו להלביש אותו לא מעט באמצעות CSS. CSSIgniter כתב הדרכה נהדרת בנושא התאמה אישית של נגן השמע אז אני לא אחזור על הכל כאן ... אבל להלן האפשרויות שתוכלו להתאים אישית:

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

שפר את נגן ה- MP3 שלך ב- WordPress

יש גם כמה תוספים בתשלום להצגת שמע MP3 שלך בכמה נגני שמע מדהימים לחלוטין:

גילוי נאות: אני משתמש בקישורי השותפים שלי עבור התוספים הנ"ל באמצעות Codecanyon, אתר תוספים נהדר שיש בו תוספים נתמכים היטב ושירות ותמיכה יוצאים מן הכלל.

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.