Tema Yapımı sidebar.php Kategoriler

WordPress Tema Yapımı derslerimizde en son sidebar üzerine Takvim eklemiştik. Şimdi temamıza kategoriler bölümünü ekleyeceğiz. Kodlara geçmeden önce WordPress Admin paneline giriş yaparak,  kategoriler bölümünden 2-3 tane kategori oluşturun. Daha sonra bu kategorilerin altına yeni yazılar ekleyin. Bu sayede kodları yazdıktan hemen sonra sonucu görebilirsiniz.  Ben kendi temamın içine “deneme, deneme2 ve genel” adlarıyla 3 adet kategori oluşturdum. Bu kategorilerin altlarınada “WP Kurs” adıyla, numara vererek 5 adet yazı ekledim.

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

Bu bölümümüzde WordPress Tema Yapımı için sadece sidebar.php ve style.css dosyalarını kullanacağız. Text editorümüz ile sidebar.php dosyamızı açalım ve aşağıdaki kodları  "</div><!-- #calendar -->" ile "</div><!-- #sidebar -->" arasına ekleyelim.

<div id=”kategori_baslik”>
<?php echo “Kategoriler”; ?>
</div>
<div id=”kategoriler”>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
</div>

Yukardaki kodların anlamları;  “kategori_baslik” ve “kategoriler” isimli 2 adet div oluşturduk.

• “<?php echo “Kategoriler”; ?>” komutuyla kategori başlığımızı “Kategoriler” olarak yazdırdık.
• “<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>” komutuyla kategori listemizi sidebar bölümüne yazdırdık. wp_list_cats komutunun içinde yer alan özellikler ise;

* sort_column=name – Kategorileri alfabetik olarak siralamak için

* optioncount=1 – herbir kategoride kaç post oldugunu göstermek için

* hierarchial=0 –altkategorilerin gösterilip gösterilmeyeceğini belirler

* & – herbiryeni özellik için araya yazilir.

Şu haliyle sidebar.php dosyamızı kaydedelim ve style.css dosyasını açıp, aşağıdaki kodları ekleyelim

#kategori_baslik{
font-size:16px;
font-style:italic;
font-weight:bold;
text-align:center;
font-family:Tahoma, Geneva, sans-serif;
color:#0CF;
}
#kategoriler{
margin-left:35px;
}

style.css dosyamızıda kaydettikten sonra, browser yenilendiğinde; sidebar kısmında takvimin altında kategorilerimizi görüyor olmamız lazım. WP temamızın en son görüntüsü aşağıdaki gibi olmalı. Yan taraftaki resimde,  Kategoriler başlığı altında, benim oluşturmuş olduğum kategorileri ve onların altında kaç tane yazı olduğunu görebiliyoruz. Deneme(1), Deneme2(1) ve Genel(2) toplamda 5 yazı 3 kategoriye dağıtılılmış durumda. WordPress Tema yapımındaki bir sonraki hedefimiz ise; bu kategorilere tıklandığında, content bölümünde yazıların gösterilmesi olacak.

NOT: sidebar.php içinde divleri oluşturduktan sonra kapatırken “<!–#kategoriler –>” gibi bir açıklama notu yazmadım. Hakan arkadaşımın hazırlamış olduğu sayfa hızına etki eden faktörlerden bir taneside fazladan kullanılan bu HTML kodlarıdır. Biz temamızı yaparken kendimiz için eklediğimiz bu not kodları sayfa yükleme hızına etki etmekte ve google tarafından olumsuz karşılanmaktadır. Bu nedenle ben bundan sonraki aşamalarda bu kodları kullanmayacağım. Siz tasarım sırasında kullanabilirsiniz ve daha sonrada kaldırabilirsiniz.

WordPress Tema Yapımı Alınan Dersler:

• sidebar.php içine 2 yeni alan oluşturuldu.
• “<?php echo “Kategoriler”; ?>” komutunun kullanımı
• “<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>” kullanımı
• style.css dosyasına bu 2 yeni alana ilişkin özelliklerin verilmesi.

Benzer Konular:

• WordPress Tema Yapımı index.php
• WordPress Tema Yapımı index.php(2)
• WordPress Tema Yapımı header.php
• Tema Yapımı sidebar.php Takvim