Wordpress Destek Sitesi

Bu yazımızda wordpress 2.9.x sürümünden sonra thumbnail özelliğini temaya ilgili kodları ilave etmekten bahsedeceğiz.

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

get_bloginfo()  Kodu

ç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