WordPress: قم بتضمين مشغل MP3 في منشور المدونة الخاص بك

مدونة Post MP3 Player مع WordPress

مع انتشار البث الصوتي ومشاركة الموسيقى عبر الإنترنت ، هناك فرصة رائعة لتحسين تجربة زوارك على موقعك من خلال تضمين الصوت في منشورات مدونتك. لحسن الحظ ، يواصل WordPress تطوير دعمه لتضمين أنواع وسائط أخرى - و mp3 الملفات هي واحدة من تلك التي يسهل القيام بها!

في حين أن عرض لاعب لمقابلة حديثة أمر رائع ، فقد لا يُنصح باستضافة ملف الصوت الفعلي. لم يتم تحسين معظم مضيفي الويب لمواقع WordPress لبث الوسائط - لذلك لا تتفاجأ إذا بدأت في مواجهة بعض المشكلات حيث وصلت إلى حدود استخدام النطاق الترددي أو توقف الصوت تمامًا. أوصي باستضافة ملف الصوت الفعلي على خدمة دفق الصوت أو محرك استضافة البودكاست. و ... تأكد من أن مضيفك يدعم SSL (مسار https: //) ... المدونة التي يتم استضافتها بشكل آمن لن تقوم بتشغيل ملف صوتي لا يتم استضافته بشكل آمن في أي مكان آخر.

ومع ذلك ، إذا كنت تعرف موقع ملفك ، فإن تضمينه في منشور مدونة أمر بسيط للغاية. يحتوي WordPress على مشغل صوت HTML5 خاص به مدمج فيه مباشرة حتى تتمكن من استخدام رمز قصير لعرض المشغل.

هذا مثال من حلقة بودكاست قمت بها مؤخرًا:

مع أحدث تكرار لمحرر Gutenberg في WordPress ، قمت للتو بلصق مسار الملف الصوتي وقام المحرر بالفعل بإنشاء الرمز القصير. يتبع الرمز المختصر الفعلي ، حيث يمكنك استبدال src بعنوان URL الكامل للملف الذي تريد تشغيله.

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

يدعم WordPress أنواع ملفات 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

إذا كنت ترغب في الحصول على قائمة تشغيل ، فإن WordPress لا يدعم حاليًا الاستضافة الخارجية لكل ملف من ملفاتك للتشغيل ، لكنهم يقدمونها إذا كنت تستضيف ملفاتك الصوتية داخليًا:

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

هناك بعض الحلول هناك يمكنك إضافته إلى موضوع الطفل الخاص بك والذي سيمكن تحميل ملف الصوت الخارجي.

أضف موجز RSS الخاص بالبودكاست إلى الشريط الجانبي الخاص بك

باستخدام مشغل WordPress ، قمت بكتابة مكون إضافي لعرض البودكاست الخاص بك تلقائيًا في أداة الشريط الجانبي. تستطيع قرأت عن ذلك هنا و تنزيل البرنامج المساعد من مستودع WordPress.

تخصيص مشغل الصوت WordPress

كما ترى من خلال موقع الويب الخاص بي ، فإن مشغل MP3 أساسي جدًا في WordPress. ومع ذلك ، نظرًا لأنه 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 لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.