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. Yorumcu / asdf29 / 28 Mart 2008

    Ben tam kavrayamadımda, tema önizlemesi gibi her tıkladığımız yerde farklı bir görünümle karşılaşma gibi bir şey mi oluyor ?

  2. Yönetici / Heytbecom / 28 Mart 2008

    Olay şöyle olacak örnek veriyorum:
    – Milliyet sitesindeki haber yerleşim düzenini çok beğendim nasıl uygulayabilirim kendi siteme dediğinizde ben o bölümün css ve index sayfa kodlarını yayınlayacağım. (Her temaya uygulanabilecek tarzda) Siz kodları gerekli yerlere ekleyerek sitenizin ana sayfasının görünümünü değiştirebileceksiniz. Şu anda kağıt üzerine çizdiğim 5 farklı şablon tasarımı var. Bu şablonların farklı versiyonlarınıda yayınlayacağım için sayı artmış olacak.

    – Her açılışta farklı bir anasayfa olmayacak. Bildiğin şablon yapısı wordpresse uygulanacak.
    * Neden böyle bir yol izledim diye sorarsan, sürekli sıfırdan tema yapmaktansa ana sayfayı ayrı – yanmenüleri ayrı – header-footer ayrı ayrı tasarlayıp kullanıcının beğendiklerini alıp kendi temasını oluşturmasını sağlamak istiyorum. Bu nedenle şimdilik anasayfa ile başlayıp daha sonra diğer bölümlerede el atacağım…

  3. Yorumcu / çağrı / 08 Nisan 2008

    güzel bir şeye benziyor ben takipteyim kardeşim ayrıca bu paylaşımcı ruhun için de teşekkür ederim zamanımızda az kaldı böyle insanlar herkes anlatmıyor bildiklerini.
    saygımla..

  4. Yorumcu / barış / 24 Nisan 2008

    Bekliyorum, tüm güzelliği ile kullanmak için. Şimdiden teşekkürler

  5. Yorumcu / barış / 01 Mayıs 2008

    Mynet Haber 1,

    Şablonunu bitirmeni ve yayınlamanı bekliyorum tam istediğim gibi bir şablon.. Şimdiden Teşekkür ederim kolay gelsin.

  6. Yönetici / Heytbecom / 01 Mayıs 2008

    Hafta sonu onun üzerinde çalışırım. Kodlar zaten hazır sadece css ile görsellik katmam gerekiyor…

  7. Yorumcu / barış / 02 Mayıs 2008

    evet bekliyorum özellikle dediğim gibi ilk sırada olan mynet haber 1 çok istediğim gibi bir şablon.

    1,2,3,4,5 gibi secenekleri ile resimlerle beraber konudan başlık ve azıcıkta bilgi veriyor, mynetin sitesinede baktım üzerine tıklayınca detaylı olarak açılıyor, çok güzel bir şablon olacağı kesin.

  8. Yorumcu / mutlu yigit / 08 Mayıs 2008

    Öncelikle şablonlar için teşekkür ederim uzun zamandır aradığımı sizin sitenizde buldum. Benim sürekli incelediğim bir tema var wp-magazine theme 1.0. Bu tema ücretli ancak ben temadan çok sanırım javada yapılan manşet heber bölümü var onu çok beğeniyorum. İncelerseniz sevinirim uygulanabilirliği varmı.

  9. Yorumcu / barış / 08 Mayıs 2008

    Yararlı bilgilerin için teşekkür ederim ama, localde bir çok denemelerimi rağmen hatalı oluyor… Mesela sol resim altında yazıdan bir kaç kelimenin dışarı taşması gibi. Ayrıca şu resimleri cağırma konusunda ne yaptıysam olmadı.

  10. Yönetici / Heytbecom / 08 Mayıs 2008

    mutlu yigit,
    http://www.wp-magazine.com/ adresindeki temadan bahsediyorsan yapabilirmiyim diye bakarım. Eğerki hazırlayabilirsem buradan yayınlarım…

    barış,
    1.yol CSSden:

    .sol_kutu{
    	float: left;
    	width: 440px;
    	height:auto;
    	margin: 5px 5px 5px 5px;
    	padding: 0px;
    	text-align: left;
    	border:1px solid #F4F4F4;
    	background:#FFFFFF;
    }
    
    

    bu şekilde yap. height değerini auto değerini gir.

    2.yol ise:

    < ?php the_content_rss('', TRUE, '', 50); ?>
    

    50 değerini azaltmayı dene. Mesela 45 kelime yap…

    * resimlerin çıkmama durumunda ise :
    wp-content/uploads klasörü içersine resimleri koyman gerekiyor. Özel alanlar bölümünden Anahtar: Sol, Deper : resmin adı şeklinde yazarsan resimler gözükecektir.

  11. Yorumcu / barış / 19 Mayıs 2008

    Merhaba,

    Harika oldu, çok güzel oldu ve herkes çok sevdi…
    Nasıl teşekkür etsem bilemiyorum.
    Mutlu kal.

  12. Yorumcu / sanaLonLine / 05 Haziran 2008

    tovid.net/
    tovid.net/video-izle/Polat-Muro-Yalcin-Bulut-Devrimci-ceto-Deli-Husnu.html
    böyLe bir şabLonu uyarLıyabiLirmiyiz wp ye ?

  13. Yönetici / Heytbecom / 06 Haziran 2008

    sanaLonLine
    verdiğiniz adreslerin ilkindeki anasayfa şablonu tabiyki aynısı yapılabilir. Ama 2. verilen link iç sayfa ve ben bu bölümde iç sayfa tasarımı yapmıyorum. (yapılablir diye sorarsanız aynısı hatta daha güzeli yapılır.)

    – Hemen yapabilir misin derseniz Hayır demek zorundayım şu anda yukarıda yapmadığım bölümleri hazırladıktan sonra listeye bu anasayfa şablonunu alabilirim. Diyelim yaptım anasayfa şablonunu ama iç sayfalarında (video gösterimi yapılacak) yapılması gerektiği için komple temayı tasarlamam gerekecek. Bu nedenle ben Anasayfayı hazırladıktan sonra sizin iç sayfalar ve diğer gerekli bileşenleride kendinizin hazırlaması gerekecektir.

    Kısaca nasıl yapılacağını anlatayım:
    – Üst menüde yer alan kayar resimli menü (crousal diye adlandırılıyor) bir js uygulaması şeklinde alıp sayfanıza yerleştirebiliyoruz.
    – Alt bölümde ise tüm yazılar listenemekte.
    * Reyting – izlenme – gönderim tarihi – resim – başlık bilgileri yazdırılack.
    – Tabiyki tüm mesajlar girilirken 1 adet özel alan kullanılırken (videoların resimleri için), Ayarlanabilir özet alanıda her türlü html koda izin verdiği için istediğiniz video kaynağından aldığınız embed yada benzer kodu bu alana yazarak mesajınızı gönderdiğiniz anda işlem bitmiş olacaktır.

    – Özel Alanlar: ana sayfada kullanılırken , özet alan ise tamamen iç sayfa için kullanılacak….

    – Buna benzer hazır wordpress temasıda mevcut ve şu an indirimde:
    Adres: http://quommunication.com/video/
    Ön izleme: http://quommunication.com/video/demo/

  14. Yorumcu / sanaLonLine / 06 Haziran 2008

    Teşekkür Ederim Cevabınız İçin
    tribunvideo.com ben bir temayı editLeyerek bunu eLde etmiştim
    ama single.php de benzer-yazılar eklentisini kullanarak sidebarda benzer videoları thumbnail resimleriyle göstermeyi yapmak istiyorum oda zor gaLiba

  15. neden bir haber sitesi theme si yapmıyorsun? kaliteli ve ucuz bişey olsa parayla bile alacağım.

    özellikler:
    1- değişen haber olmalı (fare üstüne gelince)
    2- RESİM OLARAK ADD MEDİA ‘dan EKLENEN DİREK ALMALI SAFİ TEMADA GÖZÜKSÜN DİYE EKSTRA YÜKLEME İSTEMEMELİ
    3- KÖŞE YAZARLARI OLMALI

    geri kalan yerleri çözülür. bu şablonları yapabildiğine göre bence sen istesen bunu yaparsın..

    teşekkürler

Bir Cevap Yazın

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