WordPress Temanıza Admin Tema Paneli Yapımı

Yeni bir wordpress tema yaptınız ya da kullandığınız temada admin paneli yani tema paneli yoksa çok kısa sürede bunu yapabilirsiniz. Çalışma mantığı çok basittir. Kullanılacak kısa kod tanımlamalarını bildikten ve bir defa uyguladıktan sonra artık her tema için aynı işlemde yapabilirsiniz. Ben hem wordpress tema yapımını, hemde bu tip ayarlamaları yabancı tema kodları ile öğrendim. Tema panel yapımını bu yüzden ayrıntılı anlatacağım. Bu denli bir anlatıma Türkçe kaynaklar içinde hiç rastlamadım.

Panelden tüm ayarları yapabilirsiniz. İstediğiniz kategori sekmesini açabilirsiniz. Yapmanız gereken işlemlerde örnek ile gidelim.

Sitenin alt kısmında sosyal ikonların olduğunu ve bunları tema panelinden temayı kullananın oluşturmasını isteyelim.

Yaptığım bir temanın alt kısmına alttaki gibi sosyal ikonlar yaptım.

</p>
<div class="sosyaller-caner">
<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-facebook-square"></i></a>
<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-twitter"></i></a>
<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-youtube-play"></i></a>
<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-google-plus"></i></a>
<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-linkedin-square"></i></a>
<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-instagram"></i></a>
</div>
<p>

Kodlar arasında url olarak alttaki kodu kullanmışım. Buradaki cnr_facebook admin panelindeki Facebook url kısmına eklediğimiz facebook url’sini bu kısma yazmaktadır.

<!--?php echo get_option('cnr_facebook'); ?-->

Tüm çalışma mantığı tamamen bu şekildedir.

Mesela kodu alttaki şekilde kullanırsam facebook url yerine tema paneline facebook kullanıcı adını yazdığımda netice almış olmaktayım.

<a target="_blank" rel="noopener">” rel=”noopener noreferrer”><i class="fa fa-facebook-square"></i></a>

Uygulama

Peki tamamen baştan ayarlama nasıl yapılır.
1- Ekteki dosyayı tema içine atın.
2- Alttaki adımları izleyin.

functions.php dosyasına alttaki kodu ekleyin.

/* TEMA PANELI */
if ( STYLESHEETPATH == TEMPLATEPATH ) {
define(‘OF_FILEPATH’, TEMPLATEPATH);
define(‘OF_DIRECTORY’, get_bloginfo(‘template_directory’));
} else {
define(‘OF_FILEPATH’, STYLESHEETPATH);
define(‘OF_DIRECTORY’, get_bloginfo(‘stylesheet_directory’));
}
require_once (OF_FILEPATH . ‘/admin/admin-functions.php’);
require_once (OF_FILEPATH . ‘/admin/admin-interface.php’);
require_once (OF_FILEPATH . ‘/admin/theme-options.php’);
require_once (OF_FILEPATH . ‘/admin/theme-functions.php’);

admin/theme-options.php kısmında yer alan düzenlemeler.

Bu kısım cnr_facebook’ta kullandığım kısa tema tanımıdır isterseniz değiştirin.

$shortname = “cnr”;

Alttaki kısım bu yazıdaki resimde gördüğünüz Genel Ayarlar, Css ayarları v.b sekmeleri oluşturduğumuz kısımı gösteriyor.

$options[] = array( “name” => “Genel Ayarlar”,
“type” => “heading”);

Genel ayarlarda logo seçtirmek için cnr_logo tanımlamasını tıpkı sosyal ikonları anlattığım gibi yapmanız gerekiyor. Kısa tema tanımını siz değiştirdiyseniz cnr yerine o gelecek devamındaki kısım ise alttaki id kısmındaki logo olacak. Siz bunu logo olarak değilde farklı bir işlem için kullanmak istiyorsanız değiştirebilirsiniz.

$options[] = array( “name” => “Logo URL”,
“desc” => “Kullanmak istediğiniz logonun linkini girin.Boş kalırsa temanın kendi logosu kullanılacaktır.”,
“id” => $shortname.”_logo”,
“std” => “”,
“type” => “text”);

Logoyu temanızda göstermek için;

<a href="<?php bloginfo('url'); ?>“>
<!--?php
if (get_option('cnr_logo')=='') {
echo '<img src="';
bloginfo('template_url');  echo '/images/logo.png" width="185" height="46" alt="#" /-->‘;
}
else {
echo ‘<img src="'.get_option('cnr_logo').'" width="'.get_option('cnr_lw').'" height="'.get_option('cnr_lh').'" alt="#">‘;
}
?>
</a>

Üstteki işlemde temayı ilk kurduğunuzda logo kısmı boş kalmaz. İlk önce echo ‘/images/logo.png” kısmındaki logo gelir. Panelden farklı logo url’si eklediğimizde yenisi görünür. cnr_lw ve cnr_lh kısmınıda örnek olarak verdim. Boyutlarıda panele ekleyip oradan seçim yaptırabilirsiniz.

Mantık bu şekilde işlemektedir.

Mesela logo kısmında “type” => “text”); text yani yazı için bir alan oluşturduk. Reklam için oluşturmak istiyorsanız. “type” => “textarea”); textarea işlemini kullanabilirsiniz. Yine logodaki gibi reklam kodu eklenmemişse sizin belirlediğiniz reklamı gösterirsiniz. Link yerine yüklemede yaptırmak isterseniz uploud işlevini yazabilirsiniz. Yükleme işlemi olur.

Son bir örnek daha veriyim. Mesela temanızda onedio tarzında bir slider alanı olduğunu varsayalım. Burada temapanelinden kategori seçimi yaptırmak istiyorsanız.

Yazıyı kategorilendirerek çektiğimiz kodu bilirsiniz.

<!--?php  query_posts($query_string . "category_name=$cat_isim&showposts=7"); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?-->

Üstteki standart kodda sadece $cat_isim değerini kullandık. Tema panelinde aktif etmek için alttaki alanı oluşturun. showposts=7 kısmı içinde bir ayar yaptırabilirsiniz.

$options[] = array( “name” => “Onedio Tarzı Slider”,
“desc” => “Slider Kategorisini Seçiniz.”,
“id” => $shortname.”_slide_cat”,
“type” => “select”,
“options” => $of_categories,
“std” => “”);

_slide_cat değerimiz burada görünüyor. Fakat biz yazı kodunda $cat_isim kullandık. Bunuda ayarlamak için temamızın functions.php dosyasına ekleyin. Direk type ilede yapabilirdik ama böyle daha sağlıklı. 🙂 $of_categories değeri temadaki kategorileri, $of_pages ise sayfaları çeker.

$cat_isim= get_option(‘cnr_slide_cat’);

İşlemlerden sonra sitenizdeki kategoriler otomatik çekilir. Seçtiğiniz sliderda gösterilir.

Ek kullanımlar:

Panel ile renk seçimi, farklı css, yazı fontu, yazı boyutu, yazı kalınlığı vb işlemleride yapabilirsiniz. Bu kısımdaki işlemlerdeki kodlar için her zaman header.php sayfasını kullanacaksınız. (<*/head> öncesi)

Dipnot:

Alttaki kod Tema panelinin göründüğü kısmı Wp admin panel > Görünüm altında listeler.
$of_page = add_submenu_page(‘themes.php’, $themename, ‘Options’, ‘edit_theme_options’, ‘optionsframework’,’optionsframework_options_page’); // Default

Yandaki resimdeki gibi göstermek için alttaki kodu kullanabilirsiniz. caner.png menü ikonudur. ufak boyutta resim koyabilirsiniz.

$of_page = add_menu_page($themename, ‘Caner Dio’, ‘edit_theme_options’, ‘optionsframework’,’optionsframework_options_page’, get_bloginfo(‘template_url’).’/admin/images/caner.png’); // Default

Size verdiğim dosya ingilizce olacaktır. Ben baya baya farklı panel yapısında kullandığım ve değişik düzenlemeler yaptığım için düzen farklı. Takıldığınız bir yer olursa mutlaka sorabilirsiniz. 😉