arama

WordPress Tema Entegre – İndex.php Düzenleme

Wordpress
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • Serkan Erdoğan

Merhabalar, WordPress Tema Entegre serimize kaldığımız yerden devam ediyoruz. Hatırlarsınız ki bir önceki yazımızda tema dosyalarının parçalanmasını anlatmıştık. Bir önceki yazıyı okumadıysanız ve merak ediyorsanız, bkz: WordPress Tema Entegre – Temayı Parçalama

Evet, kaldığımız yerden devam edelim. İlk olarak iş planımızı çıkarmak olacaktır ve plana göre; ana sayfamız olan ‘index.php’ dosyasını dinamik hale getirme işlemi ile başlayacağız. Bu işlemi maddeler halinde sıraya koyacak olursak aşağıdaki gibi bir sıralamaya sokmuş olacağım.

  1. İlk olarak temamıza Thumbnail(Yazı Resmi) özelliğini eklemeyi,
  2. Yazıların While döngüsü ile kategori, başlık, özet, tarih, kategori ve yazı resmi gibi bilgilerinin çekilmesi,
  3. PageNavi olarak adlandırılan sayfalama sistemini eklentisiz olarak eklemeyi göstermiş olacağım.

İlk olarak listenin en başındaki maddeden başlayalım. Bunun için tema ana dizinine functions.php adında bir dosya oluşturuyoruz ve <?php ?> taglarımızı açıyoruz. Daha sonra ise aşağıda vereceğim kodu kullanarak temamızın Thumbnail desteğini oluşturuyoruz.

1
2
3
4
5
6
7
/* Thumbnail Fonskiyonunu Ekliyoruz */
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 640, 480, true ); // Bu kısım Standart Wordpress Resim Büyüklüğüdür.
add_image_size('kucuk-resim', 250, 175, true); // Küçük boyutlu resim değerleridir.
add_image_size('buyuk-resim', 450, 290, true); // Orta boyutlu resim değerleridir.
/* örnek: add_image_size('resim-adi', 999, 999, true);  bu kod ile istediğiniz kadar özelleştirilmiş resim biçimi ekleyebilirsiniz */ }

Bu verdiğim kodları functions.php dosyasına eklediğinizde artık temamız thumbnail desteği almış olacak ve ilerleyen adımlarda herhangi bir sıkıntı çekmeyeceksiniz.

İçeriklerin Dinamik Olarak Çekilmesi

Şimdi yazıları ve içerik bilgilerini while döngüsü içerisine alarak çekme işlemine başlayalım. Öncelikle temamızın dinamik olmayan hali bu şekilde gözükmektedir.

Temanın HTML Post Görüntüsü

Index.php’de yapacağımız değişiklikler sonrası temamızı wordpress yönetim panelinden eklenen yazıları çekmek üzere ayarlayacağız. İlk olarak bunun için temamızın her bir yazısı için tekrar eden kodlarını tespit etmemiz gerekmektedir. Altta gösterdiğim resim gibi olacaktır;

Yukarıdaki resimde farklı renklerde dikdörtgenler içine aldığım kod parçaları sürekli tekrar ediyorlar. Bu tekrarlı kodlardan sadece bir tanesi bize lazım olacaktır yani biri dışında hepsini index.php dosyası içerisinden silebilirsiniz. Daha sonra ise vereceğim kodları kendi temanıza uyarlayarak işleme devam ediyoruz.

1
2
3
4
5
6
7
if(have_posts()) {
while (have_posts()){
the_posts();
HTML KODLARINIZ
}
}
else echo 'Görüntülenecek makale bulunamadı!';

Şimdi ise bu bu while döngüsünün içinde işinize yarayacak bir takım kod parçalarını sizlere vereceğim.

1
2
3
4
5
6
7
8
9
the_post_thumbnail('buyuk-resim'); //Functions.php ile yazı thumbnaillarını çeker.
the_title(); //Yazı başlığını çeker.
the_permalink(); //Yazı linkini çeker.
the_date(); //Yazı tarihini çeker.
the_time(); //Yazı saatini çeker.
the_author(); //Yazının yazar adını çeker.
the_excerpt(); //Yazının özetini çeker.
the_category(); //Yazı kategorisini çeker.
the_author_link(); //Yazar linkini çeker.

PageNavi’nin Yapılması

Son olarak ise PageNavi‘yi yapıp bu dersi sonlandıracağız. Bunun için yine öncelikle functions.php bizim yardımımıza koşacaktır. Şimdi sizlere GitHub hesabımdan bir projenin linki vereceğim ve buradaki adımlara göre işlemleri takip etmenizi isteyeceğim. Kodları buraya yazamıyorum çünkü kullandığımız kod editörü sıkıntı çıkartıyor. Bu sıkıntıyı çözene kadar bazı kodları GitHub üzerinden vermeye devam edeceğim.

GitHub Proje Linki : Yazarbey WordPress Tema Entegre – Eklentisiz PageNavi Yapımı

Bu yazımızın sona da burada gelmiş oluyoruz. Bütün işlemleri düzgün bir şekilde yaptığımızda index.php ile işimiz bitmiş oluyor ve bir sonraki ders için beklemeye geçmeye başlıyoruz. Bir sonraki ders yazımızda header.php ile ilgili işlemleri tamamlayacağız.