Bu yazıda, temanızın ön yüzü ile ilgili olarak ve başlıklar halinde, bazı pratik bilgiler verilecek ve daha profesyonel bir tema yapımı için sizlere yardımcı olunacaktır.

Logo Resmine Ana Sayfa Linki Verin

Site logosunu, aynı zamanda ana sayfaya götüren bir logo olarak kullanmak için şu kodu kullanabilirsiniz:

<!-- logo resminizin adı logo.png ise -->
<a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="Ana sayfa" /></a>

Siteniz ana sayfada iken logonuzun ana sayfaya götüren bir link şeklinde olmasına hiç de gerek yoktur. Bu yüzden, ekranda ana sayfa açık iken, logonuzu link olmaktan çıkarabilirsiniz. Aşağıda, bunu nasıl yapacağınız gösterilmiştir:

functions.php

<?php
// logo resminizin adı logo.php ise
if(is_home() || is_front_page()) {
 echo '<img src="' . get_stylesheet_directory_uri() . '/logo.png" alt="Ana sayfa" />';
}
else {
 echo '<a href="' .  home_url() . '"><img src="' . get_stylesheet_directory_uri() . '/logo.png" alt="Ana sayfa" /></a>';
}
?>

Açıklayıcı Link Textleri Kullanın

Text linkinin kendisi de açıklayıcı olmalı ve kullanıcıya, linkin adresi ile ilgili bilgi vermelidir. Aşağıda bir kötü örnek bir de iyi bir link örneği verilerek bu durumu daha iyi anlamanız hedeflenmiştir:

Kötü örnek:

WordPress’i öğrenmenin en iyi yolu onu kullanmaktır. WordPress indirmek için tıklayınız.

İyi örnek:

WordPress indirin ve öğrenmeye başlayın. Çünkü WordPress’i öğrenmenin en iyi yolu onu kullanmaktır.

Linkleri Altı Çizili Olarak Stillendirin

Sitenizde kullandığınız linklerin (bağlantıların) normal metinlerden farklı ve dikkat çekici olması gereklidir. Bunu sağlamanın bir yolu, linklerin altını çizmektir. Tarayıcılar (browsers), varsayılan olarak linklerin altını çizer. Bu özelliği iptal etmek, linklerinizin, çevresindeki metinlerden ayırt edilmesini zorlaştırabilir. Linklerin altını çizmek, temanızın kullanışlılığını ve Erişilebilirliğini arttırır.

Linkleri Farklı Renkte Kullanın

Bir textin tıklanabilir olduğunu belli etmenin bir başka yolu da o texti renklendirmektir. Bir linki renklendirmek, kolayca fark edilmesini sağlar.

Linkler, durum özelliğine sahip olan az sayıda HTML elemanlarından biridir. Bir linkin en önemli iki durumu, visited (ziyaret edilmiş) ve unvisited (ziyaret edilmemiş) durumlarıdır. Visited linklerin rengini genellikle unvisited linklerden %10-20 daha koyu yapmak doğru bir alışkanlıktır.

Yukarıda bahsedilen iki durumdan başka, linklerin aşağıdaki durumları da vardır:

• Hover: Farenin linkin üzerinde olduğu durum.
• Focus: Hover gibidir fakat klavye kullanıcılarına hitab eder.
• Active: Bir kullanıcının linke tıklıyor olduğunu ifade eder.

Hover ve focus durumları birbirine çok yakın olduğu için, bu ikisine aynı stili vermek kullanışlı olur.

Renk Kontrastı

Renk kontrastı, renkler arasındaki benzerlik ve farklılık ile ilgilidir. Birbirine yakın renkler arasındaki kontrast az olup, birbirinden uzak renkler arasındaki kontrast çoktur. Örnek olarak, lacivert bir zemine siyah bir yazı yazarsanız, bu yazının okunması her durumda mümkün olmayacaktır. Çünkü lacivert ile siyah arasındaki kontrast azdır. Bunun gibi, siyah ile beyaz arasındaki kontrast da yüksektir.

WebAIM (Web sitelerinin erişilebilirliğini arttırma ile ilgili bir topluluk) topluluğunun sitesinde, kullandığınız renkler arasındaki kontrast değerini hesaplayabilirsiniz. WCAG 2.0 standartlarına göre, kullandığınız renkler arasındaki kontrast 4.5:1 oranının altına inmemelidir. Bu oran ve yukarısı Uyumluluk AA olarak adlandırılır. (Siyah ile beyaz arasındaki kontrast oranın 21:1 dir.)

Yeterli Font Büyüklüğü

Text büyüklüğünüzü, yeterli bir seviyede tutmanız, sitenizin kullanılma oranın yükseltecektir. Sitenizdeki en küçük yazının 14px olması tavsiye edilir.

Input – Label İlişkisi

Label, etiket anlamına gelir. Formlarımızıda kullandığınız input elemanlarını açıklamak için, o input elmanı ile birlikte bir label elmanı da kullanırız. Label ile input birbirine bağlamak için label elemanına for özelliği eklemeli ve bu özelliğin değerini de input elemanının id değerine ile aynı yapmalıyız. Aşağıda bunun bir örneği verilmiştir:

<label for="kullanici_adi">Username</label>
<input type="text" id="kullanici_adi" name="login" />

Aşağıdaki örnekler de radio butonları ve label kullanımı ile ilgilidir:

<input type="radio" id="user_group_blogger" name="user_group" value="blogger" />
<label for="user_group_blogger">Blogger</label>
 
<input type="radio"  id="user_group_designer" name="user_group" value="designer" />
<label for="user_group_designer">Designer</label>
 
<input type="radio"  id="user_group_developer" name="user_group" value="developer" />
<label for="user_group_developer">Developer</label>

Formlarda Placeholder Kullanımı

Placeholder, yer tutucu demektir. Bir text alanı oluşturduğumuzda, bu text alanının ne ile ilgili olduğunu ifade etmek için kullanılır, yani kullanıcıya ipucu vererek, girmesi gereken bilgi hakkında fikir sahibi olması sağlanır.

Aşağıda label ile birlikte örnek bir placeholder kullanımı verilmiştir:

<label for="isim">Adınız:</label>
<input type="text" id="isim" name="isim" placeholder="Adım SOYADIM" />

Açıklayıcı Butonlar

Temamızda kullandığımız butonların üzerine yazdığımız textler, butonun yapacağı görevi mümkün olduğunca açıklamalıdır. Tabi ki botunlar üzerine, uzun uzun metinler yazamayız. Fakat, “Tıkla” ve “Ok” yerine, “Üye yap”, “Dosyayı sil”, “Şifreyi güncelle” gibi ifadeler, kullanıcılarımızın sitemizi daha kolay kullanmasını sağlayacaktır.