WordPress'te Öne Çıkan Görsel Boyutları Nasıl Değiştirilir

Yayınlanan: 2017-04-10

Tarihinde güncellendi 10 Mart 2017

Öne çıkan görseller, kullandığınız temaya bağlı olarak WordPress içinde birkaç farklı şekilde kullanılır. Çoğu tema, öne çıkan resimleri, genellikle ana sayfada ve arşiv sayfalarında görüntülenen bir gönderi veya sayfadaki resimlerden birinin küçük resim önizlemesi olarak kullanır.

Bu işlevsellik, WordPress 2.9 ile tanıtıldı ve başlangıçta "küçük resimler sonrası" olarak biliniyordu. Çoğu WordPress teması (kendi temamız da dahil), artık resim galerileri, özellik kaydırıcıları ve sayfa başlığı resimleri gibi birçok başka amaç için öne çıkan resimleri kullanıyor. Örneğin, Full Frame temamızda öne çıkan görsel, gönderinin arka plan görseli olur.

Öne çıkan görseller, yaratıcılar ve çok sayıda görsel içeren bir WordPress sitesi oluşturan herkes için elbette çok önemlidir. Herhangi bir Graph Paper Press temasında öne çıkan görselleri kullanmak için tek yapmanız gereken yazı düzenleyicide ekranın sağ tarafındaki bağlantıdan öne çıkan bir görsel seçmek.

Temanızda ayarlanan varsayılan özellikli resim boyutu, amaçlarınız için çalışıyorsa, harika. Değilse, küçük bir kod düzenleme ile boyutu değiştirmek mümkündür.

Öne çıkan görsel boyutunu neden değiştirmek istiyorsunuz? Küçük resim galerilerini büyütmenin veya küçültmenin yanı sıra, boyutların en boy oranını değiştirmek isteyebilirsiniz. Örneğin, bir manzara fotoğrafçısı olduğunuzu ve portföyünüzün kapsamlı panoramalardan oluştuğunu varsayalım. Bu durumda, temanın varsayılan öne çıkan görseli kare ise, görselinizin çoğunu kırpacaktır. Boyutları manuel olarak daha uygun bir şeye ayarlayarak bunu düzeltebilirsiniz.

Functions.php'de Öne Çıkan Görüntü Boyutunu Değiştirme

Öne çıkan görsel boyutlarını varsayılandan düzenlemek için, function.php dosyasındaki bazı kodları değiştirmeniz gerekir. Bu dosyaya FTP yoluyla erişilebilir veya doğrudan Görünüm > Düzenleyici altındaki WordPress panosunda düzenleyebilirsiniz. Her zaman eski yaklaşımı ikincisine tavsiye ederim.

Bu dosyada herhangi bir değişiklik yapmadan önce, bir şeyler ters giderse diye orijinal sürümün yedeğini aldığınızdan emin olmanızda fayda var. Bilgisayarınızda halihazırda orijinal tema dosyaları yoksa, en azından function.php dosyasını indirdiğinizden ve bir yedekleme klasörüne kaydettiğinizden emin olun.

Öne çıkan bir resmi yeniden boyutlandırmanın iki farklı yolu vardır. Orantılı olarak yeniden boyutlandırmak için (yani görüntüyü uzatmak veya sıkıştırmaktan kaçınmak için) aşağıdaki kodu kullanın:

 set_post_thumbnail_size( 50, 50 ); // 50 piksel genişlik ve 50 piksel yükseklik, yeniden boyutlandırma modu

Resmi bu kodla kırparak yeniden boyutlandırmayı da seçebilirsiniz:

 set_post_thumbnail_size( 50, 50, true ); // 50 piksel genişlik ve 50 piksel yükseklik, kırpma modu

Bu, öne çıkan resimlerin varsayılan boyutunu ayarlar.

Ek Resim Boyutları Ekleme

Her görüntü boyutu için fazladan bir kod satırı ekleyerek, ihtiyacınız olduğu kadar fazla görüntü boyutu eklemek de mümkündür:

 add_image_size('kategori-parmak', 300, 9999); // 300 piksel genişlik (ve sınırsız yükseklik)

Daha sonra bu yeni boyutu aşağıdaki kodla tema şablonunuzda kullanabilirsiniz:

 <?php the_post_thumbnail( 'kategori-parmak'); ?>

Bu özellik, öne çıkan resimleri birkaç farklı şekilde görüntülemek istiyorsanız kullanışlıdır. Örneğin, resim galerileriniz için bir küçük resim boyutu ve yazı başlığınız için daha büyük bir boyut ayarlamak isteyebilirsiniz.

Yüklediğiniz görsellerin en az öne çıkan görselleriniz için belirlediğiniz boyutlar kadar büyük olması gerektiğini unutmayın. Daha küçük resimler yüklerseniz, bunlar büyütülür ve pikselli ve bulanık görünürler.

Öne Çıkan Görsellerinizi Yeniden Oluşturma

Öne çıkan görsel boyutunun değiştirilmesi, yalnızca kodun değiştirildiği andan itibaren yüklemeleri etkiler. Önceki yüklemeler orijinal boyutlarında kaydedilmiş olacak, dolayısıyla bunları yeniden oluşturmanız gerekecek.

Yeniden boyutlandırılacak yalnızca birkaç resminiz varsa, bunları manuel olarak yeniden yükleyebilirsiniz. Bir avuçtan fazlasına sahipseniz, sizin için tüm zor işleri yapmak için Küçük Resimleri Yeniden Oluştur gibi bir eklenti kullanmak en iyisidir. Bu eklentiye Araçlar menünüzden erişilebilir ve medya galerinizdeki seçtiğiniz bir veya daha fazla resmi yeniden boyutlandırır.

Alt Temayla Düzenlemelerinizi Geleceğe Hazırlayın

Functions.php dosyanızda doğrudan düzenleme yapmanın sorunu, temanın yeni bir sürümü yayınlandığında ve onu yükseltmeniz gerektiğinde bunların kaybolacak olmasıdır. Eklediğiniz kodu not edebilir ve onu yeni function.php dosyasına ekleyebilirsiniz, ancak bu, özellikle çok fazla düzenleme yapıyorsanız veya temanın sık sık yeni sürümleri çıkıyorsa, sıkıcı olabilir.

Bir alt tema kullanmak, ana tema güncellendiğinde alt tema olduğu gibi bu sorunu çözer. Bir temanın kodunda, ya function.php dosyasında, ya da stil sayfalarında ya da başka herhangi bir dosyada herhangi bir düzenleme yapıyorsanız, her zaman bir alt tema kullanmak en iyi uygulamadır.

Blogda alt tema oluşturmaya yönelik eksiksiz bir kılavuzumuz zaten var, ancak bizim amaçlarımız için bilmeniz gerekenler burada.

Bir alt tema oluşturmak için, FTP yoluyla sitenize bağlanın ve /wp-content/themes/ içinde yeni alt temanız için yeni bir klasör oluşturun. Klasörü, düzenlemek istediğiniz temayla aynı şekilde adlandırmak ve buna "-child" eklemek yaygın bir uygulamadır. Örneğin: Müthiş temasının bir alt temasını yapıyorsanız “harika-çocuk”.

CSS'yi düzenlemeyi düşünmüyorsanız bile, alt tema klasörünüzde bir stil sayfası oluşturmalısınız. style.css adında yeni bir dosya oluşturun ve aşağıdaki kodu yapıştırın:

 /*
Tema Adı: Harika Çocuk
Tema URI'si: http://example.com/awesome-child/
Açıklama: Harika Çocuk Teması
Yazar: Grafik Kağıdı Presi
Yazar URI'si: http://example.com
Şablon: Harika
Sürüm: 1.0.0
Etiketler: açık, koyu, duyarlı düzen, erişilebilirliğe hazır
Metin Alanı: harika çocuk
*/

@import url("../awesome/style.css");

/* =Tema özelleştirmesi burada başlar
-------------------------------------------------- ------------ */

Tema adını ve diğer ayrıntıları uygun şekilde değiştirin.

Öne çıkan görseli alt temanıza değiştirme işlevselliği eklemek için, yeni bir function.php dosyası oluşturmanız gerekecek, bu yüzden devam edin ve bunu alt tema dizininde yapın. Bu dosya, ana temanın functions.php dosyasına ek olarak yüklenecektir.

Function.php şablonu şuna benzer:

 <?php //PHP etiketini açma

// fonksiyonlar

?> // PHP etiketi kapatılıyor

Daha sonra PHP etiketleri arasına resim yeniden boyutlandırma kodunuzu ekleyebilirsiniz, böylece şöyle bir şey elde edersiniz:

 <?php // PHP etiketini açma

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support('küçük resim sonrası');
set_post_thumbnail_size( 150, 150, true ); // varsayılan Gönderi Küçük Resim boyutları (kırpılmış)

// ek resim boyutları
// ek görüntü boyutlarına ihtiyacınız yoksa sonraki satırı silin
add_image_size('kategori-parmak', 300, 9999); //300 piksel genişlik (ve sınırsız yükseklik)
}

?> // PHP etiketi kapatılıyor

Alt temanızın kodunu oluşturmayı bitirdikten sonra, onu etkinleştirmeniz gerekir. Bunu, Yönetim Panelleri > Görünüm > Temalar altındaki site panosu aracılığıyla yapabilirsiniz. Listede alt temanızı bulun ve Etkinleştir'e tıklayın.

Yeni Yeniden Boyutlandırılan Öne Çıkan Resimlerinize Hayran Olun

Öne çıkan görsellerin boyutunu değiştirmek ve yeni görsel boyutları eklemek oldukça basit bir iştir ancak bazı kod düzenlemeleri gerektirir. Bu nedenle, bazı kullanıcılar görüntünün yeniden boyutlandırılması için bir eklenti kullanmayı tercih eder, ancak ek eklentiler eklemek her zaman bir güvenlik riski taşır. Kaputun altına girmek ve kodda bunun gibi bazı basit değişiklikler yapmak, WordPress kullanımına olan güveninizi artırmanıza gerçekten yardımcı olabilir ve temaları özelleştirmenizi ve onları gerçekten kendinize ait hale getirmenizi kolaylaştıracaktır.