Online Kimya Özel Dersi Al

ÜCRET

600₺

KONU

KİMYA Dilediğin konu!

TARİH

Sen seç! Saat: Sen seç!

Hemen yer ayırt

4.13 Ortam Dosyaları – Ses (Audio)

wordpress tema yapımı

WordPress, şu uzantıları taşıyan ses (audio) dosyalarını destekler:

  • mp3
  • ogg
  • wma
  • m4a
  • wav

Temaya Ses Dosyası Yükleme

WordPress temasına, bir ses (audio) dosyası yüklemenin 2 yolu vardır. Bu yollar şunlardır:

I-Ortam Menüsü İle Ses Dosyası Yükleme

İlki, yönetim panelinde bulunan Ortam->Yeni ekle menüsü ile eklemektir:

WordPress Ortam Dosyaları

II-Blok Editör İle Ses Dosyası Yükleme

İkinci yöntem ise blok editör yardımı ile bir içerik düzenlenirken o içerik için bir ses dosyası eklemektir. Bunun için, editörde, “Blok ekle” ikonuna tıklanır ve açılan küçük pencerede, Ortak bloklar-> Ses dosyası menüsüne gidilerek bu menü seçilir. Aşağıdaki resim bu menüyü göstermektedir:

WordPress – Ses Dosyası Ekleme

“Ses dosyası” menüsü bize, aşağıda görüldüğü gibi, ses dosyası yükleyen/ekleyen bir blok getirir. Bu blokta gördüğümüz “Yükle” butonu ile bir ses dosyası yükleyebiliriz.

WordPress – Ses Dosyası Yükleme/Ekleme

Ses dosyası bloğu ile, yükleme işleminin yanısıra, “Ortam kütüphanesi” botununu kullanarak, kütüphaneye gidebilir ve daha önce yüklenmiş ses dosyalarını ekleyebilir, “Adresten ekle” butonunu kullanarak da başka sitelerden ses dosyaları ekleyebilirsiniz.

Bu iki seçeneğin dışında, tema dosyalarınıza veya WordPress kütüphanesine ses dosyası yüklemek için, bir FTP programı kullanabilirsiniz. Bu yöntem tavsiye edilen bir yöntem değildir, çünkü bu yöntem ile yüklenen ortam dosyaları, web sitenizin veritabanında görünmez.

Audio Kısa Kodu (Audio Shortcode)

Audio kısa kodu ile, ses dosyası yüklenmez, yüklenmiş bir ses dosyası veya başka bir URL adresindeki bir ses dosyası temaya çağırılır.

Audio kısakodu, ortam kütüphanesinde ya da herhangi bir URL adresinde bulunan bir ses dosyasını temamızda kullanmanın bir yoludur. Bu kısa kodu, diğer kısa kodlarda olduğu gibi, dilersek, blok editörün, “kısa kod” bloğu ile dilersek de doğrudan şablon dosyalarımızda kullanabiliriz.

Aşağıda, kütüphaneye yüklenmiş ve adı jazzz.mp3 ve ID değeri 1030 olan bir ses dosyası üzerinden örnekler verilerek, audio kısa kodunun kullanımı açıklanmıştır.

Audio kısa kodunun, WordPress editöründe ve en yalın kullanımı şu şekildedir:

!!! Aşağıda verilen kısa kod örneklerinin, çalışması için, bu kodlardaki audyo ifadesini audio şeklinde değiştirmeniz gerekmektedir.

[audyo src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3"]

Aynı kısa kodu, bir şablon dosyasında kullanmak istersek şöyle kullanırız:

echo do_shortcode('[audyo src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3"]');

Şablon dosyasına, ID değerine göre bir mp3 dosyasını getirmek isterseniz şu kodu kullanabilirsiniz:

$ses_dosyasi_id = 2033; // Buraya getirmek istediğiniz ses dosyasının ID değerini yazmanız yeterlidir

$ses_dosyasi_src = wp_get_attachment_url( $ses_dosyasi_id );

echo do_shortcode('[audyo src="'.$ses_dosyasi_src.'"]');

Ya da şu kodu kullanabilirsiniz:

$ses_dosyasi_id = 2033; // Buraya getirmek istediğiniz mp3 dosyasının ID değerini yazmanız yeterlidir

$ses_dosyasi_src = wp_get_attachment_url( $ses_dosyasi_id );

echo do_shortcode('[audyo mp3="'.$ses_dosyasi_src.'"]');

jazzz.mp3 dosyanızı, ortam kütüphanesinde değil de, temanızın ana dizininde oluşturduğunuz ses-dosyalari adlı bir klasörde barındırıyorsanız, bu dosyayı şu şekilde çağırabilirsiniz:

$ses_dosyasi_url = get_template_directory_uri() . "/ses-dosyalari/jazzz.mp3"; 
echo do_shortcode('[audyo mp3=' . $ses_dosyasi_url . ']');

Yukarıdaki kodların temanıza eklediği ses dosyasının standart çıktısı şu şekilde olacaktır:

WordPress – Ses Dosyası

Ses Dosyası Kısakodunun Özellikleri

Ses dosyası kısa kodu kullanarak eklediğiniz bir ses dosyası, varsayılan olarak, oynatılmak için tıklanmayı bekler ve sona geldiğinde tekrarlamaz. Fakat, dilersek bu iki özelliği değiştirebiliriz.

Otoplay Özelliği – Autoplay

Ses dosyası kısakodunun autoplay özelliği, ses dosyasının otomatik çalma özelliğini yönetir. Bu özellik iki değer alır. Bunlar şunlardır:

  • “1” : Ses dosyasının sayfa açıldığında otomatik olarak çalmaya başlamasını sağlar.
  • “0” – Varsayılan : Ses dosyasının çalmaya başlaması için, play butonuna tıklanması gerekir.

Örnek-1

Aşağıda verilen ses dosyası kısa kodunda çalınan ses dosyası sayfa açıldığında kendiliğinden çalmaya başlar:

[audyo src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3" atuoplay = 1 ]

Tekrarlama Özelliği – Loop

Ses dosyası kısakodunun loop özelliği, ses dosyasının, bittiğinde otomatik olarak başa dönme ve tekrar çalma özelliğini yönetir. Bu özellik iki değer alır. Bunlar şunlardır:

  • "on" : Ses dosyasına bittiğinde başa dönerek, tekrarlama özelliği kazandırır.
  • "off" – Varsayılan : Ses dosyası, bittiğinde tekrarlamaz.

Örnek-1

Aşağıda verilen ses dosyası kısa kodunda, çalınan ses dosyası sona geldiğinde tekrar başa sararak kendiliğinden çalar:

[audyo src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3" loop = "on" ]

Oynatma Listesi – Playlist

WordPress’in yeni editörü, nam-ı diyar blok editör ya da bir başka ismi ile Gutenberg, bu dersin yazıldığı tarihte, ses veya video dosyaları için bir oynatma listesi bloğu içermemektedir. Fakat küçük bir araştırma ile öğrendim ki önümüzdeki üzerinde çalışılıyor ve önümüzdeki güncellemelerden birinde böyle bir blok gelecek.

WordPress’de çareler tükenmez. Bir oynatma listesi yapmak istiyorsak an itibari ile playlist kısa kodunu kullanabiliriz. Yapmamız gerek tek şey bu kısa kod içinde, listelemek istediğimiz ses dosyalarının ID değerlerini sıralamak. Şöyle yani:

!!! Aşağıda verilen kısa kod örneğinin, çalışması için, bu koddaki playliste ifadesini playlist şeklinde değiştirmeniz gerekmektedir.

[playliste ids="2033,2036,2043"]

Yukarıdaki oynatma listesi, temanızda şu şeklide görünecektir:

WordPress – Oynatma Listesi

Yukarıda resmini gördüğünüz çıktıyı vermek için, playlist kısa kodu, aşağıdaki HTML ve JavaScript kodlarını üretir:

<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<div class="wp-playlist wp-audio-playlist wp-playlist-light">
	<div class="wp-playlist-current-item">
		<img src="https://sitecenneti.com/wp-includes/images/media/audio.png" alt="">
		<div class="wp-playlist-caption">
			<span class="wp-playlist-item-meta wp-playlist-item-title">
			“jazzz”		</span>
			<span class="wp-playlist-item-meta wp-playlist-item-album">Victor-18772</span>
			<span class="wp-playlist-item-meta wp-playlist-item-artist">Original Dixieland Jazz Band with Al Bernard</span>
		</div>
	</div>
	<span class="mejs-offscreen">Ses oynatıcı</span>
	<div id="mep_0" class="mejs-container mejs-container-keyboard-inactive mejs-audio" tabindex="0" role="application" aria-label="Ses oynatıcı" style="width: 734.683px; height: 40px; min-width: 245px;">
		<div class="mejs-inner">
			<div class="mejs-mediaelement">
				<mediaelementwrapper id="mejs_15540829156517677">
					<audio preload="none" width="618" src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3" style="width: 100%; height: 100%;" id="mejs_15540829156517677_html5"></audio>
				</mediaelementwrapper>
			</div>
			<div class="mejs-layers">
				<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div>
			</div>
			<div class="mejs-controls">
				<div class="mejs-button mejs-playpause-button mejs-play">
					<button type="button" aria-controls="mep_0" title="Oynat" aria-label="Oynat" tabindex="0"></button>
				</div>
				<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off">
					<span class="mejs-currenttime">00:00</span>
				</div>
				<div class="mejs-time-rail">
					<span class="mejs-time-total mejs-time-slider">
						<span class="mejs-time-buffering" style="display: none;"></span>
						<span class="mejs-time-loaded"></span><span class="mejs-time-current"></span>
						<span class="mejs-time-hovered no-hover"></span>
						<span class="mejs-time-handle">
							<span class="mejs-time-handle-content"></span>
						</span>
						<span class="mejs-time-float" style="display: none; left: 0px;">
							<span class="mejs-time-float-current">00:00</span>
							<span class="mejs-time-float-corner"></span>
						</span>
					</span>
				</div>
				<div class="mejs-time mejs-duration-container">
					<span class="mejs-duration">00:00</span>
				</div>
				<div class="mejs-button mejs-volume-button mejs-mute">
					<button type="button" aria-controls="mep_0" title="Sessiz" aria-label="Sessiz" tabindex="0"></button>
				</div>
				<a class="mejs-horizontal-volume-slider" href="javascript:void(0);" aria-label="Ses  kaydıracı" aria-valuemin="0" aria-valuemax="100" role="slider">
					<span class="mejs-offscreen">Yukarı/aşağı tuşları ile sesi artırın ya da azaltın.</span>
					<div class="mejs-horizontal-volume-total">
						<div class="mejs-horizontal-volume-current" style="left: 0px; width: 100%;"></div>
						<div class="mejs-horizontal-volume-handle" style="left: 100%;"></div>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="wp-playlist-next"></div>
	<div class="wp-playlist-prev"></div>
	<noscript>
		<ol>
			<li>
				<a href='https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3'>jazzz</a>
			</li>
			<li>
				<a href='https://sitecenneti.com/wp-content/uploads/2019/06/jazzz-1.mp3'>jazzz-1</a>
			</li>
			<li>
				<a href='https://sitecenneti.com/wp-content/uploads/2019/06/jazzz-2.mp3'>jazzz-2</a>
			</li>
		</ol>
	</noscript>
	<script type="application/json" class="wp-playlist-script">
	{
		"type":"audio",
		"tracklist":true,
		"tracknumbers":true,
		"images":true,
		"artists":true,
		"tracks":
		[
		{
			"src":"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/jazzz.mp3",
			"type":"audio\/mpeg",
			"title":"jazzz",
			"caption":"",
			"description":"",
			"meta":
			{
				"artist":"Original Dixieland Jazz Band with Al Bernard",
				"album":"Victor-18772",
				"genre":"Acoustic Era",
				"year":"1921",
				"length_formatted":"3:10"
			},
			"image":
			{
				"src":"https:\/\/sitecenneti.com\/wp-includes\/images\/media\/audio.png",
				"width":48,
				"height":64
			},
			"thumb":
			{
				"src":"https:\/\/sitecenneti.com\/wp-includes\/images\/media\/audio.png",
				"width":48,
				"height":64
			}
		},
		{
			"src":"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/jazzz-1.mp3",
			"type":"audio\/mpeg",
			"title":"jazzz-1",
			"caption":"",
			"description":"",
			"meta":
			{
				"artist":"Original Dixieland Jazz Band with Al Bernard",
				"album":"Victor-18772",
				"genre":"Acoustic Era",
				"year":"1921",
				"length_formatted":"3:10"
			},
			"image":
			{
				"src":"https:\/\/sitecenneti.com\/wp-includes\/images\/media\/audio.png",
				"width":48,
				"height":64},
				"thumb":
				{
					"src":"https:\/\/sitecenneti.com\/wp-includes\/images\/media\/audio.png",
					"width":48,
					"height":64
				}
		},
		{
			"src":"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/jazzz-2.mp3",
			"type":"audio\/mpeg",
			"title":"jazzz-2",
			"caption":"",
			"description":"",
			"meta":
			{
				"artist":"Original Dixieland Jazz Band with Al Bernard",
				"album":"Victor-18772",
				"genre":"Acoustic Era",
				"year":"1921",
				"length_formatted":"3:10"
			},
			"image":
			{
				"src":"https:\/\/sitecenneti.com\/wp-includes\/images\/media\/audio.png",
				"width":48,
				"height":64
			},
			"thumb":
			{
				"src":"https:\/\/sitecenneti.com\/wp-includes\/images\/media\/audio.png",
				"width":48,
				"height":64
			}
		}
		]
	}
	</script>
	<div class="wp-playlist-tracks">
		<div class="wp-playlist-item wp-playlist-playing">
			<a class="wp-playlist-caption" href="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3">
				1. <span class="wp-playlist-item-title">“jazzz”</span>
				<span class="wp-playlist-item-artist"> — Original Dixieland Jazz Band with Al Bernard</span>
			</a>
			<div class="wp-playlist-item-length">3:10</div>
		</div>
		<div class="wp-playlist-item">
			<a class="wp-playlist-caption" href="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz-1.mp3">
				2. <span class="wp-playlist-item-title">“jazzz-1”</span>				
				<span class="wp-playlist-item-artist"> — Original Dixieland Jazz Band with Al Bernard</span>
			</a>
			<div class="wp-playlist-item-length">3:10</div>
		</div>
		<div class="wp-playlist-item">
			<a class="wp-playlist-caption" href="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz-2.mp3">
				3. <span class="wp-playlist-item-title">“jazzz-2”</span>
				<span class="wp-playlist-item-artist"> — Original Dixieland Jazz Band with Al Bernard</span>
			</a>
			<div class="wp-playlist-item-length">3:10</div>
		</div>
	</div>
</div>

Ses Oynatıcısına CSS Uygulama

WordPress temamıza, şu kısakod ile bir ses dosyası eklediğimizi varsayalım:

!!! Aşağıda verilen kısa kod örneğinin, çalışması için, bu koddaki audyo ifadesini audio şeklinde değiştirmeniz gerekmektedir.

[audyo src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3"]

Yukarıdaki kod, temanıza jazzz.mp3 dosyası için bir ses oynatıcısı eklerken, aşağıdaki HTML kodlarını üretir:

<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<span class="mejs-offscreen">Ses oynatıcı</span>
<div id="mep_0" class="mejs-container wp-audio-shortcode mejs-audio" tabindex="0" role="application" aria-label="Ses oynatıcı" style="width: 1349px; height: 40px; min-width: 241px;">
	<div class="mejs-inner">
		<div class="mejs-mediaelement">
			<mediaelementwrapper id="audio-1810-1">
				<audio class="wp-audio-shortcode" id="audio-1810-1_html5" preload="none" style="width: 100%; height: 100%;" src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3?_=1">
					<source type="audio/mpeg" src="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3?_=1">
					<a href="https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3">https://sitecenneti.com/wp-content/uploads/2019/06/jazzz.mp3</a>
				</audio>
			</mediaelementwrapper>
		</div>
		<div class="mejs-layers">
			<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div>
		</div>
		<div class="mejs-controls">
			<div class="mejs-button mejs-playpause-button mejs-play">
				<button type="button" aria-controls="mep_0" title="Oynat" aria-label="Oynat" tabindex="0"></button>
			</div>
			<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off">
				<span class="mejs-currenttime">00:06</span>
			</div>
			<div class="mejs-time-rail">
				<span class="mejs-time-total mejs-time-slider" role="slider" tabindex="0" aria-label="Zaman kaydıracı" aria-valuemin="0" aria-valuemax="190.074938" aria-valuenow="5.744099" aria-valuetext="00:06">
					<span class="mejs-time-buffering" style="display: none;"></span>
					<span class="mejs-time-loaded" style="transform: scaleX(1);"></span>
					<span class="mejs-time-current" style="transform: scaleX(0.0306323);"></span>
					<span class="mejs-time-hovered no-hover" pos="103.46875" style="left: 30px; transform: scaleX(0.0661916);"></span>
					<span class="mejs-time-handle" style="transform: translateX(30px);">
						<span class="mejs-time-handle-content"></span>
					</span>
					<span class="mejs-time-float" style="display: none; left: 103.469px;">
						<span class="mejs-time-float-current">00:18</span><span class="mejs-time-float-corner"></span>
					</span>
				</span>
			</div>
			<div class="mejs-time mejs-duration-container">
				<span class="mejs-duration">03:10</span>
			</div>
			<div class="mejs-button mejs-volume-button mejs-mute">
				<button type="button" aria-controls="mep_0" title="Sessiz" aria-label="Sessiz" tabindex="0"></button>
			</div>
			<a class="mejs-horizontal-volume-slider" href="javascript:void(0);" aria-label="Ses  kaydıracı" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="80" aria-valuetext="80%"><span class="mejs-offscreen">Yukarı/aşağı tuşları ile sesi artırın ya da azaltın.</span>
				<div class="mejs-horizontal-volume-total"><div class="mejs-horizontal-volume-current" style="left: 0px; width: 80%;"></div>
					<div class="mejs-horizontal-volume-handle" style="left: 80%;"></div>
				</div>
			</a>
		</div>
	</div>
</div>

Yukarıda gördüğümüz HTML yapısında, CSS uygulamak için kullanabileceğimiz class değerleri de oluşturulmuştur.

Örnek olarak, ses oynatıcısının genişliğini yarı yarıya azaltmak istersek, stil dosyamızda aşağıdaki CSS kodunu kullanmamız yeterli olacaktır:

.wp-audio-shortcode {
  width: 50%;
}

DERSİN SONU

Kimya Özel Dersi Al

Yorum yaparak bize destek olabilirsiniz.

1 yorum: “4.13 Ortam Dosyaları – Ses (Audio)”

Bir cevap yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu kadar HTML serbest:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>