şeklinde index.php dosyanıza ilave edebilirsiniz.

WordPress Manşet 1

Tıkla ve İndir

WordPress Manşet 2

Tıkla ve İndir

WordPress Manşet 3

Tıkla ve İndir

WordPress Manşet 4

Tıkla ve İndir

WordPress Manşet 5

Tıkla ve İndir

WordPress Manşet 6

Tıkla ve İndir

WordPress Manşet 7

Tıkla ve İndir

WordPress Manşet 8

Tıkla ve İndir

WordPress Manşet 9

Tıkla ve İndir

WordPress Manşet 10

Tıkla ve İndir

WordPress Manşet 11

Tıkla ve İndir

2.9.x sürümünden sonra dikkatinizi çeken bir özellik vardır “Admin” panelinden yazdığımız yazılara thumbnail  (küçük resim) ekleme özelliği fakat her temada gözükmeyebilir. Bu yüzden yapmamız gereken temamıza bunu ekleyebilmek ve kullanıcıların bu özelliği kullanabilmesini sağlamaktır.

Sadece yazılarda thumbnail özelliğinin olmasını isterseniz temanızın functions.php dosyasına aşağıdaki kodu ekleyiniz.

add_theme_support( 'post-thumbnails' );

Eğer temanızda hem yazılarda hem de sayfalarda thumbnail özelliğinin gözükmesini dilerseniz aşağıdaki şekilde kodları functions.php dosyasına ilave ediniz.

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

ve ya

1
2

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Yazılar için ekler
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Sayfalar için ekler

Yukarıdaki bahsettiklerimiz ile yazı veya sayfa iletilerimize thumbnail ekleme olanağı verdik.

Bir sonraki adımda küçük resimleri boyutlandırmamız gerekecek. Burada iki seçeneğiniz var : box-resizing (kutu boyutlandırma) ve hard-cropping (sabit kırpma). Kutuğu yeniden boyutlandırmada (box-resizing) siz genişlik ve yükseklik parametreleri belirttiğiniz kutunun içine oturana kadar resim orantılı bir şekilde küçülür (bozulmadan). Örneğin 100×50 boyutlarındaki resim 50×50 kutu içerisinde 50×25 olarak yeniden boyutlanabilecektir. Buradaki fayda tüm görüntüyü gösterir. Dezavantajı üretilen görüntü her zaman aynı boyutta değildir. Bazen genişlik sınırlı olacak, ve bazen de yükseklik sınırlı olacak. Belirli bir genişlik görüntüleri sınırlamak isterseniz, fakat uzunluğu dikkate almazsanız, sabit bir genişlik belirlersiniz ve uzunluğa çok büyük bir değer verebilirsiniz.
İlgili kodun kullanım şekli aşağıdaki gibidir.

set_post_thumbnail_size( 50, 50 ); // 50 pixels genişlik  50 pixels uzunluk, kutu boyutlandırma modu

İkinci seçeneğimiz sabit kırpma. Bu özelliğimizin en büyük faydası orantı bozulmadan otomatik olarak resimin boyutlanmasıdır burada yukarıdaki anlattığımız gibi genişliğin taşması yüksekliğin taşması, eksik çıkması gibi sorunlarla karşılaşmayız resim oranını koruyarak belli bir kalıba girer ve küçülür. Dezavantajı ise büyük resimler küçültüldüğünde, en boy oranının orantısını koruyarak küçüldüğü için küçük resimler çok bulanık ve anlaşılmaz çıkabilir.
Kullanımı

set_post_thumbnail_size( 50, 50, true ); // 50 pixels genişlik 50 pixels uzunluk, Sabit kırpma modu

Şimdi sıra geldi temada thumbnail nerede kullanmak isterseniz oraya aşağıdaki kodu yerleştirmek kısmına.

<?php the_post_thumbnail( 'thumbnail' ); ?>

Klasik bir index.php içerisine yukarıdaki kodu atıp test edelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
		<?php the_post_thumbnail( 'thumbnail' ); ?>
 
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
		<div class="entry-summary">
			<?the_excerpt(); ?>
		</div>
 
	</div>
 
<?php endwhile; endif; ?>

Yukarıdaki örneğimizde yazıya ait küçük resimi ana sayfada gösterdik.

Thumbnail yerine medium (orta boy), large(büyük boy), full (tamamı) resimlerde ilave edebilirsiniz. İlgili kodları aşağıdan takip ediniz.
Orta boy resimler için

<?php the_post_thumbnail( 'medium' ); ?>

Büyük boy resimler için

<?php the_post_thumbnail('large'); ?>

Resimin tamamı için

<?php the_post_thumbnail( 'full' ); ?>

Kodlarını kullanabilirsiniz.

Burada resim için kendimiz çözünürlükte belirleyebiliriz.

1

<?php the_post_thumbnail( array(100,100) ); ?>//100 genişlik 100 uzunluk atadık

Şimdi sıra geldi resimlere alt, title, align gibi tanımlamalar vermeye bunun için array komutunu kullanacağız birkaç tane örnek verilmiştir.
İlk örneğimizde thumbnailimiz 200×200 pixel boyutunda ve resmimiz sola dayalı olsun

<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

İkinci örneğimizde resim boyutumuz medium, sola dayalı ve alt tanımı yapalım

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>

Bunlara Resim title girmek isterseniz

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>

İşin özeti sıralama aşağıdaki gibi olmalı $size yerine boyut, $attr yerine resim özellikleri (class, alt, title gibi)

<?php the_post_thumbnail( $size, $attr ); ?>

Eğer konu içerisinde resim yoksa

,

Biz yukarıdaki örneklerde resim varsa dilediğimiz yerde gösterdik şimdi varsayımdan gidelim ve konu içerisine resim yüklenmemişse onun yerine varsayılan bir resim ekleyelim aşağıdaki kodları takip ediniz.

1
2
3
4
5
6

<?php
	if ( has_post_thumbnail() )
		the_post_thumbnail( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

Yukarıda kodların anlamı eğer resim varsa dilediğimiz yerde thumbnail şeklinde verecektir. Resim yoksa varsayılan olarak belirleyeceğimiz bir resmi verir.
Dikkat edilmesi gereken

has_post_thumbnail()

mutlaka döngü içerisinde olmalı koşul komutunda (if else ) kullanılmalı.

Anasayfada thumbnail farklı değer vermek single.php’de farklı değer vermek

önce functions.php dosyamızı düzenleyelim

1
2
3

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size

home.php ya da index.php dosyası içerisinde aşağıdaki kodu kullanalım (döngü içinde olmalı)

<?php the_post_thumbnail(); ?>

single.php dosyasında ise aşağıdaki kodu kullanalım (döngü içinde olmalı)

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

burada functions.php dosyasından single-post-thumbnail değerlerini alacaktır.

Yazı Resmi id alma

Belki kendinize özel bir script yazabilirsiniz veya özel alan ve bunun yanısıra kullanıcıların kendi resimlerinide yüklemesini isteyebilirsiniz. Yazı içerisindeki resmin id yakalayabilirsiniz ve kullanabilirsiniz.
Aşağıdaki kodu ilave etmeniz gerekmektedir.

$image_id = get_post_thumbnail_id();

Örnek kullanımı

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
 
$args = array(
	'post_type' => 'attachment',
	'numberposts' => -1,
	'post_status' => null,
	'post_parent' => $post->ID,
	'exclude' => get_post_thumbnail_id()
	); 
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		echo apply_filters('the_title', $attachment->post_title);
		the_attachment_link($attachment->ID, false);
	}
}
 
?>

Yararlanılan kaynaklar :

http://codex.wordpress.org/Template_Tags/get_post_thumbnail_id

http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

http://codex.wordpress.org/Function_Reference/has_post_thumbnail

http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature

http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

http://www.kremalicious.com/2009/12/wordpress-post-thumbnails/

Tavsiye Eklentiler :

http://wordpress.org/extend/plugins/regenerate-thumbnails/

http://wordpress.org/extend/plugins/get-the-image/

Tavsiye temalar (incelenmesi için):

http://themehybrid.com/themes/hybrid

http://wordpress.org/extend/themes/twentyten

çok fazla yerde kullanim alanina sahiptir. get_bloginfo() kodu ile beraber blogunuzdaki bilgileri belirtiriz.
Örneklerle daha iyi anlasilacaktir.
Kullanimi
<?php get_bloginfo($show); ?>

$show degiskenine bazi degerler atanabilir ve bu degerler kullanilabilir.

Name : Blog ismi için kullanilir. Buradaki blog ismi admin panelinizden “Ayarlar Menüsü” “Genel Baglantisi”na tikladiginizda açilan pencereden “Site basligi” kismini verir.
Kullanimi
<?php get_bloginfo(‘name’); ?>

Description : Site tanimidir. Tema kodlarken kullanacagimiz yerde admin panelinizden “Ayarlar Menüsü” “Genel Baglantisi”na tikladiginizda açilan pencereden “Slogan” kismini verir.
Kullanimi
<?php get_bloginfo(‘descripton’); ?> seklindedir.

wordpress 3.0 sürümünden sonra get_bloginfo() kodu ile home ve siteurl kullanimi tavsiye edilmez
home : wordpress kurulu adresi verir.
Kullanimi
<?php get_bloginfo(‘home’); ?> seklindedir bu kullanim tavsiye edilmez 3.0 sürümünden sonra bunun yerine <?php get_site_url(); ?>  ve ya 3.0′dan sonra varsayılan temada  kullanılan <?php echo home_url( ‘/’ ); ?> kullanimi tavsiye edilmektedir. Bu bahsettiklerimiz site url içinde geçerlidir.

stylesheet_url : Aktif olan temanin ilk veya birinci css (genellikle style.css) url adresidir.
Not : Eger tema dizininde 1′den fazla css dosyasi varsa ilk çalisacak css dosyasini belirtmek gerekli bunun için ana css dosyamizin tanimini yaptiktan sonra
kodlamaya geçmeden ilk olarak @import url(‘../oyun-temasi/style.css’); diye belirtmemiz gerekir. Daha detay bilgi için css kodlama baslangiç derslerimizi takip ediniz.
kullanimi :
<?php get_bloginfo(‘stylesheet_url’); ?> seklindedir.

stylesheet_directory : Aktif olan temanin stil dosyasi dizininin url adresidir.
Kullanimi : <?php get_bloginfo(‘stylesheet_directory’); ?>

Buna benzer olanlari kisaca geçecegim örnekleri takip ediniz kodun esit oldugu url adresini belirtecegim.

<?php get_bloginfo(‘rdf_url’) ?> = blogunuzun RDF/RSS 1.0 beslemeleri için url adresi http://example/home/feed/rdf yerine geçer

<?php get_bloginfo(‘rss2_url’); ?> = Temada blogunuzun RSS 2.0 beslemeleri için url adresi http://example/home/feed yerine geçer.

<?php get_bloginfo(‘atom_url’); ?> = Temada blogunuzun Atom feed (/feed/atom) beslemeleri için url adresi http://example/home/feed/atom yerine geçer.

<?php get_bloginfo(‘comments_rss2_url’); ?> = Temada blogunuzun comments RSS 2.0 feed (/comments/feed) beslemeleri için url adresi http://example/home/comments/feed yerine geçer.

<?php get_bloginfo(‘pingback_url’); ?> = http://example/home/wp/xmlrpc.php

admin_email = admin@example
atom_url = http://example/home/feed/atom
charset = UTF-8
comments_atom_url = http://example/home/comments/feed/atom
comments_rss2_url = http://example/home/comments/feed
description = Just another WordPress blog
home = http://example/home
html_type = text/html
language = en-US
name = Testpilot
pingback_url = http://example/home/wp/xmlrpc.php
rdf_url = http://example/home/feed/rdf
rss2_url = http://example/home/feed
rss_url = http://example/home/feed/rss
siteurl = http://example/home
stylesheet_directory = http://example/home/wp/wp-content/themes/largo
stylesheet_url = http://example/home/wp/wp-content/themes/largo/style.css
template_directory = http://example/home/wp/wp-content/themes/largo
template_url = http://example/home/wp/wp-content/themes/largo
text_direction = ltr
url = http://example/home
version = 2.7
wpurl = http://example/home/wp

Kaynakça

http://codex.wordpress.org/Function_Reference/get_bloginfo

Theme Name: (Zorunlu) alt tema ismi.
Theme URI: (İsteğe bağlı) http://desteksitesi.net
Description: (isteğe bağlı) İlk yaptığım tema
Author URI: (İsteğe bağlı) http://desteksitesi.net
Author: (İsteğe bağlı) Destek
Template: (Zorunlu) ilkel
Version: (İsteğe bağlı) 1.0

Tabiki burada yazdıklarımızı /* ve */ tagları arasına alacağız.
Alt tema için örnek

wp-content/themes klasörü içine yeni bir dizin oluşturun.
Aşağıdaki kodları style.css olarak kaydedin ve yeni oluşturduğumuz tema dizinine atınız.
Admin paneline gidin ve bu temayı aktif edin.

/*
Theme Name:     Twenty Ten Mod
Author:         Demetris
Template:       twentyten
*/

@import url(‘../twentyten/style.css’);

#site-title a {
color: #009900;
}

Burada yukarıdaki kodlar adım adım ne yaptı açıklayalım

1-) /* ile alt temanın başlangıcını yaptık

2-) Theme Name: Temanın adını yayınladık.

3-) Author: yazarın İsmini yayınladık.  (Burayı doldurmanın isteğe bağlı olduğunu tekrar hatırlatalım.)

4-) Template: alt temanın ait olduğu asıl temanın ismini açıklaması ; örneğin ilkel diye bir tema klasörü oluşturduğumuzu varsayarsak ana temamızın ismi ilkel olacaktır.

5-) */ css dosyamızın üst kısım bilgi alanını kapattık

6-) The @import kuralı ana css dosyasını çağırır.

7-) #site-title şartı, site üstündeki site başlığının rengini belirler, ana style’in kuralını çiğner

@import rule için NOT :

@import yukarısında hiçbir biçimlendirme kuralı olmamalıdır. Ondan önce başka bir kural koyarsan, ana temayı geçersiz kılmış olacak ve yolunu belirtememiş olacaksın.

Dersler devam edecek

Bu yazımızda sizlere wordpress temel kodlardan bahsedeceğiz. Özellikle tema düzenleme yada yazan arkadaşlara çok faydalı olacak kânaatindeyim.

Temel Tema Dosyaları :

style.css : Stil dosyası. Css kodlamalarını ve düzenlemelerini bu dosyadan yaparız ve buna bağlı olarak .PHP dosyalarını düzenleriz. style.css bir binanın temeli gibi düşünebilirsiniz bu örneği wordpress’e uyarlarsak temalarımızın temelidir temamız buna göre şekillenir.
index.php : Anasayfa dosyası. Ana sayfamızda nelerin olacağını bu dosyadan belirleriz.
single.php : Tekil yazı sayfası dosyası yada en basit tarifi konu konu sayfamızdır.
archive.php : Arşiv / Kategori dosyası
searchform.php : Arama formu dosyası
search.php : Arama sonuçları dosyası
404.php : Hata sayfası
comments.php : Yorum listeleme sayfası
footer.php : Alt kısım içerik dosyası
header.php : Üst kısım içerik dosyası
sidebar.php : Yan kolonlar içerik dosyası
page.php : Tekil sayfa dosyası

Üst Kısım için PHP Kodları

<?php bloginfo(‘name’); ?> : Sitenin başlığı ( admin panelindeki “Ayarlar” menüsü “Genel” sekmesine tıkladığımızdaki “Blog Başlığını Verir” kısmını verir.)

<?php bloginfo(‘description’); ?> : Sitenin tanımı (admin panelindeki “Ayarlar” menüsü “Genel” sekmesine tıkladığımızdaki “Slogan” kısmını verir.)

<?php echo get_option(‘home’); ?> Anasayfaya link verir. (Örneğin header.php dosyasında üst menüde sayfa ve ana sayfayı göstermek dilersek aşağıdaki şekilde kodları yazabiliriz.)

<div id=”header”>

<div id=”nav”>

<ul>

<li><a href=”<?php echo get_option(‘home’); ?>”>Anasayfa</a></li>

<?php wp_list_pages(‘title_li=’); ?>

</ul>
</div>

<?php wp_title(); ?> : Belirli yazı veya sayfa başlığı.

<?php wp_list_pages(‘title_li=’); ?> : Bu kod ile (Admin panelindeki “Sayfalar” menüsündeki) sayfaları çağırırız. Temada genellikle sidebar ve header’da kullanılır. Yukarıdaki örnekten inceleyebilirsiniz.

<?php bloginfo(‘stylesheet_url’); ?> : Style.css dosyasının yeri
<?php bloginfo(‘pingback_url’); ?> : Sitenin geri bildirim linki
<?php bloginfo(‘template_url’); ?> : Sitenin tema dosyalarının yeri
<?php bloginfo(‘version’); ?> : Sitenin WordPress sürümü
<?php bloginfo(‘atom_url’); ?> : Sitenin Atom linki
<?php bloginfo(‘rss2_url’); ?> : Sitenin RSS2 linki
<?php bloginfo(‘url’); ?> : Sitenin anasayfa linki
<?php bloginfo(‘name’); ?> : Sitenin ismi
<?php bloginfo(‘html_type’); ?> : Sitenin HTML sürümü
<?php bloginfo(‘charset’); ?> : Sitenin karakter seti

Temalar için PHP kodları

<?php the_content(); ?> : Yazının içeriği

<?php if(have_posts()) : ?> :  Yazı var mı yok mu kontrolü

<?php while(have_posts()) : the_post(); ?> : Eğer yazı var sa yazıları göster

<?php endwhile; ?> : ‘while’ PHP fonksiyonunu kapatır

<?php endif; ?> : ‘if’ PHP fonksiyonunu kapatır
<?php get_header(); ?> : Header.php dosyasının içeriği
<?php get_sidebar(); ?> : Sidebar.php dosyasının içeriği
<?php get_footer(); ?> : Footer.php dosyasının içeriği
<?php the_time(‘m-d-y’) ?> : ’08-18-07′ şeklindeki tarih
<?php comments_popup_link(); ?> : Yazının yorumlarına bağlantı
<?php the_title(); ?> : Belirli bir yazının yada sayfanın başlığı
<?php the_permalink() ?> : Belirli bir yazı yada sayfanın linki
<?php the_category(‘, ‘) ?> : Belirli bir yazı yada sayfanın kategorileri
<?php the_author(); ?> : Belirli bir yazı yada sayfanın yazarı
<?php the_ID(); ?> : Belirli bir yazı yada sayfanın ID si
<?php edit_post_link(); ?> : Belirli bir yazı yada sayfa için düzenle linki
<?php get_links_list(); ?> : Linklerin listesi
<?php comments_template(); ?> : Comment.php dosyasının içeriği
<?php wp_list_pages(); ?> : Sitedeki sayfaların listesi

<?php wp_list_cats(); ?>: Sitedeki kategorilerin listesi
<?php get_calendar(); ?> : Takvim
<?php wp_get_archives() ?> : Sitedeki arşivin listesi

<?php wp_get_archives(‘type=monthly’); ?> : Sitenin Aylık Arşivini verir.

<?php posts_nav_link(); ?> : Sonraki ve önceki yazının linki

<?php next_post_link(‘ %link ‘) ?> : Sonraki yazıya link

<?php previous_post_link(‘%link’) ?> : Önceki yazıya link

<?php bloginfo(’description’); ?> : Sitenin açıklaması

Ekstra Araçlar

/%postname%/ : Özel kalıcı bağlantılar
<?php include(TEMPLATEPATH . ‘/x’); ?>: Herhangi bir dosyayı getirir
<?php the_search_query(); ?> : Arama formu değeri
<?php _e(‘Mesaj’); ?> : Mesaj metnini gösterir
<?php wp_register(); ?> : Kayıt olma linkini gösterir
<?php wp_loginout(); ?> : Giriş ve Çıkış linkini gösterir
<!–next page–> : İçeriği sayfalara böler
<!–more–> : Yazıyı keser ve devamı için link ekler
<?php wp_meta(); ?> : Yöeticiler için meta
<?php timer_stop(1); ?> : Sayfa yüklenme süresi
<?php echo get_num_queries(); ?> : Sayfa yüklemesindeki sorgular