Wordpress Temasına Admin Paneli Eklemek

Bugün wordpress temanıza nasıl admin paneli (yönetim paneli) ekleyebileceğinizi anlatacağım. Kendi yazdığınız temaya kullanımı kolay olsun diye veya satılabilsin diye admin paneli eklemek isteyebilirsiniz. Bunu yapmanın çok kolay bir yolu var. Tek ihtiyacınız olan PHP syntaxını bilmek ve biraz ingilizce okuyabilmek.

Makalemizde Codestar Framework'tan bahsedeceğiz. Öncelikle https://codestarframework.com/ adresini ziyaret ediyoruz ve gerekli dosyaları "Download Free Version" düğmesine basarak indiriyoruz. İndirdiğimiz dosyaları bir yere çıkartıyoruz. Ardından temamıza nasıl kuracağımıza geçelim.

Codestar Framework admin paneli nasıl kurulur?

• Çıkardığımız dosyaları temanın istediğimiz bir dizinine koyabiliriz. Ben '/inc' adında bir klasör açıp onun altına atmayı tercih ediyorum.
• Ardından functions.php dosyamızı açıyoruz. İçerisine require get_template_directory() . '/inc/framework/codestar-framework.php'; şeklinde frameworkümüzün bootstrapper dosyasını ekliyoruz. Dosya yolu sizin seçtiğiniz isme göre değişiklik gösterebilir. Ezbere bakmayınız.
• Admin panelimizin kurulumunu başarıyla tamamladık :)

Codestar Framework admin paneli nasıl kullanılır?

Kurulumu tamamladık ama admin panelini nasıl kullanacağız ne yapacağız dediğinizi duyar gibiyim. Yukarıdaki kod bloğunu incelersek bu bir admin panelini nasıl tanımladığımızı gösteriyor. Adım adım incelemeye başlayalım.

• Öncelikle bir php dosyası açın ve bunu functions.php içerisinde Codestar framework çağırdığımız yerin hemen altında çağırın. Çağırmak için require komutunu kullanabilirsiniz.
• if ( class_exists( 'CSF' ) ) satırı frameworkün doğru şekilde çağırıldığını kontrol ettiğimiz kısım. Framework import edilmediyse hata almamızı önlemek için kullandığımız bir satır.
• $prefix diye tanımladığımız kısım temanın kısa adını belirttiğimiz bölüm. Diğer bildiğiniz temalarla ortak olmaması ve bir kez belirledikten sonra değiştirmemeniz iyi olacaktır. Tema ayarları bu kısa isimle veritabanında saklanacaktır.
• CSF::createOptions fonksiyonu içerisinde admin panelinin genel özelliklerini tanımlıyoruz. Ben en gerekli özellikleri yukarıdaki kısımda belirttim. Örneğin framework_title keyi admin paneline girdiğimizde headerde gözükecek ismi belirtmektedir. Menu settings diye belirttiğim kısımda ise admin panelinin menüsünde nasıl gözükeceğini belirlemekteyiz. 
• CSF::createSection fonksiyonu ile admin paneli içerisine alt sayfalar açmaktayız. Ben bu örnekte tek bir alt sayfa oluşturarak onun üzerinden ilerlemeyi tercih ediyorum.
• Title kısmında section yani alt sayfanın başlığını belirtiyoruz.
• Fields keyinin value kısmındaki array altına alt arrayler oluşturarak elemanları ekleme işlemini yapıyoruz. Bir örnek vermemiz gerekirse tema rengi seçeneği diye belirttiğim kısımda radio button kullanarak seçenek almışım. Buradaki en önemli kısım id kısmıdır. Buraya verdiğiniz isimler kolay ve aklınızda kalıcı isimler olsun. Sonradan temanın içerisinde bunları kullanacaksınız. 
• Yukarıdaki kodda çeşitli biçimlerin kullanımına örnekler yazılmıştır. Diğer elementleri de incelemek isterseniz: https://codestarframework.com/documentation/#/fields adresini ziyaret ederek örnek kod kullanımları ile elementlerin hepsini görebilirsiniz.

Bu ayarları temanın içinde nasıl çağıracağım?

• Ayarları çağırmak istediğiniz yerde $options = get_option( 'Belirlediğiniz prefix' ); kodunu kullanarak $options üzerine ayarların çağırıldığı bir array eklersiniz. O arrayin içeriğini var_dump($options); aracılığı ile görüntüleyip kolayca erişim sağlayabilirsiniz.
• Örneğin yukarıda anlattığımız theme-color yani tema rengi seçeneğini çağırıp kullanalım.

• if ( 'dark' == $options['theme-color'] ) { 
     wp_enqueue_style( 'divergent-bootstrap', get_template_directory_uri() . '/dist/css/bootstrap-dark.min.css' );
     wp_enqueue_style( 'divergent-style', get_template_directory_uri() . '/dist/css/style-dark.css' );
  } elseif ( 'grey' == $options['theme-color'] ) {
     wp_enqueue_style( 'divergent-bootstrap', get_template_directory_uri() . '/dist/css/bootstrap-blue.min.css' );   
     wp_enqueue_style( 'divergent-style', get_template_directory_uri() . '/dist/css/style-blue.css' );
  }

• Yukarıda görebileceğiniz gibi $options değişkeninin ['theme-color'] keyine ulaşarak o seçeneği almışım ve kontrolünü yaparak farklı stil dosyalarının çağırılmasını sağlamışım. Bunun gibi daha nice örnek verebiliriz. Detaylı kullanım görmek istiyorsanız sitemde yayınladığım divergent 100% SEO Uyumlu Wordpress Blog Teması makalemdeki temanın dosyalarını inceleyerek fikir alabilirsiniz.

Örnek admin paneli görüntüsü

Makalemi okuyup zaman ayırdığınız için teşekkür ederim. Sorularınız için aşağıdaki yorum bölümünü kullanmaktan çekinmeyiniz, yardımcı olacağım.