26.03 | Wordpress Tema Anasayfa Şablonları

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

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.

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

Kaynak: http://www.suzuki.com.tr/motosiklet/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="sol">
<?php query_posts('showposts=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="sol_kutu">
<img src="<?php echo get_option('home'); ?>/wp-content/uploads/<?php $values = get_post_custom_values("Sol"); echo $values[0]; ?>" width="440px" height="200px" alt="" />
<div class="sol_yazi">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_content_rss('', TRUE, '', 50); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">devamı &raquo;</a></p>
</div><!--sol_yazi bitti -->
</div><!--sol_kutu bitti -->
<?php endwhile; endif; ?>
</div><!--sol bitti -->
<div class="sag">
<?php query_posts('showposts=3&offset=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="sag_kutu">
<div class="sag_yazi"><img src="<?php echo get_option('home'); ?>/wp-content/uploads/<?php $values = get_post_custom_values("Sag"); echo $values[0]; ?>" width="100px" height="75px" alt="" />
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_content_rss('', TRUE, '', 15); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">devamı &raquo;</a></p>
</div><!--sag_yazi bitti -->
</div><!--sag_kutu bitti -->
<?php endwhile; endif; ?>
</div><!--sag bitti -->

Css Kodları sytle.css dosyanıza eklemelisiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

/*****************************************************************/
.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:

Kaynak: http://haber.mynet.com/main/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

Kaynak: http://haber.mynet.com/main/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

Kaynak: http://haber.mynet.com/main/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

Kaynak: http://milliyet.com.tr/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

Kaynak: http://onlife.superonline.com/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

Kaynak: http://magazin.superonline.com/
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

Kaynak: Auto Show Dergisi
Resim:
Wordpress Sürüm: 2.3.3
Uygunluk:
Php Kodları:
-
Css Kodları
-
Kısa Açıklama:
-

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.

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

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…