Twenty Fourteen teması thumbnail (küçük resim) için hazır bir çözüm sunmuyor bize.
Daha önce temamızın anasayfasında yazıların özet olarak görünmesini (excerpt mod) sağlamıştık. Ancak bu özetlerin yanında küçük resimler görünmüyor.
http://www.dognmonkey.com/techs/twenty-fourteen-theme-customization.html adresindeki makalenin yazarı bu soruna nasıl çözüm bulacağımızı anlatıyor.
1- Bu çözüm için öncelikle get_the_image.php dosyasına ihtiyaç var. Zip dosyasını indirip açın ve içindeki kod dosyasını yavru tema klasörünüze kopyalayın.
2- İkinci aşamada yavru tema klasörünüzdeki functions.php dosyasına aşağıdaki kodları ekleyin:
|
1 2 3 4 5 6 7 8 9 |
if (!function_exists(‘get_the_image’)) { require_once “get-the-image.php”; } function custom_excerpt_length( $length ) { return 50; } add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 ); |
3- Üçüncü aşamada content.php dosyasına aşağıdaki kodları ekliyorsunuz. Orijinal metinde sadece is_search() sorgulanıyor. Siz isterseniz verdiğimiz koddaki tüm seçenekleri aktif olarak kullanabilir, ya da sadece is_home() fonksiyonunu eklemekle yetinebilirsiniz: Tamamen size kalmış.
|
1 2 3 4 5 |
<?php if ( is_search()||is_author()||is_tag()|| is_archive()||is_home() ) : // Only display Excerpts for Search ?> <div class=”entry-summary”> <?php get_the_image( array( ‘size’ => ‘main’, ‘width’ => 200, ‘height’ => 114, ‘before’ => ‘<div class=”cover”>’, ‘after’ => ‘</div>’ ) ); ?> <?php the_excerpt(); ?> </div><!– .entry-summary –> <?php else : ?> |
Bu üç aşamayı uyguladığınız zaman yazınıza eklenmiş bir resim varsa ve onun thumbnail görüntüsünü de oluşturmuşsanız (Force Regenerate Thumbnail veya Smush It gibi bir eklenti, eksik thumbnail görüntülerinizi tamamlamanızı sağlar) küçük resim (thumbnail) özet yazınızın üst tarafında yerini alacaktır.
Fakat ben küçük resmin sol tarafta olmasını ve yazıların da hemen onun sağ yanından başlamasını istiyorum.
Yukarıda linkini verdiğim yazıda bu ayrıntıya hiç girilmemiş. Onları da ben ekleyeyim:
content.php dosyasına eklediğimiz kodu incelersek, resmimizin içine yerleştiği div kodunun “cover” sınıfı ile ilişkilendirildiğini görüyoruz. Ancak “cover” sınıfı hiç bir yerde tanımlı değil. Biz de yazılarımızın resmin sağ tarafında kalmasını sağlayacak css kodunu yavru temamızın style.css dosyasına ekliyoruz.
|
1 2 3 4 5 |
.cover { text-align: left; margin-right: 10px; float:left; } |
“cover” sınıf tanımında div alanının sola dayalı olmasını, sağ tarafında 10 piksellik bir boşluk bulunmasını ve çevreleyen metne göre sol tarafta yer almasını belirtiyoruz.
Artık ana sayfadaki yazı özetlerimizin sol tarafında, küçük resimlerimiz de (thumbnail) yerini almış durumda.
Yukarıdaki açıklamaların yetersiz kaldığı sorun veya sorularınız varsa, aşağıdaki yorum alanını kullanarak bana aktarabilirsiniz. Sizi en kısa zamanda yanıtlayacağımdan emin olun!
Beni izlemeyi unutmayın!