CSS’den gerekli alanları açtıktan sonra temanızda nerede manşet sistemini göstermek isterseniz oraya aşağıdaki manşet kodlarını koyabilirsiniz.
Kullanımı :
şeklinde index.php dosyanıza ilave edebilirsiniz.
WordPress Manşet 1
Devamını Oku
Wordpress Destek Sitesiwordpress bilgi ve tema arşivi |
CSS’den gerekli alanları açtıktan sonra temanızda nerede manşet sistemini göstermek isterseniz oraya aşağıdaki manşet kodlarını koyabilirsiniz.
Kullanımı :
şeklinde index.php dosyanıza ilave edebilirsiniz.
WordPress Manşet 1
Devamını Oku
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 ); ?>
,
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.
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