Skip to content

Web Design - 2. page

ss

Theme Customizer ile boğuşmalar

Özet: Theme Customizer üzerinden site ayarları tasarlayacaksanız, ayarları functions.php üzerinden yükleyip de tema dosyalarından globals ile çağıramıyorsun.

Bu hafta sıfırdan Bootstrap üzerine kurulu, bütün tema seçeneklerinin Theme Customizer üzerinden değiştirilebildiği bir Theme Framework yazdım (Bu site bu temayı kullanıyor şu an). Yazmak zorunda kaldım diyebilirim çünkü hali hazırda kullanabileceğim bir altyapının olmadığını gördüm. Bootstrap kullanan çok tema var ama buradaki can alıcı nokta; Bootstrap gibi bir css framework kullanıyorsan WordPress Theme Framework’da özel css kullanmazsın arkadaş. Adamlar tonla özel css’in yanına Bootstrap da eklemiş satıyolar responsive theme ayağına. Neyse sinirlendim gene, konumuza dönelim.

Theme Customizer‘ın en ilginç ve güzel tarafı yapılan değişikliklerin anında site üzerinde görüntülenebilmesi. Bir renk değişimini anında site üzerinde göstermek çok zor olmasa da, site düzeni, logo yüklenmesi, özel yazı stili ve tema stilinin anında site üzerinde gösterilmesi için özel uğraş gerektiriyor. Yaptım, ettim, bitti. Denedim çalışıyor derken bi baktım Theme Customizer’dayken eğer herhangi bağlantıya tıklarsam kaydedilmemiş bütün değişiklikler kayboluyordu. Sonradan uğraşlar sonucu keşfettim ki (Buradaki soruda WordPress.Com kadrosundan biri olan Otto’nun verdiği ipucu iyi geldi) Theme Customizer’dayken functions.php bile olsa ayarların globals ile çağırımları normal WordPress’de olduğu gibi değilmiş. Vardır bir sebebi arka planda neden böyle diye hayata küsmeye gerek yok. Peki çözüm nedir?

Eğer temanızda, ayarları sitede kullanmadan önce bazı fonksiyonları çalıştırmanız gerekiyorsa, örneğin:

$anatema_settings = get_option( 'anatema_settings' ); // site options
switch ($anatema_settings["layout"]) {
    case 'only-content':
        $anatema_layout["primary_class"] = "span8";
        $anatema_layout["primary_fullwidth_class"] = "span8";
        $anatema_layout["secondary_class"] = "hide";        
        $anatema_layout["container_class"] = "container";       
        $anatema_layout["page_class"] = "site-narrow";      
      break;
    case 'sidebar-content':
        $anatema_layout["primary_class"] = "span8 pull-right";
        $anatema_layout["primary_fullwidth_class"] = "span12";
        $anatema_layout["secondary_class"] = "span4";       
        $anatema_layout["container_class"] = "container";       
         break;
    default:
    case 'content-sidebar':
        $anatema_layout["primary_class"] = "span8";
        $anatema_layout["primary_fullwidth_class"] = "span12";
        $anatema_layout["secondary_class"] = "span4";       
        $anatema_layout["container_class"] = "container";       
       break;   
}

Bu kodların sonuçlarını kullandığınız tema dosyalarında globals ile çağırım yerine yukarıdaki gibi site ayarlarını tema’da kullanmadan önce çalıştırılması gereken kodları özel bi dosyaya toplayın ve her tema dosyasına include edin.

Bu arada bahsettiğim Theme Customizer’daki ayarlar nedir diye merak ediyorsanız, hızlıca hazırladığım şu video’yu izleyebilir veya yukarıdaki bağlantıdan ‘e üye olabilir ve kendi sitenizde kendiniz kurcalayabilirsiniz ;)