WordPress: Blog Yazınıza MP3 Çalar daxil edin

WordPress ilə Blog Post MP3 Çalar

Podkastinq və musiqi paylaşımı bu qədər geniş yayılmış onlayn olaraq, blog yazılarınıza səs yerləşdirərək ziyarətçilərinizin saytınızdakı təcrübələrini artırmaq üçün əla bir fürsət var. Şükürlər olsun ki, WordPress digər media növlərini yerləşdirmək üçün dəstəyini inkişaf etdirməyə davam edir - və mp3 faylları etmək asan olanlardan biridir!

Son bir müsahibə üçün bir oyunçu nümayiş etdirmək əla olsa da, həqiqi səs sənədini yerləşdirmək məsləhət ola bilməz. WordPress saytları üçün əksər veb hostlar axın mediası üçün optimallaşdırılmamışdır - bu səbəbdən bant genişliyi istifadəsi və ya səs stendlərinizi tamamilə məhdudlaşdırdığınız bəzi problemlərlə qarşılaşmağa başlamağınıza təəccüblənməyin. Həqiqi səs sənədini bir səs yayım xidməti və ya podcast hosting mühərrikində yerləşdirməyi məsləhət görürəm. Və ... ev sahibinizin SSL-ni (https: // yolunu) dəstəklədiyinə əmin olun ... etibarlı bir şəkildə yerləşdirilən bir blog başqa bir yerdə təhlükəsiz şəkildə yerləşdirilməmiş bir audio faylı səsləndirməyəcəkdir.

Dedi ki, dosyanızın yerini bilirsiniz, bloq postuna yerləşdirmək olduqca sadədir. WordPress-in birbaşa daxilində quraşdırılmış öz HTML5 səs pleyeri var, beləliklə pleyeri göstərmək üçün qısa kod istifadə edə bilərsiniz.

Budur son bir podcast epizodundan bir nümunə:

WordPress-də Gutenberg redaktorunun ən son təkrarlanması ilə səs fayl yolunu yapışdırdım və redaktor həqiqətən qısa kodu yaratdı. Əsl qısa kod oynanmaq istədiyiniz sənədin tam URL'si ilə src-i əvəz edəcəyi yerdədir.

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

WordPress mp3, m4a, ogg, wav və wma fayl növlərini dəstəkləyir. Bir və ya digərini dəstəkləməyən brauzerlərdən istifadə edərək ziyarətçiləriniz olması halında geri dönüş təmin edən qısa kodunuz ola bilər:

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

Qısa kodu digər seçimlərlə də inkişaf etdirə bilərsiniz:

  • loop - səsi loop etmək üçün bir seçim.
  • autoplay - fayl yüklənən anda avtomatik olaraq oxutmaq üçün bir seçimdir.
  • əvvəlcədən yükləmə - səs faylını səhifə ilə əvvəlcədən yükləmək üçün bir seçim.

Hamısını bir yerə yığın və əldə etdiyiniz budur:

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

WordPress-də səsli siyahılar

Bir çalğı siyahısına sahib olmaq istəyirsinizsə, WordPress hazırda hər bir faylınızın xarici yerləşdirilməsini dəstəkləmir, ancaq səs sənədlərinizi daxili saxlayırsınızsa təklif edirlər:

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

Var bəzi həllər xarici səs faylının yüklənməsini təmin edəcək Uşaq Temanıza əlavə edə bilərsiniz.

Podcast RSS Feedinizi Kenar Çubuğunuza əlavə edin

WordPress pleyerindən istifadə edərək podkastı avtomatik olaraq bir kenar çubuğu widgetında göstərmək üçün bir plagin yazdım. Bacararsan bu barədə burada oxuyunplagini yükləyin WordPress deposundan.

WordPress Səs Pleyerinin fərdiləşdirilməsi

Saytımda gördüyünüz kimi, MP3 çalar WordPress-də olduqca sadədir. Lakin HTML5 olduğundan CSS-dən istifadə edərək onu biraz geyinə bilərsiniz. CSSIgniter mövzusunda əla bir dərs yazdı audio pleyeri fərdiləşdirmək buna görə hamısını burada təkrarlamayacağam ... ancaq burada dəyişdirə biləcəyiniz seçimlər:

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

WordPress MP3 Çalarınızı gücləndirin

MP3 səslərinizi tamamilə təəccüblü səs pleyerlərində göstərmək üçün bəzi ödənişli plaginlər də var:

Açıqlama: Tərəfdaş linklərimi yuxarıdakı plaginlər vasitəsilə istifadə edirəm Codecanyon, yaxşı dəstəklənən eklentilərə və üstün xidmətə və dəstəyə sahib olan fantastik bir plagin saytı.

Siz nə düşünürsünüz?

Bu sayt spam azaldılması üçün Akismet istifadə edir. Yorumunuzun necə işləndiyini öyrənin.