WordPress: MP3 ბლოგის ჩასმა თქვენს ბლოგპოსტში

ბლოგის განთავსება MP3 ფლეერი WordPress– ით

პოდკასტინგისა და მუსიკის გაზიარების ინტერნეტით გავრცელება, არის დიდი შესაძლებლობა, გაზარდოთ თქვენი ვიზიტორების გამოცდილება თქვენს საიტზე, აუდიო ჩასვით ბლოგზე. საბედნიეროდ, WordPress განაგრძობს მხარდაჭერას სხვა მედიის ტიპების ჩასართავად - და mp3 ფაილი ერთ-ერთია, რომელთა გაკეთებაც მარტივია!

მართალია, ბოლო ინტერვიუში მოთამაშის ჩვენება შესანიშნავია, მაგრამ რეალური აუდიო ფაილის მასპინძლობა სასურველი არ იქნება. WordPress საიტების ვებ მასპინძლების უმეტესობა არ არის ოპტიმიზირებული სტრიმინგის საშუალებისთვის - ასე რომ, ნუ გაგიკვირდებათ, თუ დაიწყებთ პრობლემებს, სადაც შეასრულებთ სიჩქარის გამოყენების შეზღუდვას ან საერთოდ აუდიო ჩერდება. მე გირჩევთ მოაწყოთ რეალური აუდიო ფაილი ჰოსტინგის აუდიო სერვისზე ან პოდკასტის ჰოსტინგის ძრავაზე. და… დარწმუნდით, რომ თქვენი მასპინძელი მხარს უჭერს SSL- ს (https: // ბილიკი)… ბლოგი, რომელიც უსაფრთხოდ არის განთავსებული, არ ითამაშებს აუდიო ფაილს, რომელიც უსაფრთხოდ არ არის განთავსებული სხვაგან.

თქვა, რომ შენ იცი შენი ფაილის ადგილმდებარეობა, ბლოგის პოსტში ჩასმა საკმაოდ მარტივია. WordPress– ს უშუალოდ ჩაშენებული აქვს საკუთარი HTML5 აუდიო პლეერი, ასე რომ შეგიძლიათ გამოიყენოთ მოკლე კოდი პლეერის სანახავად.

აი მაგალითი, რომელიც გავაკეთე ბოლო პოდკასტის ეპიზოდიდან:

WordPress– ში გუტენბერგის რედაქტორის უახლესი განმეორებით, მე ახლახან ჩასვით აუდიო ფაილის გზა და რედაქტორმა რეალურად შექმნა მოკლე კოდი. მიჰყვება ფაქტობრივი მოკლე კოდი, სადაც შეცვლიდით src- ს თქვენთვის სასურველი ფაილის სრული URL- ით.

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

WordPress მხარს უჭერს mp3, m4a, ogg, wav და wma ფაილების ტიპებს. მაშინაც კი, შეგიძლიათ გქონდეთ მოკლე კოდი, რომელიც უზრუნველყოფს დაბრუნებას იმ შემთხვევაში, თუ სტუმრები გყავთ ისეთი ბრაუზერების გამოყენებით, რომლებიც არ უჭერენ მხარს ერთს ან მეორეს:

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

შეგიძლიათ გააუმჯობესოთ მოკლე კოდი, ისევე როგორც სხვა ვარიანტებით:

  • loop - აუდიოს ციკლის ვარიანტი.
  • autoplay - ფაილის ავტომატურად დაკვრის ვარიანტი, როგორც კი ჩაიტვირთება.
  • preload - აუდიო ფაილის გვერდის წინასწარ ჩატვირთვის ვარიანტი.

განათავსეთ ყველაფერი და აი რას მიიღებთ:

[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 პლეერის გამოყენებით მე დავწერე დანამატი თქვენი პოდკასტის ავტომატურად სანახავად sidebar ვიჯეტში. Შენ შეგიძლია წაიკითხეთ ამის შესახებ აქ და ჩამოტვირთეთ მოდული WordPress საცავისგან.

WordPress Audio Player- ის პერსონალიზაცია

როგორც ხედავთ ჩემს საკუთარ საიტს, 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;
}

გააუმჯობესეთ თქვენი WordPress MP3 Player

ასევე არსებობს ფასიანი დანამატები თქვენი MP3 აუდიოს საჩვენებლად აბსოლუტურად განსაცვიფრებელ აუდიო პლეერებში:

გამჟღავნება: მე ვხმარობ შვილობილი ბმულებს ზემოთ მოცემული დანამატებისთვის Codecanyon, ფანტასტიკური ფანტასტიკური საიტი, რომელსაც აქვს კარგად მხარდაჭერილი დანამატები და შესანიშნავი სერვისი და მხარდაჭერა.

რას ფიქრობთ?

ეს საიტი იყენებს Akismet- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.