Bazen bir durumu anlatmak için kullanmanız gereken kelime sayısı fazla olmak zorunda olur ya; şu anda ben de aynı durumla karşı karşıyayım. Yazı başlığının, yazıda anlatacağım şeyi tam olarak ifade edip etmediği hakkında kesin bir şey söylemem mümkün değil. Çünkü buna ben de emin değilim. Ve bu durumu tam olarak anlatmak için birkaç cümle kurmak gerekecek ki hemen bu birkaç cümleyi kurayım. WordPress tabanlı sitenizin anasayfasında 6, kategori sayfalarında 8, etiket sayfalarında 10, arama sonuçlarında 12, arşiv sayfalarında da 20 sonuç göstermek istediğinizde bunu nasıl yapacağınız işte tam da bu yazımızın konusu.

Sadece WordPress için değil her soru/sorun için geçerli olan birden fazla cevabın, çözüm yolunun bu durum için de geçerli olduğunu sanırım tahmin etmişsinizdir.

Her bir bölüm için farklı sayıda yazı gösterme işlemini; WordPress’in bize sunduğu esnek kodlama yapısından ve zengin fonksiyon kütüphanesinden yararlanarak da yapabiliriz, bir eklenti yardımı ile de yapabiliriz.

İlk olarak hazır WordPress fonksiyonlarından yararlanarak bu işin nasıl yapılacağını görelim:

Öncelikle kısa bir bilgi tazeleme babında ufak bir liste yapalım ki hangi bölüm temanın hangi dosyası aracılığı ile görüntüleniyor, hatırlamış olalım:

- Anasayfa        = index.php (Bazı temalarda home.php)
- Kategoriler     = archive.php
- Arşivler        = archive.php
- Etiketler       = tag.php (Mevcut değilse archive.php)
- Arama Sonuçları = search.php
- Yazar Sayfaları = author.php

Daha ayrıntılı bilgi için WordPress Tema Hiyerarşisini inceleyebilirsiniz.

Bu kısa ekstra bilgiden sonra dönelim asıl meseleye. Daha anlaşılır olması için iki farklı dosya üzerinde bu işlemin nasıl yapılacağını anlatmak istiyorum.

İlk önce anasayfada göstereceğimiz yazı sayısını ayarlayalım. Temamızın index.php dosyasını açıyor ve döngü (loop) öncesine bir sorgu parametresi ekliyoruz. Kodumuz aşağıdaki gibi oluyor.

query_posts('posts_per_page=5');
if ( have_posts() ) : while ( have_posts() ) : the_post();

Buradaki 5 değeri sayfa başı gösterilecek yazı sayısıdır ve istediğiniz rakamla değiştirebilirsiniz. Bu kadar mı? Tabi ki bu iş bu kadar kolay değil. Yukarıdaki kodu test ettiğinizde anasayfada 5 adet yazının görüntülendiğine şahit olacaksınız fakat önceki sayfalara geçmek istediğinizde yine anasayfanın görüntülendiğini fark edeceksiniz. Bu durumun önüne geçmek için sorgumuzu biraz daha zenginleştirmemiz gerekecek. Böylece önceki sayfalarda yer alan kayıtlar listeleniyorsa sorgumuza ona göre sayfa numarası göndermesini sağlayacağız. Bu parametreleri de ekledikten sonra kodumuz aşağıdaki gibi olacaktır.

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('posts_per_page=5&paged='.$paged);
if ( have_posts() ) : while ( have_posts() ) : the_post();

Şimdi önceki sayfalara geçmek istediğinizde eski kayıtlara ulaşabildiğinizi göreceksiniz.

Anasayfa için yapmamız gereken işlem bu kadar. Fakat kategori, etiket, arama veya yazar sayfaları için aynı kodları denediğinizde bir şeylerin eksik olduğuna şahit olacaksınız. Bu eksik olan şey ise sınıflandırma parametresidir ki sorgumuza o parametreyi göndermediğimizde herhangi bir ayrım yapmadan tüm yazılar görüntülenir ve sayfamızın anasayfadan bir farkı kalmaz. O nedenle eğer sorgu filtrelemeyi kategori sayfaları için yapacaksak hangi kategori olduğunu, etiket sayfaları için yapacaksak hangi etiket olduğunu vs. sorgumuza dahil etmemiz gerekiyor. Aşağıdaki kodda kategori sayfaları için gerekli olan kod mevcut. Yine 5 değerini istediğiniz rakamla değiştirebilirsiniz.

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=' . $cat . '&posts_per_page=5&paged='.$paged);
if ( have_posts() ) : while ( have_posts() ) : the_post();

Sorguyu siz etiketler, yazarlar, arama ve arşiv sayfaları için çeşitlendirebilirsiniz.

Daha önceki yazılarımda kod tembeli site sahipleri için yaptığım güzelliği bu yazıda da devam ettiriyor ve “Ben bu kadar kodla uğraşamam arkadaş. Armudun pişip ağzıma düşmesini istiyorum.” diyenler için yukarıda yaptığımız onca şeyi ve daha fazlasını yapan bir eklentiyi yazının sonuna ekliyorum. Scott Reilly tarafından yazılan Custom Post Limits isimli eklentinin dil dosyasını Türkçeleştirdim fakat dil dosyasındaki bazı eksikliklerden dolayı eklenti ayarlarının yapıldığı sayfada birkaç bölüm İngilizce. O kadarına da umarım bir şey demezsiniz.

Eklentinin Türkçeleştirilmiş halini aşağıdaki bağlantıdan indirebilir, önizleme resmine de yine aşağıdan ulaşabilirsiniz.

  Custom Post Limits Türkçe (93,8 KiB)

Defterimin taslaklar bölümüne göz attığımda, Stefan Kovac tarafından oluşturulan ve kullanımı oldukça kolay olan flash manşet uygulaması Cu3er hakkında ayrıntılı bir yazı yazacağıma dair çok öncelerden eklediğim taslağı gördüm. Düşüncem, Cu3er’in nasıl bağımsız olarak uygulanacağını anlatıp birkaç tane de örnek yayınlamaktı. Fakat 24 saatin yetmezliği bu düşünceme de sirayet etti ve bir türlü bu isteğimi gerçekleştiremedim. Hal böyle oldu diye bu isteğimden hepten vazgeçmek yerine “Bari daha tembel işi de olsa Cu3er ile ilgili birşey yapayım” dedim ve Cu3er ile hazırlanmış bir WordPress manşet eklentisi olan Cu3er Post Elements’i hem tanıtıp hem de Türkçeleştirme kararı aldım.

Cu3er Post Elements, Cu3er uygulamasının bütün esnekliğine sahip bir WordPress eklentisi. Seçtiğiniz kategoriye / kategorilere ait yazıların içindeki resimleri manşet resmi olarak gösteren eklentiyi sitenizde kullanabilmek için birkaç basit adımı takip etmeniz gerekiyor. Sırasıyla bu adımları aşağıda listeliyorum:

1. İster Türkçe, ister orijinal dilinde aşağıdaki bağlantılardan kaydettiğiniz eklenti dosyasında yer alan cu3er-post-elements klasörünü sitenizin eklenti dizini olan wp-content/plugins/ dizinine yükleyin.

2. Sitenizin yönetim panelinden eklentiyi aktif ettikten sonra Ayarlar -> Cu3er Elements bağlantısını takip ederek Cu3er Post Elements Ayarları sayfasına gelip gerekli ayarları yapın.

Her ne kadar ayarlar sayfasında gerekli açıklamalar varsa da dikkat etmeniz gereken birkaç noktaya değinmek istiyorum:
– KATEGORI ID’LERI bölümüne bir veya birden çok kategori ID’si girebilirsiniz. Bu bölüme girmeniz gereken kategori ID numaralarını bulmak için Yönetim Paneli menüsünden Yazılar -> Kategoriler bağlantısını takip edip ID numarasını öğrenmek istediğiniz kategoriyi düzenleme sayfasına gelin. Adres satırında wp-admin/categories.php?action=edit&cat_ID=4 şeklinde bir adres olur. 4, bu kategorinin ID numarasıdır. Birden çok kategorinin yazılarını Cu3er uygulamasında göstermek isterseniz numaraları virgül ile 4,5 şeklinde ayırın.
– CU3ER GENIŞLIK ve CU3ER YÜKSEKLIK bölümlerine manşetinizin ebatlarını piksel cinsinden girmelisiniz.
– Zaman Sayacı Ayarları ve Başlık Ayarları bölümlerine gireceğiniz değerleri manşet boyutunuza göre belirlemelisiniz ki; hem zaman sayacı hem de başlık, manşetinizin istediğiniz yerine gelsin.
– Manşet uygulamasının üstünde bulunan ve bir önceki / bir sonraki manşete geçmeye yarayan okları eklentiyle beraber gelen birbirinden farklı oklardan seçebilirsiniz. Bunun için CU3ER OK TIPI bölümünde (Kullanılabilecekleri göster) metninin üzerine geldiğinizde görünecek olan 10 adet ok tipinden beğendiğinizin altındaki numarayı ilgili alana girmeniz yeterli.
3. Son olarak da flash manşetin görünmesini istediğiniz yere (Muhtemelen anasayfanızda görünmesini istersiniz. Eğer öyleyse temanızın index.php dosyasının uygun bir yerine) aşağıdaki kodu ekleyin.

if ( function_exists('install_cu3er') ) { install_cu3er(); }

Son olarak bana lazım olduğu için belki lazım olur düşüncesiyle bir ufak tüyo da vereyim:
Eğer manşet bölümünde görünmesini istediğiniz resimleri yazıya Özel Alan olarak eklemek isterseniz eklentinin config.php dosyasında küçük bir düzenleme yapmanız gerekiyor. Önce config.php dosyasının 76. satırında bulunan

preg_match_all( '||i', $post->post_content, $m );

satırını ister silin, ister önüne // koyup pasifize edin. Ardından

if( $m[ 1 ] ) $xml .= '' . $m[ 1 ][ 0 ] . '';

kodunun yerine aşağıdaki kodu ekleyin.

$xml .= '' . get_post_meta($post->ID, "cu3er", true) . '';

Artık manşetinizde, cu3er ismiyle tanımladığınız özel alana girdiğiniz resimler görüntülenecek.

Eklenti dosyalarının ister Türkçeleştirilmiş halini, ister orijinalini aşağıdaki bağlantılardan temin edebilirsiniz.

  Cu3er Post Elements 0.5.1 Türkçe (174,2 KiB)

  Cu3er Post Elements 0.5.1 İngilizce (251,9 KiB)

Epey zamandır gerek iş yoğunluğundan, gerekse tembellikten dolayı fazla vakit almayan girişler haricinde yazı yazmadığımı ve faaliyette bulunmadığımı fark ettim. Yatarak geçireceğim Pazar günümün bir bölümünü değerlendirerek taslak olarak kaydettiğim ve vakit bulduğumda yazacağım konulardan birine değineyim dedim. Bu yazıda, çoğu web tasarımcısı ve kodlayıcısının hayali olan W3 standartlarına uygun kod yazabilmek için dikkat edilmesi gereken noktalara ve sıklıkla yapılan W3 hataları ile bu hataların ne şekilde çözülebileceğine değinmek istiyorum.

Bu yazıda değineceğim noktaların temel düzeyde HTML – CSS bilgisi gerektirdiğini belirtmekte yarar var.

Şimdi geçelim sıklıkla yapılan W3 doğrulamasından sınıfta kalmaya neden olan hatalara ve çözüm yollarına:

1. Dosya kodlaması ve karakter seti uyuşmazlığı
W3 doğrulamasından geçen HTML kodlaması yapabilmek için öncelikli olarak oluşturulacak kodların ve dosyaların bazı kriterlere uygun olması gerekiyor. Bunların başında da doğru karakter kodlaması kullanmak gelmektedir. Yani HTML dosyamızı (PHP, ASP vs. de olabilir) kod tanımlamasında belirttiğimiz karakter setine uygun kodlama ile kaydetmeliyiz. Kod tanımlamasını utf-8 olarak belirttiğimiz bir dosyayı ANSI dosya kodlaması ile kaydedersek henüz W3 doğrulamasına girmeden hata alırız. Bu nedenle karakter setini

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

olarak atadığımız bir HTML dosyasını kaydederken dosya kodlamasını da utf-8 olarak seçmemiz gerekmektedir.

2. DOCTYPE kullanmamak veya yanlış DOCTYPE seçimi yapmak
Sıkça internette gezinen biri olarak bir hobim de gezdiğim sitelerin kodlama yapılarını incelemektir. Bazen öyle durumlarla karşılaşıyorum ki şaşırmamak elde değil. Öyle ki koca koca ajanslar bile yaptıkları kodlamalarda DOCTYPE kullanmaya gerek dahi görmüyor, kodladıkları sitelerin standartlara uyumluluğunu önemsemiyorlar. Genelde kamu sitelerinde sıklıkla karşılaşılan bu durumun profesyoneller tarafından da yapılıyor olması üzüntü verici bir durum olsa gerek.

DOCTYPE, bir sayfanın tarayıcılar tarafından hangi kural ve kriterlere göre görüntüleneceğini tanımlamaya yarar. Eğer DOCTYPE, hiç kullanılmazsa veya yanlış kullanılırsa farklı tarayıcıların o sayfa için farklı şekillerde davranmasına ve farklı görünümler ortaya çıkmasına neden olur. Aynı zamanda da W3 doğrulama hatasına sebep olur. Bu nedenle W3 uyumlu bir kodlama için mutlaka DOCTYPE kullanmak ve DOCTYPE seçimini de doğru bir şekilde yapmak gerekir. DOCTYPE kullanımı ve doğru DOCTYPE seçimi oldukça geniş bir kavram olduğu için şimdilik daha fazlasına girmek istemiyorum. Sadece günümüzde en çok kullanılan ve son trendlerin en uygun ve kolay şekilde uygulanabilmesi için gereken DOCTYPE’in XHTML 1.0 Transitional olduğunu belirtmekle yetineceğim. Kullanımı da aşağıdaki şekildedir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bu noktadan itibaren listemizdeki maddelerin, DOCTYPE olarak XHTML 1.0 Transitional seçildiğini varsayarak ele alacağımı dikkate almanızda yarar var.

3. Meta etiketlerinin ve HTML elemanlarının kapatılmaması
XHTML kodlama standartlarına göre birkaç istisnai durum haricinde açılan her HTML elemanının kapatılması zorunluluğu var. Hal böyleyken gerek eskiden kalma alışkanlıklarla, gerekse hazır olarak temin edilen kodlarla bu işlem ihmal edilebiliyor ve bunun sonucunda da birçok W3 doğrulama hatası ortaya çıkıyor. Kapatılması ihmal edilen kodların başında da meta etiketleri, satır atlatma (<br />), yatay çizgi (<hr />) ve resim (<img src=”resim.jpg” />) kodları gelmektedir.

4. Stil ve JavaScript kodlarına tip tanımlaması atamamak
Sıklıkla karşılaştığımız bir başka kodlama hatası da kodlama içinde kullanılan veya kodlamaya dâhil edilen stil ve JavaScript kodlarının veya dosyalarının tip tanımlamalarının yapılmamasıdır. Bu hatadan kurtulmak için kodlamamızda kullanacağımız stil ve JavaScript kodlarına mutlaka tip tanımlaması yapmak gerekmektedir.

Yanlış kullanım:

<style>a { color: #00f; }</style>
<script src="jquery.js"></script>

Doğru kullanım:

<style type="text/css">a { color: #00f; }</style>
<script type="text/javascript" src="jquery.js"></script>

5. Eksik & (ampersand) işareti kullanımı
Bağlantı parametrelerinde ayraç olarak kullanılan & (ampersand) işaretinin yanlış, daha doğrusu eksik olarak kullanılması da standartlara uygunsuzluk sorunu meydana getirir. Sıklıkla bağlantılarda karşımıza çıkan bu işaretin W3 doğrulama hatasına neden olmaması için sayfa kodlamasında kullanımı esnasında açılımı ile birlikte yazılması gerekiyor. Eğer elimizde ara.php?q=html&s=2 şeklinde bir bağlantı varsa ve bunu HTML kodlamamızda kullanacaksak & işaretini sonuna amp; de getirerek kullanmamız doğru olacaktır…

Yanlış kullanım:

<a href="ara.php?q=html&s=2">html</a>

Doğru kullanım:

<a href="ara.php?q=html&amp;s=2">html</a>

6. Birden fazla ID tanımlaması kullanmak
Bilindiği gibi CSS, kodlama tekniklerine gireli beri birçok şey değişti. Bu değişikliklerin başında da HTML sayfalarının saf stil kodlarından arî olarak kodlandıktan sonra hazırlanacak stil dosyaları ile biçimlendirilmeleri gelmektedir. Bu durum, kod karmaşasının önüne geçtiği gibi uzun vadede yapılacak değişiklik ve düzenlemelerin de tek bir stil dosyası içerisinde rahatlıkla yapılmasına olanak sağlıyor.

HTML elemanlarının stil dosyası ile biçimlendirilebilmeleri için her elemana stil tanımlamasının yapılması gereklidir. HTML elemanlarına stil tanımlaması yapmanın iki yolu vardır; class ve id kullanmak. Aslında ID tanımının icat ediliş amacı stil tanımlamasından ziyade

Asıl kullanım amacı biçimlendirmeden ziyade işaretleme olan ID’ler, zamanla stil biçimlendirme elemanı olarak da kullanılmaya başlandı. Fakat birden çok HTML elemanının aynı ID ile işaretlenmesi, ID kullanımının amacına ters olduğundan W3 standartlarına uymaz ve hata verir. Bu nedenle sayfa içinde birden çok kullanılması düşünülen stil tanımlamalarının ID şeklinde değil de class şeklinde tanımlanmasında yarar var.

Yanlış kullanım:

<div id="kutu">1. Kutu içeriği</div>
<div id="kutu">2. Kutu içeriği</div>

Doğru kullanım:

<div class="kutu">1. Kutu içeriği</div>
<div class="kutu">2. Kutu içeriği</div>

Sıklıkla karşılaşılan W3 hatalarının oldukça çeşitli olması tümünü bir yazıda anlatmaya olanak vermiyor. O nedenle bu konuyu bir yazı dizisi şeklinde yazmanın daha uygun olduğunu düşünüyor ve ilk yazıyı burada bitiriyorum. Serinin ikinci yazısında görüşmek üzere, hatasız kodlamalar…