WordPress Tema Yapısı 5b: Content

Bu dersimizde önemli konulardan birine geçiyoruz. Artık konu başlıklarımızın altında içeriğimizi göstermeye başlayabiliriz.

1. Adım

 php the_content ();?> kodunu title kodunun altına yerleştiriyoruz.

Sayfayı kaydedip yenilediğimizde artık konularımızın içeriğinin de geldiğini görebiliyoruz. the_content fonksiyonu yazılarımızın içeriğini getirmek için kullanılır. Yazılarımız şu anda ekranın tamamını kaplıyor. Bu bizim style.css dosyamız ile alakalı. Daha sonra bu dosya üzerinde değişiklik yapınca yazılarımız istediğimiz uzunlukta gözükecektir.

Birden fazla yazımız varsa sayfada bu şekilde gözükecektir.

Şimdi Görünüm > Sayfa Kaynağı menüsüne girelim.

Buna benzer kodlarla karşılaşmanız gerekiyor. Bu index.php dosyamızın içeriğidir. Burada gördükleriniz resimler, yazılar, başlıklar. Tüm kodlamaları gördüğünüz gibi wordpress sizin yerinize yapıyor. Aslında bunlar index.php dosyamızın içeriği değil. İçeriği index.php kendisi oluşturuyor.

P etiketleri paragraf başı yapmak için kullanılır. Bu P etiketini wordpress sizin yerinize oluşturuyor.

2. Adım

Biz yazdığımız konuları yine görünmeyen kutuların içine koyalım. Daha sonra style.css kodları ile şu anda görünmeyen kutulara renk, resim, boşluk verebiliriz. Bunu Div etiketini kullanarak yapıyoruz. the_content fonksiyonunu çerçeveliyoruz. ID ismi olarak ise entry kullanıyoruz.

<div class=”entry”>

</ div>

Kodlarımızı yukarıdaki gibi düzenleyip kaydediyoruz. Şimdi sayfamızı tekrar yenileyelim ve kaynak kodlara tekrar bakalım.

Artık her konumuzda class=”entry” etiketlerini görebilmeniz gerekir.

id ve class arasındaki fark ne?

Sayfalarımızda kullandığımız id tektir. Fakat class birden çok kullanılabilir. Yani bir sayfada id etiketinden bir defa kullanmamız gerekir. Bu dünyada sizden bir tane olduğu gibi, id de sayfada tek olmalıdır.

3. Adım

Şimdi div etiketi ile yazımızın başlığı ve içeriğini sarıyoruz.

<div class=”post”>

</ div>

Buradaki id ve class isimlerini biz kendimize göre veriyoruz. Fakat siz kendinize göre farklı isimler verebilirsiniz. Kısa hatırlayacağınız şeyler olabilir.

Başta demiştik ya. Kodlar düzenli gözükürse diye. Üstteki resimle bu resim arasında kodlar daha düzenli hale getirilmiş. Hangi kodlar diğerlerini kapsamış, içine almış. Anlaması daha kolay hale getirilmiş.

Ayrıca gözüktüğü gibi kırmızı ve yeşil ile işaretlenmiş div etiketleri gözüküyor. Bunlar hangi div etiketinin açılıp kapandığını gösteriyor.

Neden class=”post” ve class=”entry” olarak div kullandık?

Yaptığımız her yazımız ayrı bir post yani ayrı bir kutu olarak gösteriliyor. Yani o kutuya ait biçimlendirme yapabiliriz. İçindeki başlık ve konu içeriğini de ayrı kutular haline getirdik ki? Onları da ayrıca biçimlendirelim.

Eğer bu konuyu biraz kavrayabildiysek sonraki derslerimizde konu yayınlanma tarihi, yazar ve kategori bilgilerini de göstereceğiz.

Kaynak: http://www.wpdesigner.com/2007/02/26/wp-theme-lesson-5b-the-content/