WordPress Resim İşlevselliği Nasıl Geliştirilir WordPress, profesyonel bir web sitesi, bir blog, sanatsal bir blog veya bir Fotoğrafçının vitrini olsun, web sitesi oluşturmak için mükemmel bir araçtır. Ancak son zamanlarda yapılan önemli güncellemeler ve yenilikler de dâhil olmak üzere WordPress, görüntü yönetiminde değişmeden kalmaktadır. Bu öğreticide bunu değiştireceğiz.
WordPress’in görüntüleri işlemek, özellikle günde bir ton resim yüklemek ve işlemek gerektiğinde ideal değildir. Bugün itibariyle henüz çözülmemiş 2 önemli eksiklik var. Bunlar şu şekildedir:
Her şeyden önce WordPress, yüklediğiniz her resmi bir ek sayfasına bağlamak ve blogunuza bir resim eklemeyi denemek isteyeceklerini düşünüyor ancak bu gerçekten çok az insanın gerçekten ihtiyacı olan bir şey. Ek sayfasına bağlanılması, yalnızca herhangi bir okuyucunun resmini yakınlaştırılmış bir durumda görmesi için fazladan bir adım oluşturur.
İkincisi, bugünkü standartlara göre, neredeyse tüm sitelerde, galeri eklentisinin, kaydırıcı eklentisinin veya resmin tam ekranında kolayca açılmasına izin veren duyarlı görüntü yakınlaştırma eklentisinin bir çeşidini sunması nedeniyle bu davranış çoktan sona erdi. Bu eklentilerin tümünün düzgün çalışması için medya dosyasına doğrudan bağlanması gerekir. Ek sayfaya bağlanan yerel WordPress varsayılanı, neredeyse tüm eklentilerdeki yakınlaştırma işlevini engeller; bu da her bir resimdeki Bağlantı Özelliğini Medya Dosyasına değiştirmenize neden olur.
Sorun, WordPress’in tercihinizi kaydetmeyi reddetmesi! Dolayısıyla, Media File’a Bir Kez Bağlantı seçmek yerine, her seferinde bunu yapmak zorunda kalacaksınız! Çıkmaza bakabilir misin?
WordPress’in binlerce resim içeren sitelerde özel olarak bulunan ikinci büyük sorun, varsayılan olarak WordPress’in, kullanmadığınız hallerde bile WordPress’e yüklediğiniz her resmin küçültülmüş sürümlerini (küçük resimleri) oluşturmasıdır. Bu 2 şey yüzünden kötü:
WordPress’in görüntüleri işleme biçiminden kaynaklanan ilk problem, kısmen tema yapılandırmasından geliyor. WordPress, şu anda kullandığınız temanın medya formatlarını okur ve gerçekleşmesi gereken tüm görüntü başparmak boyutlarını belirlemek için kullanır. Yazı tiplerine bağlı olarak genellikle temalar tonda farklı görüntü başparmak boyutlarına sahip olduğundan, bu, yüklediğiniz her resim için WordPress’in en az 10 daha küçük ölçekli küçük resim dosyası oluşturduğu anlamına gelir. Bu ayrıca, oluşturduğunuz basit bir 10 resim galerisi için WordPress barındırma hesabınıza yaklaşık 100 dosya eklemeniz anlamına gelir. Şimdi, bunu bloğunuzda bulunan binlerce resimle çarpın ve bunun neden önemli bir sorun olduğunu anlamaya başlarsınız.
Göz önüne alınması gereken diğer önemli nokta, resmin WordPress medya galerisinde bulunmadan önce gerçek zamanlı olarak gerçekleşmesidir. Bu, resim yüklemeyi yavaşlatacağı anlamına gelir.
Neyse ki yardımcı olmak için buradayım çünkü sana bu kısıtlamaları düzgün bir şekilde kaldırmanın ve WordPress medya yönetimi işlevselliğini 2 şeyi yaparak nasıl geliştireceğimi öğreteceğim:
Bu, bir görüntüyü tıkladığınızda ve WordPress sizi ek sayfasına yönlendirdiğinde gerçekleşen tipik bir örnektir
Yapacağımız ilk şey, varsayılan olarak medya dosyasını seçmek için WordPress için gerekli işlevi yaratmaktır; bu, temanızdaki functions.php dosyanıza aşağıdaki kodu ekleyerek yapılır .
| 1
2 3 4 5 6 |
function my_gallery_default_type_set_link( $settings ) {
$settings[‘galleryDefaults’][‘link’] = ‘file’; return $settings; }
add_filter( ‘media_view_settings’, ‘my_gallery_default_type_set_link’); |
Bu işlevi ekledikten sonra, devre dışı bırakıp tekrar etkinleştirerek temanız yeniden yüklenir. WordPress’in varsayılan olarak medya dosyanıza bağlanmaya başlayacağını göreceksiniz!
Şimdi, WordPress’in olması gerektiği gibi davrandıklarını, gereksiz dosyalar oluşturmayı durdurmaya zorlayalım. Bu kodu kullanın:
| 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
add_filter( ‘image_downsize’, ‘ml_media_downsize’, 10, 3 );
function ml_media_downsize( $out, $id, $size ) {
$dims = null; $crop = false;
if( is_array( $size ) ) { // don’t handle these for now. but if you want on-the-fly sizes, comment out // the return statement return false; $dims = $size; // create custom image size name consisting of widthXheight $size = sprintf( “%dx%d”, $size[0], $size[1] ); }
// If image size exists let WP serve it like normally $imagedata = wp_get_attachment_metadata( $id ); if ( is_array( $imagedata ) && isset( $imagedata[‘sizes’][$size] ) ) return false;
// Check that the requested size exists, or abort if ( $dims === null ){ global $_wp_additional_image_sizes; if ( !isset( $_wp_additional_image_sizes[$size] ) ) return false; }
// Make the new thumb if( $dims ){
// we got passed custom width/height as array… if ( !$resized = image_make_intermediate_size( get_attached_file( $id ), $dims[0], $dims[1], $crop ) ) { return false; }
} else {
if ( !$resized = image_make_intermediate_size( get_attached_file( $id ), $_wp_additional_image_sizes[$size][‘width’], $_wp_additional_image_sizes[$size][‘height’], $_wp_additional_image_sizes[$size][‘crop’] ) ) { return false; }
}
// Save image meta, or WP can’t see that the thumb exists now $imagedata[‘sizes’][$size] = $resized; wp_update_attachment_metadata( $id, $imagedata );
// Return the array for displaying the resized image $att_url = wp_get_attachment_url( $id ); return array( dirname( $att_url ) . ‘/’ . $resized[‘file’], $resized[‘width’], $resized[‘height’], true );
}
add_filter(‘intermediate_image_sizes_advanced’, ‘ml_media_prevent_resize_on_upload’); function ml_media_prevent_resize_on_upload( $sizes ) { // Removing these defaults might cause problems, so we don’t, though you could // probably set them to all be the same dimensions and rely on custom image sizes // for everything else return array( ‘thumbnail’ => $sizes[‘thumbnail’], ‘medium’ => $sizes[‘medium’], ‘large’ => $sizes[‘large’] ); } |
Kod benim değil ve nette bulunuyor.
Artık uygulanan işlevselliğe sahibiz, dolayısıyla bunun dışında bir eklenti oluşturma hakkında, böylece functions.php dosyasını karıştırmamız gerekmiyor mu?
Kendi eklentinizi oluşturmak için yapmanız gereken şudur:
Kendi eklentinizi kodlarken başlığın nasıl göründüğü budur, çalışmak ve ücretsiz çalışmak için çok cömert olan Notepad ++ kullanmanızı kesinlikle öneririm:
Şimdi, kodun php dosyasına eklendikten sonra nasıl olması gerektiği şöyle:
| 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<?php
/** * Plugin Name: Link Image to Media and reduce Thumb creation * Plugin URI: https://wpthemedetector.com * Description: Force WordPress to always link to the media file and rescale on the fly when needed * Author: Alex Vojacek * Author URI: https://alexvojacek.com * Version: 0.1.2 */
add_filter( ‘media_view_settings’, ‘my_gallery_default_type_set_link’); function my_gallery_default_type_set_link( $settings ) { $settings[‘galleryDefaults’][‘link’] = ‘file’; return $settings; }
add_filter( ‘image_downsize’, ‘ml_media_downsize’, 10, 3 ); function ml_media_downsize( $out, $id, $size ) {
$dims = null; $crop = false;
if( is_array( $size ) ) { // don’t handle these for now. but if you want on-the-fly sizes, comment out // the return statement return false; $dims = $size; // create custom image size name consisting of widthXheight $size = sprintf( “%dx%d”, $size[0], $size[1] ); }
// If image size exists let WP serve it like normally $imagedata = wp_get_attachment_metadata( $id ); if ( is_array( $imagedata ) && isset( $imagedata[‘sizes’][$size] ) ) return false;
// Check that the requested size exists, or abort if ( $dims === null ){ global $_wp_additional_image_sizes; if ( !isset( $_wp_additional_image_sizes[$size] ) ) return false; }
// Make the new thumb if( $dims ){
// we got passed custom width/height as array… if ( !$resized = image_make_intermediate_size( get_attached_file( $id ), $dims[0], $dims[1], $crop ) ) { return false; }
} else {
if ( !$resized = image_make_intermediate_size( get_attached_file( $id ), $_wp_additional_image_sizes[$size][‘width’], $_wp_additional_image_sizes[$size][‘height’], $_wp_additional_image_sizes[$size][‘crop’] ) ) { return false; }
}
// Save image meta, or WP can’t see that the thumb exists now $imagedata[‘sizes’][$size] = $resized; wp_update_attachment_metadata( $id, $imagedata );
// Return the array for displaying the resized image $att_url = wp_get_attachment_url( $id ); return array( dirname( $att_url ) . ‘/’ . $resized[‘file’], $resized[‘width’], $resized[‘height’], true );
}
add_filter(‘intermediate_image_sizes_advanced’, ‘ml_media_prevent_resize_on_upload’); function ml_media_prevent_resize_on_upload( $sizes ) {
// Removing these defaults might cause problems, so we don’t, though you could // probably set them to all be the same dimensions and rely on custom image sizes // for everything else return array( ‘thumbnail’ => $sizes[‘thumbnail’], ‘medium’ => $sizes[‘medium’], ‘large’ => $sizes[‘large’] );
} |
Adınıza, yazarın web sitesine vb. Ilişkin üstbilgi verilerini değiştirebilirsiniz.
Bu, temanızın functions.php dosyasında kodu eklemenize gerek kalmayacak ve bu eklentiyi temanızdaki tek bir kod satıra dokunmak zorunda kalmadan istediğiniz kadar siteye yüklemenizi sağlayacaktır.
Şimdi eklentiyi yükleyelim, benim durumumda deniyor: thetechieblogoptim .
Doğrudan WordPress’den yüklendiğinde eklentiler klasörüne yüklendiğini görebilirsiniz:
Ve eklentinin sayfasından nasıl göründüğü de şöyle:
Eklenti etkin olduğundan, WordPress, tüm görüntülerin varsayılan ekibi olarak medya dosyasını aktif olarak kullanıyor ve yüklediğiniz her resim için sadece 1 tıklama kaydettiniz. Ayrıca, resimlerin temanın görüntü thumbs dosyaları olmadan yüklenmesi ve yalnızca ihtiyaç duyulduğunda bunları oluşturulması, size tonluk bir alan kazandırarak resim yükleme hızınızı arttırıyor.
Bugün size ve sitenizi etkileyebilecek iki WordPress eksikliğini öğrendiniz; onu nasıl geliştireceğinizi ve ayrıca bir eklenti oluşturmayı öğrendiniz. Bu bilgi, ek işlevsellik de olan yeni eklentiler oluşturmanıza yardımcı olacaktır. Şimdi tadını çıkarın ve aşağıdaki yorumlarda bize bildirimde bulunun.
