WordPress Tema Yapımı {Döngü – Loop}

dongu

WordPress tema yapımı derslerine, index.php dosyasını oluşturmayı amaçlayan dersimizle devam ediyoruz. Bu derste wordpress’te loop olarak adlandırılan döngüleri oluşturmaya başlayacağız. Bu dersteki döngüde anasayfada yani index.php’de yazıları göstermek için kullanacağız. Öncelikle index.php’ye eklememiz gereken kodlarla başlayalım.

<?php get_header(); ?>

İndex.php dosyamıza ilk olarak yazmamız gereken kod, yukarıdaki get_header kodu. Bu kod bizim geçen derste oluşturduğumuz header.php dosyasını içeriye aktarmamızı sağlıyor. Eğer header.php dosyasını daha oluşturmadıysanız aşağıdaki linkten bu dosyayı oluşturmayı öğrenebilirsiniz.

WordPress Tema Yapımı {Header.php dosyasını oluşturmak}

Eğer bu dersi daha önce okuduysanız ve header.php dosyanızı oluşturduysanız devam edebiliriz. Şimdi localhostta çalışıyorsanız eğer sayfanızı yenileyip header.php’nin içine daha önce yazdığımız kodların gözüküp gözükmediğini kontrol edebilirsiniz. Eğer herşeyi düzgün yapmışsak şu anda sitemizde site başlığı ve logonun gözüküyor olması gerekiyor. Sayfa kaynağına baktığınızda da sayfaya head tagının içerisinde bir çok içerik eklendiğini görürsünüz.

Header’ı içeriye aktardıktan sonra artık içerik kısmında neler olacağına karar verebiliriz. Ben içeriğimin “container” adını verdiğim bir class içerisinde olmasını istiyorum. Bu bütün içeriği kapsayacak bir class olacak ve site içeriğimin nerede olmasını istediğime karar vereceğim class bu olacak. Şimdi bu class’ı tanımlayalım.

<div class="container">
</div>

Şeklinde bir kod ile container isimli bir class’ı oluşturan div tagımı açtım ve kapadım. Kapama işlemini divi açtığınız anda yaparsanız sitenizde meydana gelebilecek herhangi bir kayma probleminin önüne geçmiş olursunuz. Bunun altına 2 adet div daha açacağım. Bu divlerden birisi benim döngümü içine alacakken diğerinin içerisine de sidebar’ımı yerleştireceğim.

<div class="container">
     <div class="sol-kolon">
     </div>
     
     <div class="sag-kolon">
     </div>
</div>

Bütün divlerimi açtım ve kapadım. Sol kolon ve sağ kolon isimli iki adet classım oldu ve bu classlar container isimli bir ana class’ın içerisinde. Bu kolonlarda birisine sidebar diğerine de döngü gelecek. Siz hangisini isterseniz seçebilirsiniz. Ancak css dosyanızı ona göre şekillendirmeyi unutmayın. Şimdi sol kolonun içerisine döngümü yerleştireceğim. Bunun için aşağıdaki kod ile döngüyü başlatıyorum.

<?php
     if (have_posts()) :
          while (have_posts()):
               the_post(); ?>

Kullandığım kodun ikinci satırında if (eğer) kodu ile daha önceden yayınlanan yazıların olup olmadığını kontrol ediyorum. Ardından while (iken) kodu ile yazılar var “iken” ne olacağını yazacağımı belirtiyorum. Ardından 4. satırda da yazıların gelmesini istediğimi söylüyorum. Buradan sonra yazacağımız kodlar tamamen size kalmış durumda. Ben aşağıdaki gibi ilerleyeceğim.

<?php the_title(); ?>

Yukarıdaki the_title kodu ile konularımın başlıklarını yazdırdım. Şimdi sadece konu başlıklarının nasıl yazdırıldığını kontrol etmek isterseniz eğer bu koddan sonra aşağıdaki kod ile if ve while kodlarını kapatıp sayfanızı yenileyebilirsiniz.

<?php endwhile; else: endif;?>

Bu kodu the_title dan sonra ekleyip sayfanızı yenilediğinizde sayfanızda header’ın bitiminden sonra daha önceden eklediğiniz yazıların başlıklarının yazdırıldığını görebilirsiniz. Peki bu başlıkların altında yazılarımın özetlerini göstermek istersem ne yapmam gerekir diye soracak olursanız bunun için de the_title kodundan hemen sonra ve endwhile, else, endif kodlarından hemen önce aşağıdaki kodu eklemeniz gerekiyor.

<?php the_excerpt(); ?>

Excerpt kodu yazımızın özetini oluşturan kodumuzdur. Bu kodu koyduğunuz yerde yazınızın ilk 55 kelimesi gözükecek ve ardından [Devam…] şeklinde bir link çıkacaktır. Bu kelime sayısını değiştirmeyi başka bir yazımda anlatacağım.
Şimdiye kadar yazdıklarımızda sayfanızı yenilediğinizde sayfanızda önce yazı başlığı ardından da yazının özetinin geldiğini görmeniz gerekiyor.

Bu başlıkları ve özeti şekillendirmek için de bunları birer div veya span içerisine alarak şekillendirebilirsiniz. Yazının sonunda hepsini bir arada vereceğim. Ama öncelikle anasayfada gözüken yazıların “Öne Çıkarılmış Görsel”lerini nasıl ekleyeceğimizi göstermek istiyorum. Bunu yapmak için döngümüzün içerisinde the_title ya da the_excerpt’in olduğu bölümde bu kodlardan önce veya sonra aşağıdaki kodumuzu ekleyeceğiz.

<?php if ( has_post_thumbnail()) : ?>
     <?php the_post_thumbnail();?>
     <?php else: ?>
     <?php endif;?>

Bu kod ne iş yapar ondan bahsedelim biraz. Öncelikle 1 satırda eğer koşulu ile yazıya eklenen bir Öne Çıkarılmış Görsel var mı, yok mu onu kontrol ediyoruz. Eğer varsa the_post_thumbnail kodu ile bu görseli sayfaya yazdırıyoruz. Ardından else kodu ile eğer görsel yoksa ne olacağını yazıyoruz. Bu şekilde else; kodundan sonra birşey yazmayıp direkt in koşulunu kapatırsanız görsel yoksa yerine hiçbirşey konulmayacaktır. Ardından endif; ile koşulumuzu bitiriyoruz.

Şimdi sayfayı yenilediğimizde sayfada başlık, görsel ve özetin olduğunu görebiliriz. Artık döngümüz hazır ve index.php sayfamızın içerisine footer’ımızı dahil edip sayfanın düzgün gözükmesini sağlayabiliriz. Bunun için aşağıdaki kod ile footer.php dosyamızı çağırıyoruz.

<?php get_footer(); ?>

Bu kod gt_header kodu ile aynı mantıkta çalışıyor ve footer dosyamızı içeriye aktarmamıza olanak sağlıyor.

Artık tüm kodlarımızı bir araya getirirsek şunun gibi gözükmesi gerekmektedir.

<?php get_header(); ?>
	<div class="container">
        <div class="sol-kolon">
        <?php
			if (have_posts()) :
				while (have_posts()):
					the_post(); ?>
                    	<h2><?php the_title(); ?></h2>
                        
                        <span><?php the_excerpt(); ?></span>
                        
                        <?php if ( has_post_thumbnail()) : ?>
							<span><?php the_post_thumbnail();?></span>
								<?php else: ?>
							<?php endif;?>
                            
			<?php endwhile; else: endif;?>
		</div>
         
		<div class="sag-kolon">
		</div>
	</div>

<?php get_footer(); ?>

Geriye sadece sidebar’ı eklemek kalıyor. Onu da bir sonraki desimizde anlatacağım. Herhangi bir sorunuz olursa sorabilirsiniz. İyi çalışmalar.

Facebook Profile photo

#r00tadmin #Basit Bir kuL #Allah (c.c) Bir kuLu işte bazen bir adem bazen bir aLem !

Facebook Profile photo

Author: Guest

#r00tadmin #Basit Bir kuL #Allah (c.c) Bir kuLu işte bazen bir adem bazen bir aLem !

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir