وردپرس: MP3 Player را در پست وبلاگ خود قرار دهید

بلاگ ارسال MP3 Player با وردپرس

با انتشار پادکست و به اشتراک گذاری موسیقی به صورت آنلاین ، فرصتی عالی برای افزایش تجربه بازدید کنندگان خود در سایت خود با قرار دادن صدا در پست های وبلاگ وجود دارد. خوشبختانه ، وردپرس همچنان به پشتیبانی خود از تعبیه انواع دیگر رسانه ها ادامه می دهد - و mp3 پرونده ها یکی از مواردی هستند که انجام آنها آسان است!

اگرچه نمایش یک پخش کننده برای مصاحبه اخیر بسیار خوب است ، اما ممکن است میزبانی از فایل صوتی واقعی توصیه نشود. اکثر میزبانان وب سایت های وردپرس برای پخش جریانی رسانه بهینه نیستند - بنابراین اگر در برخی از موارد با محدودیت استفاده از پهنای باند یا توقف های صوتی خود مواجه شدید ، تعجب نکنید. توصیه می کنم فایل صوتی واقعی را روی سرویس پخش جریانی صوتی یا موتور میزبانی پادکست میزبانی کنید. و… مطمئن شوید که میزبان شما از SSL پشتیبانی می کند (یک مسیر https: //)… وبلاگی که بصورت ایمن میزبانی می شود ، یک فایل صوتی را که به طور ایمن در جای دیگری میزبانی نشده است ، پخش نمی کند.

با این اوصاف ، شما می دانید که محل پرونده خود چیست ، جاسازی آن در یک پست وبلاگ کاملاً ساده است. وردپرس پخش کننده صوتی HTML5 مخصوص به خود را دارد که مستقیماً درون آن تعبیه شده است بنابراین می توانید از کد کوتاه برای نمایش پخش کننده استفاده کنید.

مثالی از قسمت اخیر پادکست که من کار کردم را در اینجا مشاهده می کنید:

با آخرین تکرار ویرایشگر گوتنبرگ در وردپرس ، من فقط مسیر فایل صوتی را جایگذاری کردم و ویرایشگر در واقع کد کوتاه را ایجاد کرد. کد کوتاه واقعی دنبال می شود ، جایی که می توانید src را با URL کامل پرونده مورد نظر پخش شده جایگزین کنید.

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

وردپرس از انواع پرونده های mp3 ، m4a ، ogg ، wav و wma پشتیبانی می کند. حتی می توانید یک کد کوتاه داشته باشید که در صورت بازدید کننده با استفاده از مرورگرهایی که از یکی یا دیگری پشتیبانی نمی کنند ، بازگردانی می کند:

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

می توانید کد کوتاه را با سایر گزینه ها نیز ارتقا دهید:

  • حلقه - گزینه ای برای حلقه صدا.
  • پخش خودکار - گزینه ای برای پخش خودکار پرونده به محض بارگیری آن است.
  • preload - گزینه ای برای بارگیری مجدد فایل صوتی با صفحه.

همه را کنار هم قرار دهید و در اینجا چیزی است که به دست می آورید:

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

لیست های پخش صوتی در وردپرس

اگر می خواهید یک لیست پخش داشته باشید ، وردپرس در حال حاضر از میزبانی خارجی هر یک از پرونده های شما برای پخش پشتیبانی نمی کند ، اما اگر میزبان فایل های صوتی خود هستید ، آنها آن را ارائه می دهند:

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

وجود دارد چند راه حل در آنجا وجود دارد که می توانید به Child Theme خود اضافه کنید که بارگیری فایل صوتی خارجی را امکان پذیر می کند.

خوراک 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 Player وردپرس خود را تقویت کنید

همچنین برخی از پلاگین های پرداخت شده برای نمایش صدای MP3 شما در برخی از پخش کننده های صوتی کاملاً خیره کننده وجود دارد:

افشای اطلاعات: من از طریق پیوندهای وابسته خود برای پلاگین های فوق استفاده می کنم CodeCanyon را، یک سایت پلاگین خارق العاده که دارای افزونه های کاملاً پشتیبانی شده و خدمات و پشتیبانی فوق العاده است.

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.