0 (850) 441 1813 Hafta içi 11:00 - 17:00 info@wpkurs.com
Divi WordPress Theme

Tema Yapımı sidebar.php Takvim

Bu bölümde WordPress Tema Yapımına sidebar.php ile devam ediyoruz. Ziyaretçilerin site içinde gezinmelerine olanak sağlayan menüler, takvim, arşiv dosyaları, site içi arama formu, kayan duyuru yazıları, etiketler, son yazılan yazılar ve sayfalar, adsense reklamlar vb. gibi birçok yönlendirme ve tanıtma işlevi genellikle sidebar bölümünden yürütülür.

Yukarıda saydığım eklenti ya da özelliklerin hepsini tek bir sayfa altında toplamak sıkıcı olacak düşüncesiyle, WordPress Tema Yapımı sidebar.php konusunu bölümlere ayırmaya karar verdim. Bu bölümde sidebar.php dosyamızı  oluşturup, index.php’ye tanıtacağız ve en son olarak sidebar üzerine takvim uygulamasını çağıracağız.

Kontroller ve Hatırlatmalar

* XAMPP çalıştırın

* Oluşturacağımız tüm dosyaları aşağıdaki dizine kaydedin
C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema

* Yaptığımız değişiklikleri kaydettikten sonra localhost
üzerinde sonucu görmek için adres barına aşağıdaki adresi yazın.
http://localhost/wordpress/

*Yaptığımız her değişiklikten sonra kayıt edelim ve browserda refresh ederek izleyelim.

*İşlerimiz bittiğinde XAMPP kapatalım

TemaYapımı sidebar.php dosyası

Wordpress Tema Yapımıtext editor programında (notepad++, webocton, Dreamweaver) yeni bir php sayfası oluşturup, sidebar.php olarak “C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema” dizininin altına kaydedelim. index.php dosyamızı açalım ve sidebar div kısmını kesip, sidabar.php sayfamıza yapıştırıp kaydedelim. Not:her iki dosyayıda kaydedelim. (index.php ve sidebar.php)

Wordpress Tema YapımıŞu aşamada browserdan baktığımızda, “sidebar bölümü” yazısının kaybolduğunu görmemiz gayet normal. Çünkü; index.php henüz sidebar.php’den habersiz. Tanıştırmak tabiki bizim görevimiz. index.php dosyamıza geri dönüp “<?php get_sidebar();?>” komutunu, az önce sidebar div taglarını kestiğimiz yere ekliyoruz. Kayıt ettikten sonra browserdan baktığımızda sayfamızın normale döndüğünü göreceğiz. Bundan sonra sidebar ile ilgili tüm  komutlarımızı sidebar.php üzerine yazacağız.

sidebar.php içindeki “sidebar bölümü” yazısını siliyoruz.  Bunun yerine Takvim başlığını ve takvimi göstermek için iki ayrı  div ekliyoruz. İlk eklediğimiz div’in id bölümüne “calendar_baslik“, ikincisine ise “calendar” isimlerini veriyoruz. calendar_baslik div taglarının arasına “<?php echo “Takvim”;?>” yazıyoruz. “calendar” div taglarının arasına ise takvimi çağıracak olan “<?php get_calendar(); ?>” komutunu yazıyoruz. Wordpress Tema YapımıKaydettikten sonra, browser’dan izliyoruz. Artık takvim başlığımız ve takvimimiz sidebar üzerinde gözükmeye başladı. Dikkat ederseniz son oluşturduğumuz divlerle ilgili yükseklik ve genişlik özelliği belirtmedik. İçlerine açtıkları uygulamalara göre boyutlarını ayarladılar ve ana div olan sidebar divinin dışına taşmadılar. sidebar.php dosyasının son halini üstteki resimden görebilirsiniz. Aşağıda da kodlarını veriyorum.

<div id=””sidebar””> 

<!–– #calendar_baslik ––>

<!–– #calendar ––>

</div>

<!–– #sidebar ––>

Şimdi style.css dosyası ile sidebar, calendar_baslik ve calendar divlerimizin görünümlerini değiştirip, biraz daha güzel bir görüntü elde edelim. style.css dosyamızı açalım ve aşağıdaki kodları dosyamıza ekleyelim. Aradığımız bölümleri daha sonra rahat bulabilmek için  kafamızda bir guruplama yapabiliriz. Mesela; sidebar div özelliklerinin hemen altına bu yeni iki div özelliğini vermek çok mantıklı olur. Ben yazı dizisinin daha rahat takip edilmesi için, son konulara ait komutları dosya sonuna eklemeye çalışıyorum. Sayfa dizaynına fazla girmeden sadece neyi nerden değiştirebileceğinizi gösteriyorum. Tema yapımımız bittiğinde görünüm olarak çok profesyonel birşey beklemeyin, ancak tıkır tıkır işleyen bir wordpress teması yapmış olacağız. Neyse; şimdi style.css dosyasına aşağıdaki kodları ekleyelim ve bu bölümü bitirelim.

Bu kodlarıda eklediğimize göre artık WordPress Temamızın son görüntüsünü ve sayfaların kodlarını aşağıda görebilirsiniz.

Tema Yapımı görünüm

  • index.php sayfa kodu

  • sidebar.php sayfa kodu


  • style.css sayfa kodu


WordPress Tema Yapımı Alınan Dersler:

  • sidebar.php oluşturma
  • index.php içindeki bölümün sidevar.php’ye kopyalanması
  • sidebar için iki ayrı div oluşturulması
  • “<?php get_sidebar();?>” komutunun kullanımı
  • <?php echo “Takvim”;?>” komutunun kullanımı
  • <?php get_calendar(); ?>” komutunun kullanımı
  • style.css dosyası ile oluşturulan divlerin özelliklerinin ayarlanması

Benzer Konular:

Parola Sıfırlama
E-posta adresinizi girin. E-posta ile yeni bir şifre alacaksınız.