WordPress Temaya Ayar Sayfası Ekleme

Merhaba arakdaşlar.. Bildiğiniz üzere bir çok premium temada WordPress Admnin paneli içerisinde zorlanmadan kullanabileceğiniz bir ayar sayfası mevcuttur. Bu ayar sayfası içerisinde kodlarla uğraşmadan otomatik düzeltebileceğiniz alanlar mevcuttur. Bu yazımda bu ayar sayfasını nasıl oluştururuz onu anlatacağım.

Neler Yapacağız?

Başlamadan önce neler yapacağız, Temamızda ne gibi değişiklikler yapacağız bunları başlıklar halinde belirtip daha sonra açıklamalarını vereceğim.Yani WordPress admin panelimizde hangi ayarları değiştirebileceğiz ,neleri kullanabileceğimizi başlıklar halinde yazalım;

• Temanın Renk Düzenini Değiştirme
• Reklam Panelleri Ekleme
• İsteğe Bağlı Sidebar oluşturma
• Yine isteğe bağlı son tweet paneli
• Ve Arama kutusu

Arkadaşlar aslında yukarıdaki maddelere bakacak olursak bu özellikler için temanın ayarlarıyla oynayıp bir sürü uğraşmanın anlamı ne diyebilirsiniz. Fakat aşağıda göstereceğim şekidle yapacağınız ayarlamalar sayesinde kendinize göre bir tema çizebilir bu özellikleri çoğaltabilirsiniz.Evet şimdi başlayalım;

1. Gerekli Dosyaları Oluşturma

Arkadaşlar yukarıda bahsettiğimiz ayarları oluşturabilmek daha doğrusu bunları admin panelimizde görebilmek veya düzenleyebilmek için temamızda kullanmamız gereken birkaç kod olması gerekir. Yani admin panelinde gösteriye sunacağımız Theme Options özelliği için bir dosya ya da dosya içerisine kod girmemiz gerekli.Wordpress ayarlarına göre bu kodlar temamızın functions.php adlı dosyasında gizlidir. Bunun için functions.php dosyasını temizliyoruz ve baştan yazıyoruz..

2 – Tema Ayar dosyasını oluşturma.

Bunun için ilk önce boş bir dosya oluşturuyoruz ve adını functions.php koyuyoruz..Bir kaç eylem kodunu girerek wordpress’e ilk olarak bu sayfanın fonksiyon sayfası olduğunu bildirmemiz lazım.. Yani örneğin admin_menu adında bir fonskyion oluşturup bunu admin panelimizde çağırdığımız zaman bizim başlangıç sayfamızda bir admin_menü Menüsü oluşacaktır ve bu oluşan menü içerisinde biz ayaralmalarımızı artık yapabileceğiz.. Şimdi aşağıda vereceğim kodları dikkatle incelerseniz , ne demek istediğimi daha iyi anlayacaksınız;

Ayar sayfası;

<?php
// Ayar sayfası Fonksiyonları

function themeoptions_admin_menu()
{
 // Burada admin panelimizin başlangıç sayfasında tema ayarları linkinin nere görüneceğini belirleriz.
 add_theme_page("Theme Options", "Theme Options", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}

function themeoptions_page()
{
 // Burada da ana fonskyion ve genel ayar bölümümüz mevcut.
}

add_action('admin_menu', 'themeoptions_admin_menu');

?>

İlk fonksiyonumuz olan themeoptions_admin_menu linkimizi kolaylıkla başlangıç panelimize koyduk. WordPress’in;  hangi ayarları çağırdığımızı anlaması için themeoptions_page() adlı bir fonsiyon oluşturduk. Burada temamızın ayarlarını oluşturabileceğimiz bir kaç alan daha girmemiz gerekecek. Bu ayarlar da tamamlandıktan sonra temamızı aktif ettiğimiz vakit admin panelinde kigörünüm kısmının en altında bir Theme Options Linki belirecektir.Artık bir ayar sayfamız var ve şimdi de içerisini doldurmamız gerekecek.

3.Tema Seçeneklerini ve Alanları Belirleme

Evet, şimdi de Theme Options bölümümüzün içerisine alanlarımızı girmemiz gerekiyor.Bu Theme Options bölümüne ek olarak alt linkler de oluşturulabilir yalnız ben burada sadece tek bir sayfa ve içerisine alanları eklemek istiyorum.

Şimdi themeoptions_page() fonksiyonuun içerisine aşağıdaki kodları girerek Tema ayar sayfamızı oluşturalım;

function themeoptions_page()
 {
 // Burası ayar sayfamızda bulunam Genel ayarları kapsayacak.
 ?>
 <div>
 <div id="icon-themes"><br /></div>
 <h2>Theme Options</h2>

 <form method="POST" action="">
 <input type="hidden" name="update_themeoptions" value="true" />

 <p><input type="submit" name="search" value="Ayarları Güncelle" /></p>
 </form>

 </div>
 <?php
 }

Önce daha önce bu sayfa için oluşturduğumuz ve ayar sayfası olduğunu belirten  theme_options fonksiyonunu çağırdık. Daha sonra ise Theme Options adlı başlık ve aşağısına da Tema ayarlarını yaptıktan sonra seçenekleri güncelleyecek Update Options butonunu koyduk. Bu kısım basitti.

Şimdi ise ayarları içeriye girmek gerekiyor. Yukarıda belirttiğimiz seçeneklerden oluşacak bu ayarlar. Şimdi bu ayarları biraz açalım, nasıl kullanacağımıza bir bakalım;

• Herşeyden önce biz tema stil ayarlarını renk şablonlarını değiştirebilmek için tema üzerinde bir izin girdisi oluşturmamız gerekiyor.
• İkinci olarak 2 adet reklam alanı oluşturabilmek için bağlantı ayarlarını kullanıp bunları resim gibi göstereceğiz.
• Üçüncüsü ise isteğe bağlı bir sidebar oluşturacağız, bu da basit bir onay kutusuyla sağlanacak.
• Dördüncü olarak, bir twitter sidebar alanı bulunacak, bunun için bir twitter Kullanıcı adı isteyip bunları twitter panelinden çekeceğiz.
• Son olarak isteğe bağlı bir arama kutusu yerleştireceğiz, bu da yine bir onay kutusuyla sağlanacak

Tüm bunları aşağıdaki kod yığınıyla oluşturabiliriz;

function themeoptions_page()
{
 // Burası ayar sayfamızda bulunam Genel ayarları kapsayacak.
 ?>
 <div>
 <div id="icon-themes"><br /></div>
 <h2>Tema Ayarları</h2>

 <form method="POST" action="">
 <input type="hidden" name="update_themeoptions" value="true" />

 <h4>Renk stilini kullan</h4>
 <select name ="colour">
 <option value="red">Kırmızı Renk Stili</option>
 <option value="green">Yeşil Renk Stili</option>
 <option value="blue">Mavi Renk Stili</option>
 </select>

 <h4>Reklam Alanı #1</h4>
 <p><input type="text" name="ad1image" id="ad1image" size="32" value=""/> Reklam Resimi</p>
 <p><input type="text" name="ad1url" id="ad1url" size="32" value=""/> Advert Link</p>

 <h4>Reklam Alanı #2</h4>
 <p><input type="text" name="ad2image" id="ad2image" size="32" value=""/> Reklam Resimi</p>
 <p><input type="text" name="ad2url" id="ad2url" size="32" value=""/> Advert Link</p>

 <h4><input type="checkbox" name="display_sidebar" id="display_sidebar" /> Sidebarı göster</h4>

 <h4><input type="checkbox" name="display_search" id="display_search" /> Arama kutusunu göser</h4>

 <h4><input type="checkbox" name="display_twitter" id="display_twitter" />Twitter panelini göster</h4>
 <p><input type="text" name="twitter_username" id="twitter_username" size="32" value="" /> Twitter Kullanıcı adı</p>

 <p><input type="submit" name="search" value="Ayarları Güncelle" /></p>
 </form>

 </div>
 <?php
}

4. Veritabanını Güncelleme

Tüm bu kodları girdikten sonra WordPress veri tabanımıza POST metoduyla yeni ayarlarımızı bildirmemiz gerekecek. Bunun için ayar sayfasında theme_options adlı fonksiyonun yeni girdilerini aşağıda vereceğim kod ile veri tabanına bildiriyoruz;

if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update(); }

POST metoduyla bildirim yaptıktan sonra tabiki şimdi bir de güncelleme ayarlarını yapmamız gerekecek. Güncelleme ayarlarını basit PHP database kodlarını kullanarak temamızda bulunan bütün ayarları Update ettikten sonra veri tabanına güncellemesi için emir veren kodları themeoptions_page bölümünün en başına girmemiz gerekecek;

function themeoptions_update()
{
 // this is where validation would go
 update_option('mytheme_colour',     $_POST['colour']);

 update_option('mytheme_ad1image',     $_POST['ad1image']);
 update_option('mytheme_ad1url',     $_POST['ad1url']);

 update_option('mytheme_ad2image',     $_POST['ad2image']);
 update_option('mytheme_ad2url',     $_POST['ad2url']);

 if ($_POST['display_sidebar']=='on') { $display = 'checked'; } else { $display = ''; }
 update_option('mytheme_display_sidebar',     $display);

 if ($_POST['display_search']=='on') { $display = 'checked'; } else { $display = ''; }
 update_option('mytheme_display_search',     $display);

 if ($_POST['display_twitter']=='on') { $display = 'checked'; } else { $display = ''; }
 update_option('mytheme_display_twitter',     $display);

 update_option('mytheme_twitter_username',     $_POST['twitter_username']);
}

Güncelleme fonksiyonu ismindende anlaşılacağı gibi Temanın içerisinde yapılan değişikleri veritabanında güncellememizi sağlayan bir özellik. Eğer daha önce wordpress betiğinizde böyle bir tablo yoksa WordPress kendisi bu tabloyu oluşturur ve sizin için ayarlarınızı bu tablo içerisinde tutar.. Biz yukarıda başka bir tema yada eklenti tablosuyla karışmaması için tablo isimlerine mytheme_ şeklinde başlayan isimler girdik.

Şimdiye kadar yaptıklarımızda bizim bir ayar sayfamız mevcuttu fakat bu ayar sayfasında içeriği doldurup update yapktıktan sonra ayar sayfasına tekrar gelindiğinde bu seçeneklerin boş olduğunu ve de daha önce kaydettiğimiz ayarların olmadığını göreceğiz. Bunun sebebi veri tabanından gelen bir callback fonksiyonunun olmamasından kaynaklanır. Şimdi bunuda yapıp temamızı tamamlayalım.

5. Ayarları Çekme

Yukarıda dediğim gibi daha önce yapmış olduğumuz ayarlarımızı formlara aktarmasi için bir callback fonksiyonuna ihtiyacımız var.Bu çok basit bir php get metoduyla oluşturulabilir. Fakat biz bu ayarı sadece formların içerisini doldurması için kullanmamız gerekir. Daha önce yukarıda yaptığımız get metodunu kullanırsak ayarları tekrar update etmiş gibi oluruz. bu yüzden bir get_option() kullanarak işimizi halledeceğiz.

function themeoptions_page()
{
 // Burası ayar sayfamızda bulunam Genel ayarları kapsayacak

 if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update(); }

 //if ( get_option() == "checked"

 ?>
 <div>
 <div id="icon-themes"><br /></div>
 <h2>Tema Ayarları</h2>

 <form method="POST" action="">
 <input type="hidden" name="update_themeoptions" value="true" />

 <h4>Renk Stili Kullan</h4>
 <select name ="colour">
 <?php $colour = get_option('mytheme_colour'); ?>
 <option value="red" <?php if ($colour=='red') { echo 'selected'; } ?> >Kırmızı Renk Stili</option>
 <option value="green" <?php if ($colour=='green') { echo 'selected'; } ?>>Yeşil Renk Stili</option>
 <option value="blue" <?php if ($colour=='blue') { echo 'selected'; } ?>>Mavi Renk Stili</option>
 </select>

 <h4>Reklam Alanı #1</h4>
 <p><input type="text" name="ad1image" id="ad1image" size="32" value="<?php echo get_option('mytheme_ad1image'); ?>"/> Reklam Resimi</p>
 <p><input type="text" name="ad1url" id="ad1url" size="32" value="<?php echo get_option('mytheme_ad1url'); ?>"/> Reklam Linki</p>

 <h4>Reklam Alanı #2</h4>
 <p><input type="text" name="ad2image" id="ad2image" size="32" value="<?php echo get_option('mytheme_ad2image'); ?>"/> Reklam Resimi</p>
 <p><input type="text" name="ad2url" id="ad2url" size="32" value="<?php echo get_option('mytheme_ad2url'); ?>"/> Reklam Resimi</p>

 <h4><input type="checkbox" name="display_sidebar" id="display_sidebar" <?php echo get_option('mytheme_display_sidebar'); ?> /> Sidebarı Göster</h4>

 <h4><input type="checkbox" name="display_search" id="display_search" <?php echo get_option('mytheme_display_search'); ?> /> Arama Kutusunu Göster</h4>

 <h4><input type="checkbox" name="display_twitter" id="display_twitter" <?php echo get_option('mytheme_display_twitter'); ?> /> Twitter Panelini Göster</h4>
 <p><input type="text" name="twitter_username" id="twitter_username" size="32" value="<?php echo get_option('mytheme_twitter_username'); ?>" /> Twitter Kullanıcı Adı</p>

 <p><input type="submit" name="search" value="Ayarları Güncelle" /></p>
 </form>

 </div>
 <?php
}

Evet bu işimizi de hallettik. Şimdiye kadar yaptıklarımızı bir sayacak olursak, Bir tema ayar sayfası yaptık, daha sonra tema ayar sayfasının içini doldurduk ve içerisine girdiğimiz bilgileri veritabanına çekmesi için emir verdik.. Peki içini doldurduğumuz bu özellikler nereden gelecek ve nereyi değiştirecektir? Henüz temamızın içerisinde bir değişiklik yapmadık.. Son olarak gelin bir de teamamıza en başta saydığımız özellikleri değiştirebilecek bir kaç eklenti kuralım.

6.Temayı Değiştirme

Renk Şemasını Değiştirme;

Renk şeması ayarlarımız Temamızın CSS sayfasıyla alakadar bir durumdur. Daha önce hazırlamış olduğumuz 3 adet  renk için stil sayfalarımızın olduğunu düşünerek  temanın head etiketleri arasına aşağıda ki kodları giriyoruz;

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/default.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/<?php echo get_option('mytheme_colour'); ?>.css" type="text/css">

Bu değişiklikler, Veri tabanından gelen girdiler sayesinde admin panelinde hangi tema adı seçilmiş ise temamızın o tema adına ait css dosyasını kullanmasını sağlıyoruz.

Reklam Alanlarını Oluşturma

Yine burada da Temamızın neresinde görünmesini istiyorsak o bölüme aşağıdaki kodları yazarak admin panelinde ayarlanan Resimve url leri çağırıyoruz;

[php]

<a href="<?php echo get_option(‘mytheme_ad1url’); ?>"><img src="<?php echo get_option(‘mytheme_ad1image’); ?>" height="125" width="125" /></a>
<a href="<?php echo get_option(‘mytheme_ad2url’); ?>"><img src="<?php echo get_option(‘mytheme_ad2image’); ?>" height="125" width="125" /></a>

[/php]

Sidebar Oluşturma

En başta dediğimiz gibi eğer Sidebar check butonu seçili ise isteğe bağlı bir kenarlık ekleyebilir ya  da seçili değilse bu özelliğin hiç kullanılmamasını istediğimiz aşağıdaki kodları giriyoruz. Tabiki bu özelliği de php if metoduyla yapıyoruz;

if ( get_option('mytheme_display_sidebar') == 'checked') { get_sidebar(); }

// or alternatively...
if ( get_option('mytheme_display_sidebar') == 'checked') { get_sidebar(); } else {  /* hiç birşey gösterme * }

Son Tweet Ayarları

Burada yine basit bir eklenti gibi görünen son tweetlerimizi girmemize olanak sağlayacak yukarıdaki gibi isteğe bağlı kodları yazıyoruz

<?php if (get_option('mytheme_display_twitter') ) { ?>
<div id="twitter_div">
 <ul id="twitter_update_list"></ul>
</div>
<?php } ?>

Şimdi de son tweet ayarlarımızı göstermesi için footer.php dosyasında </body> tag’inin öncesine aşağıdaki kodları yapıştırıyoruz. Kodlarda jSon Callback fonksyionu ile veri çekmemize yarayan fonksiyon mevcut;

<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/<?php echo get_option('mytheme_twitter_username'); ?>.json?callback=twitterCallback2&count=5"></script>

İsteğe Bağlı Arama Kutusu

Son olarak aşağıdaki basit bir kaç kodu kullanarak sidebar da arama kutusunun olup ya da olmayacağını belirlemek için fonksiyon girdisi oluşturalım;

if ( get_option('mytheme_display_search') == 'checked') { ?>
<form role="search" method="get" id="searchform" action="" >
 <input type="text" value="" name="s" id="s" />
</form>
<?php }

Sonuç

WordPress Temanıza nasıl bir ayar sayfası yapmayı öğrendiğinizi umuyorum.. Yukarıda bashsettiğim şekilde daha farklı özellikler de temaya eklenebilir.. Örneğin;temanızın stil dosyalarına sağ ve soldan ne kadar boşluk olacağını, link renklerini, ya da daha başka CSS derlserinde gösterdiğim özellikleri kullanarak durumu kontrol altına alabilir ve daha az eklenti kullanarak bu işten karlı çıkabilirsiniz..