26 Mar
2008

– Yeni bir yazı dizisine başlıyorum Kısıtlı olan zamanımda bu bölümü olabildiğince zengin bir içerikle doldurmak istiyorum. Başlıktanda anlaşılacağı gibi temaların en önemli olan yeri açılış sayfaları – ziyaretçileri bu sayfalardaki içerik ve görsellik karşılıyor. Eğer beğenilecek – bakılacak bir yönü yok ise hemen sayfa kapatılıyor. Bu nedenle WordPress sistemine sadık kalarak ne gibi ana sayfalar yapılabileceğini göstermek istiyorum.

– Genel Standart olarak 800X600px boyutlarını alacağım. Sizler css kodlarını istediğiniz şekilde değiştirerek boyutları dğiştirebilirsiniz. Vereceğim şablonlar her siteye – her temaya uygun olacaktır. WordPressin şuanki güncel sürümü 2.3.3 için geçerli olacak ve 2.5’e geçiş yaşanacağı zamanda hangi şablonların wp 2.5 için desteklendiğini tek tek yazacağım.

– Beğendiğiniz şablonları kendi anasayfanıza nasıl uyarlayabilirsiniz?
– Verilen css kodları style.css içersine yerleştirmeli
– şablonun kodlarınıda temanızın içeriğinin yer aldığı bölüme eklemelisiniz.
– Eğer eklemekte zorluk çekiyorsanız Temanızın adını ve adresini yazarak benden yardım isteyebilirsiniz.

Anasayfa Şablonları (index Template for WordPress Theme)
  1. – Suzuki Otomobil AnaSayfası
  2. – Suzuki Motosiklet AnaSayfası
  3. – Mynet Haber 1
  4. – Mynet Haber 2
  5. – Mynet Haber 3
  6. – Mynet Haber 4
  7. – Milliyet Anasayfa
  8. – Superonline Online Sayfası
  9. – Superonline Magazin Sayfası
  10. Auto Show Dergisi İnceleme Yazısı
  11. Auto Show Dergisi Detay Yazısı

NOT: Her ne kadar Anasayfa şablonu olarak tasarlandığını söylesemde bunları kategori sayfaları – özel hazırlanmış şayfa şablonu olarakta kullanabilirsiniz. Her şablonun sonunda Uygunluk: başlığı altında hangi işlemlerde kullanabilceğinizi not düşeceğim.

Suzuki Otomobil AnaSayfası

Kaynak: http://www.suzuki.com.tr/otomobil/index.asp
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Suzuki Motosiklet AnaSayfası

Kaynak: http://www.suzuki.com.tr/motosiklet/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Mynet Haber 1

Kaynak: http://haber.mynet.com/main/
Resim:
WordPress Sürüm: 2.3.3 – 2.5 – 2.5.1
Uygunluk: Anasayfa – Kategori şablonu
Php Kodları: index.php dosyanıza eklemelisiniz.

" width="440px" height="200px" alt="" />
" width="100px" height="75px" alt="" />

devamı »

Css Kodları sytle.css dosyanıza eklemelisiniz.

/*****************************************************************/
.sol{
	float:left;
	width:450px;
	padding:0px;
	margin:0px;
}
.sol_kutu{
	float: left;
	width: 440px;
	height:315px;
	margin: 5px 5px 5px 5px;
	padding: 0px;
	text-align: left;
	border:1px solid #F4F4F4;
	background:#FFFFFF;
}
.sol_kutu:hover{
	float: left;
	width: 440px;
	margin: 5px 5px 5px 5px;
	padding: 0px;
	text-align: left;
	border:1px solid #CCCCCC;
	background: #F8F8F8;
}
.sol_yazi {
	float: left;
	width: 430px;
	margin:0px 5px 0px 5px;
	line-height: 18px;
	color: #444444;
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	position:relative;
}
.sol_yazi img{
	position: relative;
	float:left;
	list-style:none;
}
.sol_yazi h1{
	font-size: 15px;
	font-weight: bold;
	position: relative;
	color: #000000;
}

.sag{
	float:left;
	width:350px;
	padding:0px;
	margin:0px;
}
.sag_kutu{
	float: left;
	width: 340px;
	height: auto;
	margin: 5px 5px 5px 5px;
	padding: 0px;
	text-align: left;
	border:1px solid #F4F4F4;
	background:#FFFFFF;
}
.sag_kutu:hover{
	float: left;
	width: 340px;
	margin: 5px 5px 5px 5px;
	padding: 0px;
	text-align: left;
	border:1px solid #CCCCCC;
	background: #F8F8F8;
}
.sag_yazi {
	float: left;
	width:325px;
	margin:0px 5px 0px 5px;
	line-height: 18px;
	color: #444444;
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	position:relative;
}

.sag_yazi img{
	position: relative;
	float:left;
	list-style:none;
	margin:10px 5px 5px 0px;
}
.sag_yazi h1{
	font-size: 13px;
	font-weight: bold;
	position: relative;
	color: #000000;
}
a:link, a:visited {
	color: #0099FF;
	text-decoration: none;
	font-weight: bold;
}
a:hover, a:active {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}
/**************************************************************/

Kısa Açıklama:
– Yukarıdaki kodlarda eklediğiniz her yazı anasayfada gözükür. Son eklediğiniz yazı sol kutuda büyük resimli şekilde gözükür. Eskiden gönderdiğiniz son 3 yazı ise sağ kutuda görüntülenir.
– Sol kutuda yazınızın 50 kelimesi görüntülenirken, sağ kutucukta 15 kelime görüntülenir.
– Sol kutudaki resmin boyutu: 440X200px, sağ kutudaki resmin boyutu ise 100X75px. Ben bu boyutları otomatikman daha büyük ebatlı resim koyarsanız istenilen boyutlara getirmesi şeklinde ayarladım. Ama belirlenen boyutlarda resimleri koyarsanız daha rahat edersiniz.

– Yazıyı yayınlamadan önce Özel Alanlar bölümüne gelip;
Anahtar: Sol Değer: resmin adı (buyukresim.jpg gibi)
Anahtar: Sag Değer: resmin adı (kucukresim.jpg gibi)

eklemelisiniz. 2 adet özel alanınız yazı ekranında görüntülenmeli. daha sonra anahtarlara atadığınız resimleri uploads klasörünün içersine kopyalamanız yeterli. Artık yazınız yayına hazır. Mesela uploads klasörü içerine manset adlı klasör içersine kopyalamak istediniz ne yapmalısınız?

– Yazıyı yayınlamadan önce Özel Alanlar bölümüne gelip;
Anahtar: Sol Değer: manset/resmin adı (buyukresim.jpg gibi)
Anahtar: Sag Değer: manset/resmin adı (kucukresim.jpg gibi)

*Her iki özel alanı eklememizin nedeni Son eklediğiniz yazıda sadece Sol Anahtarını kullarak buyuk resmi görüntülerken, yeni yazı eklediğinizde eski yazı sağ bölümde görüntüleneceği için Sag Anahtarını kullanarak kucuk resmi görüntüleyecek. Bu sayede yazılar arasında ayrım yapılmış olacak.
– İsteğe bağlı olarak sizler kodların arasına etiket, yorum, yazar, tarih bölümlerinide ekleyebilirsiniz.

Bittiğinde buna benzemeli:

Mynet Haber 2

Kaynak: http://haber.mynet.com/main/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Mynet Haber 3

Kaynak: http://haber.mynet.com/main/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Mynet Haber 4

Kaynak: http://haber.mynet.com/main/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Milliyet Anasayfa

Kaynak: http://milliyet.com.tr/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Superonline Online Sayfası

Kaynak: http://onlife.superonline.com/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Superonline Magazin Sayfası

Kaynak: http://magazin.superonline.com/
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Auto Show Dergisi İnceleme Yazısı

Kaynak: Auto Show Dergisi
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

Auto Show Dergisi Detay Yazısı

Kaynak: Auto Show Dergisi
Resim:
WordPress Sürüm: 2.3.3
Uygunluk:
Php Kodları:

Css Kodları

Kısa Açıklama:

– Beğendiğiniz şablonları varsa ve bunu WordPress temama nasıl uygulayabilirim diye düşünüyorsanız bana bildirebilirsiniz. Eğer yapabileceğim bir Anasayfa Şablonu ise yazı içersine eklerim.

Kullanılabilecek Dökümanların Listesi

– http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
– http://tjkdesign.com/articles/gallery/photo_gallery.asp
– http://stickmanlabs.com/lightwindow/
– http://devkick.com/lab/galleria/
– http://vikjavev.no/highslide/
– http://www.getintothis.com/blog/2006/10/12/image-gallery-using-jquery-interface-reflections/
– http://e2interactive.com/php-scripts/

Yaptığım Çalışmalar:

Adres: Kalem Kurusu Sitesi
Resim:

Yapılan İşlemler:
– Slayt Show eklendi.
– Buna bağlı olarak ana sayfa wordpress loop yeniden düzenlendi. Üst bölümde tek bir kategoriden yazı çekilirken alt bölümde ise o kategori hariç tüm kategorilerin mesajları yayınlandı.
– Temada görülen bazı hatalar kendisine iletildi…

Reklam Alanı

 

Benzer YazılarEtiketler

17 Yorum - WordPress Tema Anasayfa ŞablonlarıYorum Yaz / Geribildirimde bulun

  1. Yönetici / Heytbecom / 07 Haziran 2008

    Bu bölümün amacı kişilerin istediği şekilde temalarında bir yere bağlı kalmadan kendilerine Özel şablonlar tasarlayabilmelerini sağlamaktı. Ben ilgimi çeken tüm şablonları özellikle yapabileceklerimi bu bölüme koyuyorum ve çeşitlilik olmasını istiyorum. Yukarıda gördüğün her şablon aslında bir tema.

    şahin çimi
    * Senin söylediğine gelirsek;
    http://otomot.net/category/wordpress/wp-tema/ adresinden yaptığım çalışmalara ulaşabilirsin. Yava yavaş ilerliyorum öğrendiklerimi uygulaya uygulaya gidiyorum. Henüz herşeyi bilmiyorum eksik olduğum konular mevcut.
    – Sana şöyle söyleyebilirim. Tasarımı hazırlanmış 4 tema, kağıt üzerinde çizimleri tasarlanmış 2 temam var ve bunları en kısa sürede hayata geçirmek istiyorum. (Okulumun bitmesini bekliyorum tabiyki..)
    – Dikkatli bakıldığında sitenin Otomobil sitesi olduğunu görmüşsünüzdür. Bu yönde ağırlığım var ama arka planda wordpress çalışmalarımı yürütüyorum.

  2. Mynet Haber3 Şablonu çok güzel eğer mümkünse kodları üzerinde çalışıp bizimle paylaşır mısınız

şahin çimi için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Reklamlar / Reklam Bilgi

Facebook / Aramıza katıl

Otomot Ağ / Hakkında

 

© 2010 Otomot.NET - Otomobil ve Motosiklet

14 Aralık 2006 tarihinden beri yayındayız. Site Haritası

OtomotWeb Teması Uretgec.com - Tasarım Ofisi