HTML5 derslerini Kod9.com olarak bilinen Webmaster Kod blogunda HTML5 kategorisi içerisinde görebilirsiniz.

Birkaç HTML5 Dersi;

HTML5 Başlangıç

HTML5 Video

HTML5 Müzik

HTML5 Tuval

İlk olarak birazdan size anlatacağım bilgilerin bir kısmını WordPress Codex’in bu sayfasından öğrendim.. Yeteri düzeyde ingilizceniz varsa siz de öğrenebilrisiniz. Fakat şimdi sadece bu yeni post tipini filmlerde nasıl kullanacaksınız size bunu göstereceğim..

Eğer daha önceki yazılarımı da okuduysanız bu tür fonksiyonları wordpress temamıza entegre edebilmek için temanın functions.php dosyasında düzenlemelerimizi yapmamız gerekiyor..

Önceden söyleyeyim, bu tür bir Post Tipini çok farklı türlerde de kullanabilirsiniz. Sadece film sitelerinde değil, aşağıda anlatacağım şeyleri kendinize göre düzenleyip istediğiniz temada kullanabilirsiniz.

Şimdi ben ilk olarak functions.php dosyasını fazla karıştırmamak için kendimize özel bir php dosyası oluşturalım dedim.. Dosyayı oluşturmak için Temanızın içerisine bir klasör oluşturun.. Klasörün ismi film olsun. Klasörün içine de film-ekle.php adında bir php dosyası oluşturalım. Şimdi bu dosyanın içine doldurmadan önce temanın bu dosyası okuması ve bu dosya olmadan tema çalışmasında hata vermesi için functions.php dosyamızda temanın yolunu bildirelim.Functions.php dosyanızın başına ya da sonuna;

<?php
define( tayfuncakir_film, TEMPLATEPATH . '/film/' );

require_once(tayfuncakir_film . 'film-ekle.php');
?>

fonksiyon dosyamızı kaydedip kapatalım. Ve daha sonra oluşturduğumuz film-ekle.php dosyasını açalım.. Kodları parça parça anlatım aşağıda tüm kodları birlikte vereceğim..

İlk olarak WordPress kodlarını kullanarak yeni bir post-type oluşturmamız gerekiyor. Bunun için oluşturacağımız Post-type’in özelliklerini yazacağız;

function post_tipi_film() {
register_post_type('film', array(
	'labels' => array('name' => __('Filmler'), 'singular_label' => __('Film'), 'add_new_item' => __('Film Ekle'), 'edit_item' => __('Film Düzenle')),
	'public' => true,
	'show_ui' => true,
	'_builtin' => false,
	'_edit_link' => 'post.php?post=%d',
	'capability_type' => 'post',
	'hierarchical' => false,
	'rewrite' => array("slug" => "film"),
	'menu_position' => 20,
	'with_front' => true,
	'supports' => array('title', 'editor', 'comments', 'thumbnail', 'author')
));

Bu kodlar sayesinde tıpkı wordpress’te Yazılar, Yazı Ekle seçeneklerinde olduğu gibi Şimdi de Filmler, Film Ekle ya da Film Düzenle seçenekleri mevcut.. Bu ayarlarla aslında film sayfamız oluşmuş durumda fakat şimdi bir de filmler için kategoriler ekleyelim..

WordPress’in taxonamy adında kod bileşenini kullanarak Filmlere kategori taksonomosi yerleştiriyoruz;

register_taxonomy('film_kategori', 'film', array('hierarchical' => true, 'labels' => array('name' => __( 'Film Kategorileri' ), 'singular_label' => __('Film Kategori'), 'add_new_item' => __( 'Yeni Film Kategorisi Ekle' ), 'search_items' => __( 'Film Kategorisi Ara' )), 'rewrite' => array('slug' => 'film-kategorileri')));

Bu kodlar sayesinde Film Ekleme sayfasında filme ekleyebileceğiniz kategoriler mevcut oldu. Tıpkı Yazı kategorileri gibi.. Şimdide Yazılarda bulunan etiketler gibi bir de film etiketleri girelim. Film etiketlerimiz Tür, Yönetmen, Yapımcı gibi olabilir..

register_taxonomy('yonetmen', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Yönetmenler' ), 'singular_label' => __('Yönetmen'), 'add_new_item' => __( 'Yeni Yönetmen Ekle' ), 'search_items' => __( 'Yönetmen Ara' )), 'rewrite' => array('slug' => 'yonetmen')));

register_taxonomy('tur', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Türler' ), 'singular_label' => __('Tür'), 'add_new_item' => __( 'Yeni Tür Ekle' ), 'search_items' => __( 'Tur Ara' )), 'rewrite' => array('slug' => 'tur')));

register_taxonomy('yapimci', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Yapımcılar' ), 'singular_label' => __('Yapımcı'), 'add_new_item' => __( 'Yeni Yapımcı Ekle' ), 'search_items' => __( 'Yapımcı Ara' )), 'rewrite' => array('slug' => 'yapimci')));

register_taxonomy('imdb', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'IMDB' ), 'singular_label' => __('IMDB'), 'add_new_item' => __( 'IMDB Ekle' ), 'search_items' => __( 'IMDB Ara' )), 'rewrite' => array('slug' => 'imdb')));

register_taxonomy('yayin_tarihi', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Yayın Tarihleri' ), 'singular_label' => __('Yayın Tarihi'), 'add_new_item' => __( 'Yeni Yayın Tarihi Ekle' ), 'search_items' => __( 'Yayın Tarihi Ara' )), 'rewrite' => array('slug' => 'yayin-tarihi')));

register_taxonomy('goruntuyonetmeni', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Görüntü Yönetmenleri' ), 'singular_label' => __('Görüntü Yönetmeni'), 'add_new_item' => __( 'Yeni Görüntü Yönetmeni Ekle' ), 'search_items' => __( 'Görüntü Yönetmeni Ara' )), 'rewrite' => array('slug' => 'goruntuyonetmeni')));

register_taxonomy('oyuncular', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Oyuncular' ), 'singular_label' => __('Oyuncu'), 'add_new_item' => __( 'Yeni Oyuncu Ekle' ), 'search_items' => __( 'Oyuncu Ara' )), 'rewrite' => array('slug' => 'oyuncular')));

register_taxonomy('senaryo', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Senaristler' ), 'singular_label' => __('Senarist'), '' => __( 'Yeni Senarist Ekle' ), 'search_items' => __( 'Senarist Ara' )), 'rewrite' => array('slug' => 'senaryo')));

Bunları da ekledikten sonra film-ekle.php’ye bu kodları film-post-tipleri fonksiyonuna eklemesi için aşağıda ki add_action komutunu uyguluyoruz;

add_action('init', 'post_tipi_film');

Admin Sayfasından görüntüler;

Ve dosyanın başına ve sonuna php taglerini ekleyerek dosyayı kaydedip kapatıyoruz.. Dosyamızın son hali şu şekilde olmalı;

<?php
function post_tipi_film() {
register_post_type('film', array(
	'labels' => array('name' => __('Filmler'), 'singular_label' => __('Film'), 'add_new_item' => __('Film Ekle'), 'edit_item' => __('Film Düzenle')),
	'public' => true,
	'show_ui' => true,
	'_builtin' => false,
	'_edit_link' => 'post.php?post=%d',
	'capability_type' => 'post',
	'hierarchical' => false,
	'rewrite' => array("slug" => "film"),
	'menu_position' => 20,
	'with_front' => true,
	'supports' => array('title', 'editor', 'comments', 'thumbnail', 'author')
));

/** Film Kategorileri **/

register_taxonomy('film_kategori', 'film', array('hierarchical' => true, 'labels' => array('name' => __( 'Film Kategorileri' ), 'singular_label' => __('Film Kategori'), 'add_new_item' => __( 'Yeni Film Kategorisi Ekle' ), 'search_items' => __( 'Film Kategorisi Ara' )), 'rewrite' => array('slug' => 'film-kategorileri')));

/** Film Etiketleri **/

register_taxonomy('yonetmen', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Yönetmenler' ), 'singular_label' => __('Yönetmen'), 'add_new_item' => __( 'Yeni Yönetmen Ekle' ), 'search_items' => __( 'Yönetmen Ara' )), 'rewrite' => array('slug' => 'yonetmen')));

register_taxonomy('tur', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Türler' ), 'singular_label' => __('Tür'), 'add_new_item' => __( 'Yeni Tür Ekle' ), 'search_items' => __( 'Tur Ara' )), 'rewrite' => array('slug' => 'tur')));

register_taxonomy('yapimci', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Yapımcılar' ), 'singular_label' => __('Yapımcı'), 'add_new_item' => __( 'Yeni Yapımcı Ekle' ), 'search_items' => __( 'Yapımcı Ara' )), 'rewrite' => array('slug' => 'yapimci')));

register_taxonomy('imdb', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'IMDB' ), 'singular_label' => __('IMDB'), 'add_new_item' => __( 'IMDB Ekle' ), 'search_items' => __( 'IMDB Ara' )), 'rewrite' => array('slug' => 'imdb')));

register_taxonomy('yayin_tarihi', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Yayın Tarihleri' ), 'singular_label' => __('Yayın Tarihi'), 'add_new_item' => __( 'Yeni Yayın Tarihi Ekle' ), 'search_items' => __( 'Yayın Tarihi Ara' )), 'rewrite' => array('slug' => 'yayin-tarihi')));

register_taxonomy('goruntuyonetmeni', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Görüntü Yönetmenleri' ), 'singular_label' => __('Görüntü Yönetmeni'), 'add_new_item' => __( 'Yeni Görüntü Yönetmeni Ekle' ), 'search_items' => __( 'Görüntü Yönetmeni Ara' )), 'rewrite' => array('slug' => 'goruntuyonetmeni')));

register_taxonomy('oyuncular', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Oyuncular' ), 'singular_label' => __('Oyuncu'), 'add_new_item' => __( 'Yeni Oyuncu Ekle' ), 'search_items' => __( 'Oyuncu Ara' )), 'rewrite' => array('slug' => 'oyuncular')));

register_taxonomy('senaryo', 'film', array('hierarchical' => false, 'labels' => array('name' => __( 'Senaristler' ), 'singular_label' => __('Senarist'), '' => __( 'Yeni Senarist Ekle' ), 'search_items' => __( 'Senarist Ara' )), 'rewrite' => array('slug' => 'senaryo')));
}

add_action('init', 'post_tipi_film');

?>

Admin Panelimiz hazır.. Peki bunu nasıl yazdıracağız?

Normalde WordPress Yazılarımız single.php adlı dosya sayesinde görüntülenir.. Fakat bizim ekleyeceklerimiz film olacak.. Yazılar için bir single.php zaten temada var bu yüzden bize film için bir single.php dosyası oluşturalım.. Temanın single.php dosyasının bulunduğu yere single-film.php adında bir php dosyası oluşturalım ve bir de verilerimizi çekebilmek için film-kutu.php adında bir dosya oluşturup, single-film.php dosyasını açalım ve başlayalım kodlamaya;

Bu içerikte film sayfamızla alakadar pe birşey olmayacak, ben her zaman kodlama yaparken kodları parçalamak isterim çünkü bu sayede geri döndüğüm zaman eğer bir hata yaptıysam ya da bir değişiklik yapacaksam bunu bulmak kolay oluyor. bu yüzden single-film.php dosyasına sadece şunları ekleyelim;

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); $parent_post_id = $post->ID; ?>

<?php require_once('film-kutu.php'); ?>

<?php endwhile; endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Burada film-kutu.php dosyasını çekmesi için bir kod girdik.. Şimdi film-kutu.php dosyamızı oluşturalım;

film-kutu.php dosyamız normalde temanın single.php dosyasıyla aynı olmalı çünkü temanın CSS kodlamasını değiştirirsek ortaya kötü bir görünüm çıkar.. Single.php dosyasının içeriğini tamamen kopyalayın ve film-kutu.php dosyasının içerisinde yapıştırın. Daha sonra yapıştırdığınız kodlar arasında

<?php the_content(); ?>

yada sadece ;

the_content(

kodunu aratın.. Bu kodun üstüne ise, Film sayfamız için oluşturacağımız tür, yönetmen vs gibi etiketleri göstermesi için aşağıdaki kodları yapıştırın;

<ul id="film-etiket-listesi">
		<?php echo(get_the_term_list($post->ID, 'yayin_tarihi', '<li><strong>Yayın Tarihi:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'tur', '<li><strong>Tür:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'imdb', '<li><strong>IMDB:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'yonetmen', '<li><strong>Yönetmen:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'yapimci', '<li><strong>Yapımcı:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'goruntuyonetmeni', '<li><strong>Görüntü Yönetmeni:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'senaryo', '<li><strong>Senaryo:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		<?php echo(get_the_term_list($post->ID, 'oyuncular', '<li><strong>Oyuncular:</strong><div id="film-bilgi-sag-15"> ', ', ', '</div></li>')); ?>
		</ul>

Film sayfamızın içeriği artık filme girdiğiniz açıklamadan önce bu etiketlerle görünecektir. Şimdi de temanızın CSS dosyasını açın ve aşağıdaki kodları en alt satıra kopyalayın;

#film-etiket-listesi {
margin: 0;
padding: 0 150px 10px 0;
line-height: 19px;
list-style-image: none;
list-style: none;
list-style-position: outside;
}
#film-etiket-listesi li {
background: none;
padding-left: 0;
}

Ve golümüz;

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;

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

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

Bu yazımda bahsedeğim şey, Codecanyon içerisinde satışa sunulan 15 adet CSS aracıdır.. bunları satın almak için yazı başlıklarına tıklayıp üye olmalısınız. Daha sonra ödeme yaptıktan sonra satın al butonunu kullanarak size bir download adresi açılacaktır buradan indirebilirsiniz..

1. Griddler Pricing Grid I

“ HTML5 /CSS3Stili ile tüm browserlara uyum gösteren bir HTML5/CSS3 Plugini.”

2. CSS3 Buttons

“Birinden farklı ve güzel CSS Butonları, PSD değil CSS!”

3. Droplink

“Envato ve içerisindeki bütün sitelerde bulunan menü butonlarını yapan bir arkadaş bu çalışmasını satışa çıkarmış.”

4. Griddler Pricing Grid II

“(Software as a Service)  HTML5 /CSS3 stili ile yine bir satış scripti.Ayrıca tüm browserlara uygun..”

5. CSS Pagination Pack

“Wordpresste kullandığımız Page navi eklentisini daha güzel gösterebilmek için Sayfaya zıpla adında kullanılabilecek Page navi görselleri..”

6. CSS3 Tabs

“CSS3 Tabs ayarları jQuery ya da herhangi bir javascript kullanmadan oluşturabileceğiniz tab sistemi..”

7. CSS Framework + Form Elements

“Create a blog, corporate website with multiple columns easily without having to remember so many grid classes.”

8. Sleek Borders

“This is a pack of twelve stylish borders for your images. Six styles are included with a gloss variant of each. Full documentation is included. You can also remove the images and use the borders as stylish containers.”

9. Fresh Tooltips

“Precisely designed and coded Fresh Tooltips. Great for any kind of website, very practical. The top one is 100% transparent black, which looks very very cool. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.”

10. Stencil CSS Framework

“Small lightweight CSS framework. Includes base styling (CSS reset & typography), plus plugins to add many other features.”

11. CSS3 Mega Menus

“This is a beautiful drop-down mega menu with five different colors scheme. (Blue, Red, Green, Orange, Purple)”

12. CSS3 Gallery

“CSS3 Gallery is created by purely using CSS – no images. It’s a different sort of web gallery, in which your images display in the screen of a computer LCD.”

13. Simple Admin

“This is a simple CSS admin panel template with horizontal navigation tabs and a search field. This is an ideal template for smaller admin panels or scripts that do not require more feature rich templates.”

14. Fancy 2-Line CSS Buttons

“These 100% CSS buttons are sure to make your site stand out from the crowd. Your visitors will love to click on them too, with 2 lines of information and text driven icons, they’ll know exactly where they are going.”

15. Fresh Forms

“Precisely designed and coded Fresh Forms. Great for any kind of website, very practical. The top one is 100% transparent so you can also place it on texture background. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.”

Kaynak

Javascript 3 Boyutlu Hareketlendirme

Yaratıcılık ve düşünsel kavramı işlevselleştirebilme hareketleri hoşuma gittiği için paylaşmak istedim.

İki kötü yanı mevcut ki İnternet Explorerda çalışmamakta ve 3 boyutlu hareketlendirme biraz yavaşcadır, fakat düşünce süper.

Demoya gitmek için tıklayın..

Arkadaşlar, bu semantik web denilen web 3.0 ya da anlamsal web denilen şeyi aslında öyle büyüttüler ki sanki internet siteleri kalkıpta bizimle iki kadeh rakı içecekmiş gibi hissetmiştim bir an.. Öyle ahım şahım bi özellik olmasa da web girişimcilerinin özelilkle de google’in üstünde durduğu semantic kavramı aslında iyi de birşey.. Bu tamamen web kod yazıcılarına uygun, onların anlayacağı ve uygulayacağı türden bir özellik olarak geldi.. Semantic anlamsal verileri, site içerisindeki kodları Arama motorlarının siteyi anlamalarını sağlayan temiz kodları girebilme sanatıdır dersem eğer, semantic webe belki küfretmiş olurum belki de ulan web 3.0 hakkında değişik bir yazı yazmak için saçmalamış denilmektende kaçamam.. Bu yüzden semantic web’in getirdiği bir özelliktir diyip konuyu bağlıyorum.. Bahsedeceğim konu temiz kodlar kullanarak arama motorlarına bilhassa Google’a web içeriğinizden bahsedin derim.. Seo alt yapısında aslında sadece head etiketlerinde bitmediğini söylemeliyim.. Birkaç makalede h1 , h2, h3 gibi başlıklar koyun gibisinden tüyolar vardı ben bunları toplayıp kendi bilgilerimi de birleştirip uzunca bir makale oluşturayım diyorum ve bir türlü başyalayamadığım örneklerime başlıyorum.ilk olarak;

1. Gereksiz <div> etiketlerini kaldırın!

Bir çok web sitesinde görüyorum ki , <div> etiketininin içerisinde <form> ya da <li> , <ul> gibi etiketler kullanılmakta.Bu kullanım şekli kodlarınızı botlardan gizlemekten başka bir işe yaramaz.. Aşağıdaki resimde göstereeğim tipi uygularsanız, o içeriğin neyi anlattığı daha açıklayıcı olacaktır;

Örnek 1;

Aşağıdaki örnekte <div> etiketini kullanmadan da form oluşturabileceğiniz bir tutam kod  var..

Örnek 2;

Bazen, <div> etiketinin içerisine başka bir <div> etiketi daha yerleştiririz. Bunu yapmak yerine her bir <div> kalıbını tek tek nitelendirirsek hem daha temiz kodlara hem de kolay anlaşılabilir, bir kaynağa sahip oluruz.

2.Anlamlı Biçimlendirme Kullanın

En başta dediğim gibi bir yerde (şu an hatırlamıyorum) h1, h2, h3 gibi etiketleri kullanın diyen bir arkadaşımız vardı.. Onun da dediği gibi başlık etiketleri indexleme açısından çok önemlidir ve bir nevi başka sayfalar gibi algılanırlar.. Google sizin bir sayfanızı sadece içeriğindeki meta etiketleriyle algılamaz. Kullanıcının arama yaptığı kelimeye göre içeriğinizden kelimeleri açıklama grubunda gösterebilir. Bu açıklama gruplarında başlık etiketleri ön plandadır. Eğer anlatmak istediğiniz konuyu h1, h2, h3 gibi başlık etiketleri kullanarak yaparsanız tercih edilme olasılığınız yüklecektir.

Örnek;

3. <div> Etiketini kullanmamaya özen gösterin!

Arkadaşlar, özellikle html diline yeni başlamış ve div etiketinin yararlarını yeni yeni öğrenmiş webmasterların kaybettiği nokta burası oluyor işte.. Tamam <div> etiketi çok yararlıdır, her zaman kullanabiliriz, fakat yukarıda da dediğim gibi, eğer bir paragraf, kutu ya da bir form oluşturacaksanız bunu bir katman içerisinde göstermek zorunda değlisiniz.Aşağıdaki örneklere bakarsanız ne demek istediğimi daha iyi anlayacaksınız.

Örnek 1:

breadcrumb navigasyonunu kullanırken, <div> etiketinin hiçbir işlevi olmaz. Bunun yerine p kullanarak paragraf niteliğini oluşturabilirsiniz.

Örnek 2:

Aşağıda ki örnek de hem gereksiz <div> etiketini kullanmamaya hem de CSS yi daha ufak bir hale getirmeye dairdir.

4. Listeleme Şeklini Kullanın

Yukarıda bahsettiğim gibi, h etiketinin yanında listeleme şekli de yine bizim açımızdan yararlı bir kod kullanımıdır.Aşağıda gösterdiğim biçimde bir listeleme oluşturursanız, kapsama alanınız genişler her yerde çekersiniz =)

Örnek;

5. <div> Etiketini Kapatıyoruz

CMS sistemlerinin temalarını kullanırken belki aklınıza gelmiştir, ulan adam ne diye <!-- /yorumlar -->, <!-- /content -->, <!-- /sidebar --> kapanış mesajları veriyor ki.

Bu sistemin amacı kodlama yaparken, size yardımcı olur arkadaşlar.. Bu şekilde açıklamaların hiç bir zararı yoktur ve size yardımcı olacaktır. Kod satırında eğer özellikle not defteri gibi tek renkte yazılar gösteren bir program kullanıyorsanız, neyi ne zaman kapattığınızı görür hata yapma riskiniz azalır ve de zamandan kazanırsınız.

Örnek 1:

Sonuç

• Minimum <div> etiketi kullanın.
• <div> etiketini öncelikle header, content, sidebar, ve  footer gibi durumlarda kullanın.
• İçerik semantic HTML kodlarından oluşmalı, gereksiz <div> leri silin.
• Yardımcı olabilmesi için etiket kapandı mesajlarını girin.
• Listeleme kullanın.

Techime.com sitesi bir blogdan ziyade daha çok bir haber alıcısı. Tasarım ve ilham kategorileri diğer bloglardaki en popüler linkleri ve en taze haberleri alarak size zaman kazandırıyor. İlginç ve iyi bir proje.

Techime / Webdesign

2. Noupe

Noupe blogu geçtiğimiz günlerde SmashingMagazine tarafından satın alındı. Bu sebeple sitede önümüzdeki günlerde daha da kaliteli yazıları görmek üzere olduğumuzu söylemek yerinde olur. Noupe, tasarımcılar ve web geliştiricileri için CSS, AJAX, JavaScript, web tasarımı, grafik tasarımı, tipografi, reklamcılık ve daha diğer pek çok kategoride yazılar site üzerinde yer alıyor.

Noupe

3. Six Revisions

Six Revisions modern, standartlarla uyumlu web tasarımcıları ve web geliştiricileri için kullanışlı ve pratik bilgileri sunan bir weblog. Her web profesyonelinin beğeneceği düzeyde kaliteli ve kayda değer ipuçlarını, dersleri ve kaynakları yayımlıyor. İlham kaynağı olacak güzel tasarım bloglarından jQuery ve MooTools gibi JavaScript çatılarına kadar pek çok alanda kaliteli içeriğe site üzerinden ulaşabilirsiniz.

Six Revisions

[ad]

4. Smashing Magazine

Herhangi bir açıklamaya gerek görmeyen, bize göre Dünya’nın en kaliteli tasarım blogu.

Smashing Magazine

5. Design reviver

Kullanışlı dersler, ilham kaynakları ve web tasarımı ile ilgili konuları kapsayan makaleleri içeriyor.

Designreviver

6. Abduzeedo

Abduzeedo tümüyle tasarıma yönelik bir blog olup Photoshop, Illustrator ve diğer tasarım araçlarına yönelik derslere ve ilham kaynaklarına yer veriyor. Yetenekli tasarımcı Fabio Sasso tarafından yönetiliyor.

Abduzeedo

7. Webdesigner depot

Web tasarımcılarına yönelik web tasarım kaynaklarını içeren bu blog ayrıca ücretsiz simgeler, photoshop fırçaları ve web ve grafik tasarımcılarına yönelik çeşitli araçlara yer veriyor.

Webdesigner Depot

8. Web Designer Wall

Web Designer Wall bir tasarım blogu olup Nick La tarafından tasarlanan ve yönetilen bir site. Konular web tasarımına, derslere ve modern tasarım trendlerine odaklanıyor.

Webdesignerwall

9. Speckyboy

Tasarım ve teknolojideki ilham kaynaklarına odaklanan bu blog üzerinde Photoshop ve Illustrator’a yönelik harika rehberler mevcut.

Speckyboy

10. NetTuts

Nettuts+ web geliştiricilerine ve tasarımcılarına yönelik bir içeriğe sahip ve web tasarımı ve geliştirimi için aranan nitelikleri iyileştirmenizi sağlayacak rehberler ve makaleler içeriyor. Site üzerinde HTML, CSS, JavaScript, İçerik Yönetim Sistemleri (CMS), PHP ve Ruby on Rails’e dair içerik mevcut.

nettuts

11. Design Mag

Web tasarımcılarına ve geliştiricilerine yönelik komünite tabanlı bir site. Site içeriği popüler bir blodan, kullanıcıların gönderdikleri haberler bölümünden, tasarım galerisinden ve tasarımcılara yönelik iş ilanları bölümünden oluşuyor.

DesignMag

12. CSS Tricks

CSS ile ilgil kod parçacıkları, videolar ve makalelerden oluşan güzel bir kolleksiyon.

CSS Tricks

13. Web Resources Depot

WebResourcesDepot sitesinin ziyaretçilerinin %99′unu web geliştiricileri, web tasarımcıları & grafik tasarımcıları ya da web tasarımı ve geliştirimi ile şu ya da bu şekilde ilgilenen kişilerden oluşuyor.

WebResourcesDepot

14. Spoon Graphics

Chris Spooner tarafından işletilen ve web tasarımcılarına yönelik makalelere ve kaynaklara yer veren bir blog.

Spoon Graphics

15. We function

Tasarımcılara yönelik mükemmel bir site. Mükemmel kalitede ücretsiz kaynaklara sahip.

Spoon Graphics

16. Just Creative Design

Sydney, Avustralya merkezli bir grafik ve logo tasarımcısı olan Jacob Cass’a ait bir blog. Özellikle logo tasarımına yönelik makaleleri dikkat çekici.

Just Creative Design

17. You The Designer

Yaratıcı profesyonellere yönelik ipuçları, ilham kaynakları, dersler ve kaynaklar içeren bir blog.

You The Designer

18. Gomediazine

Ücretsiz dersler ve işe yarar tavsiyeleri içeren mükemmel bir web sitesi.

GooMediazine

19. David Airey

Fiyatlama, tasarım işlemleri, müşteri ilişkileri gibi alanlarda kaliteli makaleler içeriyor.

David Airey

20. Design You Trust

Design You Trust sitesi yeni tasarım trendleri, haberler ve etkinliklere yönelik makaleler içeren günlük bir e-dergi.

Design You Trust

21. Veerle’nin blogu

Web tasarımı, grafik tasarımı, HTML/CSS ve daha pek çok konuda makaleler içeren kullanışlı bir blog.

Verlee’s Blog

22. Bittbox

Aralarında motiflerin, dokuların, fırçaların ve vektör grafiklerin yer aldığı kaliteli bir kolleksiyon.

Bittbox

23. A list apart

Web tasarımına yönelik kaliteli ve detaylı makaleler içeren bir blog.

A List Apart

24. The Design Inspiration

The Design Inspiration en iyi logoları, illüstrasyonları, web sitelerini, fotoğrafları ve motifleri topluyor.

The Design Inspiration

25. Stylized web

Ross Johnson tarafından işletilen ve web trendlerine yönelik bir blog.

Stylized Web

26. Inspired Magazine

Inspired Magazine blogu üzerinde grafik ve web tasarımına yönelik ilham kaynakları içeren pek çok makale mevcut.

Inspired Magazine

27. Vandelay Tasarım Blogu

Vandelay Tasarım Stüdyosu’na ait ve düzenli olarak güncellenen makalelere, kaynaklara ve web ve grafik tasarımcılarına yönelik ilham kaynaklarını içeren bir blog.

Vandelay Design

28. Creative Nerds

Tasarımcılara yönelik ilham kaynakları, ücretsiz kaynaklar ve dersler içeriyor.

Creative Nerds

29. Inspiredology

Bu blog üzerinde web tasarımına yönelik en güncel trendler yer alıyor.

Inspiredology

30. Dzine blog

Aralık 2007′de kurulmuş olan Dzine blog’u üzerinde tasarıma dair pek çok şey bulabilirsiniz. Logo, grafik tasarımı ve web tasarımına yönelik kaliteli içerik mevcut.

Dzine Blog

31. Instant Shift

Gerçekten kaliteli ve hızla büyüyen bir blog. Site üzerinde dev kolleksiyonlara ulaşılabilir.

InstantShift

32. ColorBurned

Colorburned web’in en iyi tasarım haberlerini, kaynaklarını ve rehberlerini bünyesinde barındırıyor. Bu web sitesi üzerinde ücretsiz vektörlere, dokulara, motiflere, Illustrator ve Photoshop fırçalarına ulaşabilir, bunun yanısıra tasarım endüstrisinin en büyük oyuncuları ile yapılmış röportajları okuyabilirsiniz.

ColorBurned

33. Tutorial9

Tutorial9 sitesi özellikle tasarım alanında eğitim veren kişilere ve diğer uzmanlara yönelik bir site.

Tutorial9

34. SmashingApps

SmashingApps sitesi web tasarımcılarına ve geliştiricilerine yönelik hazırlanmış, açık kaynaklı, ücretsiz ve kullanışlı çevrimiçi kaynakları listeliyor.

SmashingApps

35. Web Design Ledger

Web tasarımcılarına yönelik makaleler, dersler ve diğer yayımları içeriyor.

Web Design Ledger

36. Webitect

Webitect.net sitesi ipuçlarını, dersleri ve makaleleri içermekle birlikte sitenin tasarım kategorisinde ilham alınacak bazı mükemmel kaynaklar mevcut.

Webitect

37. Sharebrain

Sharebrain sitesinde bazı kaliteli makalelere, röportajlara ve derslere ulaşmak mümkün.

ShareBrain

38. Cats Who Code

Cats Who Code sitesi web kodlamasına yönelik çalışan kişiler için, Programlama dillerine, Bloglama ipuçlarına ve web tasarımı ile WordPress’e yönelik içeriğe sahip.

Cats Who Code

39. DezinerFolio

Dezinerfolio sitesi web tasarımının ve geliştiriminin yaratıcı alanlarına kendini adamış bir web sitesi olup, tekrar tekrar kullanılabilecek tasarım parçalarına ve ücretsiz kaynaklara yer veriyor.

Deziner Folio

40. Spoonfed Design

Spoonfed Design, tasarımcılara ve geliştiricilere yönelik kaynaklara, derslere ve ipuçlarına ve ilham kaynaklarına yer veren bir site.

Spoonfed Design

41. Usability Post

Usability Post tasarım hakkında bir blogdur. Tasarım bir şeyin nasıl göründüğü ile ilgili değil, onun nasıl çalıştığı ile ilgilidir felsefesini benimseyen site, bir şeyin kullanılabilir olması sayesinde insanların ürününüzden neler beklediğini anlamanıza ve bu sayede onu daha sade ve kullanılabilir kılmanızın mümkün olduğuna inanıyor ve buna yönelik kaynakları da site üzerinden paylaşıyor.

Usability Post

42. WP Recipes

WordPress ile ilgili gündelik tarifler.

WP Recipes

43. 10Steps

Ağustos 2008′de yayın hayatına başlayan bu blog, Adobe Photoshop deneyimlerini ve diğer ilgi çekici makaleleri paylaşan bir site.

10steps

44. ProBlogDesign

Bu web sitesi daha iyi görünen bir blogu nasıl oluşturacağınızı gösteriyor.

Pro Blog Design

45. Dzinepress

Grafik ve web tasarımına, programlamaya, ilham kaynaklarına, tasarım vitrinlerine, Photoshop’a, derslere ve çok daha fazlasına dair pek çok şey okuyabileceğiniz güzel bir blog.

Dzine Press

46. Typesett magazine

Bu blog daha henüz 6 aylık ancak yine de uzun vadede güzel işler çıkaracak gibi görünüyor.

Typesett Magazine

47. My ink blog

Andrew Houle tarafından geliştirilen ve yönetilen bu blog, web ve grafik tasarımcıları için bir başucu kaynağı olmayı hedefliyor.

My Ink Blog

48. D-lists

Web tasarımına yönelik detaylı listeler içeren bu site üzerinde haftalık web ilham kaynaklarına yönelik içerik mevcut. Site üzerinde ayrıca incelemeler ve röportajlar mevcut.

D-lists

49. Spyrestudios

Jon Phillips tarafından geliştirilen gerçekten güzel bir blog.

Spyre Studios

50. Designer daily

Gündelik olarak haberlere, ilham kaynaklarına ve derslere yer veren bir blog.

Designer Daily

51. 2experts design

2experts blogu okurlarına grafik tasarımı, logo tasarımı ve web tasarımı hakkında çeşitli kaynakları sunmayı hedefliyor.

2ExpertsDesign

52. Reencoded

Web tasarım ipuçları, kılavuzlar ve alakalı kaynaklar.

Reencoded

53. Colour lovers

Renklere yönelik bir tasarım blogu.

Colour Lovers

54. Naldz Graphics

Bu blog üzerinde mükemmek Photoshop dersleri ve fırçaları mevcut.

Naldz Graphics

55. Line25

Line25 üzerinde iyi tasarım dersleri ve diğer kaliteli web sitelerinin incelemeleri mevcut.

Line25

56. WebDesignBooth

WebDesignBooth sitesi üzerinde web tasarımı, web geliştirimi, JavaScript, CSS/XHTML, Arama Motoru Optimizasyonu, reklamcılık, duvar kağıtları, Photoshop kaynakları ve diğer benzeri kaynaklar mevcut.

Web Design Booth

57. DesiznTech

Web tasarımcıları, geliştiricileri, teknoloji ile yakından ilgili ve diğer tasarım ile ilgilenen herkese yönelik bir blog.

DesiznTech

58. Janko At Warp Speed

Çözüm mimarı, geliştirici, tasarımcı ve sanatçı Janko Jovanovic tarafından yönetilen bu blog üzerinden iyi görünümlü ve işlevsel web siteleri olşturmanıza yardımcı ipuçlarına yer veriliyor.

Janko at Warp Speed

59. Think Design

ThinkDesign grafik tasarımcılarına yönelik bir blog olup ücretsiz WordPress temaları, kaynaklar ve diğer ücretsiz web tasarım elementlerine sahip. Ücretsiz kaynaklar arasında yüksek çözünürlüğe sahip Photoshop fırçaları, vektörler ve dokular yer alıyor.

Think Design

60. DesignShard

Tasarım ipuçlarından Photoshop fırçaları ve dokuları gibi ücretsiz web tasarım elementlerine kadar pek çok alanda içeriğe sahip kaliteli bir blog.

Design Shard

61. Webdesigndev

WebDesignDev (WDD) 2006 yılının yaz aylarında açılan, web tasarımcıları için bir kılavuz sitesi.

WebDesignDev

62. Kikolani

Kikolani bloglamanın teknik açıları ve sosyal ağ ipuçları, fotografi ve şiirin güzelliği ve bunun yazarlara ve okurlara olan faydalarına kendini adamış bir blog.

Kikolani

63. Exxcorpio Blog

Luis Lopez’in kişisel blogu olan bu site üzerinde grafik ve animasyon oluşturmaya dair kılavuzlara, iş ve tasarım dünyasına yönelik ipuçlarına ulaşabilir, bu konudaki haberleri takip edebilirsiniz.

Kaynak

Not Yalnızca içerik yer tutucularının içindeki içeriğin değil, bir ana sayfadaki içeriğin tamamı üzerinde değişiklik yapabilirsiniz. Bir ana sayfada yapılan değişikliklerin tümü o ana sayfaya eklenen içerik sayfalarının tümüne uygulanır.

İçerik yer tutucusu değişikliklerini sitenin tamamına uygulama

Bir ana sayfada değişiklik yaptığınız zaman değişiklikleriniz o ana sayfaya eklenen sayfaların tümüne uygulanır. Aşağıdaki örnekte YerTutucuSiteAdı içerik yer tutucusunu seçerek ve ardından varsayılan içeriği özel içerikle değiştirerek ana sayfadaki site adı metnini değiştiriyorsunuz. Sayfayı kaydettiğinizde değişiklikler o ana sayfaya eklenen sayfaların tümünde görünür.

1. Default.master sayfasını açmak için Klasör Listesi‘nde _catalogs, ana sayfa ve default.master öğelerini çift tıklatın.
2. Ana Sayfa araç çubuğunu açmak için Görünüm menüsünde Araç Çubukları‘nın üzerine gelin ve Ana Sayfa‘yı tıklatın.
3. Değiştirmek istediğiniz içerik yer tutucusunu bulmak için Ana Sayfa araç çubuğunu kullanın.Örneği uygulamak için Ana Sayfa araç çubuğunda oku tıklatın ve ardından listeden YerTutucuSiteAdı öğesini tıklatın.
4. Proje özelliğini seçmek için Takım Sitesi metnini tıklatın.
   Tasarım görünümünde seçili YerTutucuSiteAdı içerik yer tutucusunun içinde proje özelliği
5. Siteniz için yeni bir ad girin ve ardından Dosya menüsünde Kaydet‘i tıklatarak değişikliklerinizi kaydedin.Değişiklikleri kaydettiğiniz zaman site tanımından bir sayfanın özelleşeceğini bildiren bir ileti görünür. Evet‘i tıklatın. Not Ana sayfada yaptığınız değişikliklerden hoşnut olmazsanız, istediğiniz zaman site tanımına geri döndürebilirsiniz. Daha fazla bilgi için, Özelleştirilmiş sayfayı site tanımına geri döndürme başlıklı makaleye bakın.

Değişiklikler, o ana sayfaya ekli sayfaların tümüne uygulanır.

Not İçerik sayfası zaten ana sayfa içeriğini geçersiz kılıyorsa değişiklikler içerik sayfasına uygulanmaz.

İçerik yer tutucu değişikliklerini yalnızca tek bir içerik sayfasına uygulama

Tek bir içerik sayfasında değişiklik yaptığınız zaman değişiklikler yalnızca o sayfaya uygulanır. Bir içerik sayfasındaki içerik yer tutucusuna özel içerik eklediğinizde o sayfa için içerik denetimi oluşturarak ana sayfanın o içerik yer tutucusu için sağladığı varsayılan içeriği geçersiz kılarsınız. Aşağıdaki örnekte YerTutucuSiteAdı içerik yer tutucusunu seçerek ve ardından içeriği özel metinle değiştirerek varsayılan giriş sayfasındaki site adı metnini değiştiriyorsunuz. Sayfayı kaydettiğinizde değişiklikler yalnızca Default.aspx üzerinde görünür.

1. Klasör Listesi‘nde default.aspx öğesini çift tıklatın.
2. Takım Sitesi metnini tıklatın ve ardından içerik yer tutucusunun sağ üst köşesinde görünen oku tıklatın.Sekmenin üzerinde (Ana) sözcüğünü göreceksiniz. Bu, içerik bölgesinin ana sayfadan içerik görüntülediği anlamına gelir. Bu bölge düzenlenemez.
3. Özel İçerik Oluştur seçeneğini tıklatın.Sekmenin üzerinde (Özel) sözcüğünü göreceksiniz. Bu, bu bölgedeki özel içeriğin ana sayfadaki içeriği geçersiz kıldığı anlamına gelir. Bu bölge artık düzenlenebilir.
4. Proje özelliğini seçmek için Takım Sitesi metnini tıklatın.
   Tasarım görünümünde seçili YerTutucuSiteAdı içerik yer tutucusunun içinde proje özelliği
5. Giriş sayfanız için yeni bir site adı girin ve ardından Dosya menüsünde Kaydet‘i tıklatarak değişikliklerinizi kaydedin.Değişiklikleri kaydettiğiniz zaman site tanımından bir sayfanın özelleşeceğini bildiren bir ileti görünür. Evet‘i tıklatın. Not Ana sayfada yaptığınız değişikliklerden hoşnut olmazsanız, istediğiniz zaman site tanımına geri döndürebilirsiniz. Daha fazla bilgi için, Özelleştirilmiş sayfayı site tanımına geri döndürme başlıklı makaleye bakın.

Değişiklikler yalnızca Default.aspx sayfasına uygulanır.

Ana sayfadan varsayılan içeriğe dönmek için Takım Sitesi metnini, denetimin sağ üst köşesinde görünen oku ve ardından Ana Sayfa İçeriğini Varsayılan Olarak Ata tıklatın.

Ana sayfa içeriğini varsayılana döndürdüğünüz zaman bu bölgedeki her şeyin sayfadan kaldırılacağını bildiren bir ileti görünür. Bu bölgedeki özel içeriğin kaybolacak olmasına karşın ana sayfa içeriğine dönmek istiyorsanız Evet‘i tıklatın.

Dosya menüsünde Kaydet‘i tıklatarak değişikliklerinizi kaydedin.

Bir içerik yer tutucusunu bulma

İçerik yer tutucuları yalnızca ana sayfalarda görünür. İçerik yer tutucularını bir Windows SharePoint Services 3.0 sitesinde görüntülemek için Boş Kapsayıcılar ve Görünür Kenarlıklar görsel yardımları etkin olmalıdır. Görünüm menüsünde Görsel Yardımlar‘ın üzerine gelin ve ardından Boş Kapsayıcılar‘ı ve Görünür Kenarlıklar‘ı tıklatın. Alt menüde Göster öğesinin seçili olduğundan emin olun.

Boş Kapsayıcılar ve Görünür Kenarlıklar düğmeleri etkinleştirildiklerinde burada gösterildiği gibi turuncuyla vurgulanırlar.

Ana Sayfa araç çubuğunu kullanarak Tasarım görünümündeki içerik yer tutucularını kolaylıkla bulabilirsiniz.

1. Ana Sayfa araç çubuğunu açmak için Görünüm menüsünde Araç Çubukları‘nın üzerine gelin ve Ana Sayfa‘yı tıklatın.
2. Bir içerik yer tutucu denetimini seçmek için oku tıklatın ve ardından bulmak istediğiniz içerik yer tutucu denetimini tıklatın.

Aşağıdaki resimde, Ana Sayfa araç çubuğunda YerTutucuBaşlıkKırıntısı seçilidir.

Tasarım görünümünde seçildiğinde içerik yer tutucusu aşağıdaki resimde olduğu gibi görünür. Sekmede yer tutucu kimliği gösterilmektedir.

Ana Sayfa araç çubuğunu kullanarak bir içerik yer tutucusu seçtiğinizde, içerik yer tutucusu Hızlı Etiket Seçici‘de de seçilir.

 İpucu   Hızlı Etiket Seçici görünmüyorsa, Görünüm menüsünde Hızlı Etiket Seçici‘yi tıklatın.

Tasarım görünümünde veya Kod görünümünde Ana Sayfa araç çubuğunu kullanabilirsiniz.

Bir Windows SharePoint Services 3.0 sitesindeki Default.master sayfasında varsayılan içerik yer tutucuları

Varsayılan olarak Windows SharePoint Services 3.0 içerik sayfaları aşağıdaki tabloda listelenen içerik yer tutucularını kullanır. Bu tabloda, içerik yer tutucuları tanımlanır ve yer tutucuların her birinin sayfada neyi temsil ettiği açıklanır.

Default.master sayfasında yer alan varsayılan içerik yer tutucuların çoğu Windows SharePoint Services 3.0 uygulamasının birlikte çalışma özellikleri (SharePoint listeleri ve kitaplıkları gibi) için gereklidir ve bu nedenle silinmemelidirler.

Burada listelenen varsayılan içerik yer tutucularının görsel bir önizlemesi için önceki bölümde açıklandığı şekilde Ana Sayfa araç çubuğunu kullanın.