WordPress Tema Paneli Yapımı - OGPanel v1

cudjex · 20 Ağustos 2012

Merhaba arkadaşlar.Bildiğiniz üzere şu konuda tema yapımı derslerine başlacağımı belirtmiştim,evet biliyorum biraz gecikti ama başlayacağım merak etmeyiniz.Sabrınız için şimdiden teşekkür ederim.
Gelelim konumuza.Aslında bu tema paneli yapım işini o serinin en sonunda anlatacaktım.Dedim boşver anlat gitsin.

WordPress tema paneli nedir?
Tema panel olayı,temaya özgü ayarları,harici sayfadan kontrol edebilmenizi sağlayan,tema dosyaları ile boğuşmanızı engelleyen,WordPress'in bize sağladığı en büyük nimetler biridir.
OGPanel nedir?

OGPanel benim sıfırdan yazmış ve geliştirmiş olduğum piyasadaki panellerden kaliteli sayılabilecek bir tema ayar sayfasıdır.Piuasadaki panelleri görüyoruz,elalem tutorial sitelerinden çevirip çakıyor adını soyadını panele.Sonra da ben wpciyim diye geçiniyor.Herneyse..

OGPanel'in avantajları nelerdir?
Kısaca bahsedeyim

Türkçe'dir
Kolayca geliştirilebilir
Arayüzü güzeldir

OGPanel'in kullanımı
Bu tema panelinde,input,textarea,acilir,tik ve aciklama adında 5 adet ayar tipi vardır.

İlk başta aşağıdan indireceğiniz dosyayı functions.php de

PHP:

include_once("tema_ayar.php");

diye tanımlatın.
Daha sonra aşağıdaki gibi array() leri çğraltarak panelinize ekstra alanlar ekleyin.

PHP:

	array(	
		"baslik" => "Facebook adresinizi",
		"aciklama" => "Lütfen adresinizi giriniz.",
		"id" => "facebook_adres",
		"varsayilan" => "",
		"tip" => "input"),

Temanızda bu şekilde kullanabilirsiniz

PHP:

<?php echo og_ayar('facebook_adres'); ?>

baslik = ayar kutusunun başlığı
aciklama = ayar kutusunun aciklaması
id = ayarın çekileceği her biri farklı olmak zorunda olan özel isim örneğin manset_ac gibi
varsayilan = varsa,temayı yükleyen kişide ilk görünecek olan değer
liste = acilir tipi içerik kutusu kullandıysanız,liste nin içine arrayları eklemelisiniz
tip = input,textarea,acilir,tik ve aciklama dan herbiri olabilir.
Yukarıdaki dizilimin sırası önemli değildir.

Tema panelinizi başlıklara göre ayırmak isterseniz,

PHP:

	array(	
		"baslik" => "Genel Ayarlar",
		"tip" => "bolumac"),
	//buraya ayarlar gelecek
	array(	
		"tip" => "bolumkapa"),
	array(	
		"baslik" => "Reklam Ayarları",
		"tip" => "bolumac"),
	//buraya ayarlar gelecek
	array(	
		"tip" => "bolumkapa"),
	array(	
		"baslik" => "Sosyal Medya Ayarları",
		"tip" => "bolumac"),
	//buraya ayarlar gelecek
	array(	
"tip" => "bolumkapa"),

input tipi ayar kutusu yapımı
Facebook adresiniz,logo adresiniz gibi kısa içerik girilmesi gereken ayar kutularınız olacaksa input idealdir
tema_ayar.php kodu

PHP:

	array(	
		"baslik" => "Logo",
		"aciklama" => "Lütfen logo adresinizi giriniz.",
		"id" => "logo",
		"varsayilan" => "",
		"tip" => "input"),

Kullanımı

PHP:

 <?php echo og_ayar('facebook_adres'); ?>

Çıktısı
direk olarak yazdığınız değer görünür.

textarea tipi ayar kutusu yapımı
Reklam kodu,sayaç kodu gibi büyük kod blokları için textarea kullanınız.
tema_ayar.php kodu

PHP:

	array(	
		"baslik" => "Yan menü reklam kodlarınız",
		"aciklama" => "HTML,adsense kodları vs olabilir",
		"id" => "yan_reklam",
		"tip" => "textarea"),

Kullanımı

PHP:

 <?php echo og_ayar('yan_reklam'); ?>

Çıktısı
direk olarak yazdığınız değer görünür.

acilir tipi ayar kutusu yapımı
Çoklu seçimli ayarlarınız varsa açilir menüyü kullanabilirsiniz.
tema_ayar.php kodu

PHP:

	array(	
		"baslik" => "Sidebar sağa alınsın mı?",
		"aciklama" => "",
		"id" => "kategori_sec",
		"liste" => array("Evet","Hayir"),
		"tip" => "acilir"),

Kullanımı

PHP:

 <?php $cikti = og_ayar('kategori_sec');if($cikti == "Evet") { echo "Sidebar solda"; } ?>

Çıktısı
direk olarak arraylardaki değerler görünür.

aciklama tipi ayar kutusu yapımı
Eğer detaylı olarak açiklama eklemek isterseniz,tam size göre.
tema_ayar.php kodu

PHP:

	array(	
		"baslik" => "Açıklama ",
		"aciklama" => "Buraya tema ile ilgili açıklama yazısı yazabilirsiniz",
		"tip" => "aciklama"),

Kullanımı
Kullanımı yoktur.Sadece tema panelinde görünür.

tik tipi ayar kutusu yapımı
Çoklu seçimli ayarlarınız varsa açilir menüyü kullanabilirsiniz.
tema_ayar.php kodu

PHP:

	array(	
		"baslik" => "Manşet olsun mu",
		"aciklama" => "Açılsın istiyorsanız lütfen işaretleyiniz",
		"id" => "manset_ac",
		"tip" => "tik"),

Kullanımı

PHP:

 <?php $cikti = og_ayar('kategori_sec');if($cikti == "true") { echo "true değeri döndü"; } ?>

Çıktısı
true ve false değerlerini döndürür.

Örnekler vereyim
acilir tipi ayara bir örnek vermek istiyorum.
"Anasayfada yazı özeti mi görünsün yoksa tamamı mı ?" gibi bir örnek

PHP:

	array(	
		"baslik" => "Anasayfada yazı özeti mi görünsün yoksa tamamı mı ?",
		"aciklama" => "",
		"id" => "anasayfa_ayar",
		"liste" => array("Özet","Tamami"),
		"tip" => "acilir"),

İndex.php de bu ayarı böyle kullanırsınız :

PHP:

<?php $ayar = og_ayar('anasayfa_ayar');if($ayar == 'Özet') { the_excerpt(); } else { the_content(); } ?>

input tipi ayar bir örnek daha vereyim

PHP:

	array(	
		"baslik" => "Twitter kullanıcı adınız",
		"aciklama" => "",
		"id" => "twitter",
		"varsayilan" => "",
		"tip" => "input"),

kullanımı şöyledir:

PHP:

twitter.com/<?php echo og_ayar('twitter'); ?>

Kodların tamamı aşağıdadır,eminim biraz bakarsanız mantığı çözeceksiniz.

PHP:

<?php

$ayarlar = array (
	array(	
		"baslik" => "Genel Ayarlar",
		"tip" => "bolumac"),
	array(	
		"baslik" => "Logo",
		"aciklama" => "Lütfen logo adresinizi giriniz.",
		"id" => "logo",
		"varsayilan" => "",
		"tip" => "input"),
	array(	
		"baslik" => "Anasayfada gösterilecek haberlerin kategorisini seçiniz",
		"aciklama" => "Seçmezseniz son yazılar görüncektir",
		"id" => "kategori_sec",
		"liste" => $kategoriler,
		"tip" => "acilir"),
	array(	
		"baslik" => "Açıklama ",
		"aciklama" => "Buraya tema ile ilgili açıklama yazısı yazabilirsiniz",
		"tip" => "aciklama"),	
	array(	
		"baslik" => "Manşet olsun mu",
		"aciklama" => "Açılsın istiyorsanız lütfen işaretleyiniz",
		"id" => "manset_ac",
		"tip" => "tik"),
	array(	
		"baslik" => "Yan menü reklam kodlarınız",
		"aciklama" => "HTML,adsense kodları vs olabilir",
		"id" => "yan_reklam",
		"tip" => "textarea"),
	array(	
		"tip" => "bolumkapa"),
	array(	
		"baslik" => "Diğer Ayarlar",
		"tip" => "bolumac"),
	array(	
		"baslik" => "Deneme",
		"aciklama" => "Açıklama",
		"id" => "deneme_ayar",
		"tip" => "input"),
	array(	
		"tip" => "bolumkapa"),
);

	
function ogpanel_ayarlar() {
  global $ayarlar;
  if ('ayar_kayit'== $_REQUEST['action'] ) {
    foreach ($ayarlar as $ayar) {
     if( !isset( $_REQUEST[ $ayar['id'] ] ) ) {  } else { update_option( $ayar['id'], stripslashes($_REQUEST[ $ayar['id']])); } }
     if(stristr($_SERVER['REQUEST_URI'],'&kayit=tamam')) {
     $lokasyon = $_SERVER['REQUEST_URI'];
    } else {
     $lokasyon = $_SERVER['REQUEST_URI'] . "&kayit=tamam";
    }
    
  	header("Location: $lokasyon");
  	die;
	} else if('ayar_reset' == $_REQUEST['action'] ) {
    foreach ($ayarlar as $ayar) {
     delete_option( $ayar['id'] );
     $lokasyon = $_SERVER['REQUEST_URI'] . "&reset=tamam";
    }
  	header("Location: $lokasyon");
  	die;
  }
add_theme_page('OGPanel', 'OGPanel', 10, 'ogpanel', 'ogpanel_admin');
}
function ogpanel_admin() {
    global $ayarlar;
?>
<div class="wrap">
  <h2 class="alignleft">Tema Ayarları[/SIZE][/COLOR]
  <br clear="all" />
  <?php if ( $_REQUEST['kayit'] ) {  ?>
  		<div class="updated fade"><p>[B]Ayarlarınız Kaydedildi ![/B]</p></div>
  <?php } ?>
<form method="post" id="myForm">
<div id="poststuff" class="metabox-holder">
    <?php
	foreach ($ayarlar as $ayar) {
      switch ( $ayar['tip'] ) {
        case "input": ?>
        <div class="ogpanel-bolum og-input">
          <div class="ogpanel-baslik">
        	<?php echo $ayar['baslik']; ?>
          </div>
        <div class="ogpanel-ic">
         <input name="<?php echo $ayar['id']; ?>" id="<?php echo $ayar['id']; ?>" type="text" 
				value="<?php get_option($ayar['id'])?printf(get_option($ayar['id'])): printf($ayar['varsayilan']) ?>" />
        </div>
        <div class="ogpanel-aciklama"><?php echo $ayar['aciklama']; ?></div>
        </div><span class="ogpanel-t"></span>
      <?php break;
        case "textarea": ?>
        <div class="ogpanel-bolum og-textarea">
          <div class="ogpanel-baslik">
        	<?php echo $ayar['baslik']; ?>
          </div>
        <div class="ogpanel-ic">
         	<textarea class="code" rows="4" cols="60"  name="<?php echo $ayar['id']; ?>" 
			id="<?php echo $ayar['id']; ?>"><?php get_option($ayar['id'])?printf(get_option($ayar['id'])): printf($ayar['varsayilan']) ?></textarea>
        </div>
        <div class="ogpanel-aciklama"><?php echo $ayar['aciklama']; ?></div>
        </div><span class="ogpanel-t"></span>
      <?php break;
        case "acilir": ?>
        <div class="ogpanel-bolum og-select">
          <div class="ogpanel-baslik">
        	<?php echo $ayar['baslik']; ?>
          </div>
        <div class="ogpanel-ic">
			<select name="<?php echo $ayar['id']; ?>" id="<?php echo $ayar['id']; ?>">
				<?php foreach ($ayar['liste'] as $esas) { ?>
				<option <?php if (get_settings( $ayar['id'] ) == $esas) { echo 'selected="selected"'; } ?>><?php echo $esas; ?></option><?php } ?>
			</select>
        </div>
        <div class="ogpanel-aciklama"><?php echo $ayar['aciklama']; ?></div>
        </div><span class="ogpanel-t"></span>
      <?php break;
        case "tik": ?>
        <div class="ogpanel-bolum og-radio">
          <div class="ogpanel-baslik">
        	<?php echo $ayar['baslik']; ?>
          </div>
        <div class="ogpanel-ic">
			<?php if(get_option($ayar['id'])){ $tik = "checked=\"checked\""; }else{ $tik = "";} ?>
			<input type="checkbox" name="<?php echo $ayar['id']; ?>" id="<?php echo $ayar['id']; ?>" value="true" <?php echo $tik; ?> />
        </div>
        <div class="ogpanel-aciklama"><?php echo $ayar['aciklama']; ?></div>
        </div><span class="ogpanel-t"></span>	
      <?php break;
        case "aciklama": ?>
        <div class="ogpanel-bolum og-radio">
          <div class="ogpanel-baslik">
        	<?php echo $ayar['baslik']; ?>
          </div>
        <div class="ogpanel-ic og-aciklama">
			<?php echo $ayar['aciklama']; ?>
        </div>
        </div><span class="ogpanel-t"></span>	
      <?php break;
        case "bolumac": ?>
			<div class="stuffbox og-bolumac">
			<h3><?php echo $ayar['baslik']; ?></h3>
			<div class="inside">
			<div class="ogpanel" style="width: auto">	
      <?php break;
        case "bolumkapa": ?>
			</div ></div></div>
		<?php break;
		}
	}
	?>
</div>
<input name="ayar_kayit" type="submit"  style="float:left" class="button-primary" value="Kaydet" />
<input type="hidden" name="action" value="ayar_kayit" />
</form>

<form method="post" style="float:right">
<input name="ayar_reset" type="submit" class="button-secondary" value="Reset" />
<input type="hidden" name="action" value="ayar_reset" />
</form>
</div>
<?php }
if ( ! function_exists( 'og_ayar' ) ) {
	function og_ayar( $id ) {
		$cekgit = get_option( $id);
		return $cekgit;
	}
}
add_action('admin_menu', 'ogpanel_ayarlar');
add_action('admin_head', 'ogpanel_adminhead');
function ogpanel_adminhead() {
?>
	<style type="text/css">
	.ogpanel {}
	.ogpanel .ogpanel-t {celar:both;display:block;}
	.ogpanel .ogpanel-bolum {clear:both;width:100%;display:block;overflow:hidden;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid [URL=http://forum.iyinet.com/usertag.php?do=list&action=hash&hash=EFEFEF]#EFEFEF[/URL]}
	.ogpanel .ogpanel-baslik {float:left;width:200px;}
	.ogpanel .ogpanel-ic {float:left;width:410px;}
	.ogpanel .ogpanel-aciklama {float:left;width:500px;font-size:11px;color:#878787;}
	.ogpanel .ogpanel-ic input,.ogpanel .ogpanel-ic textarea {width:400px;font-family:arial;}
		.ogpanel .ogpanel-ic input[type=checkbox] {float:left;width:20px;}
	.ogpanel .og-aciklama {width:600px;color:#777;}
	</style>
<?php } ?>

Gördüğünüz gibi,kullanımı gayet basittir.Ücretli ücretsiz yaptığınız temalarda kolaylıkla kullanabilirsiniz..Panelin yakında v2sini çıkarıcam.Onda colorpicker ve birkaç özellik daha olacak.
Yazıyı bloglarında yayınlayacaklar kaynak verirse sevinirimi.Bol wpli günler.

kaynak

Ozkan · 20 Ağustos 2012

hep düşünmüşümdür hadi tema yapıyoruz çizdik tamam; css kodladık tamam, e sayfaları yaptık o da tamam ama paneli nasıl yapıcaz diye

çok teşekkürler

Mecruh · 23 Ağustos 2012

Tema yapmaya başlayacaktım bu iyi oldu..

WordPress Tema Paneli Yapımı - OGPanel v1

cudjex

0

Ozkan

0

Mecruh

0

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5