WordPress Görsel Boyutları Açıklaması

WordPress resim boyutları bazen biraz gizemli olabilir! Yönetici alanınızda bu Medya Ayarları sayfasını hiç gördünüz ve ne olduğunu merak ettiniz mi?

Bu makalede, WordPress resim boyutlarını, bunların neyle ilgili olduğunu ve bunun yükleme süreleri gibi şeyleri nasıl etkileyebileceğini inceleyeceğiz. Ek olarak, WordPress'in bu farklı resim boyutlarını web sitesi düzenlerinde nasıl kullandığına da bakacağız. Son olarak, gereksiz görüntü boyutlarını nasıl kaldırabileceğinizi veya kendi özel boyutunuzu nasıl ekleyebileceğinizi inceleyeceğiz.

WordPress'te Görüntü Boyutlarının Rolü Nedir?

Web sitenizdeki resimlerin güzel, net ve kaliteli görünmesi gerçekten önemlidir. Bunu, görüntünün fiziksel boyutu (hem boyutlar hem de dosya boyutu) ve görüntünün çözünürlüğü dahil olmak üzere belirleyecek birkaç unsur vardır. Resminiz çok büyükse (örneğin 10.000 piksel genişliğinde) ve dosya boyutu çok büyükse (yani 1mb'den fazla) web sitenizin yükleme hızını yavaşlatmaya başlayacaksınız. Tersine, görüntü boyutu çok küçükse, görüntünün kalitesinde muhtemelen bir bozulma göreceksiniz… başka bir deyişle, bulanık veya grenli görünmeye başlayabilir.

Pressidium ile web sitenizi barındırın

60 GÜN PARA GERİ GARANTİSİ

PLANLARIMIZI GÖRÜN

WordPress, görüntünün konumuna bağlı olarak en uygun görüntü boyutunu sunarak bir denge kurmaya çalışır. Bunu, WordPress Medya Kitaplığına her resim yüklediğinizde 3 farklı resim boyutu oluşturarak yapar. Bunlar sırasıyla 150×150 piksel, 300×300 piksel (maksimum) ve 1024×1024 piksel (maksimum) boyutlarında 'Küçük resim boyutu', 'Orta boyut' ve 'Büyük boyut'tur. Son olarak, yüklenen görüntünün orijinal boyutu olan bir 'Tam boyutlu' görüntüyü de saklayacaktır.

Bu boyutlar ve daha sonra bakacağımız ek boyutlar, WordPress tarafından ön uç düzeninde çeşitli konumlarda kullanılır. Bu, kullanılan görüntünün hem a) iyi görünmesi hem de b) hızlı yüklenmesi için yapılır.

WordPress Görsel Boyutlarını Daha Detaylı İnceleme

WordPress'e bir resim yüklediğinizde 'perde arkasında' neler olduğunu tam olarak görebilmeniz için bir örnek üzerinden geçelim. Bu örneğin amaçları için 'post1-feature-image' adında bir resim yükleyeceğiz. 294KB boyutundadır ve 2089×1175 piksel boyutlarındadır ve bunu varsayılan WordPress Twenty Twenty teması etkinken yapacağız (diğer temalar, resimlerin WordPress tarafından nasıl işlendiğini değiştirebilir).

Bu resmi WordPress Medya Kitaplığı aracılığıyla yükledikten sonra, bir FTP istemcisi kullanarak sitemize bağlanabiliriz ve Yükleme klasörüne gidersek, resimlerimizin birden çok sürümünün oluşturulduğunu görürüz.

Kırmızı ile vurgulanmış olarak, varsayılan resim boyutlarımızı göreceksiniz. Küçük Resim, Medya ayarları aracılığıyla varsayılan olarak ayarlandığından kırpılmıştır.

'Orta boyut' ve 'Büyük boyut', görüntünün gerçek oranlarının değiştirilmesini önleyecek şekilde yeniden boyutlandırılmıştır. Bu yüzden örneğin 'Orta boy' 300×300 yerine 300×169'dur. Oluşturulan görüntülerin geri kalanı, bazı WordPress çekirdek dosyalarının ve Twenty Twenty temasının kodunun bir sonucudur.

Teknik Almak!

Ek görüntü boyutları oluşturulduğunda neler olduğunun arkasındaki kodla ilgileniyorsanız, makalenin bu bölümü tam size göre. Değilse, bir sonraki bölüme geçmekten çekinmeyin!

WordPress, wp-includes/ klasörünün içinde bulunan media.php adlı bir dosyadan talimatları çekiyor. Buna gidin, satır 4861 ve aşağıdakileri göreceksiniz:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg , daha iyi yanıt veren görüntü desteği için WordPress sürüm 4.4'e eklenen ve çeşitli taşınabilir cihazlarda görülebilen 'medium_large' boyutunun bir sonucu olarak oluşturuluyor. Dosya schema.php satır 522'deki “wp-admin/includes” klasöründe tanımlanmıştır.

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

içinde talep edilen ve 86. satırdaki image.php dosyası:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg ve post1-feature-image-1980x1114.jpg , 53. satırdaki function.php dosyasının içindeki 'Yirmi Yirmi' temasından oluşturulur:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Bu, Twenty Twenty temasının öne çıkan resimler için resim boyutu olarak 1200 piksel kullanması nedeniyle yapılır. Bir test gönderisi oluşturup öne çıkan bir resim eklersek ve ardından ön uç tek gönderi sayfasında bu boyutun nasıl kullanıldığını, öne çıkan resme sağ tıklayıp tarayıcının denetçisine bakarak görebiliriz.

Son olarak, 1980 piksel görüntü, diğer gönderi şablonlarının öne çıkan görüntüsü için kullanılan boyuttur. Bunu, test gönderisi şablonunu 'Kapak Şablonu' olarak değiştirerek görebilirsiniz. Ardından, kapak resminin HTML öğesinin denetçi CSS'sinde bu boyutun nasıl kullanıldığını görebiliriz:

Net görünmeleri için yüklediğiniz herhangi bir görselin Öne Çıkan ve Kapak görseli genişliklerinden daha geniş olduğundan emin olun. WordPress, görüntü boyutlarını etkili bir şekilde azaltabilir, ancak küçük bir görüntüyü büyütemez ve iyi görünmesini sağlayamaz.

Gereksiz WordPress Resim Boyutlarını Kaldırın

Gördüğümüz gibi, Medya Kitaplığımıza bir resim yüklediğimizde WordPress bir dizi resim boyutu oluşturmakla meşgul. Ancak tüm bu görüntülere gerçekten ihtiyacımız var mı? Gerçekte, hayır yapmıyoruz. WordPress bu çeşitli görüntü boyutlarını oluşturmak için arka planda çalışmak zorunda olduğundan yalnızca görüntülerin yüklenme hızını yavaşlatmakla kalmaz, aynı zamanda sunucumuzda kullanmamız gerekmeyen depolama alanını da kaplar. Peki, WordPress'in ihtiyacımız olmayan görüntü boyutları oluşturmasını nasıl durdurabiliriz? Öğrenmek için okumaya devam edin!

Not: Bu talimatları bir demo web sitesinde izlemiyorsanız, bir alt temanın functions.php dosyasında aşağıda özetlenen değişiklikleri uygulamanızı öneririz. Bir ana temada function.php dosyasında yapılan değişiklikler, temanın bir sonraki güncellenmesinde silinecektir.

WordPress Varsayılan Görüntü Boyutlarını Kaldırın

Bu, temanın function.php dosyasını düzenleyerek ve aşağıdaki kodu ekleyerek kolayca gerçekleştirilebilir:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Test etmek için medya kitaplığına yeni bir resim yükleyelim (örneğimizde buna post2-featured-image denir) ve yükleme klasörünün FTP görünümümüzü yenileyelim.

Gördüğünüz gibi, WordPress'e function.php dosyamız aracılığıyla varsayılan 4 görüntü boyutunu kaldırmasını söyleyerek, WordPress'in bunları medya klasörümüzde oluşturmasını durdurduk. İleriye dönük olarak, tema kodumuzdaki bu basit güncelleme, sunucumuzu istenmeyen görüntü boyutlarıyla tıkamayacağımız anlamına geliyor. Bu, yerden tasarruf sağlayacak ve resim yükleme sürecini hızlandıracaktır.

Ortam Kitaplığından Eski Görüntü Boyutlarını Kaldırma

Yüklediğimiz yeni görselimiz için 4 varsayılan görsel boyutu oluşturulmamış olsa da, önceden yüklenen görselin hala medya kitaplığında kayıtlı 8 çeşidinin bulunduğunu fark etmiş olabilirsiniz. Her halükarda, bu yepyeni bir web sitesi olmadığı sürece, yüzlerce olmasa da onlarca resim yüklemiş olacaksınız ve her durumda bu 'ekstra' boyutlar oluşturulmuş olacaktır. Peki ne yapmalı?

Belirlenmesi gereken ilk şey, bu görüntülere ihtiyacınız var mı? WordPress tarafından oluşturulan resimleri kaldırmaya devam etmeden önce, bu boyutların artık kullanılmadığını onaylamanız gerekecek. Eski boyutların hiçbirinin hala kullanımda olmadığından emin olmak için blog gönderilerinizi, öne çıkan resimleri ve web sitenizin diğer bölümlerini kontrol edin.

Eski görüntülerin bu istenmeyen dosyalarıyla başa çıkmanın harika bir yolu, bunları otomatik olarak silecek olan Force Regenerate Thumbnail eklentisini kullanmaktır. Eklentiyi kurun ve etkinleştirin ve ardından eklenti menüsünden 'Tüm Küçük Resimleri Yeniden Oluştur' düğmesine basın (Araçlar-> Küçük Resimleri Yeniden Oluşturmaya Zorla).

FTP medya klasörü görünümünüzü yenileyin ve varsayılan WordPress görüntülerinin gittiğini göreceksiniz. Güzel!

Varsayılan boyutlar için aynı sonucu elde etmenin bir başka kolay yolu, wp-admin'de Ayarlar > Medya içinden boyut değerlerini "0" olarak değiştirmektir. Daha sonra şöyle bir şey göreceksiniz:

Alternatif bir yöntem, update_option( 'SIZE_w/h', 0 ); function.php içinde. Bunu bir alt tema function.php dosyasına yapmayı unutmayın, böylece temayı daha sonra güncellediğinizde değişiklikleriniz kaybolmaz.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

Bu güncelleme yapıldığında, Medya ayarlarındaki (WP Admin içinden) boyutları yansıtacak olanın şimdi 0 olarak güncellendiğini göreceksiniz.

Ek Tema Resmi Boyutlarını Kaldırın

Artık WordPress çekirdeği tarafından üretilen varsayılan görüntülerle başarılı bir şekilde ilgilendik. Artık tema tarafından oluşturulan görüntülerin üstesinden gelebilir ve ele alabiliriz (bu örnekte Twenty Twenty). Varsayılan resim boyutlarımız gibi, bunların gerekli olmadığına karar verdiyseniz, WordPress'in gelecekte bu boyutları üretmesini durdurmak için tema kodunuzda bazı değişiklikler yapabilirsiniz.

Bunu yapmak için init kancasını ve remove_image_size çekirdek işlevini kullanacağız. Aşağıdaki kodu kopyalayın ve function.php dosyanıza yapıştırın. Burada olduğumuz gibi Twenty Twenty temasını kullanmıyorsanız, 'küçük resim sonrası' ve 'yirmiyirmi tam ekran' adlarını aktif temanızın adıyla değiştirin.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Şimdi yeni bir resim yüklersek ve FTP istemcimiz aracılığıyla yükleme klasörümüzü kontrol edersek, 'küçük resim sonrası' ve 'yirmiyirmi tam ekran' dışındaki tüm boyutların oluşturulduğunu göreceğiz.

Kendi Özel Görsel Boyutunuzu Ekleyin

Artık WordPress'te gereksiz görüntü boyutlarını nasıl kaldıracağımızı öğrendiğimize göre, şablonumuzun ihtiyaçlarına göre kendi özel görüntü boyutlarımızı nasıl ekleyebileceğimizi görelim.

Hangi görüntü boyutlarına ihtiyacımız olduğuna nasıl karar veririz?

960 piksel genişliğinde bir ana sütuna sahip bir web siteniz olduğunu varsayalım, burada özellik resmi üstte ve yazı içeriği aşağıda. İstediğiniz görüntü boyutu o zaman 960 piksel olacaktır. Varsa CSS dolgusunu da hesaplamayı unutmayın. Örneğin, ana öğelerin toplamı 20 piksel dolguya sahipse, görüntü için doğru genişlik 920 piksel olacaktır. Sol dolgu için 960 piksel eksi 20 piksel eksi sağ dolgu için 20 pikseldir.

Yeni Resim Boyutlarını Kaydedin

Yeni boyut(lar)ı kaydetmenin basit bir yolu, WordPress tarafından sağlanan yerleşik add_image_size() işlevini kullanmaktır. Fonksiyon yapısı:

 add_image_size( name, width, height, crop )

Bu seçeneklerin çoğu açıklayıcıdır. Son seçenek (kırpma), WordPress'in yeniden boyutlandırırken resmimizin oranlarına saygı duyup duymadığını veya resmimizi kırpıp kırpmayacağını belirler. Kırpma seçeneği 'true' olarak ayarlanırsa görüntü kırpılır ve orantılara uyulmaz. Kırpma seçeneği atlanırsa veya yanlış olarak ayarlanırsa görüntü oranlarımıza saygı duyulur.

Bunu eylemde deneyelim ve sonucu 2089×1175 piksel olan bir test görüntüsü kullanarak izleyelim.

Önce şu kodu ekleyelim:

 add_image_size( 'new-post-thumb', 220, 180 );

Bu, kırpma ayarlanmadığından (yanlış) yüklemeler klasörümüzde 220×180 yerine post2-feature-image-220x124.jpg oluşturur. Aşağıdakileri eklerseniz aynı şey olur:

 add_image_size( 'new-post-thumb', 220, 180, false );

Ancak, kırpmayı bu şekilde true olarak ayarlarsanız, post2-feature-image-220x180.jpg kaydedilir.

 add_image_size( 'new-post-thumb', 220, 180, true );

Son olarak, mahsulün nasıl konumlandırılacağını belirleyebilirsiniz. 'Doğru' yerine, 'sol' veya 'üst' veya her ikisi gibi seçenekleri kullanın:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

Dizi, kırpma konumunu belirtir. Kullanılabilecek değerler şunlardır:

x_crop_position için: "sol", "merkez" veya "sağ".
y_crop_position için: "üst", "orta" veya "alt".

Her durumda çıktı, orijinal görüntünün farklı bir parçası olacaktır. İşte bazı örnekler:

Bunu temamıza kod ekleyerek manuel olarak yapmanın bir alternatifi, Simple Image Sizes gibi bir eklenti kullanmaktır. Yine de böyle bir eklenti kullansanız bile perde arkasında neler olduğunu anlamak yardımcı olur.

Çözüm

WordPress'te doğru görüntü boyutlarını kullanmak önemlidir - web sitesi görüntüleyicisine keskin, yüksek çözünürlüklü görüntüler sunarak yalnızca yüksek kaliteli bir kullanıcı deneyimi sağlamakla kalmaz, aynı zamanda yükleme sürelerini ve sunucu kullanımını önemli ölçüde etkiler. Umarım bu makale, WordPress'teki görüntü boyutlarının önemini ve web sitenizin ihtiyaçlarını karşılamak için görüntü boyutlarını geçersiz kılabileceğiniz, kaldırabileceğiniz veya genişletebileceğiniz ve ayrıca WordPress'i durdurarak potansiyel olarak bir ton sunucu alanından nasıl tasarruf edebileceğinizi anlamanıza yardımcı olmuştur. yüklediğiniz her görüntünün gereksiz boyutlarını oluşturmak.