Bu temaları, noupe sitesinde verilen post’tan aldım.

Ücretsiz ve Kullanışlı CSS/(X)HTML Template’leri

HTML5 ve CSS3 ( Demo | Download )

JeansWebsite ( Demo | Download )

Lawyer & Attorney ( Demo | Download )

Ornare ( Demo | Download )

iPhone App ( Download )

StudioClick ( Demo | Download )

Darkness ( Demo | Download )

MYportfolio ( Demo | Download )

2 Breed ( Demo | Download )

WesternShop ( Demo | Download )

CSS Heaven 1 ( Demo | Download )

Zen Design ( Demo | Download )

Shop Around ( Demo | Download )

Ikonik ( Demo | Download )

Internet Music ( Demo | Download )

Nova Studio ( Demo | Download )

YIW Minimal ( Demo | Download )

YIW Folio ( Demo | Download )

CleanBusiness ( Demo | Download )

Pure Elegance ( Demo | Download )

Film Blog ( Demo | Download )

Solitude ( Demo | Download )

Speed Racing ( Demo | Download )

PinkShop ( Demo | Download )

Web Design ( Demo | Download )

Online Edu ( Demo | Download )

GrayCompany ( Demo | Download )

EleganceBusiness ( Demo | Download )

Coffee Maker ( Demo | Download )

BusinessTemplate ( Demo | Download )

• jQuery – jquery-1.4.2.min.js
• Font – Quicksand_Book_400.font.js
• jQuery Easing – jquery.easing.1.3.js
• Cufon Font - cufon-yui.js
• 600×400 Boyutlarında 6 adet Manzara Resmi

Yapılan işler;

• Cufon include
• jQuery Script – jquery.Zingoslide.js Scripti yazıldı
• CSS Kodlama – Zingoslide.css dosyası yazıldı.
• CSS resimleri – Slayt içerisinde kullanılacak CSS resimleri

Demo – Download

Başlangıç

Plugini biraz açıklayacak olursak, CSS3 kodlama ile birlikte jQuery Easing dizinlendiği şekli ile beraber, Herbiri farklı 6 slayt geçişi hazırlandı.. CSS3 kullanılarak , hover efekti dahilinde Slayt kontrol paneli yerleştirildi.. Kodları ise aşağıda açıkladım.

CSS3′ten kastımız, CSS derslerinde bahsettiğim css Property sayesinde resimlere z-index özelliği kattım. Slayt geçişleri esnasında, farklı 6 çeşit için birbirinden farklı CSS kodlamaları girdim.Aşağıdaki resimden de anlayacağınız üzere, Tüm resim efektleri hep beraber çalışmaktadır;

2. Dosyaları oluşturalım;

Yukarıda da bahsettiğim gibi, Plugini 3 adet dosya yaratarak kullanabiliyoruz. Bunlar;

• index.html
• jquery.Zingoslide.js
• Zingoslide.css

a. HTML dosyasını oluşturma;

HTML dosyamızın içerisinde, CSS ve jQuery dosyalarının yollarını header tag’lerinin arasına gömdükten sonra, ilk önce Cufon Scriptini oluşturmak için h1, h2 ve h4 Tag’larini Cufon olarak gösteriyoruz. Bunun için aşağıdaki kodları kullanıyoruz;

[js]

Cufon.replace(‘h1 ,h2 ,h4′);
$(function(){

$("#bosluk").css({height:"auto" , overflow:"visible"});
$("#test").Zingoslide();

});

[/js]

Daha sonra Cufon ayarlarımıza stil kazandırmamız gerekiyor, bunu kendinize göre belirleyebilirsiniz. Ben aşağıdaki stil kodlarını girdim;

[css]

* { margin:0; padding:0; list-style:none; }

body { background:#f7f7f7 url(‘i/arka-1.jpg’) repeat-x; }
#slide-alan { width:960px; margin-left:auto; margin-right:auto; }

#baslik {  background:#111111; text-align:center; padding:10px; }
h1 { color:#00baff; font-size:32px; padding-bottom:5px; }
h4 { color:#008bbe; font-size:18px;padding-bottom:15px;  }
h2 { border-bottom:1px solid #cccccc; margin-bottom:10px; }
#bosluk {  width:600px; margin-left:auto; margin-right:auto; margin-top:50px; border:1px solid #3a3a3a; padding:10px; background:#292929 url(‘i/slayt-bg.jpg’) repeat-x;  -moz-border-radius: 10px; -webkit-border-radius: 10px; position:relative; z-index:10;   }
.zingocan {   width:730px; margin-left:auto; margin-right:auto; display:block; margin-top:-30px; }

a { text-decoration:none;  padding:7px; margin:20px; color:#fff; font-family:Tahoma,Arial;}

[/css]

Sonrasında ise, slide-alan katmanının içerisine bir liste oluşturuyoruz. Her listenin içine de birer resim koyabiliriz. Bu liste içerisinde resimden sonra gelen bölüm bizim alt tarafta bulanacak açıklama metinlerimizden oluşur. Bu metin alanına isterseniz bir form alanı bile girebilirsiniz. Bu tamamen sizin HTML kodlama mantığınız ile çalışmaktadır. Ben bir kaç örnek oluşturdum, sizler devam ettirebilirsiniz;

[html]

<ul id="test">
<li><img src="resimler/1.gif"  /><span><h4>Cufon Baslik</h4><p>Burası da yazı alanı</p> </span></li>
<li><img src="resimler/resim2.jpg"  /><span>Yazı Alanı 2 <a href="#">Link Gelebilir </a> ya da <input type="button" value=’Buton =)’ /></span></li>
<li><img src="resimler/resim3.jpg"  /><span>Yazı alanı 3</span></li>
<li><img src="resimler/resim4.jpg"  /><span>Yazı alanı 4</span></li>
<li><img src="resimler/resim5.jpg"  /><span>Yazı alanı 5 </span></li>
<li><img src="resimler/resim6.jpg"  /><span>Yazı alanı 6 </span></li>

</ul>

[/html]

jQuery Dosyası – jquery.Zingoslide.js

Slayt içerisinde kullanabileceğimiz alan farklılıklarından dolayı, işi uzatmak istemedim. Kullanabileceğim bir slayt scriptini alarak biraz güzellik kattım. Daha sonra Zingoslide adında bir fonksiyona kendi değerlerimi atadım. Bu atama sırası işleminde, jQuery anonim fonksiyonlardan yararlandım. Tekrar açıklamam gerekirse, jQuery Dosyasının içerisindeki tüm kodlar bana ait değildir. Başka slayt kodlarını alarak değiştirdim.

Bunu jquery.Zingoslide.js dosyasına bakarak inceleyebilirsiniz.

CSS dosyası – Zingoslide.css

CSS dosyasını eğer incelediyseniz farketmiş olmalısınız ki Zingoslide adında bir sınıfı sürekli kullanmışız. Fakat index.html dosyasında böyle bir sınıf bulunmamakta.Bunun sebebi ise jQuery dosyasında oluşturmuş olduğumuz fonksiyonlara etki etmek istediğim için.

ilk olarak padding ayarları, liste şeklini ve resimlerin pozisyonlarını belirlemek için varsayılan , basic kodları kullandım;

[css]

.Zingoslide { padding:0px;  position:relative; z-index:100; overflow:hidden;}
.Zingoslide ul{ list-style:none;padding:0px;margin:0px; position:relative;   }
.Zingoslide ul li { position:absolute; display:block; width:100%;}
.Zingoslide ul li  img { position:relative; z-index:1; }

[/css]

Bunun dışında bir de, index.html içerisinde yer alan, kontrol paneline css özellikleri kattım;

[css]

.kontrols { margin-top:45px;  position:absolute; background: url(‘i/kontrol.png’) no-repeat; display:block; width:202px; height:42px; padding-left:5px; }
.kontrols li {   position:relative; float:left; margin:12px 5px 5px 5px; display:block; width:17px; height:15px;  background: url(‘i/normal.png’) no-repeat; text-indent:-9999px; cursor:pointer;}
.kontrol_active {   background: url(‘i/aktif.png’) no-repeat!important;height:20px!important; margin-top:9px!important;  }
.kontrol_hover {  background: url(‘i/aktif.png’) top no-repeat!important; height:20px!important;margin-top:9px!important; }

[/css]

En çok sıkıntı çektiğim konu, CSS dosyasını ayarlamakta oldu. Ne kadar ders vermeye çalışıp, çok bilir gibi göründüğümü düşüneneler olsa da, CSS konusunda henüz öğrenmem gereken çok şey olduğuna inanıyorum. Benim burada verdiğim dersler ya da açtığım konular sadece bildiklerimi paylaşarak ve öğreterek hem daha çok aklımda kalmasını sağlamak hem de türk tasarımcılara yardımım dokunmasından başka hiçbir şey değildir.

Bilindiği üzere Photoshop ile harikalar yaratılmakta.. Çoğu menü, link ya da butonlar iki ayrı Photoshop dosyası kullanarak hover yöntemiyle değişen tipte iki resmi tek bir resim gibi göstermemizi sağlıyor.. CSS derslerimin başından beri sizlere anlatmak istediğim olay ise şuydu; Photoshop harika bir programdır, ona diyecek lafımız yok, lakin Photoshop’u bu gibi basit bileşenleri oluşturmaktansa daha profesyonel işler için kullanmalıyız.. Bu konuda basit bir hover efekti ile bir h1 etiketine nasıl stil kazandırırız bunu göstereceğim.

[download]Demo için tıklayınız.[/download]

• İlk olarak html kaynağımıza bir başlık ve içerisine  link girelim;

<h1><a href="#"> Zingocan CSS </a></h1>

• Şimdi yavaş yavaş CSS kodlarımızı oluşturmaya başlayalım. İlk olarak bir body tag’i girip renk ayarlarını oluşturuyorum;

body {
background: #666;
padding: 1em;
}

• Bu ayarlar basit CSS kodlarından oluşuyor. Değerleri dilediğiniz gibi oluşturabilir hatta isterseniz hiç yazmayabilirsiniz.Burada önemli olan kodlarımız h1 ile alakadardır. hover özelliği kullanmadan önce ilk olarak h1 tag’ini şekillendirelim;

h1 {
position: relative;
font-size: 200px;
margin-top: 0;
font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
text-shadow: 2px 3px 3px #292929;
letter-spacing: -7px;
}

• Kodlarımızda, Arka tarafta görünecek olan Gölgemizin tek bir şema üzerinde ve sadece bir tane başlığı göstermesi için position: relative özelliğini kullandık. Diğer alanlar ise isteğe bağlı değiştirilebilir değerlerdir. Biz en başta h1 tag’i içerisinde bir link oluşturmuştuk. h1 etiketine ait css özelliklerini girdik fakat bundan sonra yapacağımız işlemler, bu link ile alakadar olmalı. Bunun için;

h1 a {
text-decoration: none;
color: #ffffff;
position: absolute;
text-shadow: 0 2px 0 #e9e9e9;
}

• Bu defa yukarıda kullandığımız relative değerini Link oluşum sırasında kayma meydana gelmemesi için absolute olarak değiştirdim. Linkimize bir renk ve text-shadow ile bir gölge ekledim. Gölge etiketi içerisine gölgeyi betimlemesi için boyut ve renk kodlarını kullandım.Şimdi de  mouse ile linkin üzerine gelindiğinde hover özelliği aktif yapabilmek için bir kaç kod girmem gerekecek, aslında bu durumda web-kit özelliklerini kullanarak daha biçimsel bir durum elde edebiliriz fakat hover metodunun sadece renk özelliğini kullanıyorum;

h1:after {
color: #dbdbdb;}

• Burada Aslında beyaz renkte olan linkimizin üzerine gelindiğinde #dbdbdb renk kodu içeren bir renge dönüşmesini istedik.Şimdiye kadar yaptığımız şeyleri aslında Firefox gibi daha modern tarayıcılarda tamamlamış bulunuyoruz. Yalnız İnternet explorer ve Chrome gibi tarayıcılarda Firefox ile aldığımız sonucu bunlarda da alamayabiliriz. Çünkü internet Explorer 8 itibariyle şuanda gölge efekti tam verim ile görünmemekte. Bu işlemi düzeltmek için ve güzel görünmesini istediğimiz başlığın gölge efekti kötü olmasından sa hiç olmamasını istiyoruz. Bu yüzden aşağıda gösterdiğim farklılıktaki web-kit kodlarını ekliyoruz;

body {
 background: #666;
 padding: 1em;
 }
 h1 {
 position: relative;
 font-size: 200px;
 margin-top: 0;
 font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
 text-shadow: 2px 3px 3px #292929;
 letter-spacing: -7px;
 -webkit-text-stroke: 1px white;
 }
 h1 a {
 text-decoration: none;
 color: #ffffff;
 position: absolute;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
 text-shadow: 0 2px 0 #e9e9e9;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;</strong></span>
 transition: all .3s;
 }
 h1 a:hover {
 color: #185a50;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
 }
 h1:after {
 color: #dbdbdb;
 content : attr(baslik);
 }

Dikktatinizi çektiyse h1:after bölümü oluşturduk ve buna bir content ekledik. Content’in ismi  baslik diye görünüyor. Bu işlem bizim başlık alanımızı bütünlememize yarayacak fakat bu baslik ismini de h1 tag’inin içerisine gömmemiz gerekecek bunun için de;

<h1 baslik="Zingocan CSS"> <a href="#"> Zingocan CSS </a> </h1>

Baslik  bölgemizi oluşturmamız gerekiyor.

Hayırlı ramazanlar dilerim =)

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..

Söz Dizimi

pseudo-classes söz dizimi şu şekilde oluşturulur;

seçici:pseudo-class {özellik:değer;}

Sınıflar da pseudo-classes içerisinde şu şekilde kullanılır;

seçici.sınıf:pseudo-class {özellik:değer;}

Anchor Pseudo-classes

Sayfa içerisindeki linkler farklı tarayıcılara göre farklı gösterimleri mevcuttur.. Linklere özel anonim değerler eklenmedikçe şu şekilde CSS özelliği katılabilir;

[css]

a:link {color:#FF0000;}      /*ziyaret edilmemiş link */
a:visited {color:#00FF00;}  /* ziyaret edilmiş link */
a:hover {color:#FF00FF;}  /*mouse over linki */
a:active {color:#0000FF;}  /* seçilen link */

[/css]

Daha önceki derslerimizden de bildiğiniz gibi mouse over, linkin üzerine mouse ile gelinmesi demekti.

[message type="info"] a:hover özelliği , a:link ve a:visited CSS tanımlamalarından sonra gelmelidir.

a:active özelliği, a:hover CSS tanımlamasından sonra gelmelidir.

Pseudo-class isimleri büyük küçük harf duyarlısı değildir.[/message]

Pseudo-sınıfları ve CSS Sınıfları

Pseudo-sınıfları CSS sınıfları ile kombine edilebilir;

a.kirmizi:visited {color:#FF0000;}

<a href="css-dersleri.html">CSS Dersleri</a>

Yukarıdaki örnekte olan link eğer daha önce ziyaret edilmişse, link kırmızı görünecektir.

CSS First-chlild Pseudo-sınıfı

First-child den kastımız belirlenen seçici arasındaki ilk elemandır..Şöye bir örnekleme düşünülebilir, eğer iki adet paragraf elemanınız varsa ve bunların hergangi bir sınıfı yoksa, first-child özelliği ile ilk p elemanına etki edebilir, bu elemana çeşitli CSS özellikleri katabiliriz.Örnek;

 


 

 

jQuery ve CSS Dersleri.

jQuery ve CSS Dersleri.

 
 

Yukarıda iki adet p tag’i bulunuyor, lakin ilk p elemanı mavi renkte diğeri ise default değerindedir.

Şimdi de Bütün <p> elemanlarının ilk <i> elemanına etki edelim;

 


 

 

jQuuery ve CSS dersleri. jQuery ve  CSS dersleri

jQuuery ve CSS dersleri. jQuery ve   CSS dersleri

 
 

Yukarıdaki örneği göze alacak olursak birinci cümledeki CSS <i> tag’i mavi değeri almış fakat ikinci cümlelerdeki almamıştır.. Bu da yukarıda bahsedilen sadece <p> tag’leri içerisindeki ilk <i> elemanlarına etki ettiğimiz için oluşmuştur.

Şimdi de ilk <p> elemanının bütün <i> elemanlarına etki edelim;

 


 

 

jQuuery ve CSS dersleri. jQuery ve   CSS dersleri


jQuuery ve CSS dersleri. jQuery ve   CSS dersleri

 

 

Gördüğünüz gibi bu defa da ilk <p> elemanının bütün <i> elemanlarına etki etmiş olduk.. Yukarıda verdiğim örnekleri bir not defterinde .html kalıbında tarayıcınızda açarsanız daha iyi anlayacağınızı umuyorum.

Bütün Pseudo sınıflarına ait tablo aşağıdadır.

Pseudo-classes

CSS içerisinde bazı özellikler yatay elemanları hizalamak için kullanılır. Align bunlardan biridir.

Blok Elemanlarını Hizalama

Blok elemanlarından kastımız sayfa boyunca ilerleyen ve Default ayarlarında herhangi bir kısıtlama ya da hizalama kullanmayan elemanlardır.Bunlara örnek verecek olursak;

• <h1>
• <p>
• <div>

gibi elamanlardır. Text align (yazı hizalama) özelliği için CSS Yazı başlığımızı inceleyebilirsiniz.

Bu bölümde birkaç CSS özelliğini kullanarak elemanları hizalamayı göstereceğim

Margin Özelliğini Kullanarak Orta Hizalama

Blok elemanları sağ ve sol margin özelliğini kullanarak yatay hizalama kullanılabilir.

margin:auto özelliği Eğer !DOCTYPE bilgisi yoksa İnternet Explorer’da çalışmaz.

Ayarları margin:auto içerisine gömüp, belirlediğimiz alana farklı değerler de atayabiliriz. Ufak bir örnek verelim ne dersiniz;

[css]

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

[/css]

Yukarıda center sınıfına ait bölgeyi sayfanın ortasında yatay boşluğun %70 ini kullanarak oluşturduk.

Hizalama genişlik %100 olduğu zaman bir anlam oluşturmayacaktır.

Position Özelliğini Kullanarak sağ ve sol Hizalama

Position absolute özelliği ile hizalama yöntemi kullanılır.

[css]

.sag
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

[/css]

Yukarıda sag sınıfını bir paragraf elemanı ile birlikte kullandığımızda paragrafın sap tarafa dayalı olarak oluşturduk.

Crossbrowser Tarayıcı Uyumluluğu

margin, paddin ve position özelliklerini kullanırken belki deneme yaptığımız tarayıca gözümüze güzel görünsede sayfamız, farklı tarayıcılarda farklı görünümler oluşabilir.

Bir de internet explorer derdimiz mevcut. Diyelim ki biz bir id’nin position değerini belirledik ve !DOCTYPE bilgilendirmesini girmedik. Bu defa internet explorer 17px değerinde bir margin (boşluk değeri) bırakacaktır. !DOCTYPE bilgisi verip aşağıdaki yazım şeklini kullanırsak hergangi bir boşluk değeri oluşmayacaktır;

[css]

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

[/css]

Float özelliğini kullanarak sağ ve sol Hizalama

Float sağ ya da sol özelliğini kullanarak aşağıdaki gibi hizalama yapılabilir;

[css]

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

[/css]

Buda float kullanılarak yaptığımız bir hizalama şekliydi. Yukarıda dediğim gibi birçok şekilde hizalama (align) sistemi  yazılabilir.. Float için de aşağıdaki gibi tarayıcı uyumu oluşturulabilir;

[css]

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

[/css]

CSS Float Nedir?

CSS Float özelliği ile birlikte, bir elemanı diğerlerinden bağımsız olarak sağ ya da solda gösterip, elemanın gerisinde kalan alanları (aşağı ya da yukarı gibi) boşluk olarak değerlendirip oaralarıda kullanabileceğimiz sayfalar yapabiliriz.

Elemanlar Nasıl Float Edilir?

Bir eleman yatay (horizontal) olarak kullanılır, eleman yalnız sağ ya da sol tarafta float edilebilir, aşağı  ya da yukarı float kabul edilmez.Yukarıda da bahsettiğim gibi sayfanın içerisine bir resim gömmeyi planladığımız vakit resmin sağ ya da sol taraflarına tam olarak yazı sığdırılamamakta yalnızca resmin en alt bölgesinde bir satırlık yazı gösterilebilmekteydi. Float özelliği sayesinde yazıları resimlerin etrafını dolduracak şekilde gösterebiliriz.

Eğer bir eleman sağ tarafa float edilmişse, yazılar sol tarafta sağ tarafa float edilmişse yazılar sağ tarafta kalacaktır.Örnek olarak;

[css]

img
{
float:right;
}

[/css]

Yukarıda resmi sağ tarafta kullanıp ondan sonra gelecek yazılar ise sol tarafta kalacaktır.

Sonraki Elemanları Floatlamak

Eğer birden fazla float eleman kullanacaksanız art arda gelecek bütün resimleri floatlayabilirsiniz.

Örnek için;

[css]

.resimler
{
float:left;
width:110px;
height:90px;
margin:5px;
}

[/css]

Floatı Kapatmak

Eğer daha önce bir float özelliği kullandıysanız ve bu float edilmiş öğeye etki eden ya da yakınlarında olan diğer elemanları floatın etkisinden kurtarmak isterseniz CSS clear özelliğini kullanabilirsiniz;

[css]

.yazilar
{
clear:both;
}

[/css]

Yukarıda verdiğim örneğin işleyebilmesi için bir üstteki örnekte bulunan CSS floatında CSS özellikleri içerisinde olması gerekir.. Yoksa birşey ifade etmeyecektir.. Daha geniş kapsamlı hem de daha önce öğrendiğimiz konuları işleyerek bir örnek kod oluşturacak olursak;

horizonral menu (float ile birlikte)

[html]

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Mwnu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

<p>
Bu örnekte CSS Float özelliği ile birlikte henüz görmediğimiz hover efektini kullandık.
Yukarıda CSS float kullanılarak yatay menü yaptık..</p>

</body>
</html>

[/html]

Bu dersten sonraki yazılarımda bolca örnekleme yapmya çalışıp, daha önce gördüğümüz CSS özelliklerini birlikte kullanmayı öğreneceğiz.. Hepinizin ilgisi için çok teşekkür ederim.. Güneşli günler..

Elementleri pozisyonlamada top, bottom, left, ve right özelliklerini kullanırız. Ancak bu değişkenler CSS pozisyon özelliklerini başta belirtmeden kullanılamaz.Ayrıca bu özellikler farklı konumlandırma ayarları ile çalışmaktadırlar.. Birazdan vereceğim örneklerle ne demek istediğimi acıkca anlayacağınızı umuyorum.

Statik Konumlandırma

HTML elemanlar ana ayarlarında (default) statik bir konumlandırmaya ayarlanmıştır.Static  konumlandırmada elemanlar sayfanın normal kod akışına göre dizilmektedirler.. Yani ilk önce bir resim kullandıysak ve sonrasında ise bir yazı kullanırsak bunlar kullandığımız sıraya göre HTML de yer alırlar.. İşte pozisyon özelliği ile bunu ortadan kaldırabiliriz.

Fixed Pozisyon

Çoğu web sitesinde karşılaştığımız bir özellik olan sabitleme genellikle reklam alanlarında yada kullanıcların sürekli görmesini istediğimiz bölümlerde kullanılan bir özellik haline gelmiştir.. Sabit konumlamadan kastımız içerisinde kullanacağımız bölümü sayfada aynı bölgede kalmasını sağlamaktan başka birşey değildir. Bu özelliğin adı aslında fixed olarak adlandırılmıştır.. Bir örnek yapalım;

[css]

p.yazi_fixed
{
position:fixed;
top:30px;
right:5px;
}

[/css]

Yukarıda p taginin yazi_fixed sınıfında bulunan alanı, yukarıdan aşağıya 30px ve sağdan 5px uzaklığında hep aynı yerde kalmaktadır. Sayfa aşağıya doğru sürüklense dahi bu eleman position:fixed özelliği sayesinde yerini her daim korumaktadır.

Not: İnternet Explorer’da fixed değerini kullanabilmek için kaynak kodunun başında !DOCTYPE  belirtecinin kullanılması gerekir.

Sabit konumlandırışmış öğeler, yukarıda bahsettiğimiz HTML’in normal akışını değiştirir..  Ve diğer elemanlar ile örtüşebilir. Örtüşmeden kastımız ise belirlediğimiz bölgeye başka bir eleman gelecekse bunun üzerinde kalır.

Relative Pozisyon

Relative özelliği alan bir elaman sayfada bağıl olarak istenilen bölgeye hitap etme özelliğine sahiptir.Aşağıda vereceğim örneği kendi bilgisayarınızda deneyiniz;

[css]

h2.pos_sol
{
position:relative;
left:-20px;
}
h2.pos_sag
{
position:relative;
left:20px;
}

[/css]

Yukarıda sağ ve soldan alacağı boşluk değerleri ile başlıkları sayfanın belirlediğimiz px boyutlarında pozisyonlama değeri verdik.Bu relative özelliğinin bir güzelliği daha var ki hem kullandığımız pozisyon değeri diğer ayarların üstünde olabiliyor hem de bu özelliğe negatif değerler de verebiliyoruz, aşağıdaki örnekte kullanılan kodları kendiniz denerseniz iki başlığın da üst üste bindiğini göreceksiniz;

[css]

h2.pos_top
{
position:relative;
top:-50px;
}

[/css]

Absolute Pozisyonu

Absolute Pozisyon Mutlak pozisyon olarak geçen, absolute pozisyonlu elemandan önceki ilk elemanı static yaparak sadece kendine verilen bir özellik katmamızı sağlar.. Absolute sadece belirlenen sınıfa etki ederken relative tüm sayfaya bağıl olarak hareket eder.Aşağıdaki örneği bir h2 sınıfı ve başka bir sınıf daha yerleştirerek deneyiniz;

[css]

h2
{
position:absolute;
left:100px;
top:150px;
}

[/css]

Bu değerleri atadığınız bir öğe, diğer öğelerin etkisi olmadan sayfa başından itibaren kaydırılmaya başlanacaktır. “˜Relative’ gibi yine “˜Absolute’un diğer öğelere etkisi olmayacaktır.Absolute özelliği de fixed özelliğinde olduğu gibi diğer elemanların üzerinde çıkabilir.

Örtüşen Elemanlar

Eğer bir eleman default değerlerinin dışında bir pozisyon değeri almışsa diğer elemanlarla ötüşebilir.

z-index özelliği ile hangi elemanın hangisini önünde ya da arkasında olduğunu biz seçebiliriz. Diyelim bir resim koyduk ve bunu arkaplan resmi gibi üzerinde yazı çıkmasını istiyorsak bu defa örneğimiz aşağıdaki gibi olmalı;

[css]

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

[/css]

Yukarıdaki kodları kullanarak bir resim atar ve daha sonra da herhangi bir yazı yazarsak, bu yazı resmin üzerinde çıkacaktır.

Bir elemanı Gizlemek, display:none veya visibility:hidden

CSS’te eğer bir nesneyi görünmez yapmak istersek bunu css özelliklerinden display:none ya da visibility:hidden ayarları ile yaparız.Aralarındaki fark ise visibility:hidden özelliğini kullanırsak gizlenen elemanın bulunduğu alan boşlukla belirlenirken, display:none özelliğinde ise elemanı görünmez yaptığımızda artık o eleman hiç kullanılmamış gibi olur ve bulunduğu yerde boşluk olmaz.

[css]

h1.hidden {visibility:hidden;}

h1.hidden {display:none;}

[/css]

Bunun yanında bir de kod karmacası vardır.. CSS içerisinde bazen kodların gizlenmesi gerekebilir.. Tarayıcının kodları görmemesini sağlamak için block ve inline özellikleri kullanılır.. Örneğin aşağıda yaptığım örnekte <span> tagini tarayıcının görmemesini sağladık;

[css]

span
{
display:block;
}

[/css]

ya da başka bir örnekle aşağıda li taglarını blockladık bu sayede bir liste gibi görünmedi;

[css]

li {display:inline;}

[/css]

Bunların aralarındaki fark sadece kullanıldıkları tag’lere göredir.

Block elemanını ;

• <h1>
• <p>
• <div>

gibi taglarda kullanabilirken, inline elemanını kullanırken de sadece gerekli olan aralıkları kapsayan ve satır sonlarını zorlamayan tipteki oluşumlarda kullanılır, bunlar;

• <span>
• <a>

gibi etiketlerde kullanılabilir.

Eğer bir elemanı gizlemek istiyorsak bunun nasıl gizlediğimizin bir önemi yoktur fakat kod içerisinde bir gizleme ya dagösterme işlemi yapacaksak bunlar display ya da inline olarak nerede kullanıldığının önemi vardır.

Bu konuyu ayrıca açmamın sebebi birkaç örnek göstererek boyutlandırma kavramını daha iyi anlamıya sağlamaktır.
CSS boyutlandırma özelliği width ve height değişkenlerine değer atama sonucu oluşur.Hemen bir örnek yapalım;

[css]
img.normal
{
height:auto;
}
img.buyuk
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
[/css]

Arkadaşlar yukarıda gördüğünüz durum, img.normal bölümünde örnekte belirlenen resim kendi boyutlarında
height:auto seçeneği ile belirlenmiştir. Fakat alt bölümde img.buyuk kısmında ise height:120px olarak belirlenmiştir. Bu durumda resmin boyutunu dilediğimizce değiştirmiş olduk.Ha gelin bir de başka bir yazım şekli ile aynı zamanda width değişkenini de girelim;

[css]
img.normal {height:auto;}
img.buyuk {height:50%;}
img.kucuk {height:10%;}
[/css]

Buradaki yazım sistemi de % olarak belirlenen resmin %50 si ve %10′unu gösteren değerler alabilir.

Bu CSS özelliğine bir çok örnek gösterilebilir, fakat ben şimdi sizlere bütün CSS Boyutlandırma özelliklerini tablo halinde göstereyim;

Bütün CSS Boyutlandırma Özellikleri